solution provisoire accordion liste théâtres

assets/scss/custom/tricks.scss

@@ -16,6 +16,11 @@
   color: $light !important;
   }
 
+#accordionTheatersBalises .card-header.collapsed {
+  background-color: $dark !important;
+  color: $light !important;
+  }
+
 // change text offreBalises on hover
 .offreBalises:hover span {
   display: none

templates/theater/list.html.twig

@@ -2,13 +2,14 @@
 {% block title %}Liste des théâtres{% endblock %}
 
 {% block body %}
+
 <h1 class="w-100 font-weight-bold mb-3">LES THÉÂTRES BALISES</h1>
-<div class="accordion" id="accordionTheatersBalises">
-    {% set city = "" %}
-    {% for theater in theaters|sort((a, b) => a.city <=> b.city) %}
-    {% if city != theater.city %}
-    <div class="card bg-dark border-y border-light">
-        <a class="h4 card-header collapsed text-light"
+{% set city = "" %}
+{% for theater in theaters|sort((a, b) => a.city <=> b.city) %}
+{% if city != theater.city %}
+<div id="accordionTheatersBalises">
+    <div class="card bg-dark">
+        <a class="h4 card-header bg-light collapsed text-dark"
            type="button"
            data-toggle="collapse"
            data-target="#{{ theater.city | replace({' ': '_', '\'': '-'}) }}"
@@ -32,10 +33,9 @@
                 </div>
             </div>
         </div>
-        {% if city != "" %}
     </div>
-    {% endif %}
+    {% set city = theater.city %}
+    {% endfor %}
 </div>
-{% set city = theater.city %}
-{% endfor %}
+
 {% endblock %}