/* ═══════════════════════════════════════════════════════════════════════════
   PROSPECTING MANUAL — 02-CSS-additif-alternatives.css
   À coller à la suite de pm-global.css. Sections 110 à 113.

   REFONTE DES 16 ET 17 SEPTEMBRE 2026 — étape 3.5, décisions 59 à 66. Les
   anciennes sections 65 à 69 de cet additif, écrites en collision avec celles
   de `decision-ranking`, sont vidées définitivement (décision 16).

   Le langage visuel est celui de `review` et vient du socle, sections 101 à
   109 : conteneur `pm-wide`, cartes de décision `pm-card-hi`, en-têtes `pm-bh`,
   sous-titres `pm-ss`, hero à carte de score `pm-hero-g` / `pm-vc` / `pm-gauge`,
   cartes d'alternative `pm-alt`, côte à côte `pm-cmp` / `pm-ct`, barres `pm-fr`,
   liens de sortie `pm-nl`, sommaire et sections `pm-toc` / `pm-sec`.

   Cet additif porte ce qui n'est qu'à cette page (décision 66) :
     110  le défaut le plus cité, l'écart sous la jauge, les routes
          « motif → alternative » cliquables
     111  les mini-barres des cartes : l'alternative contre l'outil, dimension
          par dimension, et la carte qui répond au motif choisi
     112  le duel : radar à quatre axes de l'outil contre l'alternative choisie
     113  rester ou partir : cas où rester, outils nommés ; responsive et
          impression (les étapes reliées de la migration sont au socle, section 120)

   RÈGLES SUIVIES
   · Préfixe `pm-al-`. Aucune couleur de texte ne dépend d'une variable posée
     sur une classe (décision 38) : fonds et bordures lisent les jetons de
     panneau du socle, chaque texte a sa couleur sur les deux fonds.
   · Plancher 12 px hors étiquettes en capitales espacées (décision 46).
     Bascules : 1100 et 768 px.
   · Jeton « inconvénient » corail #E8B4A4 / #A8502F, positif en vert
     (décision 53) ; l'ambre #FCD34D / #92400E pour ce qui coûte à la migration.
   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.

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

/* ── 110. HERO — défaut le plus cité, écart sous la jauge, routes ────────── */
.pm-al-top{margin:0 0 18px;max-width:560px;font-size:var(--pm-fs-meta);color:var(--pm-ink-d1)}
.pm-al-vs{margin-top:10px;font-size:var(--pm-fs-meta);color:var(--pm-ink-d1)}
.pm-al-vs b{font-family:var(--pm-fd);font-weight:800;color:#93C5FD}
.pm-al-routes{margin-top:32px;padding:22px 24px;border-radius:22px;background:var(--pm-well);border:1px solid var(--pm-line)}
.pm-al-routes-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pm-al-routes-h h2{margin:0;font-family:var(--pm-fd);font-size:var(--pm-fs-h3);font-weight:800;letter-spacing:-.02em;color:#EEF4FF}
.pm-al-routes-h span{font-size:var(--pm-fs-meta);color:var(--pm-ink-d2)}
.pm-al-route{width:100%;text-align:left;font-family:var(--pm-fb);cursor:pointer;padding:11px 14px;border-radius:14px;border:1.5px solid transparent;background:transparent;transition:background .15s,border-color .15s}
.pm-al-routes .pm-al-route{grid-template-columns:170px minmax(60px,1fr) 44px minmax(0,1.5fr);gap:14px}
.pm-al-route:hover{background:rgba(255,255,255,.05);border-color:var(--pm-line)}
.pm-al-route[aria-pressed="true"]{background:rgba(99,102,241,.16);border-color:#818CF8}
.pm-al-route-to{display:flex;align-items:center;gap:9px;min-width:0;padding-left:14px;border-left:1px solid var(--pm-line)}
.pm-al-route-to::before{content:'→';color:#818CF8;font-weight:800;flex-shrink:0}
.pm-al-route-to img{width:24px;height:24px;border-radius:7px;flex-shrink:0;object-fit:contain}
.pm-al-route-to em{font-family:var(--pm-fb);font-style:normal;font-size:var(--pm-fs-sm);font-weight:700;color:#EEF4FF;white-space:nowrap}
.pm-al-route-to small{font-size:var(--pm-fs-meta);color:var(--pm-ink-d2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-al-route-a{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--pm-line);font-size:var(--pm-fs-ui);line-height:1.6;color:var(--pm-ink-d1)}
.pm-al-route-a[hidden]{display:none}
.pm-al-route-a b{color:#fff}
.pm-al-route-a a{color:#60A5FA;font-weight:600;white-space:nowrap}
.pm-page-wrap .pm-card .pm-al-route-a{color:var(--pm-ink-d1);line-height:1.6}

/* ── 111. CARTES — l'alternative contre l'outil, dimension par dimension ──── */
/* trois cartes sur une ligne ; quatre en deux lignes de deux ; cinq en trois puis deux — jamais une carte seule */
.pm-al .pm-alts:has(> .pm-alt:nth-child(4):last-child){grid-template-columns:1fr 1fr}
.pm-al .pm-alts:has(> .pm-alt:nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
.pm-al .pm-alts:has(> .pm-alt:nth-child(5):last-child) > .pm-alt{grid-column:span 2}
.pm-al .pm-alts:has(> .pm-alt:nth-child(5):last-child) > .pm-alt:nth-child(n+4){grid-column:span 3}
.pm-al-dims{display:flex;flex-direction:column;gap:7px;margin:0 0 12px}
.pm-al-dim{display:grid;grid-template-columns:104px 1fr 30px;gap:10px;align-items:center;font-size:var(--pm-fs-meta);color:var(--pm-ink-d1)}
.pm-card-l .pm-al-dim{color:var(--pm-ink-l2)}
.pm-al-dim-t{position:relative;height:8px;border-radius:999px;background:rgba(127,140,180,.2)}
.pm-al-dim-t i{display:block;height:100%;width:0;border-radius:999px;background:#94A3C8;transition:width .8s cubic-bezier(.22,1,.36,1)}
.pm-al-dim-t u{position:absolute;top:-4px;left:0;width:2px;height:16px;margin-left:-1px;border-radius:1px;background:#EEF4FF;text-decoration:none}
.pm-card-l .pm-al-dim-t u{background:#0A1428}
.pm-al-dim b{font-family:var(--pm-fb);font-size:var(--pm-fs-ui);font-weight:700;text-align:right;color:#EEF4FF}
.pm-card-l .pm-al-dim b{color:#0A1428}
.pm-al-dim.is-up .pm-al-dim-t i{background:linear-gradient(90deg,#16A34A,#4ADE80)}
.pm-al-dim.is-dn .pm-al-dim-t i{background:linear-gradient(90deg,#B4552F,#E8B4A4)}
.pm-al-dim.is-up b{color:#86EFAC}.pm-al-dim.is-dn b{color:#E8B4A4}
.pm-card-l .pm-al-dim.is-up b{color:#15803D}.pm-card-l .pm-al-dim.is-dn b{color:#A8502F}
.pm-al-key{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:0 0 6px;font-size:var(--pm-fs-meta);color:var(--pm-ink-d2)}
.pm-card-l .pm-al-key{color:var(--pm-ink-l3)}
.pm-al-key i{display:inline-block;width:26px;height:8px;border-radius:999px;background:linear-gradient(90deg,#16A34A,#4ADE80);margin-right:7px;vertical-align:0}
.pm-al-key i.is-dn{background:linear-gradient(90deg,#B4552F,#E8B4A4)}
.pm-al-key i.is-eq{background:#94A3C8}
.pm-al-key u{display:inline-block;width:2px;height:14px;background:#0A1428;margin-right:8px;vertical-align:-2px;text-decoration:none}
.pm-page-wrap .pm-card .pm-al-key{color:var(--pm-ink-d2);line-height:1.5}
.pm-page-wrap .pm-card-l .pm-al-key{color:var(--pm-ink-l3)}
.pm-al .pm-alt.is-match{border-color:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.22);transform:translateY(-3px)}

/* ── 112. DUEL — radar à quatre axes : l'outil contre l'alternative choisie ── */
.pm-al-duel{display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;align-items:center;margin:4px 0 20px;padding:18px 22px;border-radius:18px;background:var(--pm-well2);border:1px solid var(--pm-line)}
.pm-al-radar{width:100%;height:auto;overflow:visible}
.pm-al-radar-grid{fill:none;stroke:var(--pm-line)}
.pm-al-radar-ref{fill:rgba(238,244,255,.05);stroke:rgba(238,244,255,.7);stroke-width:1.5;stroke-dasharray:4 4}
.pm-al-radar-alt{fill:rgba(99,102,241,.38);stroke:#818CF8;stroke-width:3}
.pm-al-radar text{font-family:var(--pm-fb);font-size:var(--pm-fs-meta);font-weight:600;fill:rgba(238,244,255,.88)}
.pm-al-lg{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:4px;font-size:var(--pm-fs-meta);color:var(--pm-ink-d1)}
.pm-al-lg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px;background:#818CF8}
.pm-al-lg i.is-ref{background:transparent;border:1.5px dashed rgba(238,244,255,.7)}
.pm-al-lg em{font-style:normal;font-weight:700;color:#EEF4FF}
.pm-al-duel .pm-take{margin:0;font-size:var(--pm-fs-body);line-height:1.6}
.pm-al-duel-k{font-size:var(--pm-fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#60A5FA;margin-bottom:10px}

/* ── 113. RESTER OU PARTIR — cas où rester, outils nommés ; responsive et
   impression ; les étapes reliées sont au socle, section 120 ─────────────────────────────────────── */
.pm-al-stay{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.pm-al-stay-c{padding:18px 20px;border-radius:16px;background:var(--pm-well);border:1px solid var(--pm-line);border-left:3px solid #22C55E}
.pm-al-stay-c b{display:block;font-family:var(--pm-fb);font-size:var(--pm-fs-body);font-weight:700;letter-spacing:normal;color:#EEF4FF;margin-bottom:6px}
.pm-card-l .pm-al-stay-c b{color:#0A1428}
.pm-al-stay-c p{margin:0;font-size:var(--pm-fs-ui);line-height:1.6;color:var(--pm-ink-d1)}
.pm-card-l .pm-al-stay-c p{color:var(--pm-ink-l2)}
.pm-al-stay-c small{display:block;margin-top:8px;font-size:var(--pm-fs-meta);font-weight:600;color:#86EFAC}
.pm-card-l .pm-al-stay-c small{color:#15803D}
.pm-page-wrap .pm-card .pm-al-stay-c p{color:var(--pm-ink-d1);line-height:1.6}
.pm-page-wrap .pm-card-l .pm-al-stay-c p{color:var(--pm-ink-l2)}
.pm-al-named{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pm-al-named-i{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--pm-well);border:1px solid var(--pm-line);font-size:var(--pm-fs-meta);color:var(--pm-ink-d1)}
.pm-card-l .pm-al-named-i{color:var(--pm-ink-l1)}
.pm-al-named-i img{width:24px;height:24px;border-radius:7px;flex-shrink:0;object-fit:contain}
.pm-al-named-i span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-al-named-i b{font-family:var(--pm-fb);font-size:var(--pm-fs-sm);font-weight:700;color:#EEF4FF}
.pm-al-named-i b small{font-family:inherit;font-size:var(--pm-fs-meta);font-weight:600}
.pm-card-l .pm-al-named-i b{color:#0A1428}
@media (max-width:1100px){
  .pm-al-routes .pm-al-route{grid-template-columns:140px minmax(50px,1fr) 40px minmax(0,1.4fr)}
  .pm-al-duel{grid-template-columns:260px minmax(0,1fr)}
}
@media (max-width:768px){
  .pm-al .pm-alts:has(> .pm-alt:nth-child(4):last-child),.pm-al .pm-alts:has(> .pm-alt:nth-child(5):last-child){grid-template-columns:1fr}
  .pm-al .pm-alts:has(> .pm-alt:nth-child(5):last-child) > .pm-alt,.pm-al .pm-alts:has(> .pm-alt:nth-child(5):last-child) > .pm-alt:nth-child(n+4){grid-column:auto}
  .pm-al-routes{padding:18px 14px}
  .pm-al-routes .pm-al-route{grid-template-columns:minmax(0,1fr) 60px 40px;row-gap:8px}
  .pm-al-route-to{grid-column:1/-1;padding-left:0;border-left:none}
  .pm-al-duel{grid-template-columns:1fr;padding:16px}
  .pm-al-named{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  /* séance 134 : deux pastilles dans la barre fixe (la note, le prix) — le logo laisse sa place à la période du prix ; le bouton
     nomme l'alternative */
  .pm-stick .pm-stick-logo{display:none}
  /* séance 246 : le lien « Read the full … review » d'une route passe à la ligne (il sortait du bloc sur un téléphone) */
  .pm-al-route-a a{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .pm-al-dim-t i,.pm-al-route{transition:none}
}
@media print{
  .pm-al-named,.pm-al-duel,.pm-al-key{display:none!important}
}