<!-- 1) Remix Icon (si pas déjà ajouté dans head) -->
<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">

<!-- 2) Wrapper + tableau -->
<div class="cmp-table-wrapper">
  <table class="cmp-table" role="table" aria-label="Comparatif fournisseurs">
    <thead>
      <tr>
        <th>Caractéristiques</th>
        <th>Temyfy</th>
        <th>ThemeForest</th>
        <th>Envato Elements</th>
        <th>GPL Vault</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Accès illimité</td>
        <td class="yes"><i class="ri-checkbox-circle-fill" aria-hidden="true"></i><span class="sr-only">Oui</span></td>
        <td class="no"><i class="ri-close-circle-fill" aria-hidden="true"></i><span class="sr-only">Non</span></td>
        <td class="yes"><i class="ri-checkbox-circle-fill" aria-hidden="true"></i><span class="sr-only">Oui</span></td>
        <td class="yes"><i class="ri-checkbox-circle-fill" aria-hidden="true"></i><span class="sr-only">Oui</span></td>
      </tr>

      <tr>
        <td>Prix annuel</td>
        <td>Bas</td>
        <td>Élevé</td>
        <td>Élevé</td>
        <td>Moyen</td>
      </tr>

      <tr>
        <td>Licence GPL légale</td>
        <td class="yes">Oui</td>
        <td class="yes">Oui</td>
        <td class="yes">Oui</td>
        <td>Parfois douteux</td>
      </tr>

      <tr>
        <td>Paiement Mobile Money</td>
        <td class="yes">Oui</td>
        <td class="no">Non</td>
        <td class="no">Non</td>
        <td class="no">Non</td>
      </tr>

      <tr>
        <td>Support client réactif</td>
        <td>24h</td>
        <td>Limité</td>
        <td>Oui</td>
        <td>Non</td>
      </tr>
    </tbody>
  </table>
</div>

:root{
  --cmp-accent:#6a1b9a; /* si tu veux appliquer ta couleur */
  --ok:#2fa45a;
  --ko:#e04b4b;
  --bg:#ffffff;
  --muted:#6b7280;
}
.cmp-table-wrapper{overflow-x:auto;padding:0.5rem 0;}
.cmp-table{width:100%;min-width:760px;border-collapse:collapse;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;}
.cmp-table thead th{background:var(--cmp-accent);color:#fff;padding:12px 16px;text-align:left;font-weight:600;}
.cmp-table td, .cmp-table th{border:1px solid rgba(0,0,0,0.06);padding:12px 16px;vertical-align:middle;}
.cmp-table tbody tr:hover{background:rgba(0,0,0,0.02);}
.cmp-table td .ri-checkbox-circle-fill{color:var(--ok);font-size:1.05rem;}
.cmp-table td .ri-close-circle-fill{color:var(--ko);font-size:1.05rem;}
.cmp-table td.yes{color:var(--ok);font-weight:600;}
.cmp-table td.no{color:var(--muted);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive: mobile – on garde le scroll horizontal (simple et fiable).
   Si tu préfères empiler verticalement, je peux te donner le CSS 'stacking' en plus. */
@media (max-width:720px){
  .cmp-table{min-width:600px;}
}