/* ========== MDZ Compare CSS (all classes prefixed) ========== */

/* Picker */
.mdz-compare-picker{ border:1px solid rgba(0,0,0,.08); padding:16px; border-radius:12px; }
.mdz-compare-picker-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mdz-compare-picker-col{ position:relative; }
.mdz-compare-picker-label{ display:block; font-weight:600; margin-bottom:6px; }
.mdz-compare-input{ width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; }
.mdz-compare-suggest{
  position:absolute; left:0; right:0; top:100%; z-index:20;
  background:#fff; border:1px solid #ddd; border-top:none; border-radius:0 0 8px 8px;
  max-height:260px; overflow:auto;
}
.mdz-compare-suggest-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; }
.mdz-compare-suggest-item:hover{ background:#f7f7f7; }
.mdz-compare-suggest-thumb{ width:30px; height:30px; object-fit:cover; border-radius:4px; }
.mdz-compare-suggest-title{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mdz-compare-suggest-empty{ padding:8px 10px; color:#666; }
.mdz-compare-picker-actions{ margin-top:12px; text-align:right; }
.mdz-compare-btn{ padding:10px 16px; border:1px solid #222; background:#222; color:#fff; border-radius:8px; cursor:pointer; }
.mdz-compare-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Table */
.mdz-compare-wrap{ width:100%; overflow-x:auto; }
.mdz-compare-table{ width:100%; border-collapse:collapse; font-size:14px; }
.mdz-compare-th, .mdz-compare-td{ padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.08); vertical-align:middle; }
.mdz-compare-th--label{ width:20%; }
.mdz-compare-th--p1, .mdz-compare-th--p2{ width:40%; }
.mdz-compare-tr--category .mdz-compare-td--category{ background:#f7f7f7; border-top:1px solid rgba(0,0,0,.08); font-weight:700; }
.mdz-compare-category-title{ margin:0; font-size:15px; }
.mdz-compare-td--label{ font-weight:600; color:#333; text-align: right; }
.mdz-compare-td--p1, .mdz-compare-td--p2{ color:#111; text-align: center; }

/* Radar row */
.mdz-compare-tr--radar .mdz-compare-td{ border-bottom:none; }
.mdz-compare-radar-wrap{ display:flex; justify-content:center; align-items:center; padding:10px 0; }
.mdz-compare-radar{ max-width:100%; height:auto; display:block; }

/* Misc */
.mdz-compare-notice{ padding:12px; background:#fffbe6; border:1px solid #ffe58f; border-radius:8px; }
.mdz-compare-loading{ padding:12px; }
.mdz-compare-error{ padding:12px; color:#b00020; }

/* Responsive */
@media (max-width: 768px){
  .mdz-compare-picker-row{ grid-template-columns:1fr; }
  .mdz-compare-th--label, .mdz-compare-th--p1, .mdz-compare-th--p2{ width:auto; }
}

/* Sticky thead */
.mdz-compare-table { border-collapse: collapse; }
.mdz-compare-thead th {
  position: sticky;
  top: 0;               /* colle en haut de la fenêtre */
  z-index: 1000;
  background: #fff;     /* fond opaque pour couvrir le contenu qui défile */
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}

/* Mise en forme de l'entête (image + titre) */
.mdz-compare-headcell { display:flex; flex-direction:column; align-items:center; gap:8px; }
.mdz-compare-thumbwrap { width: 90%; display:flex; align-items:center; justify-content:center; }
.mdz-compare-thumbwrap img.mdz-compare-thumb {
  max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;
}
.mdz-compare-title { font-weight:700; font-size:16px; text-align:center; }

/* (Option) resserrer les cellules du header pour l'effet sticky */
.mdz-compare-th, .mdz-compare-td { padding:10px 12px; }


.mdz-compare-title-link,
.mdz-compare-term-link { text-decoration: none; }
.mdz-compare-title-link:hover,
.mdz-compare-term-link:hover { text-decoration: underline; }