{% include 'partials/header.html.twig' %}



  <div class="body-wrapper">
    <div class="container-fluid">

      <div class="card card-body py-3">
        <div class="row align-items-center">
          <div class="col-12">
            <div class="d-sm-flex align-items-center justify-space-between">
              <h4 class="fs-7 fw-bolder mb-4 mb-sm-0 card-title">Annuaire des partenaires</h4>
            </div>
          </div>
        </div>
      </div>

      <section class="pt-md-14 pb-4 pb-md-5">
        <div class="container-fluid">
          <button class="btn bg-danger-subtle text-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
            Filtres
          </button>
          <div class="row" id="annuaire">            
          </div>
        </div>
      </section>

    </div>
  </div>

<style>
/* Étendre les colonnes à la même hauteur */
.el-element-overlay > .col-lg-3,
.el-element-overlay > .col-md-6 {
  display: flex;
  flex-direction: column;
}

/* S'assurer que la carte prend toute la hauteur */
.card.overflow-hidden {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Étendre la hauteur de .el-card-item */
.el-card-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Étendre la div contenant l'image */
.el-card-avatar {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  align-items: center;       /* centre verticalement */
  height: 120px;              /* nécessaire pour que l’alignement vertical fonctionne */
}

/* Uniformiser la hauteur des images + overlay */
.el-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ou center selon le design souhaité */
}

.secteur-card {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.secteur-card.active-secteur {
  border-color: var(--bs-primary);; /* bleu bootstrap */
}
</style>

{% include '/partials/offcanvas/ajax_offcanvas.html.twig' %}
{% include '@Portail/app/annuaire/filtres_offcanvas.html.twig' %}

<script src="{{ asset('assets/js/app/annuaire.js') }}"></script>
{% include 'partials/footer.html.twig' %}