/* Comparateur de listes (/outils-seo/comparer-listes/, /en/seo-tools/compare-lists/), Nemo Ciment
   Se charge après outils.css, dont il reprend .outil, .champ et .verdicts. */

.listes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.listes .champ textarea { min-height: 220px; font-size: 14.5px; line-height: 1.55; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.listes .stat { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.listes .stat b { color: var(--ink); font-weight: 600; }

.options { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.options label { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; font-family: var(--font-body); font-size: 15px; letter-spacing: 0; text-transform: none; color: #d0d0d4; cursor: pointer; }
.options .aide { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--muted-2); }

.resultats-listes h2 { margin-top: 38px; }
.res-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.res { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.02); padding: 18px 18px 16px; min-width: 0; }
.res-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.res h3 { margin: 0; font-size: 17px; color: var(--ink); }
.res .nb { font-family: var(--font-display); font-size: 22px; color: var(--pink); font-variant-numeric: tabular-nums; }
.res textarea { width: 100%; box-sizing: border-box; min-height: 160px; font-size: 14px; line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto; background: #0d0d0f; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; color: #d0d0d4; resize: vertical; }
.res .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.res .actions .btn { padding: 9px 16px; font-size: 12px; min-height: 40px; }
.res .actions .btn:disabled { opacity: .45; cursor: default; }
.res .copie { font-size: 13px; color: var(--pink); align-self: center; }
.res.large { grid-column: 1 / -1; }
.res .doublons { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; font-size: 14px; color: #d0d0d4; }
.res .doublons li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(34,197,94,.1); overflow-wrap: anywhere; }
.res .doublons li span:last-child { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.res .vide { color: var(--muted-2); font-size: 14px; margin: 0; }

@media (max-width: 700px) {
  .listes, .res-grille { grid-template-columns: 1fr; }
  .listes .champ textarea { min-height: 160px; }
  .listes .champ textarea, .res textarea { font-size: 16px; }
}