/* La barre de filtres (dropdowns), le gap de liste, la largeur d'item, l'effet
   hover (outline) et la pagination sont MUTUALISÉS dans
   indus-core/assets/css/cpt-archive.css (classe .cpt-archive sur le <main>).
   Ici : uniquement les specificités de la carte portrait (partagée avec le
   module .module-annuaires). */
.page-annuaires.archive .list-single {
    list-style: none;
    padding: 0;
}


/** Cartes annuaires (archive + module) : carte portrait **/
.module-annuaires .list {
    align-items: stretch;
    column-gap: 1.625rem;
    row-gap: 1.625rem;
}

.module-annuaires .item {
    flex-basis: calc(25% - 1.22rem);
    overflow: hidden;
    transition: all .3s ease
}

.module-annuaires .item:hover {
    background-color: var(--color-primary);
}

.page-annuaires.archive .list-single .item:hover .annuaires-resume .title,
.module-annuaires .item:hover .annuaires-resume .title,
.page-annuaires.archive .list-single .item:hover .annuaires-resume .poste,
.module-annuaires .item:hover .annuaires-resume .poste,
.page-annuaires.archive .list-single .item:hover .annuaires-resume span,
.module-annuaires .item:hover .annuaires-resume span {
    color: var(--color-background);
}

.page-annuaires.archive .list-single .item .link,
.module-annuaires .item .link {
    display: flex;
    flex-direction: column;
    height: 100%;
    column-gap: 0;
    text-decoration: none;
    color: inherit;
}

.page-annuaires.archive .list-single .item .illus-wrapper,
.module-annuaires .item .illus-wrapper {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-form, #f4f0ec);
}

.page-annuaires.archive .list-single .item .illus,
.module-annuaires .item .illus {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    transition: transform .4s ease;
}

/** Dernier recours : aucune image et aucune image de remplacement définie **/
.page-annuaires.archive .list-single .item .illus-wrapper.no-image::after,
.module-annuaires .item .illus-wrapper.no-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-form, #f4f0ec);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b7aca3'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v3h16v-3c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
}

.page-annuaires.archive .list-single .item .annuaires-resume,
.module-annuaires .item .annuaires-resume {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.page-annuaires.archive .list-single .item .title-section-3,
.module-annuaires .item .title-section-3 {
    font-size: 1.125rem;
    text-align: left;
    margin: 0 0 .5rem;
}

.page-annuaires.archive .list-single .item .statuts,
.page-annuaires.archive .list-single .item .sections,
.page-annuaires.archive .list-single .item .dates,
.module-annuaires .item .statuts,
.module-annuaires .item .sections,
.module-annuaires .item .dates {
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.4;
    margin-bottom: .25rem;
    opacity: .8;
}

/** Une date par ligne **/
.page-annuaires.archive .list-single .item .dates .label,
.module-annuaires .item .dates .label {
    display: block;
}

.page-annuaires.archive .list-single .item .more,
.module-annuaires .item .more {
    margin: 1rem 0 0;
    color: var(--color-primary);
    font-weight: 600;
}

@media (max-width: 1023px) {

    .page-annuaires.archive .list-single .item,
    .module-annuaires .item {
        flex-basis: calc(33.33333% - 1.08333rem);
    }
}

@media (max-width: 767px) {

    .page-annuaires.archive .list-single .item,
    .module-annuaires .item {
        flex-basis: calc(50% - .8125rem);
    }
}

.page-annuaires.archive .list-single .item .poste,
.module-annuaires .item .poste {
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.4;
    margin: 0 0 .5rem;
}