.ogalliance-compare table {
  border-collapse: separate;
  /* Espace horizontal de 15px entre les colonnes, 0 vertical */
  border-spacing: 15px 0;
}

/* --- Colonne de Gauche (Libellés) --- */
.ogalliance-compare__label-cell {
  background-color: #f3f0ee; /* Le beige clair */
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
}
.ogalliance-compare tbody {
  background-color: var(--color-brun-claire);
}
/* Arrondi pour le premier élément de gauche */
tbody tr:first-child .ogalliance-compare__label-cell {
  border-top-left-radius: 20px;
}
/* Arrondi pour le dernier élément de gauche */
tbody tr:last-child .ogalliance-compare__label-cell {
  border-bottom-left-radius: 20px;
  border-bottom: none;
}
.ogalliance-compare tr,
.ogalliance-compare__corner {
  background: transparent;
}
.ogalliance-compare__arrow {
  color: #56c4d0; /* Bleu clair flèche */
  font-size: 0.7rem;
}

/* --- Colonnes de Droite (Valeurs) --- */
.ogalliance-compare__header {
  background-color: #2f2c5c; /* Violet foncé */
  font-weight: 700;
  font-size: 1.1rem;
}

.ogalliance-compare__value-cell {
  /* Le fond blanc est défini dans le HTML via bg-white, 
     mais on ajoute la bordure ici */
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

/* Footer fictif pour faire les arrondis du bas des colonnes blanches */
.ogalliance-compare__footer-col {
  height: 15px; /* Juste pour l'arrondi */
}
.ogalliance-compare__footer-left {
  background-color: transparent; /* Pas de fond en bas à gauche selon l'image */
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .ogalliance-compare {
    overflow-x: auto;
  }
  .ogalliance-compare table {
    min-width: 600px; /* Force le scroll sur mobile */
  }
}