/* ============================================================
   THESTACKPICKS.COM — BIBLIOTHÈQUE DE COMPOSANTS C1 → C24
   Charge tokens.css + base.css AVANT ce fichier.
   Mobile-first ; les @media (min-width) montent en desktop.
   ============================================================ */

/* ===== BOUTONS ============================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font-family: var(--ff-body); font-weight: 600; font-size: 16px;
  line-height: 1; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-s);
  padding: 0 var(--sp-5); min-height: 48px;
  width: max-content; max-width: 100%;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
@media (max-width: 768px) { .btn { min-height: 44px; } }

/* CTA orange = ARGENT uniquement */
.btn-cta { background: var(--ls-cta); color: #fff; }
.btn-cta:hover { background: var(--ls-cta-hover); color: #fff; }
.btn-cta .arrow { transition: transform .15s ease; }
.btn-cta:hover .arrow { transform: translateX(3px); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 var(--sp-4); font-size: 15px; }

/* Secondaire indigo (newsletter, actions non monétisées) */
.btn-secondary { background: var(--ls-brand-tint); color: var(--ls-brand-strong); }
.btn-secondary:hover { background: var(--ls-brand-tint-2); color: var(--ls-brand-strong); }
.btn-brand { background: var(--ls-brand); color: #fff; }
.btn-brand:hover { background: var(--ls-brand-strong); color: #fff; }
.btn-ghost { background: transparent; color: var(--ls-link); border-color: var(--ls-border-strong); }
.btn-ghost:hover { background: var(--ls-surface-alt); }

/* ===== TAGS / PILLS ======================================= */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-caption); font-weight: 500;
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
  background: var(--ls-brand-tint); color: var(--ls-brand-strong);
}

/* ===== C18 — BADGES ÉDITORIAUX ============================ */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--ff-mono); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
  width: max-content; white-space: nowrap;
}
.badge--editor { background: var(--ls-star-tint); color: var(--ls-star-ink); }
.badge--value  { background: var(--ls-pro-tint); color: var(--ls-pro); }
.badge--tested { background: var(--ls-brand-tint); color: var(--ls-brand-strong); }
@media (max-width: 480px) { .badge { white-space: normal; line-height: 1.3; } }

/* ===== LOGO OUTIL ========================================= */
.tool-logo {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: var(--r-m); background: #fff;
  border: 1px solid var(--ls-border);
  display: grid; place-items: center; padding: 8px;
  font-family: var(--ff-display); font-weight: 700; color: var(--ls-ink);
  overflow: hidden;
}
.tool-logo--sm { width: 36px; height: 36px; flex-basis: 36px; border-radius: 8px; padding: 5px; font-size: 14px; }
.tool-logo--lg { width: 64px; height: 64px; flex-basis: 64px; }

/* ===== SIGNATURE : GAUGE DE NOTE ========================== */
.gauge { position: relative; width: 120px; height: 120px; flex: 0 0 auto; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: var(--ls-border); stroke-width: 6; }
.gauge__arc   { fill: none; stroke: var(--ls-star); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .8s ease; }
.gauge__label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.gauge__num { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-score); color: var(--ls-ink); }
.gauge__den { font-size: var(--fs-small); color: var(--ls-muted); margin-top: 2px; }
.gauge--sm { width: 64px; height: 64px; }
.gauge--sm .gauge__num { font-size: 22px; }
.gauge--sm .gauge__den { font-size: 11px; }
.gauge--xs { width: 36px; height: 36px; }
.gauge--xs .gauge__num { font-size: 13px; }
.gauge--xs .gauge__den { display: none; }

/* ===== SIGNATURE : FICHE TÉLÉMÉTRIE ======================= */
.telemetry { font-family: var(--ff-mono); font-size: 14px; line-height: 1.9; margin: 0; }
.telemetry .tl-row { display: flex; align-items: baseline; gap: var(--sp-2); }
.telemetry .tl-label { color: var(--ls-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; white-space: nowrap; }
.telemetry .tl-lead {
  flex: 1 1 auto; min-width: 12px; align-self: stretch;
  border-bottom: 1px dotted var(--ls-border-strong);
  transform: translateY(-4px);
}
.telemetry .tl-val { color: var(--ls-ink); font-weight: 600; white-space: nowrap; }
.telemetry--sm { font-size: 13px; line-height: 1.7; }
.telemetry--sm .tl-label { font-size: 11px; }

/* ---- Tolérance mobile 390px : aucun débordement horizontal ---- */
@media (max-width: 480px) {
  .telemetry { line-height: 1.7; }
  .telemetry .tl-val { white-space: normal; text-align: right; }
}

/* ===== C1 — HEADER ======================================== */
.site-header { background: #fff; border-bottom: 1px solid var(--ls-border); }
.site-header__bar { display: flex; align-items: center; gap: var(--sp-5); height: 64px; }
.wordmark { font-family: var(--ff-display); font-weight: 700; font-size: 22px; color: var(--ls-ink); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.wordmark b { color: var(--ls-brand); font-weight: 700; }
.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: flex; align-items: center; gap: var(--sp-5); margin-left: var(--sp-4); }
  .site-nav a { color: var(--ls-body); font-weight: 500; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
  .site-nav a:hover { color: var(--ls-brand-strong); }
}
.site-header__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: none; background: transparent; color: var(--ls-body); cursor: pointer; border-radius: var(--r-s); }
.icon-btn:hover { background: var(--ls-surface-alt); color: var(--ls-ink); }
.burger { display: inline-grid; }
@media (min-width: 1024px) { .burger { display: none; } .header-newsletter { display: inline-flex; } }
.header-newsletter { display: none; }
.header-search { display: none; }
@media (min-width: 1024px) { .header-search { display: inline-grid; } }

/* Drawer mobile */
.drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.drawer[data-open="true"] { display: block; }
.drawer__panel { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; padding: var(--sp-5); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: 64px; margin-bottom: var(--sp-4); }
.drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.drawer__nav a { padding: var(--sp-4) 0; font-size: 19px; font-weight: 500; color: var(--ls-ink); border-bottom: 1px solid var(--ls-border); }
.drawer__foot { margin-top: auto; padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }

/* ===== C24 — SÉLECTEUR DE LANGUE ========================== */
.lang-switch { display: inline-flex; border: 1px solid var(--ls-border-strong); border-radius: var(--r-pill); overflow: hidden; font-family: var(--ff-mono); font-size: 13px; }
.lang-switch a, .lang-switch span { padding: 6px var(--sp-3); color: var(--ls-muted); text-decoration: none; line-height: 1; display: inline-flex; align-items: center; }
.lang-switch a:hover { color: var(--ls-brand-strong); text-decoration: none; }
.lang-switch [aria-current="true"] { background: var(--ls-ink); color: #fff; }
.lang-switch [aria-disabled="true"] { color: var(--ls-disabled); cursor: not-allowed; }

/* ===== C17 — FIL D'ARIANE ================================= */
.breadcrumb { font-family: var(--ff-mono); font-size: var(--fs-caption); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.breadcrumb a { color: var(--ls-body); text-decoration: none; }
.breadcrumb a:hover { color: var(--ls-brand-strong); }
.breadcrumb .sep { color: var(--ls-border-strong); }
.breadcrumb [aria-current] { color: var(--ls-muted); }

/* ===== C19 — BANDEAU TRANSPARENCE ========================= */
.transparency {
  font-family: var(--ff-mono); font-size: var(--fs-caption); line-height: 1.5;
  background: var(--ls-surface-alt); color: var(--ls-body);
  border-radius: var(--r-s); padding: var(--sp-3) var(--sp-4);
  display: flex; gap: var(--sp-2); align-items: baseline;
}
.transparency a { color: var(--ls-link); white-space: nowrap; }
.transparency .info-i { color: var(--ls-muted); font-weight: 600; }

/* ===== C21 — RÉPONSE RAPIDE (AEO) ========================= */
.quick-answer {
  background: var(--ls-brand-tint); border-left: 3px solid var(--ls-brand);
  border-radius: var(--r-m); padding: var(--sp-5);
}
.quick-answer .eyebrow { color: var(--ls-brand-strong); margin-bottom: var(--sp-2); display: block; }
.quick-answer p { font-size: var(--fs-body); color: var(--ls-ink); margin: 0; }

/* ===== C22 — À RETENIR (GEO) ============================== */
.takeaways { background: var(--ls-surface-alt); border-radius: var(--r-m); padding: var(--sp-5); }
.takeaways .eyebrow { margin-bottom: var(--sp-3); display: block; }
.takeaways ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.takeaways li { position: relative; padding-left: var(--sp-5); color: var(--ls-body); }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; background: var(--ls-brand); }

/* ===== C23 — BLOC DÉFINITION (AEO) ======================== */
.definition { border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-5); }
.definition dt { font-family: var(--ff-display); font-weight: 700; font-size: 21px; color: var(--ls-ink); margin-bottom: var(--sp-2); }
.definition dd { margin: 0; color: var(--ls-body); }
.definition .source { font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--ls-muted); margin-top: var(--sp-3); display: block; }

/* ===== C3 — VERDICT ======================================= */
.verdict { background: #fff; border: 1px solid var(--ls-border); border-top: 3px solid var(--ls-brand); border-radius: var(--r-m); box-shadow: var(--sh-card); overflow: hidden; }
.verdict__body { padding: var(--sp-5); }
@media (min-width: 768px) { .verdict__body { padding: var(--sp-6); } }
.verdict__head { display: flex; align-items: flex-start; gap: var(--sp-4); justify-content: space-between; }
.verdict__id { display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; flex: 1 1 auto; }
.verdict__id > div { min-width: 0; }
.verdict__id h3 { font-size: var(--fs-h3); }
.verdict__statement { font-family: var(--ff-body); font-weight: 600; font-size: 19px; line-height: 1.45; color: var(--ls-ink); margin: var(--sp-5) 0; }
.verdict__telemetry { border-block: 1px solid var(--ls-border); padding-block: var(--sp-4); margin-bottom: var(--sp-5); }
.verdict__cta { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 768px) { .verdict__cta { flex-direction: row; align-items: stretch; } .verdict__cta .btn { flex: 0 0 auto; } }
.verdict__foot { font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--ls-muted); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--ls-border); }
@media (max-width: 768px) { .verdict__head .gauge { width: 88px; height: 88px; } .verdict__head .gauge__num { font-size: 38px; } }
/* Verdict compact ≤480px : doit tenir ≤720px de haut (checklist §9).
   La carte promo C8 du verdict est masquée en mobile — le code reste
   accessible dans la section dédiée de la page. */
@media (max-width: 480px) {
  .verdict__body { padding: var(--sp-4); }
  .verdict__statement { font-size: 16px; line-height: 1.35; margin: var(--sp-3) 0; }
  .verdict__telemetry { padding-block: var(--sp-3); margin-bottom: var(--sp-3); }
  .verdict .telemetry { line-height: 1.55; }
  .verdict .proscons { gap: var(--sp-2); margin-bottom: var(--sp-3) !important; }
  .verdict .pc-list { gap: 6px; }
  .verdict .pc-list li { font-size: 15px; line-height: 1.35; }
  .verdict .promo { display: none; }
  .verdict__foot { margin-top: var(--sp-2); padding-top: var(--sp-2); font-size: 12px; }
  .verdict__head { gap: var(--sp-3); }
  .verdict__head .gauge { width: 72px; height: 72px; }
  .verdict__head .gauge__num { font-size: 30px; }
  .verdict__id .tool-logo { width: 40px; height: 40px; flex-basis: 40px; padding: 6px; font-size: 13px; }
}

/* ===== PROS / CONS LISTS (utilisé par C3 & C6) ============ */
.proscons { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .proscons--two { grid-template-columns: 1fr 1fr; } }
.pc-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.pc-list li { display: flex; gap: var(--sp-3); align-items: flex-start; line-height: 1.5; }
.pc-list li::before { flex: 0 0 auto; font-weight: 700; margin-top: 1px; }
.pc-pro li::before { content: "✓"; color: var(--ls-pro); }
.pc-con li::before { content: "✕"; color: var(--ls-con); }
.pc-card { border-radius: var(--r-m); padding: var(--sp-5); }
.pc-card h4 { margin-bottom: var(--sp-4); }
.pc-card--pro { background: var(--ls-pro-tint); }
.pc-card--pro h4 { color: var(--ls-pro); }
.pc-card--con { background: var(--ls-con-tint); }
.pc-card--con h4 { color: var(--ls-con); }

/* ===== C8 — CARTE CODE PROMO ============================== */
.promo { background: var(--ls-cta-tint); border: 1.5px dashed var(--ls-cta); border-radius: var(--r-m); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.promo__row { display: flex; align-items: center; gap: var(--sp-3); }
.promo__code { font-family: var(--ff-mono); font-weight: 600; font-size: 18px; color: var(--ls-cta-hover); letter-spacing: .02em; flex: 1; }
.promo__copy { font-family: var(--ff-body); font-weight: 600; font-size: 14px; border: 1px solid var(--ls-cta); color: var(--ls-cta-hover); background: #fff; border-radius: var(--r-s); padding: 6px var(--sp-3); cursor: pointer; white-space: nowrap; }
.promo__copy:hover { background: var(--ls-cta); color: #fff; }
.promo__copy[data-copied="true"] { background: var(--ls-pro); border-color: var(--ls-pro); color: #fff; }
.promo__meta { font-family: var(--ff-mono); font-size: 12px; color: var(--ls-cta-hover); }
.promo--compact { padding: var(--sp-3) var(--sp-4); }

/* ===== C7 — NOTATION DÉTAILLÉE ============================ */
.subscores { display: flex; flex-direction: column; gap: var(--sp-4); }
.subscore { display: grid; grid-template-columns: 1fr; gap: 6px; }
.subscore__top { display: flex; justify-content: space-between; align-items: baseline; }
.subscore__label { color: var(--ls-body); font-size: var(--fs-small); }
.subscore__val { font-family: var(--ff-mono); font-weight: 600; font-size: 14px; color: var(--ls-ink); }
.subscore__bar { height: 8px; border-radius: var(--r-pill); background: var(--ls-border); overflow: hidden; }
.subscore__fill { height: 100%; border-radius: var(--r-pill); background: var(--ls-star); }

/* ===== C5 — TABLEAU COMPARATIF ============================ */
.cmp-table-wrap { display: none; }
@media (min-width: 768px) { .cmp-table-wrap { display: block; } }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ls-border); border-radius: var(--r-m); overflow: hidden; }
.cmp-table thead th {
  background: var(--ls-surface-alt); font-family: var(--ff-mono); font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ls-muted);
  text-align: left; padding: var(--sp-4); border-bottom: 1px solid var(--ls-border); white-space: nowrap;
}
.cmp-table tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--ls-border); vertical-align: middle; }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table .cell-tool { display: flex; align-items: center; gap: var(--sp-3); }
.cmp-table .cell-tool b { font-weight: 600; color: var(--ls-ink); }
.cmp-table tr.is-pick td { background: var(--ls-brand-tint); }
.cmp-table tr.is-pick td:first-child { box-shadow: inset 3px 0 0 var(--ls-brand); }
.cmp-table .pick-flag { font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ls-brand-strong); display: block; margin-bottom: 2px; }
/* Mobile : pile de cartes */
.cmp-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 768px) { .cmp-cards { display: none; } }

/* ===== C13 — CARTE OUTIL ================================== */
.tool-card { border: 1px solid var(--ls-border); border-radius: var(--r-m); background: #fff; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); box-shadow: var(--sh-card); }
.tool-card__head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.tool-card__head .meta { flex: 1; min-width: 0; }
.tool-card__name { font-size: var(--fs-h4); margin-bottom: 2px; }
.tool-card__desc { color: var(--ls-body); font-size: var(--fs-small); margin: 0; }
.tool-card__actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: auto; flex-wrap: wrap; }
.tool-card__actions .read { font-weight: 500; font-size: 15px; }

/* ===== C9 — PODIUM TOP 3 ================================== */
.podium { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .podium { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.podium__card { position: relative; border: 1px solid var(--ls-border); border-radius: var(--r-m); background: #fff; padding: var(--sp-5); padding-top: var(--sp-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); box-shadow: var(--sh-card); }
@media (min-width: 768px) { .podium__card--1 { transform: translateY(-8px); border-color: var(--ls-brand); } }
.podium__card--1 { border-color: var(--ls-brand); }
.podium__rank { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: var(--ff-mono); font-weight: 600; font-size: 12px; padding: 4px var(--sp-3); border-radius: var(--r-pill); background: var(--ls-surface-alt); border: 1px solid var(--ls-border); color: var(--ls-muted); }
.podium__card--1 .podium__rank { background: var(--ls-star-tint); border-color: var(--ls-star); color: var(--ls-star-ink); }
.podium__ideal { font-size: var(--fs-small); color: var(--ls-muted); }

/* ===== C10 — CAPTURE EMAIL ================================ */
.email-capture { background: var(--ls-brand-tint); border-radius: var(--r-m); padding: var(--sp-6); }
.email-capture h3 { margin-bottom: var(--sp-2); }
.email-capture p { color: var(--ls-body); font-size: var(--fs-small); margin-bottom: var(--sp-4); }
.email-form { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 560px) { .email-form { flex-direction: row; } .email-form input { flex: 1; } }
.input { font-family: var(--ff-body); font-size: 16px; padding: 0 var(--sp-4); min-height: 48px; border: 1px solid var(--ls-border-strong); border-radius: var(--r-s); background: #fff; color: var(--ls-ink); }
.input::placeholder { color: var(--ls-disabled); }

/* Exit-intent popup */
.popup-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.6); z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--sp-5); }
.popup-overlay[data-open="true"] { display: flex; }
.popup { background: #fff; border-radius: var(--r-m); max-width: 480px; width: 100%; padding: var(--sp-7); position: relative; box-shadow: var(--sh-raised); }
.popup__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 32px; height: 32px; }

/* ===== C11 — BLOC AUTEUR (E-E-A-T) ======================== */
.author { display: flex; gap: var(--sp-4); align-items: flex-start; border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-5); background: #fff; }
.author > div { min-width: 0; }
.author__avatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--r-pill); background: var(--ls-brand-tint); display: grid; place-items: center; font-family: var(--ff-display); font-weight: 700; color: var(--ls-brand-strong); overflow: hidden; }
.author__name { font-weight: 600; color: var(--ls-ink); }
.author__bio { font-size: var(--fs-small); color: var(--ls-body); margin: var(--sp-1) 0 var(--sp-3); }
.author__links { display: flex; gap: var(--sp-4); font-size: var(--fs-small); margin-bottom: var(--sp-3); }
.author__method { font-family: var(--ff-mono); font-size: var(--fs-caption); }

/* ===== C12 — SOMMAIRE (TOC) =============================== */
.toc { border: 1px solid var(--ls-border); border-radius: var(--r-m); background: #fff; }
.toc__title { font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ls-muted); padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.toc ol { list-style: none; counter-reset: toc; padding-bottom: var(--sp-3); }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); color: var(--ls-body); font-size: var(--fs-small); text-decoration: none; border-left: 2px solid transparent; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--ff-mono); color: var(--ls-muted); font-size: 12px; }
.toc a:hover { color: var(--ls-ink); }
.toc a.is-active { color: var(--ls-brand-strong); border-left-color: var(--ls-brand); background: var(--ls-brand-tint); }
/* Mobile accordion */
.toc-mobile { border: 1px solid var(--ls-border); border-radius: var(--r-m); }
.toc-mobile summary { list-style: none; cursor: pointer; padding: var(--sp-4); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.toc-mobile summary::-webkit-details-marker { display: none; }

/* ===== C4 — STICKY CTA ==================================== */
.sticky-card { display: none; }
@media (min-width: 1024px) {
  .sticky-card { display: block; position: sticky; top: 88px; border: 1px solid var(--ls-border); border-top: 3px solid var(--ls-cta); border-radius: var(--r-m); background: #fff; padding: var(--sp-5); box-shadow: var(--sh-card); }
  .sticky-card__head { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
}
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; box-shadow: var(--sh-sticky); border-top: 1px solid var(--ls-border); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); transform: translateY(110%); transition: transform .25s ease; }
.sticky-bar[data-show="true"] { transform: translateY(0); }
@media (min-width: 1024px) { .sticky-bar { display: none !important; } }
.sticky-bar__info { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; }
.sticky-bar__info b { color: var(--ls-ink); }
.sticky-bar__score { font-family: var(--ff-mono); font-weight: 600; color: var(--ls-star-ink); }
.sticky-bar__close { width: 32px; height: 32px; flex: 0 0 32px; }

/* ===== C16 — FAÇADE VIDÉO YOUTUBE ========================= */
.video-facade { position: relative; border-radius: var(--r-m); overflow: hidden; cursor: pointer; box-shadow: var(--sh-raised); }
.video-facade .thumb { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
.video-facade__play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-facade__play span { width: 64px; height: 64px; border-radius: var(--r-pill); background: var(--ls-ink); display: grid; place-items: center; }
.video-facade__play span::before { content: ""; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.video-facade__dur { position: absolute; bottom: var(--sp-3); right: var(--sp-3); font-family: var(--ff-mono); font-size: 12px; background: rgba(16,24,40,.85); color: #fff; padding: 2px var(--sp-2); border-radius: var(--r-s); }
.video-caption { font-size: var(--fs-small); color: var(--ls-muted); margin-top: var(--sp-3); }

/* ===== CADRE NAVIGATEUR (captures produit) ================ */
.browser-frame { border: 1px solid var(--ls-border); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-raised); background: #fff; }
.browser-frame__bar { height: 28px; background: var(--ls-surface-alt); border-bottom: 1px solid var(--ls-border); display: flex; align-items: center; gap: 6px; padding-inline: var(--sp-3); }
.browser-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ls-border-strong); }
.browser-frame img, .browser-frame .shot { display: block; width: 100%; }

/* ===== C15 — FAQ ========================================== */
.faq { border-top: 1px solid var(--ls-border); }
.faq__item { border-bottom: 1px solid var(--ls-border); }
.faq__item summary { list-style: none; cursor: pointer; padding: var(--sp-4) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-h4); color: var(--ls-ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { flex: 0 0 auto; transition: transform .2s ease; color: var(--ls-muted); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__answer { padding-bottom: var(--sp-4); color: var(--ls-body); max-width: var(--reading); }
.faq__answer p { margin-bottom: var(--sp-3); }

/* ===== C20 — TABLEAU OFFRES =============================== */
/* réutilise .cmp-table ; spécifique : colonne expiration mono */
.offer-exp { font-family: var(--ff-mono); font-size: 13px; color: var(--ls-body); white-space: nowrap; }

/* ===== C2 — FOOTER ======================================== */
.site-footer { background: var(--ls-ink); color: var(--c-ink-300); }
.site-footer a { color: #D0D5DD; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-transparency { border-bottom: 1px solid rgba(255,255,255,.12); padding-block: var(--sp-6); font-family: var(--ff-mono); font-size: var(--fs-caption); line-height: 1.6; color: var(--c-ink-300); max-width: 900px; }
.footer-grid { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-col h4 { font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-300); margin-bottom: var(--sp-4); font-weight: 600; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-small); }
.footer-brand .wordmark { color: #fff; }
.footer-brand .wordmark b { color: var(--c-indigo-100); }
.footer-brand p { color: var(--c-ink-300); font-size: var(--fs-small); margin-top: var(--sp-3); max-width: 32ch; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; font-size: var(--fs-caption); font-family: var(--ff-mono); }

/* ===== LAYOUT PAGE MONEY (E2/E3/E4) ====================== */
/* contenu 700 + sidebar 320, gouttière 48, centré dans 1200 */
.money-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) { .money-layout { grid-template-columns: minmax(0,1fr) var(--sidebar); gap: var(--gutter); } }
.money-main { min-width: 0; max-width: var(--reading); }
@media (min-width: 1024px) { .money-main { max-width: none; } }
.money-side { display: none; }
@media (min-width: 1024px) { .money-side { display: block; } }
.article-body > * + * { margin-top: var(--sp-6); }
.article-body h2 { margin-top: var(--sp-8); }
.article-body h2:first-child { margin-top: 0; }
.article-body p, .article-body ul, .article-body ol { max-width: var(--reading); }
.article-body ul.bullets { list-style: disc; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--sp-2); }
.section-q { margin-bottom: var(--sp-4); }
.dateline { font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--ls-muted); }
.cited-box { border: 1px solid var(--ls-border); border-radius: var(--r-m); padding: var(--sp-5); background: var(--ls-surface-alt); }
.cited-box h4 { margin-bottom: var(--sp-4); }

/* ===== FILTRES (annuaire) ================================= */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filter-pill { font-family: var(--ff-body); font-size: 14px; font-weight: 500; padding: 7px var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--ls-border-strong); background: #fff; color: var(--ls-body); cursor: pointer; }
.filter-pill:hover { border-color: var(--ls-brand); color: var(--ls-brand-strong); }
.filter-pill[aria-pressed="true"] { background: var(--ls-brand); border-color: var(--ls-brand); color: #fff; }
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--ls-muted); border: 1px dashed var(--ls-border-strong); border-radius: var(--r-m); }