/* Pattern: Tableau comparatif — calé sur la maquette v2 (.compare-table).
   Effet carte : fond paper-soft, bord, rayon, ombre, centré et borné en largeur.
   L'en-tête est clair (paper), pas sombre. */

.mau-compare-table {
  width: 100%;
  max-width: 760px;
  margin: var(--wp--preset--spacing--32) auto;
  background: var(--wp--preset--color--paper-soft);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--custom--shadow--sm);
  overflow: hidden;
  font-size: var(--wp--preset--font-size--base);
}

.mau-compare-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* défaut 3 colonnes (pattern Critère/A/B) */
  align-items: center;
  border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}

.mau-compare-table__row:last-child {
  border-bottom: none;
}

/* Variantes de grille (largeur de colonnes pilotée par classe, pas en inline) */
.mau-compare-table--2col .mau-compare-table__row {
  grid-template-columns: 2fr 1fr;
}

.mau-compare-table--3col .mau-compare-table__row {
  grid-template-columns: 1fr 1fr 1fr;
}

/* En-tête clair (fond paper) — défaut, calé sur .compare-table (tarifs/services).
   La variante --article (cf. plus bas) porte l'en-tête sombre des articles blog. */
.mau-compare-table__row--header {
  background: var(--wp--preset--color--paper);
}

.mau-compare-table__row--header .mau-compare-table__cell {
  font-weight: 600;
  font-size: 15px;
  color: var(--wp--preset--color--ink);
  text-align: center;
}

.mau-compare-table__row--header .mau-compare-table__cell:first-child {
  text-align: left;
}

.mau-compare-table__cell {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--ink-soft);
}

/* Pattern en blocs natifs (lignes = wp:group, cellules = wp:paragraph) :
   neutraliser le block-gap WP qui décalerait lignes et cellules. */
.mau-compare-table > .mau-compare-table__row {
  margin-block: 0;
}

.mau-compare-table__row > .mau-compare-table__cell {
  margin-block: 0;
}

.mau-compare-table__cell--label {
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}

/* Coche ✓ succès / ✗ alerte */
.mau-compare-table__cell [data-check="yes"] { color: var(--wp--preset--color--success); }
.mau-compare-table__cell [data-check="no"]  { color: #D85A30; }

@media (max-width: 767px) {
  /* Maquette mobile : en-tête masqué, lignes empilées 1 colonne */
  .mau-compare-table__row--header {
    display: none;
  }
  .mau-compare-table__row,
  .mau-compare-table--2col .mau-compare-table__row,
  .mau-compare-table--3col .mau-compare-table__row {
    grid-template-columns: 1fr;
    border-bottom: 2px solid var(--wp--preset--color--border-subtle);
    padding-bottom: var(--wp--preset--spacing--12);
    margin-bottom: var(--wp--preset--spacing--12);
  }
  .mau-compare-table__cell {
    padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
  }
  .mau-compare-table__cell--label {
    background: var(--wp--preset--color--paper-soft);
    font-weight: 600;
    border-radius: var(--wp--custom--radius--sm);
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .mau-compare-table--3col .mau-compare-table__row {
    grid-template-columns: 100px 1fr 1fr;
  }
}

/* ── Variante article blog (calée sur .ba-comparison de la maquette v2) ──────
   En-tête sombre, lignes zébrées, cellules label sur fond clair, conteneur
   blanc sans ombre. Réservée aux tableaux insérés dans le corps d'article. */
.mau-compare-table--article {
  background: var(--wp--preset--color--paper);
  box-shadow: none;
}

.mau-compare-table--article .mau-compare-table__row--header {
  background: var(--wp--preset--color--ink);
}

.mau-compare-table--article .mau-compare-table__row--header .mau-compare-table__cell {
  color: var(--wp--preset--color--paper);
  font-size: 14px;
}

.mau-compare-table--article .mau-compare-table__row--header .mau-compare-table__cell:first-child {
  background: var(--wp--preset--color--ink-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

/* Zébrage : une ligne sur deux en paper-soft (l'en-tête est nth-child 1) */
.mau-compare-table--article .mau-compare-table__row:nth-child(even) {
  background: var(--wp--preset--color--paper-soft);
}

.mau-compare-table--article .mau-compare-table__cell {
  padding: var(--wp--preset--spacing--16);
  font-size: 14px;
}

.mau-compare-table--article .mau-compare-table__cell--label {
  background: var(--wp--preset--color--paper);
  font-weight: 600;
  font-size: 13px;
}

@media (max-width: 767px) {
  /* Variante article (#51) : contrairement au tableau tarifs (empilé 1 col sur
     mobile), on GARDE les 3 colonnes compactes avec en-tête visible — fidèle
     maquette v2 (.preview-frame.mobile .ba-comparison : 80px 1fr 1fr, 12px).
     Sans en-tête, on perdrait les libellés de colonne (DRIS / TOU) → tableau
     illisible. Sélecteurs re-matchés en forte spécificité pour écraser la règle
     d'empilement de base (cf. mémoire css-mobile-rematch-has-specificite). */
  .mau-compare-table--article .mau-compare-table__row--header {
    display: grid;
  }
  .mau-compare-table--article .mau-compare-table__row--header,
  .mau-compare-table--article .mau-compare-table__row {
    grid-template-columns: 80px 1fr 1fr;
    border-bottom: 1px solid var(--wp--preset--color--border-subtle);
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .mau-compare-table--article .mau-compare-table__cell {
    padding: 10px 8px;
    font-size: 12px;
  }
  .mau-compare-table--article .mau-compare-table__row--header .mau-compare-table__cell {
    font-size: 12px;
  }
  .mau-compare-table--article .mau-compare-table__row--header .mau-compare-table__cell:first-child {
    font-size: 11px;
  }
  .mau-compare-table--article .mau-compare-table__cell--label {
    background: var(--wp--preset--color--paper);
    font-size: 11px;
  }
}