/* Pattern: Pour / Contre */

.mau-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--24);
}

.mau-proscons__col {
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--32);
}

.mau-proscons__col--pro {
  background: var(--wp--preset--color--paper-soft);
  border: 1px solid var(--wp--preset--color--border-subtle);
}

.mau-proscons__col--con {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--border-subtle);
}

.mau-proscons__col > .wp-block-heading {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  margin-block-end: var(--wp--preset--spacing--16);
}

.mau-proscons__col--pro > .wp-block-heading { color: #0F6E56; }
.mau-proscons__col--con > .wp-block-heading { color: #B45309; }

/* Icône ✕ devant le titre de la colonne con (symétrique du ✓ dans le HTML) */
.mau-proscons__col--con > .wp-block-heading::before {
  content: "\2715\00A0";
  color: #B45309;
}

.mau-proscons__item {
  display: block;
  margin: 0; /* items nativisés en wp:paragraph : neutralise la marge UA du <p> */
  font-size: var(--wp--preset--font-size--base);
  padding-block: var(--wp--preset--spacing--8);
  border-top: 1px solid rgba(0,0,0,0.06);
}

.mau-proscons__item:first-of-type {
  border-top: none;
}

/* Icônes ✓/✕ inline devant chaque item */
.mau-proscons__col--pro .mau-proscons__item::before {
  content: "\2713\00A0";
  color: #0F6E56;
  font-weight: 700;
}

.mau-proscons__col--con .mau-proscons__item::before {
  content: "\2715\00A0";
  color: #B45309;
  font-weight: 700;
}

/* Items à icône EXPLICITE <span> (comparaisons avantage/inconvénient +/−, ex.
   DRIS vs TOU où chaque colonne a ses + et ses −). La maquette pose l'icône
   dans un <span> coloré, en flex à côté du texte. On supprime alors le ✓/✕
   auto du ::before (réservé aux items SANS span des pages canoniques) pour
   éviter la double icône. */
.mau-proscons__item:has(.mau-proscons__item-icon) {
  display: flex;
  gap: var(--wp--preset--spacing--8);
  align-items: flex-start;
}
.mau-proscons__col .mau-proscons__item:has(.mau-proscons__item-icon)::before {
  content: none;
}
.mau-proscons__item-icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 700;
}
.mau-proscons__item-icon--plus  { color: #1D9E75; }
.mau-proscons__item-icon--minus { color: #D85A30; }

/* Sous-libellé de colonne (« À prendre en compte », posé en <em> atténué) :
   ce n'est pas un vrai item pro/con → pas d'icône ✓/✕ auto du ::before.
   C'est le seul item à <em> sans <strong>. */
.mau-proscons__col .mau-proscons__item:has(> em):not(:has(strong))::before {
  content: none;
}

@media (max-width: 767px) {
  .mau-proscons {
    grid-template-columns: 1fr;
  }
}