.opac-global-template-timeline {
    --timeline_line_width: 4px;
    --time_line_area_width: 8rem;
    flex: 1;
    display: flex;
    position: relative;
    padding: 2em 0;
    gap: var(--time_line_area_width);
    align-items: center;
}

.opac-global-template-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc((var(--time_line_area_width)/2) - (var(--timeline_line_width)/2));
    height: 100%;
    width: var(--timeline_line_width);
    background: #ddd;
}

.opac-global-template-timeline-item-area {
    flex: 1;
    margin-left: var(--time_line_area_width);
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
    background-color: var(--lsOpac-block-content-bg);
    color: var(--lsOpac-block-content-color);
    border-width: var(--lsOpac-block-content-border-width);
    border-style: solid;
    border-color: var(--lsOpac-block-content-border-color);
    border-top-left-radius: var(--lsOpac-block-content-radius-top);
    border-top-right-radius: var(--lsOpac-block-content-radius-top);
}

.opac-global-template-timeline-item-area::before {
    content: "";
    height: 1rem;
    position: absolute;
    width: 1rem;
    border: solid;
    border-width: 0.5rem;
    border-color: transparent;
    border-right-color: var(--lsOpac-block-content-border-color);
    top: calc(50% - 0.5rem);
    left: calc(-1rem - var(--lsOpac-block-content-border-width));
}



.opac-global-template-timeline-complement-area {
    flex: 1;
    overflow: hidden;
    padding: 0.25rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

.opac-global-template-timeline-complement-area .owl-carousel .owl-stage-outer {
    overflow: unset;
}

.opac-global-template-timeline-complement-area .owl-stage-outer .item{
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}

.opac-global-template-timeline-puce-area {
    --opac-global-template-timeline-puce-size: 5rem;
    max-width: var(--opac-global-template-timeline-puce-size);
    max-height: var(--opac-global-template-timeline-puce-size);
    position: absolute;
    left: calc((var(--time_line_area_width) - var(--opac-global-template-timeline-puce-size))/2);
}

.opac-global-template-timeline-round-puce {
    box-shadow: 0 0 0 4px var(--lsOpac-tags-bg), inset 0 2px 0 rgb(0 0 0 / 8%), 0 3px 0 4px rgb(0 0 0 / 5%);
    border-radius: 50%;
    background-color: var(--lsOpac-page-bg);
}

.opac-global-template-timeline-empty-puce {
    height: 5rem;
    width: 5rem;
}

.opac-global-template-timeline-image {
    max-width: 100%;
    height: 7rem;
}

.opac-global-template-timeline-texte {
    max-height: 8rem;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .opac-global-template-timeline::before {
        content: '';
        left: 50%;
        margin-left: calc(0px - (var(--timeline_line_width)/2));
    }
    .opac-global-template-timeline-puce-area {
        left: calc(50% - (var(--opac-global-template-timeline-puce-size)/2));
    }
    .opac-global-template-timeline-item-area {
        margin: 0rem;
    }

    .opac-global-template-timeline-complement-area {
        margin-right: 0.25rem;
        margin-left: 0.25rem;
    }

    /* traitement spécial pour le layout timeline */

    .opac-new-search-result-display-mode-timeline:nth-child(odd) .opac-global-template-timeline-item-area::before {
        border-left-color: var(--lsOpac-block-content-border-color);
        right: calc(-1rem - var(--lsOpac-block-content-border-width));
        border-right-color: transparent;
        left: unset;
    }
}