:root {
  --color-primary: #0D2342;
  --color-secondary: #F0C2B5;
  --color-tertiary: #FFED9E;
  --color-quaternary: #D9F5A8;
  --color-quinary: #E38A73;
  --color-gray-350: #d0d0d0;
  --color-gray-100: #f6f6f6;
}

.timeline {
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 13px;

    height: 100%;

    border-left: 1px solid var(--color-primary);
}

@media screen and (min-width: 768px) {
    .timeline {
        padding-left: 0;
    }
    .timeline::before {
        left: 50%;
    }
}

@media screen and (max-width: 767px) {
    .timeline {
        padding-left: 64px;
    }
}
@media screen and (max-width: 576px) {
    .timeline {
        padding-left: 48px;
    }
}

.timeline__item {
    position: relative;
}

.timeline__item::before {
    content: '';
    position: absolute;
    top: 0;

    width: 26px;
    height: 24px;

    background-image: url("icon--primary.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.timeline__item + .timeline__item {
    margin-top: 28px;
}

@media screen and (min-width: 768px) {
    .timeline__item {
        width: 50%;
        box-sizing: border-box;
    }
    .timeline__item + .timeline__item {
        margin-top: 32px;
    }
    .timeline__item--even {
        margin-left: 50%;
        padding-left: 32px;
    }
    .timeline__item--odd {
        padding-right: 32px;
    }
    .timeline__item--even::before {
        left: -13px;
    }
    .timeline__item--odd::before {
        left: calc(100% - 13px);
    }
}

@media screen and (min-width: 1200px) {
    .timeline__item--even {
        padding-left: 64px;
    }
    .timeline__item--odd {
        padding-right: 64px;
    }
}

@media screen and (max-width: 767px) {
    .timeline__item::before {
        left: -64px;
    }
}

@media screen and (max-width: 575px) {
    .timeline__item::before {
        left: -48px;
    }
}

.timeline__item-title {
    font-stretch: 75%;

    margin-bottom: 8px;
}

.timeline__item-bodytext p {
    margin: 8px 0;
}

.timeline__item-bodytext p:first-of-type {
    margin-top: 0;
}

.timeline__item-images {
    margin-top: 16px;
}

/* Variation sur fond bleu foncé */

.bg-color--primary .timeline__item::before {
    background-image: url("icon--tertiary.svg");
}

.bg-color--primary .timeline::before {
    border-color: var(--color-tertiary);
}

.bg-color--primary .timeline__item-bodytext {
    color: #FFF;
}

.bg-color--primary .timeline__item-bodytext ul:not([class]) li::before {
	background-image: url("pentagon--white.svg");
}