/* ============================================================
   THESTACKPICKS — CSS spécifique aux écrans (E1→E13)
   Généré par concaténation de assets/css/screens/e*.css.
   Classes préfixées par écran (.e1-, .e4-, …). Tokens uniquement.
   ============================================================ */

/* ==== c14 ==== */
/* ============================================================
   C14 — HERO VERSUS (écran E4-versus.html, <style> inline)
   Copié tel quel : .vs-hero, .vs-side, .vs-medallion, .vs-tele.
   ============================================================ */
.vs-hero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); padding: var(--sp-6); background: var(--ls-surface-alt); border: 1px solid var(--ls-border); border-radius: var(--r-m); }
@media (max-width: 560px) { .vs-hero { padding: var(--sp-5) var(--sp-4); gap: var(--sp-2); } }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.vs-side strong { font-size: var(--fs-h4); }
.vs-medallion { font-family: var(--ff-mono); font-weight: 600; width: 56px; height: 56px; border: 2px solid var(--ls-ink); border-radius: 50%; display: grid; place-items: center; color: var(--ls-ink); }
@media (max-width: 560px) { .vs-medallion { width: 44px; height: 44px; font-size: 13px; } }
.vs-tele { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-top: var(--sp-5); }
@media (min-width: 700px) { .vs-tele { grid-template-columns: 1fr 1fr; } }
.vs-tele .col { border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-5); }
.vs-tele .col h3 { margin-bottom: var(--sp-4); font-size: var(--fs-h4); }

/* ==== c20 ==== */
/* ============================================================
   C20 — CARTE DEAL MOBILE (écran E9-offres.html, <style> inline)
   Copié tel quel : .deal-card (pile .cmp-cards du tableau offres).
   ============================================================ */
.deal-card { border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-5); background: #fff; display: flex; flex-direction: column; gap: var(--sp-4); box-shadow: var(--sh-card); }
.deal-card__head { display: flex; gap: var(--sp-3); align-items: center; }
.deal-card__head .meta { flex: 1; }
.deal-card__deal { font-family: var(--ff-display); font-weight: 700; font-size: 21px; color: var(--ls-ink); }

/* ==== e1 ==== */
/* ============================================================
   E1 — ACCUEIL (front-page.php — écran E1-accueil.html, <style> inline)
   Classes préfixées .e1- (hero, grilles, catégories, preuve) ;
   .tele-giant + keyframes copiés tels quels — contrat JS revealTelemetry
   (assets/js/launchstack.js). Tokens uniquement — concaténé dans
   assets/css/screens.css.
   ============================================================ */
.e1-hero { padding-block: var(--sp-8) var(--sp-7); }
.e1-hero-grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 1024px) { .e1-hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); } }
.e1-hero h1 { font-size: clamp(34px, 5vw, 52px); }
.e1-hero .sub { font-size: var(--fs-h4); color: var(--ls-body); max-width: 46ch; margin-top: var(--sp-4); }
.e1-hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
/* Télémétrie géante animée */
.tele-giant { border: 1px solid var(--ls-border); border-radius: var(--r-m); background: #fff; box-shadow: var(--sh-raised); padding: var(--sp-6); }
.tele-giant .eyebrow { display: block; margin-bottom: var(--sp-4); }
.tele-giant .telemetry { font-size: 16px; line-height: 2.4; }
.tele-giant .tl-label { font-size: 13px; }
.tele-giant .tl-val { font-size: 17px; }
.tele-giant .gauge { margin: var(--sp-4) auto 0; }
/* Reveal au chargement : l'ÉTAT VISIBLE est la base. Les valeurs sont
   toujours présentes (print, reduced-motion, no-JS). Seuls les leaders
   se tracent, et uniquement quand .reveal est ajouté par JS. */
@media (prefers-reduced-motion: no-preference) {
  .tele-giant.reveal .tl-lead { animation: leadDraw .55s ease both; }
  .tele-giant.reveal .tl-val { animation: valIn .45s ease both; }
  .tele-giant.reveal .tl-row:nth-child(1) .tl-lead { animation-delay: .10s; } .tele-giant.reveal .tl-row:nth-child(1) .tl-val { animation-delay: .30s; }
  .tele-giant.reveal .tl-row:nth-child(2) .tl-lead { animation-delay: .25s; } .tele-giant.reveal .tl-row:nth-child(2) .tl-val { animation-delay: .45s; }
  .tele-giant.reveal .tl-row:nth-child(3) .tl-lead { animation-delay: .40s; } .tele-giant.reveal .tl-row:nth-child(3) .tl-val { animation-delay: .60s; }
  .tele-giant.reveal .tl-row:nth-child(4) .tl-lead { animation-delay: .55s; } .tele-giant.reveal .tl-row:nth-child(4) .tl-val { animation-delay: .75s; }
  .tele-giant.reveal .tl-row:nth-child(5) .tl-lead { animation-delay: .70s; } .tele-giant.reveal .tl-row:nth-child(5) .tl-val { animation-delay: .90s; }
}
@keyframes leadDraw { from { transform: scaleX(0) translateY(-5px); } to { transform: scaleX(1) translateY(-5px); } }
@keyframes valIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.e1-cat-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .e1-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.e1-cat-card { border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-5); background: #fff; text-decoration: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.e1-cat-card:hover { border-color: var(--ls-brand); text-decoration: none; }
.e1-cat-card .n { font-family: var(--ff-mono); font-size: 12px; color: var(--ls-muted); }
.e1-cat-card .t { font-weight: 600; color: var(--ls-ink); font-size: var(--fs-h4); }
.e1-card-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .e1-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .e1-card-grid { grid-template-columns: repeat(3, 1fr); } }
.e1-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.e1-proof { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) { .e1-proof { grid-template-columns: auto 1fr; gap: var(--sp-7); } }
.e1-proof-stats { display: flex; gap: var(--sp-6); }
.e1-proof-stats .n { font-family: var(--ff-display); font-weight: 700; font-size: 40px; color: var(--ls-ink); line-height: 1; }
.e1-proof-stats .l { font-family: var(--ff-mono); font-size: 12px; color: var(--ls-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; display: block; }

/* ==== e2 ==== */
/* ============================================================
   E2 — SINGLE CLASSEMENT (écran E2-classement.html, <style> inline)
   Copié tel quel : .page-head, .h1-meta, .rank-entry, .rank-list.
   (.ranking de la maquette omis : le gabarit single-classement.php
   utilise le layout money .money-layout — components.css.)
   ============================================================ */
.page-head { padding-top: var(--sp-5); }
.h1-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-4) 0; }
.rank-entry { border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-5); box-shadow: var(--sh-card); }
@media (min-width: 768px) { .rank-entry { padding: var(--sp-6); } }
.rank-entry__head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.rank-entry__num { font-family: var(--ff-mono); font-weight: 600; font-size: 13px; color: var(--ls-muted); border: 1px solid var(--ls-border); border-radius: var(--r-pill); padding: 4px var(--sp-3); white-space: nowrap; }
.rank-list { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ==== e3 ==== */
/* ============================================================
   E3 — SINGLE AVIS (e3-avis-fr.html, <style> inline)
   Copié tel quel : .page-head, .h1-meta, .shot-stack.
   Tokens uniquement.
   ============================================================ */
.page-head { padding-top: var(--sp-5); }
.h1-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-4) 0; }
.shot-stack { display: grid; gap: var(--sp-4); }

/* Adaptations WP (hors maquette statique) :
   - ls_dateline() rend un <p class="dateline"> → neutraliser la marge
     de paragraphe dans la rangée flex .h1-meta (la maquette utilise un span) ;
   - le TOC mobile C12 (.toc-mobile) de la colonne principale s'efface
     en desktop, où la sidebar .money-side porte le TOC sticky. */
.h1-meta .dateline { margin: 0; }
@media (min-width: 1024px) { .money-main .toc-mobile { display: none; } }

/* ==== e4 ==== */
/* ============================================================
   E4 — VERSUS (single-versus.php)
   Copié du <style> inline de E4-versus.html — tokens uniquement.
   Le bloc C14 (.vs-hero, .vs-side, .vs-medallion, .vs-tele) est
   déjà porté par assets/css/screens/c14.css — non dupliqué ici.
   NB : .vs (colonne unique de la maquette) est conservé tel quel ;
   le gabarit money lui préfère .money-layout (sidebar C12 + C4).
   ============================================================ */
.vs { max-width: 1000px; margin-inline: auto; }
.page-head { padding-top: var(--sp-5); }
.h1-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-4) 0; }
.profile-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .profile-grid { grid-template-columns: 1fr 1fr; } }
.profile-card { border: 1px solid var(--ls-border); border-top: 3px solid var(--ls-brand); border-radius: var(--r-m); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.profile-card .who { font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ls-muted); }

/* ==== e5 ==== */
/* ============================================================
   E5 — HUB CATÉGORIE (taxonomy-categorie_outil.php)
   Copié du <style> inline de E5-categorie.html, classes préfixées .e5-.
   Tokens uniquement.
   ============================================================ */
.e5-page-head { padding-top: var(--sp-5); }
.e5-hub { max-width: 1000px; margin-inline: auto; }
.e5-card-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .e5-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .e5-card-grid { grid-template-columns: repeat(3, 1fr); } }
.e5-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }

/* ==== e6 ==== */
/* ============================================================
   E6 — ANNUAIRE DES OUTILS (écran E6-annuaire.html, <style> inline)
   Classes préfixées .e6- ; tokens uniquement.
   ============================================================ */
.e6-page-head { padding-top: var(--sp-5); }
.e6-dir { max-width: 1100px; margin-inline: auto; }
.e6-filter-bar { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-6) 0; padding: var(--sp-5); border: 1px solid var(--ls-border); border-radius: var(--r-m); background: #fff; }
.e6-filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.e6-filter-row .lbl { font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ls-muted); margin-right: var(--sp-2); }
.e6-filter-row .sort { margin-left: auto; }
.e6-card-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .e6-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .e6-card-grid { grid-template-columns: repeat(3, 1fr); } }
.e6-result-count { font-family: var(--ff-mono); font-size: 13px; color: var(--ls-muted); margin-bottom: var(--sp-4); }
.e6-filter-bar select.input { min-height: 40px; padding-right: var(--sp-5); }
.e6-card-grid .tool-card[hidden] { display: none; }
/* Le JS de filtre pose l'attribut hidden sur la grille à 0 résultat. */
.e6-card-grid[hidden] { display: none; }

/* ==== e7 ==== */
/* ============================================================
   E7 — ARTICLE TOFU (E7-article.html, <style> inline)
   Copié tel quel : .page-head, .post, .steps, .cited-list.
   Tokens uniquement. .cited-box vit dans components.css.
   ============================================================ */
.page-head { padding-top: var(--sp-5); }
.post { max-width: var(--reading); margin-inline: auto; }
.post .article-body > * + * { margin-top: var(--sp-6); }
.post h2 { margin-top: var(--sp-8); }
.post .lede { font-size: var(--fs-h4); color: var(--ls-body); }
.steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-4); }
.steps li { counter-increment: step; display: flex; gap: var(--sp-4); align-items: flex-start; }
.steps li::before { content: counter(step); flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--ls-brand-tint); color: var(--ls-brand-strong); font-family: var(--ff-mono); font-weight: 600; font-size: 14px; display: grid; place-items: center; }
.steps b { color: var(--ls-ink); }
.cited-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.cited-list a { display: flex; gap: var(--sp-3); align-items: center; text-decoration: none; }
.cited-list .nm { font-weight: 600; color: var(--ls-ink); }
.cited-list .sc { font-family: var(--ff-mono); font-size: 12px; color: var(--ls-muted); margin-left: auto; }

/* ==== e8 ==== */
/* ============================================================
   E8 — LANDING LEAD MAGNET (écran E8-landing.html, <style> inline)
   Copié tel quel : .land, .land-top, .land-main, .benefits,
   .land-form, .pdf-visual, .form-stack, .social-proof, .avatars,
   .land-foot. Le `body` de la maquette est scopé sur .ls-landing
   (classe posée par header-landing.php). Tokens uniquement.
   ============================================================ */
body.ls-landing { background: var(--ls-surface-alt); }
.land { min-height: 100vh; display: flex; flex-direction: column; }
.land-top { padding: var(--sp-5) 0; }
.land-main { flex: 1; display: grid; align-items: center; gap: var(--sp-8); grid-template-columns: 1fr; padding-block: var(--sp-6) var(--sp-8); }
@media (min-width: 900px) { .land-main { grid-template-columns: 1.05fr .95fr; gap: var(--sp-9); } }
.land h1 { font-size: clamp(32px, 4.6vw, 48px); }
.land .lede { font-size: var(--fs-h4); color: var(--ls-body); margin-top: var(--sp-4); max-width: 48ch; }
.benefits { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.benefits li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.benefits .ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-s); background: var(--ls-brand-tint); color: var(--ls-brand-strong); display: grid; place-items: center; }
.benefits b { color: var(--ls-ink); }
.land-form { background: #fff; border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-6); box-shadow: var(--sh-raised); }
.pdf-visual { aspect-ratio: 3/4; max-width: 260px; margin: 0 auto var(--sp-5); border-radius: var(--r-s); border: 1px solid var(--ls-border); box-shadow: var(--sh-raised); background: linear-gradient(160deg,var(--ls-ink),#1d2a44); color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding: var(--sp-5); }
.pdf-visual .eyebrow { color: var(--c-indigo-100); }
.pdf-visual .pt { font-family: var(--ff-display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.pdf-visual .pf { font-family: var(--ff-mono); font-size: 11px; color: #98A2B3; }
.form-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.social-proof { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--ls-muted); justify-content: center; }
.avatars { display: flex; }
.avatars span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: var(--ls-brand-tint); margin-left: -8px; display: grid; place-items: center; font-family: var(--ff-mono); font-size: 10px; color: var(--ls-brand-strong); }
.avatars span:first-child { margin-left: 0; }
.land-foot { padding: var(--sp-5) 0; font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--ls-muted); border-top: 1px solid var(--ls-border); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; }

/* ==== e9 ==== */
/* ============================================================
   E9 — OFFRES (écran E9-offres.html, <style> inline)
   Copié tel quel : .page-head, .offers, .promo-grid.
   Tokens uniquement. .deal-card vit dans assets/css/screens/c20.css.
   ============================================================ */
.page-head { padding-top: var(--sp-5); }
.offers { max-width: 1000px; margin-inline: auto; }
.promo-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-top: var(--sp-6); }
@media (min-width: 700px) { .promo-grid { grid-template-columns: 1fr 1fr; } }

/* ==== e10 ==== */
/* ============================================================
   E10 — MÉTHODOLOGIE (écran E10-methodologie.html, <style> inline)
   Copié tel quel, classes préfixées .e10-. Tokens uniquement.
   ============================================================ */
.e10-page-head { padding-top: var(--sp-5); }
.e10-about { max-width: 1000px; margin-inline: auto; }
.e10-stat-band { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); margin: var(--sp-6) 0; }
@media (min-width: 768px) { .e10-stat-band { grid-template-columns: repeat(4, 1fr); } }
.e10-stat { border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-5); background: #fff; }
.e10-stat .n { font-family: var(--ff-display); font-weight: 700; font-size: 40px; color: var(--ls-ink); line-height: 1; }
.e10-stat .l { font-family: var(--ff-mono); font-size: 12px; color: var(--ls-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: var(--sp-2); display: block; }
@media (max-width: 480px) { .e10-stat { padding: var(--sp-4); } .e10-stat .n { font-size: 26px; } }
.e10-process { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-5); max-width: var(--reading); }
.e10-process li { counter-increment: step; display: flex; gap: var(--sp-4); align-items: flex-start; }
.e10-process li::before { content: counter(step, decimal-leading-zero); flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ls-border-strong); color: var(--ls-brand-strong); font-family: var(--ff-mono); font-weight: 600; display: grid; place-items: center; }
.e10-process h3 { margin-bottom: var(--sp-2); }
.e10-process p { color: var(--ls-body); margin: 0; }

/* ==== e11 ==== */
/* ============================================================
   E11 — RECHERCHE & 404 (écran E11-recherche.html, <style> inline)
   Sert search.php + 404.php. Classes préfixées .e11-, tokens
   uniquement (le sélecteur d'état de la maquette est exclu).
   ============================================================ */
.e11-head { padding-top: var(--sp-5); }
.e11-wrap { max-width: var(--reading); margin-inline: auto; }
.e11-search-box { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.e11-search-box input { flex: 1; min-width: 0; }
@media (max-width: 480px) { .e11-search-box { flex-wrap: wrap; } .e11-search-box .btn { width: 100%; } }
.e11-res-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.e11-res { display: flex; gap: var(--sp-4); align-items: flex-start; border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-4); background: #fff; text-decoration: none; }
.e11-res:hover { border-color: var(--ls-brand); text-decoration: none; }
.e11-res .kind { font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ls-brand-strong); }
.e11-res .ti { font-weight: 600; color: var(--ls-ink); margin: 2px 0; }
.e11-res .ex { font-size: var(--fs-small); color: var(--ls-body); margin: 0; }
.e11-res .meta { min-width: 0; }
.e11-404 { text-align: center; padding-block: var(--sp-8); }
.e11-404 .code { font-family: var(--ff-display); font-weight: 700; font-size: clamp(72px, 14vw, 140px); color: var(--ls-brand-tint-2); line-height: 1; letter-spacing: -0.03em; }
.e11-404 h1 { margin-top: var(--sp-3); }
.e11-top-tests { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-6); text-align: left; }
@media (min-width: 640px) { .e11-top-tests { grid-template-columns: 1fr 1fr 1fr; } }

/* ==== e13 ==== */
/* ============================================================
   E13 — GLOSSAIRE (E13-glossaire.html, <style> inline)
   Classes préfixées .e13- ; tokens uniquement.
   .e13-related accueille des cartes C13 (les styles de liens
   compacts « .related a » de la maquette sont déclinés pour
   l'index alphabétique de l'archive : .e13-terms).
   ============================================================ */
.e13-page-head { padding-top: var(--sp-5); }
.e13-glo { max-width: var(--reading); margin-inline: auto; }
.e13-glo .article-body > * + * { margin-top: var(--sp-6); }
.e13-glo h2 { margin-top: var(--sp-8); }

/* Single — outils liés : grille de cartes C13, 2 colonnes dès 560px */
.e13-related { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .e13-related { grid-template-columns: 1fr 1fr; } }

/* Archive — sommaire alphabétique (ancres) */
.e13-alpha { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.e13-alpha a { font-family: var(--ff-mono); font-size: 13px; color: var(--ls-body); border: 1px solid var(--ls-border); border-radius: var(--r-s); padding: var(--sp-1) var(--sp-3); text-decoration: none; }
.e13-alpha a:hover { border-color: var(--ls-brand); color: var(--ls-brand-strong); text-decoration: none; }

/* Archive — groupes de termes (dérivé du .related de la maquette) */
.e13-letter { font-family: var(--ff-mono); font-size: 14px; letter-spacing: .08em; color: var(--ls-muted); border-bottom: 1px solid var(--ls-border); padding-bottom: var(--sp-2); }
.e13-terms { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.e13-terms a { display: flex; flex-direction: column; gap: var(--sp-1); border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-4); text-decoration: none; }
.e13-terms a:hover { border-color: var(--ls-brand); text-decoration: none; }
.e13-terms .nm { font-weight: 600; color: var(--ls-ink); }
.e13-terms .df { font-size: var(--fs-small); color: var(--ls-muted); }

/* ==== contenu riche (the_content — wp-block-library est dequeued) ==== */
.article-body ul:not(.pc-list):not([class*="e1-"]),
.faq__answer ul { list-style: disc; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--sp-2); }
.article-body ol, .faq__answer ol { list-style: decimal; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--sp-2); }
.article-body blockquote { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--ls-brand); background: var(--ls-brand-tint); border-radius: var(--r-s); color: var(--ls-ink); }
.article-body blockquote p { margin: 0; }
.article-body figure { margin: var(--sp-5) 0; }
.article-body figcaption { font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--ls-muted); margin-top: var(--sp-2); }
.article-body img { border-radius: var(--r-m); border: 1px solid var(--ls-border); height: auto; }
.article-body table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ls-border); border-radius: var(--r-m); overflow: hidden; margin: var(--sp-5) 0; }
.article-body th { background: var(--ls-surface-alt); font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ls-muted); text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ls-border); }
.article-body td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ls-border); font-size: var(--fs-small); }
.article-body tr:last-child td { border-bottom: none; }
.article-body pre { background: var(--ls-surface-alt); border: 1px solid var(--ls-border); border-radius: var(--r-s); padding: var(--sp-4); overflow-x: auto; font-family: var(--ff-mono); font-size: 14px; }
.article-body code { font-family: var(--ff-mono); font-size: .92em; background: var(--ls-surface-alt); border: 1px solid var(--ls-border); border-radius: 4px; padding: 1px 5px; }
.article-body pre code { border: 0; background: transparent; padding: 0; }
.article-body iframe, .article-body video { max-width: 100%; }

/* ==== e14 ==== */
/* ============================================================
   E14 — Pages Prix, Alternatives, Plans gratuits, Observatoire (13/11/2026)
   + composants C25 historique, C26 journal de test, C27 grille, C28 pièges, C29 remises.
   Tokens uniquement ; tableaux = .cmp-table / .cmp-cards existants (règle d'or n°6).
   ============================================================ */

/* Listes utilisées comme pile de cartes mobile */
ul.cmp-cards, ol.cmp-cards { list-style: none; margin: 0; padding: 0; }
.cmp-cards .tool-card { display: flex; flex-direction: column; gap: var(--sp-2); }

/* C27 — preuve du relevé */
.verified { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--ls-pro-tint); border-radius: var(--r-m); font-size: var(--fs-small); color: var(--ls-ink); }
.verified__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ls-pro); flex: 0 0 auto; }
.verified a { color: var(--ls-brand-strong); }
.pricing__table td { vertical-align: top; }
.pricing__limit { color: var(--ls-con); font-size: var(--fs-small); }

/* C28 — pièges de facturation */
.traps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.traps__list li { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--ls-border); border-left: 3px solid var(--ls-star); border-radius: var(--r-m); background: var(--ls-star-tint); }
.traps__list strong { color: var(--ls-star-ink); }

/* C29 — code promo honnête */
.discounts__list { margin: var(--sp-3) 0 var(--sp-5); }
.discounts__list li { margin-bottom: var(--sp-2); }

/* C25 — historique des mises à jour */
.changelog__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ls-border); }
.changelog__list li { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); position: relative; }
.changelog__list li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--ls-surface); border: 2px solid var(--ls-brand); }
.changelog__list time { color: var(--ls-muted); font-size: var(--fs-caption); padding-top: 2px; }
@media (max-width: 560px) { .changelog__list li { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* C26 — journal de test */
.testlog__table td:first-child { white-space: nowrap; }

/* Alternatives */
.alt-from { margin-top: var(--sp-6); padding: var(--sp-5); border: 1px solid var(--ls-border); border-radius: var(--r-m); background: var(--ls-surface-alt); max-width: var(--reading); }
.alt-from__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.alt-reason { margin: var(--sp-2) 0 0; color: var(--ls-body); }

/* Archives Prix / Alternatives / Gratuit */
.money-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-top: var(--sp-6); }
@media (min-width: 700px) { .money-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .money-grid { grid-template-columns: repeat(3, 1fr); } }
.money-card { display: flex; flex-direction: column; gap: var(--sp-3); text-decoration: none; color: inherit; }
.money-card:hover .tool-card__name { color: var(--ls-brand-strong); }
.money-empty { margin-top: var(--sp-6); padding: var(--sp-6); border: 1px dashed var(--ls-border); border-radius: var(--r-m); text-align: center; max-width: var(--reading); }
.money-empty p { margin: 0 0 var(--sp-4); color: var(--ls-body); }