/* Animation d'apparition des cartes — scoped sur .com-finder (toujours présent sur la page annuaire) */
/* --card-delay est défini par JS (stagger par carte) ; opacity déphasée de 0.1s pour rester visible après le translate */
.com-finder .card.result__body {
    opacity: 0;
    transform: translateY(28px);
    transition:
        transform 0.45s ease-out var(--card-delay, 0s),
        opacity   0.8s ease     calc(var(--card-delay, 0s) + 0.1s);

    &.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .com-finder .card.result__body {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.annuaire {

   .category__intro {
        margin-block-end: 0;
    }

    .category__description p:last-child {
        padding-block-end: var(--space-sm);
    }

    label{
        margin-right : var(--space-lg);
    }
    .moduletable.search {
        margin: -3rem 2rem 0;

        @container (width < 640px) {
            margin: 0;
        }

        .form-search {
            display: flex;
            flex-direction: row;

            @container (width < 640px) {
                flex-direction: column;
            }
        }

        search {
            flex-grow: 1;
        }
    }

    .jfilters-item-link--button .jfilters-item__text {
        border-radius: var(--radius-md);
        color : var(--color-contrast) ;
        border-color: var(--color-contrast);  
    }
    

    .jfilters-filter-header__toggle {
        display : none;
          @container (width < 640px) {
            display: initial;
            }
    }
    .jfilters-filter-container { border : none}

    .jfilters-filter-container__inner { text-align: center;}

    .jfilters-item-link--selected .jfilters-item__text,
    .jfilters-item-link:hover .jfilters-item__text{
        transition: all 0.2s ease-in;
        color : var(--color-white) ;
        background-color: var(--color-primary);
        border-color: var(--color-primary);

 
   }
    

    @container (width >= 640px) {
        .moduletable.search.card.contrast,
        .main-top,
        main {
            padding-inline: var(--space-lg);
        }
    }

   #search-form { display : none} /* On cache le composant finder sur la vue annuaire car il y a déjà le module au dessus)*/

    #search-result-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
        gap: var(--space-xl);
    }

    .result__body.card{
        &:not(:has(figure)) {
            padding-top: calc(var(--space-3xl) + 1rem);
        }
        padding-top: var(--space-sm);
        border : none ;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url(../../images/forme-complet.svg) ;
        background-repeat: repeat-x;
        background-position: 0 top;
        background-size: 25%;
        text-align: center;

                
        figure {
            background-color: var(--color-white);
            border-radius: 50%;
            padding: var(--space-lg);
            margin-bottom: var(--space-sm);
            position: relative;
            &:after {
                content: "";
                display: block;
                inset : 0 ;
                box-shadow: inset 0px 0px 0px 8px var(--color-white);
                background-color: transparent;
                position: absolute;
                border-radius: 50%;
            }
        }
        img {
            width: 90px;
            aspect-ratio: 1;
            object-fit: contain;
        }

        h2 {
            margin-bottom: var(--space-sm);
            color: var(--color-contrast);
            font-size: var(--text-card-title);
        }
        p{
            font-size: var(--text-card-description);
            color: var(--color-contrast);
        }
        
    }



}

.result__metiers-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-xs);
            margin: var(--space-lg) 0 0;
            padding: 0;
            list-style: none;
            width: 100%;
        }

        .result__metier-tag {
            --tag-dot-color: var(--color-accent-1);

            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            max-width: min(100%, 260px);

            @media (width >= 640px) {
                max-width: 100%;
            }
            padding: 0.45rem 0.8rem;
            border-radius:var(--radius-pill);
            background: var(--color-white) ;            
            font-size: var(--text-nav-size);
            line-height: 1.2;
            white-space: nowrap;
        }

        .result__metier-tag__dot {
            width: 0.45rem;
            height: 0.45rem;
            flex: 0 0 auto;
            border-radius: 50%;
            background: var(--tag-dot-color);
        }

        .result__metier-tag__label {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Palette tournante */
        .result__metier-tag.tag--0 {
            --tag-dot-color: var(--color-accent-1);
        }

        .result__metier-tag.tag--1 {
            --tag-dot-color: var(--color-accent-3);
        }

        .result__metier-tag.tag--2 {
            --tag-dot-color: var(--color-accent-2);
        }

        .result__metier-tag.tag--3 {
            --tag-dot-color: var(--color-contrast);
        }

/* ─── mod_articles layout "activites" — grille hors contexte .annuaire ─── */

.mod-activites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: var(--space-xl);
}

.mod-activites-grid .card.result__body {
    opacity: 0;
    transform: translateY(28px);
    transition:
        transform 0.45s ease-out var(--card-delay, 0s),
        opacity   0.8s ease     calc(var(--card-delay, 0s) + 0.1s);

    &.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mod-activites-grid .card.result__body {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.mod-activites-grid .result__body.card {
    &:not(:has(figure)) {
        padding-top: calc(var(--space-3xl) + 1rem);
    }
    padding-top: var(--space-sm);
    border: none;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../../images/forme-complet.svg);
    background-repeat: repeat-x;
    background-position: 0 top;
    background-size: 25%;
    text-align: center;

    figure {
        background-color: var(--color-white);
        border-radius: 50%;
        padding: var(--space-lg);
        margin-bottom: var(--space-sm);
        position: relative;
        &:after {
            content: "";
            display: block;
            inset: 0;
            box-shadow: inset 0px 0px 0px 8px var(--color-white);
            background-color: transparent;
            position: absolute;
            border-radius: 50%;
        }
    }
    img {
        width: 90px;
        aspect-ratio: 1;
        object-fit: contain;
    }

    h2 {
        margin-bottom: var(--space-sm);
        color: var(--color-contrast);
        font-size: var(--text-card-title);
    }
    p {
        font-size: var(--text-card-description);
        color: var(--color-contrast);
    }
}