.elementor-20176 .elementor-element.elementor-element-6f217ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-b34384f *//* ================================================================
   Syndeac — Liste des soutiens (élu·es et responsables politiques)
   CSS à coller dans Elementor : widget HTML > onglet Avancé >
   CSS personnalisé, ou dans Apparence > Personnaliser > CSS
   additionnel si le style doit s'appliquer partout où le widget
   est utilisé. Palette reprise de la charte Syndeac (rouge, aubergine).
   ================================================================ */

.sde-soutiens {
  --sde-rouge: #E95053;
  --sde-aubergine: #831F82;
  --sde-aubergine-soft: rgba(131, 31, 130, 0.08);
  --sde-texte: #1f1a1f;
  --sde-texte-discret: #6b636b;
  --sde-bordure: #e7dfe6;
  --sde-fond: #ffffff;

  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto;
  font-family: inherit;
  color: var(--sde-texte);
}

.sde-soutiens *,
.sde-soutiens *::before,
.sde-soutiens *::after {
  box-sizing: border-box;
}

/* Barre recherche + compteur, collante en haut de la liste au scroll */
.sde-soutiens__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--sde-fond);
  padding: 4px 4px 14px;
  border-bottom: 2px solid var(--sde-aubergine);
  margin-bottom: 4px;
}

.sde-soutiens__search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 220px;
  display: flex;
  align-items: center;
}

.sde-soutiens__search-icon {
  position: absolute;
  left: 16px;
  top: 50% !important;
  transform: translateY(-50%);
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  flex-shrink: 0;
  max-width: none;
  color: var(--sde-aubergine);
  pointer-events: none;
}

.sde-soutiens__search {
  width: 100%;
  /* Hauteur et line-height fixes : c'est ce qui centre verticalement
     le texte/placeholder de façon fiable, quels que soient la
     police et les réglages hérités du thème WordPress. Le padding
     horizontal reste généreux à gauche pour ne pas mordre sur la
     loupe (verrouillée en position/taille ci-dessus). */
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 14px 0 46px !important;
  border: 1.5px solid var(--sde-bordure);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--sde-texte);
  background: var(--sde-fond);
  box-shadow: none;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sde-soutiens__search::placeholder {
  color: var(--sde-texte-discret);
  line-height: normal;
}

.sde-soutiens__search:focus {
  outline: none;
  border-color: var(--sde-rouge);
  box-shadow: 0 0 0 3px rgba(233, 80, 83, 0.18);
}

.sde-soutiens__count {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-left: 16px;
  border-left: 1px solid var(--sde-bordure);
  font-size: 0.85rem;
  color: var(--sde-texte-discret);
  white-space: nowrap;
}

.sde-soutiens__count-nb {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sde-aubergine);
  font-variant-numeric: tabular-nums;
}

/* Liste, défilante pour rester compacte même si elle s'allonge */
.sde-soutiens__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 640px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--sde-bordure);
  border-top: none;
  border-radius: 0 0 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--sde-aubergine) transparent;
}

.sde-soutiens__list::-webkit-scrollbar {
  width: 8px;
}

.sde-soutiens__list::-webkit-scrollbar-thumb {
  background-color: var(--sde-aubergine);
  border-radius: 999px;
}

.sde-soutiens__item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--sde-bordure);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Un item masqué par la recherche (attribut HTML "hidden") ne doit
   jamais rester visible : cette règle doit passer après la précédente. */
.sde-soutiens__item[hidden] {
  display: none;
}

/* Ligne de séparation verticale entre les deux colonnes */
.sde-soutiens__item:nth-child(odd) {
  border-right: 1px solid var(--sde-bordure);
}

.sde-soutiens__item:hover {
  background: var(--sde-aubergine-soft);
}

.sde-soutiens__nom {
  font-weight: 700;
  color: var(--sde-aubergine);
  font-size: 0.98rem;
  line-height: 1.3;
}

.sde-soutiens__fonction {
  font-size: 0.85rem;
  color: var(--sde-texte-discret);
  font-style: italic;
  line-height: 1.35;
}

.sde-soutiens__empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--sde-texte-discret);
  font-style: italic;
}

/* États du chargement JSON : occupent toute la largeur de la grille */
.sde-soutiens__loading,
.sde-soutiens__error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 16px;
  font-style: italic;
}

.sde-soutiens__loading {
  color: var(--sde-texte-discret);
}

.sde-soutiens__error {
  color: var(--sde-rouge);
}

/* Mobile : une seule colonne, plus confortable à lire */
@media (max-width: 640px) {
  .sde-soutiens__list {
    grid-template-columns: 1fr;
    max-height: 70vh;
  }
  .sde-soutiens__item:nth-child(odd) {
    border-right: none;
  }
  .sde-soutiens__bar {
    flex-direction: column;
    align-items: stretch;
  }
  .sde-soutiens__count {
    justify-content: center;
    padding-left: 0;
    border-left: none;
    padding-top: 6px;
    border-top: 1px solid var(--sde-bordure);
  }
}/* End custom CSS */