.block-category-28 #alphabet,
.block-category-28 #liste {
  margin-left: 15px;
}
.block-category-28.block-category {
  display: block !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}
.block-category-28 #alphabet {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 20px 0 20px 15px !important;
  width: 100% !important;
}
.block-category-28 #liste {
  display: block !important;
  width: 100% !important;
  margin: 15px 0 15px 15px !important;
  padding: 0 !important;
  list-style: none !important;
}
.block-category-28 #liste li {
  display: block !important;
  width: 100% !important;
}
<!-- Barre alphabet -->
/* Carte catégorie 28 : on dépile tout verticalement (corrige la liste à droite) */
.block-category-28 {
  display: block;
}               
<div id="alphabet"></div>

                <!-- Conteneur de la liste -->
                <ul id="liste"></ul>

                <script>
                // --- Donn es :   remplacer par vos marques / produits ---
                var marques = [
                    { nom: "Adidas", url: "#" },
                    { nom: "Asics", url: "#" },
                    { nom: "Brancati Gilles", desc:"provençal, à succès" },
                    { nom: "Brouillaud Jean Pierre", desc:"théâtre et romans" },
                    { nom: "Coitoux Milene", desc:"romans français." },
                    { nom: "Courramix", url: "#" },
                    { nom: "", },
                    { nom: "Entropik", url: "#" },
                    { nom: "Fontanelle", url: "#" },
                    { nom: "G ranium", url: "#" },
                    { nom: "Nikonik", url: "#" },
                    { nom: "Optimousse", url: "#" },
                    { nom: "Ouvreb uf", url: "#" },
                    { nom: "Past que & Co", url: "#" },
                    { nom: "Quinzaine", url: "#" },
                    { nom: "Savonnet", url: "#" },
                    { nom: "Tabouret", url: "#" },
                    { nom: "Ultrason", url: "#" },
                    { nom: "Verticulle", url: "#" },
                    { nom: "Xylographe", url: "#" },
                    { nom: "Y ti & Fils", desc:"auteur étranger" },
                    { nom: "Z brure", url: "#" }
                ];

                var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
                var barre = document.getElementById("alphabet");
                var liste = document.getElementById("liste");
                var lettreActive = null;