/* The "cagnottes gratuites" comparison rendered by the blog template of the same name.
   Everything is scoped under .comparatif so the blog's own article styles stay untouched. */

.comparatif {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  display: grid;
  gap: 48px;
  --bg: var(--background-screen);
  --panel: #ffffff;
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --muted: #5f685a;
  --line: var(--color-border-neutral);
  --line-soft: var(--color-border-soft);
  --primary: var(--interactive-primary);
  --accent: var(--interactive-accent);
  --accent-soft: #e9f8dc;
  --focus: #2a5d8f;
  --warn-bg: #fff6e0;
  --warn-ink: #7a4b00;
  --s-ha: #0f8a7a;
  --s-tribee: #b8236b;
  --s-lpc: #2a78d6;
  --s-lpcf: #6d4bd1;
  --s-op: #b45309;
  --s-memorable: #2f7d4a;
  --s-lcdp: #b8860b;
  --s-cotizup: #c0392b;
  --s-donoor: #1f4e9c;
  --s-whydonate: #00a3c7;
  --s-leetchi: #6b8e23;
  --font-display: var(--font-family-bricolage), "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-family-body), "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}
.comparatif .cmp-prose { display: grid; gap: 14px; }
.comparatif p.cmp-prose { display: block; }
.comparatif h2, .comparatif h3, .comparatif h4 { font-family: var(--font-display); font-variation-settings: "opsz" 96; margin: 0; text-wrap: balance; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); }
.comparatif h2 { font-size: clamp(25px, 3.2vw, 32px); font-weight: 700; }
.comparatif h2 .n { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-right: 12px; }
.comparatif h3 { font-size: 20px; font-weight: 700; }
.comparatif h4 { font-size: 17px; font-weight: 700; }
.comparatif .nb { white-space: nowrap; }
.comparatif p { margin: 0; }
.comparatif a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.comparatif a:hover { text-decoration-thickness: 2px; }
.comparatif .home-link { color: #1f7138; font-weight: 600; text-decoration: none; }
.comparatif .home-link:hover { color: var(--primary); text-decoration: none; }
.comparatif q { quotes: "« " " »"; }
.comparatif .kicker { font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.comparatif .lede { font-size: 20px; line-height: 1.45; color: var(--ink-2); }
.comparatif .intro { display: grid; gap: 14px; }
.comparatif .intro p, .comparatif .intro .lede { font-size: 16px; line-height: 1.6; color: var(--ink); letter-spacing: -0.008em; }
.comparatif .intro .hint { color: var(--ink-2); }
.comparatif .lede b { color: var(--ink); font-weight: 600; }
.comparatif section { display: grid; gap: 18px; scroll-margin-top: 24px; }
.comparatif .block { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; display: grid; gap: 16px; }
.comparatif .hint { font-size: 14px; color: var(--muted); }
.comparatif .muted { color: var(--muted); }
.comparatif .note { font-size: 15px; color: var(--ink-2); border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; }
.comparatif .note b { display: block; margin-bottom: 6px; }
.comparatif .note b { color: var(--ink); }
.comparatif .warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 12px 16px; font-size: 15px; }
.comparatif .pill { display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; font-family: var(--font-mono); font-size: 12px; line-height: 1; padding: 0 9px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); vertical-align: 1px; white-space: nowrap; }
.comparatif .pill--pre { background: #ebe4d4; }
.comparatif .pill--prop { background: #faf9ef; border: 1px solid #ebe4d4; }
.comparatif .missing, .comparatif .video-slot { border: 1px dashed var(--line); border-radius: 8px; padding: 18px; color: var(--muted); font-size: 14px; text-align: center; }
.comparatif .video-slot { aspect-ratio: 9 / 16; max-width: 260px; display: grid; place-items: center; }
.comparatif /* sommaire */
.toc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; display: grid; gap: 8px; max-width: 720px; }
.comparatif /* series keys */
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; background: var(--c); }
.comparatif .pf-ha { --c: var(--s-ha); }
.comparatif .pf-tribee { --c: var(--s-tribee); }
.comparatif .pf-lpc { --c: var(--s-lpc); }
.comparatif .pf-lpcf { --c: var(--s-lpcf); }
.comparatif .pf-op { --c: var(--s-op); }
.comparatif .pf-memorable { --c: var(--s-memorable); }
.comparatif .pf-lcdp { --c: var(--s-lcdp); }
.comparatif .pf-cotizup { --c: var(--s-cotizup); }
.comparatif .pf-donoor { --c: var(--s-donoor); }
.comparatif .pf-whydonate { --c: var(--s-whydonate); }
.comparatif .pf-leetchi { --c: var(--s-leetchi); }
.comparatif /* charts */
.chart-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.comparatif .toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.comparatif .cmp-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: #fff; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); white-space: nowrap; flex: 0 0 auto; }
.comparatif .cmp-toggle i { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.comparatif .cmp-toggle[aria-pressed="false"] { opacity: 0.6; }
.comparatif .amount-input { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; background: #fff; font-size: 18px; font-weight: 600; font-family: var(--font-display); box-shadow: 0 0 0 3px var(--accent-soft); }
.comparatif .amount-input input { width: 6ch; border: 0; outline: 0; font: inherit; color: var(--ink); background: transparent; -moz-appearance: textfield; text-align: right; }
.comparatif .amount-input input::-webkit-outer-spin-button, .comparatif .amount-input input::-webkit-inner-spin-button { -webkit-appearance: none; }
.comparatif .amount-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent); }
.comparatif .figwrap { position: relative; }
.comparatif svg.chart { width: 100%; height: auto; display: block; overflow: visible; outline: none; }
.comparatif svg.chart:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.comparatif .grid { stroke: var(--line-soft); stroke-width: 1; }
.comparatif .axisline { stroke: #d2cdc3; stroke-width: 1; }
.comparatif .axis { font-family: var(--font-body); font-size: 11.5px; fill: var(--ink-2); }
.comparatif .axis-y { font-size: 12px; font-weight: 600; fill: var(--ink); }
.comparatif .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke: var(--c); }
.comparatif .line.dashed { stroke-dasharray: 5 4; }
.comparatif .dot { fill: var(--c); stroke: #fff; stroke-width: 2; }
.comparatif .marker { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.comparatif .off { display: none; }
.comparatif .overlay { fill: transparent; cursor: crosshair; }
.comparatif .tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4; min-width: 180px; box-shadow: 0 2px 10px rgba(0,0,0,0.18); z-index: 2; }
.comparatif .tip .row { display: flex; align-items: center; gap: 7px; }
.comparatif .tip .row i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.comparatif .tip .row b { font-weight: 600; min-width: 6ch; font-variant-numeric: tabular-nums; }
.comparatif .tip .head { font-weight: 700; margin-bottom: 3px; }
.comparatif .readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.comparatif .readout div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; border-top: 3px solid var(--c); }
.comparatif .readout .name { font-size: 13px; color: var(--ink-2); }
.comparatif .readout .pill { width: fit-content; }
.comparatif .readout .val { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.comparatif .readout .sub { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.comparatif .readout .steps { font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line-soft); padding-top: 6px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.comparatif .readout .walk-steps::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--c); flex: 0 0 auto; }
.comparatif /* tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.comparatif table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.comparatif th, .comparatif td { padding: 9px 12px; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: top; }
.comparatif thead th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; background: var(--bg); }
.comparatif tbody th { font-weight: 600; white-space: nowrap; }
.comparatif td.num, .comparatif th.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 13.5px; white-space: nowrap; }
.comparatif td .eur { display: block; }
.comparatif td .pct { display: block; font-size: 12px; color: var(--muted); }
.comparatif td .sub, .comparatif th .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.comparatif .wrap td { white-space: normal; min-width: 160px; }
.comparatif .orias-table td .sub { margin-top: 4px; }
.comparatif .orias-table td { min-width: 110px; }
.comparatif .orias-table th[scope="row"] { white-space: normal; min-width: 100px; }
.comparatif .compact td, .comparatif .compact th { padding: 7px 10px; }
.comparatif /* key table: header pinned to the top of the window, .comparatif platform names at 45° */
.keytable thead th { position: sticky; top: 0; z-index: 2; }
.comparatif .keytable th.first { vertical-align: bottom; }
.comparatif .keytable th.rot { height: 196px; vertical-align: bottom; position: sticky; padding: 0; }
.comparatif .keytable th.rot > div { position: absolute; left: 50%; bottom: 12px; transform-origin: 0 100%; transform: rotate(-45deg); white-space: nowrap; line-height: 1.3; text-transform: none; letter-spacing: 0; display: grid; gap: 3px; font-family: var(--font-body); }
.comparatif /* the rotated labels run into the next column: earlier columns paint above later ones */
.keytable th.rot:nth-child(2) { z-index: 7; }
.comparatif .keytable th.rot:nth-child(3) { z-index: 6; }
.comparatif .keytable th.rot:nth-child(4) { z-index: 5; }
.comparatif .keytable th.rot:nth-child(5) { z-index: 4; }
.comparatif .keytable th.rot:nth-child(6) { z-index: 3; }
.comparatif .keytable th.rot .name { font-size: 14px; font-weight: 700; color: var(--ink); }
.comparatif .keytable th.rot .tag { font-size: 12px; font-weight: 400; color: var(--ink-2); display: grid; gap: 3px; justify-items: start; }
@media (min-width: 700px) {
.comparatif .tablewrap.keytable { overflow: visible; }
}
.comparatif .yes { color: var(--s-memorable); font-weight: 600; }
.comparatif .no { color: #a33; font-weight: 600; }
.comparatif .btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.comparatif .cmp-btn { border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; background: var(--primary); color: #fff; }
.comparatif .cmp-btn.secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.comparatif .cmp-btn, .comparatif .walknav__tab { text-decoration: none; }
.comparatif .cmp-btn { font-family: var(--font-body); display: inline-flex; align-items: center; gap: 8px; }
.comparatif .cmp-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.comparatif .walk__video { margin-left: auto; font-size: 13.5px; padding: 6px 12px; }
.comparatif .chart-dl { font-size: 13.5px; padding: 6px 12px; }
.comparatif .cmp-btn:focus-visible, .comparatif .cmp-toggle:focus-visible, .comparatif .cmp-tab:focus-visible, .comparatif details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.comparatif textarea.csv { width: 100%; height: 160px; font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.comparatif details { border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; background: #fff; }
.comparatif details summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.comparatif details ul { margin: 8px 0 4px; padding-left: 20px; font-size: 14px; color: var(--ink-2); display: grid; gap: 4px; }
.comparatif details.detail-group { background: var(--bg); }
.comparatif .detail-group__list { display: grid; gap: 8px; margin-top: 10px; }
.comparatif .detail-group__list details { background: #fff; }
.comparatif /* walkthroughs */
.cmp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.comparatif .cmp-tab { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: #fff; font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.comparatif .cmp-tab[aria-selected="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.comparatif .cmp-tab .n { font-family: var(--font-mono); font-size: 12px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,0.07); }
.comparatif .cmp-tab[aria-selected="true"] .n { background: rgba(255,255,255,0.22); }
.comparatif .walk { display: grid; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); scroll-margin-top: 78px; }
.comparatif .walknav { position: sticky; top: 0; z-index: 5; background: var(--panel); display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.comparatif .walknav__tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14.5px; text-decoration: none; color: var(--ink); background: #fff; }
.comparatif .walknav__tab .n { font-family: var(--font-mono); font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); }
.comparatif .walknav__tab[aria-current="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.comparatif .walknav__tab[aria-current="true"] .n { background: rgba(255,255,255,0.22); }
.comparatif .walknav__tab[aria-current="true"] .key { outline: 1px solid rgba(255,255,255,0.6); }
.comparatif .walk__title { font-size: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.comparatif .walk-steps { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.comparatif .walk-steps::before { content: ""; position: absolute; left: 15px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
.comparatif .walk-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 18px; align-items: start; padding: 8px 0 20px; }
.comparatif .walk-step .stepnum { width: 32px; height: 32px; font-size: 14px; position: relative; z-index: 1; }
.comparatif .walk-step .stepnum.start { background: #fff; color: var(--ink); border: 2px solid var(--line); }
.comparatif .walk-step figure { margin: 0; }
.comparatif .walk-step figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.comparatif .walk-step__text { display: grid; gap: 8px; font-size: 15px; align-content: start; }
.comparatif .walk-step__text b { font-size: 16.5px; line-height: 1.35; }
.comparatif .walk-step__text .quote { font-size: 14px; color: var(--ink-2); }
@media (max-width: 900px) {
.comparatif .walk-step { grid-template-columns: 32px minmax(0, 1fr); }
.comparatif .walk-step .walk-step__text { grid-column: 2; }
}
@media (max-width: 640px) {
.comparatif .cmp-toggle { font-size: 12.5px; padding: 3px 9px; gap: 5px; }
.comparatif .cmp-toggle i { width: 10px; }
.comparatif .toggles { gap: 5px; }
.comparatif .chart-tools { gap: 10px; }
.comparatif .walknav { gap: 5px; padding: 8px 0; }
.comparatif .walknav__tab { font-size: 12.5px; padding: 3px 9px; gap: 5px; }
.comparatif .walknav__tab .n { font-size: 11px; padding: 0 6px; }
.comparatif .walknav__tab .key { width: 9px; height: 9px; margin-right: 0; }
}
.comparatif /* full-screen view of any image or video */
.has-zoom { position: relative; }
.comparatif .zoom { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgba(31,42,28,0.8); color: #fff; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.comparatif .zoom svg { width: 16px; height: 16px; }
.comparatif .zoom:hover, .comparatif .zoom:focus-visible { background: rgba(31,42,28,0.97); }
.comparatif .zoom { opacity: 0; transition: opacity 120ms; }
.comparatif .has-zoom:hover .zoom, .comparatif .has-zoom:focus-within .zoom { opacity: 1; }
@media (hover: none) {
.comparatif .zoom { opacity: 1; }
}
.comparatif .has-zoom img { cursor: zoom-in; }
.comparatif .screen.has-zoom .zoom { top: 34px; }
.comparatif dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.comparatif dialog.lightbox::backdrop { background: rgba(0,0,0,0.86); }
.comparatif .lightbox__body { position: relative; display: grid; gap: 10px; justify-items: center; }
.comparatif .lightbox__media img, .comparatif .lightbox__media video { display: block; max-width: 94vw; max-height: 86vh; width: auto; height: auto; border-radius: 8px; background: #000; }
.comparatif .lightbox__media video { height: 86vh; }
.comparatif .lightbox__cap { color: #fff; font-size: 14px; text-align: center; max-width: 80ch; }
.comparatif .lightbox__close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; z-index: 3; }
.comparatif .walk__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 20px; font-size: 15px; }
.comparatif .walk__facts div { display: grid; gap: 2px; }
.comparatif .walk__facts b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; }
.comparatif .walk__steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 16px; }
.comparatif .walk__shots { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.comparatif figure.step { margin: 0; flex: 1 1 250px; max-width: 440px; display: grid; gap: 6px; }
.comparatif figure.step img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.comparatif figure.step figcaption { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
.comparatif .stepnum { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); }
.comparatif .phones { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.comparatif figure.phone { margin: 0; flex: 0 0 210px; display: grid; gap: 6px; }
.comparatif figure.phone .screen { border: 6px solid #1c1c1c; border-radius: 22px; overflow: hidden; background: #000; }
.comparatif figure.phone .bar { height: 26px; white-space: nowrap; overflow: hidden; background: #f2f2f2; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #555; font-family: var(--font-mono); }
.comparatif figure.phone img, .comparatif figure.phone video { width: 100%; display: block; background: #000; }
.comparatif .phones--video figure.phone { flex-basis: 160px; }
.comparatif .versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px 18px; align-items: start; max-width: 640px; }
.comparatif .versus figure.phone { flex: none; width: 100%; }
.comparatif .versus__vs { align-self: start; margin-top: min(28vw, 240px); font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--muted); }
.comparatif figure.phone figcaption { font-size: 13px; color: var(--ink-2); }
.comparatif .quotes { display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); margin: 0; padding-left: 0; list-style: none; }
.comparatif .quotes li b { color: var(--ink); font-weight: 600; }
.comparatif .quotes li q { font-style: italic; }
.comparatif ul.points { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.comparatif /* timeline */
ol.timeline { list-style: none; margin: 0; }
.comparatif .timeline { display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 8px; padding-left: 22px; }
.comparatif .tl { position: relative; padding: 6px 0 18px; display: grid; gap: 4px; }
.comparatif .tl::before { content: ""; position: absolute; left: -29px; top: 13px; width: 12px; height: 12px; border-radius: 999px; background: var(--c, var(--muted)); border: 2px solid var(--bg); }
.comparatif .tl .when { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.comparatif .tl .what { font-size: 15.5px; }
.comparatif .tl .src { font-size: 13px; color: var(--muted); }
.comparatif .tl .src a { color: var(--ink-2); }
.comparatif /* on-screen step strips */
.jstrip { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.comparatif .jstep { flex: 1 1 220px; max-width: 360px; display: grid; gap: 6px; }
.comparatif .jstep img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.comparatif .jstep .cap { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
.comparatif .jstep.aside img { border-style: dashed; }
.comparatif .jstep .stepnum.aside { background: var(--muted); }
.comparatif h4.strip-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; font-family: var(--font-body); }
.comparatif /* review cards */
.home-cards { display: grid; gap: 18px; }
.comparatif .home-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 10px; padding: 18px; }
.comparatif .home-card figure { margin: 0; }
.comparatif .home-card figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.comparatif .home-card__text { display: grid; gap: 12px; min-width: 0; }
.comparatif .home-card h4 { font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.comparatif .home-card h4 a { font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.comparatif .home-card dl { margin: 0; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.comparatif .home-card dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.comparatif .home-card dd { margin: 0; overflow-wrap: anywhere; }
.comparatif .home-card dd q + q { display: block; margin-top: 4px; }
@media (max-width: 720px) {
.comparatif .home-card { grid-template-columns: minmax(0, 1fr); }
}
.comparatif .review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.comparatif .rc { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 10px; padding: 18px 18px 16px; display: grid; gap: 12px; align-content: start; }
.comparatif .rc h4 { font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comparatif .rc__head { display: flex; align-items: baseline; gap: 10px; }
.comparatif .rc__avg { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.comparatif .rc__avg small, .comparatif .rc__note small { font-size: 0.5em; font-weight: 600; color: var(--muted); margin-left: 1px; }
.comparatif .rc__total { font-size: 13.5px; color: var(--ink-2); line-height: 1.3; }
.comparatif .rc__row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label note" "count note" "meter meter"; column-gap: 10px; row-gap: 3px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.comparatif .rc__label { grid-area: label; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.comparatif .rc__count { grid-area: count; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.comparatif .rc__note { grid-area: note; align-self: center; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.comparatif .meter { grid-area: meter; height: 6px; border-radius: 3px; background: var(--line-soft); position: relative; overflow: hidden; margin-top: 4px; }
.comparatif .meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: var(--c); border-radius: 3px; }
.comparatif .rc__row--empty .rc__note, .comparatif .rc__row--empty .rc__count { color: var(--muted); }
.comparatif .rc--none .rc__avg { color: var(--muted); }
.comparatif .internal { background: #f4f1ea; border: 1px dashed var(--ink-2); }
.comparatif .internal .rc { border-style: dashed; max-width: 420px; }
.comparatif .internal .kicker { color: var(--ink); }
.comparatif /* stat row */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.comparatif .stat { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 4px; background: #fff; }
.comparatif .stat .v { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.comparatif .stat .l { font-size: 13.5px; color: var(--ink-2); }
.comparatif .stats--one { max-width: 420px; }
.comparatif figure.diagram { margin: 0; display: grid; gap: 10px; max-width: 900px; }
.comparatif figure.diagram svg { width: 100%; height: auto; display: block; }
.comparatif figure.diagram figcaption { font-size: 14px; color: var(--ink-2); }
.comparatif footer.meta { font-size: 14px; color: var(--muted); display: grid; gap: 6px; }
@media (max-width: 640px) {
.comparatif .block { padding: 16px; }
.comparatif figure.phone, .comparatif .phones--video figure.phone { flex-basis: 46%; }
}

/* Commission facultative déjà payée : cartes par plateforme */
.comparatif h4.strip-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; font-family: var(--font-body); margin: 0; }
.comparatif .remb-cards {display:grid;gap:18px}
.comparatif .remb-card {background:var(--panel);border-top:4px solid var(--c)}
.comparatif .remb-official {display:grid;gap:8px}
.comparatif blockquote.rq {margin:0;padding:10px 14px;border-left:3px solid var(--c);background:var(--bg);border-radius:0 8px 8px 0;font-size:16px}
.comparatif .remb-note {font-size:15px}
.comparatif .remb-cases {list-style:none;margin:0;padding:0;display:grid;gap:16px}
.comparatif .remb-case {display:grid;gap:10px;font-size:15px;padding-top:16px;border-top:1px solid var(--line)}
.comparatif .remb-meta {display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:14px;color:var(--ink-2)}
.comparatif .lbl {display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:600;margin-bottom:3px}
.comparatif .remb-reply {display:grid;gap:6px}
.comparatif .pill.remb-ok {background:var(--accent-soft);color:var(--primary)}
.comparatif .pill.remb-no {background:#f7e9e6;color:#8a2f1f}
.comparatif .remb-empty {color:var(--muted);font-size:15px}