/* Servio — page comparatif : tableau fonction par fonction face à un autre logiciel. */
/* Extension de home.css et news.css : mêmes jetons, mêmes composants. */

/* ---------- Score global ---------- */
.cmp-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;max-width:760px;margin-top:44px;padding:26px 30px;border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--ink-3)}
.cmp-score-side{display:flex;flex-direction:column;gap:4px}
.cmp-score-side:last-child{text-align:right}
.cmp-score-name{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-dim)}
.cmp-score-side.is-us .cmp-score-name{color:var(--accent)}
.cmp-score-num{font-family:var(--display);font-size:clamp(40px,5vw,58px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--on-dark)}
.cmp-score-num small{font-size:.42em;font-weight:650;letter-spacing:0;color:var(--on-dark-dim)}
.cmp-score-side.is-us .cmp-score-num{color:var(--accent)}
.cmp-score-vs{font-size:13px;color:var(--on-dark-dim)}
.cmp-score-cats{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;border-top:1px solid var(--line-dark)}
.cmp-score-cats span{padding:6px 12px;border-radius:var(--pill);background:rgba(255,255,255,.06);font-size:13px;color:var(--on-dark-dim)}
.cmp-score-cats b{color:var(--on-dark);font-weight:600}
.cmp-score-note{margin-top:14px;font-size:13px;color:var(--on-dark-dim)}

/* ---------- Tableau ---------- */
.cmp-head{max-width:720px;margin-bottom:44px}
.cmp-head h2{margin-top:20px}
.cmp-head p{margin-top:20px;font-size:17px;line-height:1.72;color:var(--on-light-dim)}
.cmp-card{border:1px solid var(--line-light);border-radius:var(--r-lg);background:var(--paper);box-shadow:0 18px 50px -30px rgba(18,38,31,.35);overflow:hidden}
.cmp-table{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp-table col.cmp-col-us,.cmp-table col.cmp-col-them{width:150px}
.cmp-table th,.cmp-table td{padding:0;text-align:left;vertical-align:middle}
.cmp-table thead th{height:62px;font-size:15px;font-weight:650;color:var(--on-light-dim);text-align:center}
.cmp-table thead th.cmp-us{background:var(--accent);color:#fff;box-shadow:inset 0 3px 0 var(--accent-ink)}
.cmp-table thead th.cmp-crit{padding-left:22px;text-align:left;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-light-dim)}
.cmp-cat th{padding:13px 22px;background:var(--cream);border-top:1px solid var(--line-light);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.cmp-cat th>div{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cmp-cat-score{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--on-light-dim);font-variant-numeric:tabular-nums}
.cmp-row th{padding:16px 22px;border-top:1px solid var(--line-light);font-size:15px;font-weight:500;line-height:1.5;color:var(--on-light)}
.cmp-row th small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--on-light-dim)}
.cmp-row td{border-top:1px solid var(--line-light);border-left:1px solid var(--line-light);text-align:center;font-size:14px;color:var(--on-light-dim)}
.cmp-row td.cmp-us{background:#fff1e9;border-left-color:#f6d9c8}
.cmp-row+.cmp-cat th{border-top-color:var(--line-light)}

/* Pastilles « oui » / « non » ; les autres verdicts sont écrits en toutes lettres. */
.cmp-yes,.cmp-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;vertical-align:middle}
.cmp-yes svg,.cmp-no svg{width:14px;height:14px;stroke-width:2.4}
.cmp-us .cmp-yes{background:var(--accent);color:#fff}
.cmp-them .cmp-yes{width:24px;height:24px;background:#e4f2e3;color:#3d7a3a}
.cmp-no{width:24px;height:24px;background:#efefe8;color:#8a948f}
.cmp-word{font-weight:500}
.cmp-us .cmp-word{color:var(--accent-ink);font-weight:600}

/* Légende */
.cmp-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 32px;margin-top:30px}
.cmp-legend div{font-size:14px;line-height:1.6;color:var(--on-light-dim)}
.cmp-legend b{display:block;color:var(--on-light);font-weight:600}
.cmp-source{margin-top:26px;font-size:13px;line-height:1.7;color:var(--on-light-dim)}

.cmp-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

@media(max-width:760px){
  .cmp-score{grid-template-columns:1fr 1fr;gap:18px;padding:22px}
  .cmp-score-vs{display:none}
  .cmp-table col.cmp-col-us,.cmp-table col.cmp-col-them{width:74px}
  .cmp-table thead th{height:54px;font-size:13px}
  .cmp-table thead th.cmp-crit{padding-left:14px;font-size:11px}
  .cmp-cat th{padding:12px 14px}
  .cmp-cat th>div{flex-direction:column;align-items:flex-start;gap:4px}
  .cmp-row th{padding:14px;font-size:14px}
  .cmp-row td{font-size:12px;padding:0 4px}
  .cmp-cta .btn{width:100%}
}