.ecla-main-content {
    display : grid;
    grid-template-columns : 280px 1fr;
    gap : 20px;
}
.ecla-sidebar {
    background : var(--card-bg, #fff);
    padding : 0;
    border-radius : 8px;
    border : 1px solid var(--border-color);
    height : fit-content;
    overflow : hidden;
    box-shadow : 0 2px 8px rgba(0,0,0,0.06);
}
.ecla-sidebar-header {
    display : flex;
    justify-content : space-between;
    align-items : center;
    background : var(--header-bg, #2e7d32);
    padding : 10px 15px;
    color : var(--header-text, #fff);
}
.ecla-sidebar-header h3 {
    color : var(--header-text, #fff);
    margin : 0;
    font-size : 1rem;
    font-weight: 700;
}
.ecla-reset-btn {
    background : rgba(255,255,255,0.15);
    border : 1px solid rgba(255,255,255,0.5);
    color : #fff;
    padding : 2px 8px;
    font-size : 12px;
    border-radius : 3px;
    cursor : pointer;
    transition : background 0.2s;
}
.ecla-reset-btn:hover {
    background : rgba(255,255,255,0.30);
}
#ecla-close-filters {
    background : none;
    border : none;
    color : #fff;
    font-size : 18px;
    cursor : pointer;
    line-height : 1;
    min-width : 44px;
    min-height : 44px;
    padding : 0 8px;
    display : flex;
    align-items : center;
    justify-content: center;
    opacity : 0.8;
}
#ecla-close-filters:hover { opacity: 1; }
.ecla-sidebar > *:not(.ecla-sidebar-header) {
    padding : 0 15px;
}
.ecla-filter-group {
    margin-bottom : 18px;
    padding-top : 4px;
}
.ecla-filter-group:first-of-type {
    padding-top : 14px;
}
.ecla-filter-group h4 {
    margin : 0 0 10px 0;
    border-bottom : 1px solid #eee;
    padding-bottom : 5px;
    color : var(--header-bg, #2e7d32);
    font-size : 0.9rem;
    font-weight : 700;
    text-transform : uppercase;
    letter-spacing : 0.04em;
}
.ecla-sidebar select,
.ecla-sidebar input[type="text"],
.ecla-sidebar input[type="number"] {
    width : 100%;
    padding : 8px;
    border-radius : 4px;
    border : 1px solid var(--border-color);
    font-size : 14px;
    background : #fafcff;
}
.ecla-sidebar select:focus,
.ecla-sidebar input:focus {
    outline : none;
    border-color : var(--header-bg, #2e7d32);
    box-shadow : 0 0 0 2px rgba(46,125,50,0.15);
}
.ecla-specific-filters label {
    display : block;
    margin-top : 8px;
    font-size : 13.5px;
}
.ecla-scrollable-list {
    max-height : 200px;
    overflow-y : auto;
    border : 1px solid #eee;
    padding : 10px;
}
.ecla-scrollable-list label {
    display : block;
    margin-bottom : 5px;
}
/* Compteur statique d'annonces par valeur de filtre. Gris et en chiffres tabulaires : la
   colonne des nombres reste alignée d'une ligne à l'autre, et le compteur se lit comme une
   annotation du libellé, non comme une seconde étiquette. Les libellés des feuilles mobiles
   sont en display:flex — ce <span> y devient simplement le dernier élément de la ligne, sans
   qu'aucune règle propre au mobile soit nécessaire. */
.ecla-filter-count {
    color : #888;
    font-variant-numeric : tabular-nums;
    white-space : nowrap;
}
.ecla-content-area {
    background : transparent;
    min-width : 0;
}
.ecla-catalog-selector {
    display : flex;
    align-items : center;
    margin-bottom : 15px;
}
.ecla-catalog-btn {
    padding : 2.5px 5px;
    border : 1px solid var(--primary-color);
    background : transparent;
    color : var(--primary-color);
    cursor : pointer;
    font-weight : bold;
    font-size : 14px;
    transition : background 0.2s, color 0.2s;
}
.ecla-catalog-btn:first-child {
    border-radius : 4px 0 0 4px;
}
/* Le bouton « ☰ Trie » est un troisième enfant de .ecla-catalog-selector : :last-child
   désignerait désormais ce bouton et non plus l'onglet Services, qui perdrait son arrondi
   droit. On cible l'onglet par adjacence, indépendamment de ce qui le suit. */
.ecla-catalog-btn + .ecla-catalog-btn {
    border-radius : 0 4px 4px 0;
}
.ecla-sort-trigger {
    display : none;
}
.ecla-catalog-btn.active {
    background : var(--primary-color);
    color : #fff;
}
.ecla-tab-count {
    display : inline-block;
    margin-left : 5px;
    font-size : 11px;
    font-weight : 600;
    opacity : 0.75;
    vertical-align: middle;
}
.ecla-results-bar {
    display : flex;
    justify-content : flex-end;
    align-items : center;
    margin-bottom : 5px;
    background : rgba(255,255,255,0.70);
    padding : 1px 2px;
    border-radius : 6px;
    border : 1px solid rgba(21,101,192,0.12);
}
#ecla-results-count {
    font-size : 12px;
    color : #FF1493;
    font-weight: 600;
    margin-left : 12px;
}
#ecla-sort-by {
    padding : 2.5px 2.5px;
    border : 1px solid var(--border-color);
    border-radius : 4px;
    font-size : 12px;
    background : #fff;
}
#ecla-content-grid {
    display : grid;
    grid-template-columns : repeat(auto-fill, minmax(220px, 1fr));
    gap : 20px;
}
.ecla-no-results {
    grid-column : 1 / -1;
    text-align : center;
    padding : 40px 20px;
    color : #777;
    font-size : 1.1em;
}
.ecla-card-skeleton {
    background : var(--card-bg, #fff);
    border-radius : 10px;
    overflow : hidden;
    box-shadow : 0 2px 8px rgba(0,0,0,0.07);
}
.ecla-skeleton-img {
    width : 100%;
    height : 160px;
    background : linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size : 200% 100%;
    animation : eclaSkeletonPulse 1.5s ease-in-out infinite;
}
.ecla-skeleton-body {
    padding : 14px;
}
.ecla-skeleton-line {
    height : 14px;
    border-radius : 4px;
    background : linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size : 200% 100%;
    animation : eclaSkeletonPulse 1.5s ease-in-out infinite;
    margin-bottom : 10px;
}
.ecla-skeleton-line--short { width: 55%; }
.ecla-skeleton-line--medium { width: 80%; }
.ecla-skeleton-line--full { width: 100%; }
@keyframes eclaSkeletonPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ecla-skeleton-img,
    .ecla-skeleton-line {
        animation : none;
        background: #ebebeb;
    }
}
.ecla-empty-state {
    grid-column : 1 / -1;
    text-align : center;
    padding : 40px 20px 32px;
    display : flex;
    flex-direction : column;
    align-items : center;
    gap : 12px;
}
.ecla-empty-state__icon svg {
    width : 72px;
    height : 72px;
    opacity: 0.45;
}
.ecla-empty-state__title {
    font-size : 1.15em;
    font-weight : 700;
    color : #444;
    margin : 0;
}
.ecla-empty-state__reason {
    font-size : 0.92em;
    color : #777;
    margin : 0;
    max-width : 340px;
}
.ecla-empty-state__actions {
    display : flex;
    flex-wrap : wrap;
    gap : 10px;
    justify-content : center;
    margin-top: 6px;
}
.ecla-empty-state__btn {
    padding : 9px 18px;
    border : 1.5px solid var(--primary-color, #e07800);
    background : transparent;
    color : var(--primary-color, #e07800);
    border-radius : 5px;
    font-size : 13px;
    font-weight : 600;
    cursor : pointer;
    transition : background 0.18s, color 0.18s;
}
.ecla-empty-state__btn:hover {
    background : var(--primary-color, #e07800);
    color : #fff;
}
.ecla-pagination-bar {
    display : flex;
    gap : 6px;
    justify-content : center;
    margin-bottom : 12px;
    flex-wrap : wrap;
}
.ecla-page-btn {
    min-width : 38px;
    height : 38px;
    padding : 0 10px;
    border : 1.5px solid var(--primary-color, #e07800);
    background : transparent;
    color : var(--primary-color, #e07800);
    border-radius : 6px;
    cursor : pointer;
    font-weight : 600;
    font-size : 14px;
    transition : background 0.15s, color 0.15s;
}
.ecla-page-btn:hover { background: var(--primary-color, #e07800); color: #fff; }
.ecla-page-btn.is-current {
    background : var(--primary-color, #e07800);
    color : #fff;
    pointer-events : none;
}
.ecla-pagination {
    text-align : center;
    margin-top : 20px;
}
#ecla-load-more {
    padding : 12px 25px;
    background : var(--header-bg, #2e7d32);
    color : #fff;
    border : none;
    border-radius : 5px;
    cursor : pointer;
    font-size : 16px;
    font-weight : 600;
    transition : background 0.2s, opacity 0.3s;
}
#ecla-load-more:hover:not(:disabled) {
    background : var(--header-bg-dark, #1b5e20);
}
#ecla-load-more:disabled {
    background : #ccc;
    cursor : not-allowed;
    opacity : 0.6;
}
#ecla-scroll-sentinel {
    height : 1px;
    width : 100%;
}
@media (max-width: 992px) {
    .ecla-main-content {
        grid-template-columns : 240px 1fr;
    }
}
@media (max-width: 768px) {
    .ecla-sidebar {
        display : none;
    }
    .ecla-main-content {
        display : block;
        padding-bottom : 80px;
    }
    .ecla-mobile-header {
        display : flex;
        justify-content : flex-end;
        margin-bottom : 15px;
    }
    /* Le compteur de résultats a rejoint la rangée des onglets ; la barre ne contient plus
       que le select de tri, lui-même masqué sur mobile au profit du bouton « ☰ Trie ». Masquer
       le conteneur évite d'afficher une bande vide sous les onglets. Le select reste dans le
       DOM (source de vérité du tri, lue par filters.js). */
    .ecla-results-bar {
        display : none;
    }
    #ecla-sort-by {
        display : none;
    }
    .ecla-catalog-selector {
        display : flex;
        align-items : center;
        gap : 8px;
    }
    .ecla-sort-trigger {
        display : inline-flex;
        align-items : center;
        justify-content : center;
        gap : 6px;
        margin-left : auto;
        flex-shrink : 0;
        min-height : 34px;
        padding : 5px 12px;
        border : 1px solid var(--primary-color);
        border-radius : 6px;
        background : transparent;
        color : var(--primary-color);
        font-size : 13px;
        font-weight : 700;
        line-height : 1.2;
        cursor : pointer;
        transition : background 0.2s, color 0.2s;
    }
    .ecla-sort-trigger:hover,
    .ecla-sort-trigger:focus-visible {
        background : var(--primary-color);
        color : #fff;
    }
    .ecla-sort-trigger-icon {
        font-size : 15px;
        line-height : 1;
    }
    #ecla-content-grid {
        grid-template-columns : 1fr;
        gap : 14px;
    }
    @media (min-width: 480px) {
        #ecla-content-grid {
            grid-template-columns : repeat(2, 1fr);
        }
    }
}