/* =====================================================================
   Comparatifs Jouro — /comparatifs/
   Dépend de blog.css (:root, header, footer) et guides.css (hero, toc,
   answer, faq, cta, cards). Ne contient QUE ce que les fiches
   comparatives ajoutent : tableaux de comparaison et bloc verdict.
   ===================================================================== */

/* .guide-article est un item de grille : sans min-width:0 il s'élargit à la
   largeur du tableau et fait déborder la page entière au lieu de laisser
   .cmp-table gérer son propre scroll. */
.guide-layout>.guide-article{min-width:0}

/* Tableau comparatif — scroll horizontal interne, jamais la page */
.cmp-table{max-width:100%;margin:22px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(15,23,42,.1);border-radius:18px;background:#fff}
.cmp-table table{width:100%;min-width:540px;border-collapse:collapse;font-size:.97rem;line-height:1.55}
.cmp-table thead th{position:sticky;top:0;background:linear-gradient(180deg,#eef7ff,#e6f2ff);text-align:left;font-weight:850;color:var(--text);padding:13px 16px;border-bottom:1px solid rgba(15,23,42,.12);white-space:nowrap;font-size:.9rem;letter-spacing:-.01em}
.cmp-table tbody td{padding:13px 16px;border-bottom:1px solid rgba(15,23,42,.07);vertical-align:top;color:#27374d}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table tbody tr:nth-child(even){background:rgba(14,165,233,.026)}
.cmp-table tbody td:first-child{font-weight:750;color:#152033}
.cmp-table-note{margin:10px 0 0;font-size:.86rem;color:var(--muted);line-height:1.6}

/* Verdict de fin de section */
.cmp-verdict{margin:22px 0 0;padding:18px 20px;border-radius:18px;border:1px solid rgba(14,165,233,.22);background:linear-gradient(135deg,rgba(14,165,233,.09),rgba(15,92,219,.05))}
.cmp-verdict strong:first-child{display:block;margin-bottom:6px;font-size:.76rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-deep)}
.cmp-verdict p{margin:0;line-height:1.7;color:#244461;font-size:1rem}

@media(max-width:640px){
  .cmp-table table{font-size:.9rem;min-width:480px}
  .cmp-table thead th,.cmp-table tbody td{padding:11px 12px}
}