@charset "UTF-8";


/* Common
   ========================================================================== */
   

.dko-timeline__title,
.dko-timeline__record__title {
    color: var(--pmn--pink);
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__record__title,
.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__record__text{
    color: black;
}

/*section.transparent .dko-timeline__title,*/
/*section.white .dko-timeline__title{*/
/*    color: var(--pmn--pink);*/
/*}*/


.dko-timeline__record__title {
        color: black;
}

@media screen and (max-width: 767px) {
    .dko-timeline {
        padding: 45px var(--global-block-padding) 40px;
    }
    .dko-timeline__title {
        font-size: 32px;
        line-height: 32px;
    }
    .dko-timeline__text {
        font-size: 14px;
        line-height: 22px;
        margin-top: 29px;
    }
}
@media screen and (min-width: 768px) {
    .dko-timeline {
        padding: 80px var(--global-block-padding);
    }
    .dko-timeline__title {
        font-size: 48px;
        line-height: 52px;
        text-align: center;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .dko-timeline__text {
        font-size: 18px;
        line-height: 28px;
        text-align: center;
        margin-top: 16px;
        max-width: 770px;
        margin-left: auto;
        margin-right: auto;
    }
    .dko-timeline__cta {
        display: flex;
        width: fit-content;
    }
}

/* Process Timeline
   ========================================================================== */
.dko-timeline--process__records-list {
    --row-gap: 40px;
    --number-size: 40px;
    --line-thickness: 2px;
    list-style-type: none;
    padding: 0;
    
    counter-reset: record;
    
    display: flex;
    flex-wrap: nowrap;
    row-gap: var(--row-gap);
    
    
    transform: translateZ(0); /* Ensure the ::afters are *above* the block background */
}
.dko-timeline--process__record {
    counter-increment: record;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    
    color: black;
    font-weight: 500;
    
    position: relative;
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline--process__record {
    color:white;
}

.dko-timeline--process__record::before {
    content: counter(record);
    
    width: var(--number-size);
    height: var(--number-size);
    flex: none;
    
    background-color: var(--pmn--blue-light);
    color: var(--ftc--white);
    
    border-radius: calc(var(--number-size) / 2);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 12px;
    line-height: auto;
    font-weight: 700;
    
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline--process__record::before {
    background-color: white;
    color: var(--pmn--pink);
}


.dko-timeline--process__record::after {
    content: "";
    background: var(--pmn--blue-light);
    position: absolute;
    
    z-index: -1;
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline--process__record::after {
    background-color:white;
}

@media screen and (max-width: 767px) {
    
    .dko-timeline--process__records-list {
        margin-top: 60px;
    }
    .dko-timeline--process__record {
        font-size: 14px;
        line-height: 18px;
    }
    .dko-timeline--process .dko-timeline__cta {
        margin-top: 44px;
    }
}
@media screen and (min-width: 768px) {
    .dko-timeline--process__records-list {
        width: fit-content;
        margin: 111px auto 0px;
    }
    .dko-timeline--process__record {
        font-size: 18px;
        line-height: 26px;
        
        row-gap: 40px;
    }
    .dko-timeline--process .dko-timeline__cta {
        margin: 80px auto 0;
    }
}
@media screen and (max-width: 1199px) {
    .dko-timeline--process__records-list {
        flex-direction: column;
    }
    .dko-timeline--process__record {
        flex-direction: row;
        column-gap: 13px;
    }
    
    .dko-timeline--process__record br {
        display: none;
    }
    
    
    .dko-timeline--process__record::after {
        width: var(--line-thickness);
        height: calc(100% + var(--row-gap));
        left: calc((var(--number-size) - var(--line-thickness)) / 2);
    }
    .dko-timeline--process__record:first-child::after,
    .dko-timeline--process__record:last-child::after {
        height: calc(50% + var(--row-gap));
    }
    .dko-timeline--process__record:first-child::after {
        top: 50%;
    }
    .dko-timeline--process__record:last-child::after {
        bottom: 50%;
    }
    
}
@media screen and (min-width: 1200px) {
    .dko-timeline--process__records-list {
        width: auto;
        margin: 111px 0px 0px;
        flex-direction: row;
        justify-content: space-between;
    }
    .dko-timeline--process__record {
        flex-direction: column;
        text-align: center;
        width: max(150px, 11vw);
    }
    .dko-timeline--process__record:first-child::after,
    .dko-timeline--process__record:last-child::after {
        top: calc((var(--number-size) - var(--line-thickness)) / 2);
        width: calc(50vw - var(--global-block-padding) );
        height: var(--line-thickness);
    }
    .dko-timeline--process__record:first-child::after {
        left: 50%;
    }
    .dko-timeline--process__record:last-child::after {
        right: 50%;
    }
}

/*
 * 3 item  hr @ < 768
 * 4 item = hr @ 876px
 
 * 5 item = hr @ 992px
 * 6 item = hr @ 1152px
 * 7 item = hr @ 1320px
*/










.dko-timeline__records-list {
    padding: 0;
    counter-reset: record;
}
.dko-timeline__record {
    counter-increment: record;
}


























/* Chronological Timeline
   ========================================================================== */

.dko-timeline--chronological .dko-timeline__swiper-container {
   position: relative; 
}

.dko-timeline__swiper {
    --swiper-wrapper-transition-timing-function: initial;
    
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    /* active bullets */
    --swiper-pagination-color: hotpink;
    --swiper-pagination-bullet-opacity: 1;
    /* inactive bullets */
    --swiper-pagination-bullet-inactive-color: #000;
    --swiper-pagination-bullet-inactive-opacity: .2;
    
    padding-bottom: 30px; /* for box-shadow visibiility purpose */
}
.dko-timeline__swiper::before {
    content: "";
    position: absolute;
    top: 66px;
    height: 2px;
    width: 100%;
    left: 0;
    background: white;
}

.dko-timeline__swiper::before{
    background:var(--pmn--grey-light);
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper::before{
    background:white;
}

.dko-timeline__record {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.dko-timeline__record__year {
    text-align: center;
    transition: transform 300ms linear 0s;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    row-gap: 20px;
    font-size: 18px;
    line-height: 26px;
    
    color: white;
    
    transition-duration: 0.6s 
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: color;
}


.dko-timeline__record__year {
    color:var(--pmn--grey-light);
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__record__year {
    color:white;
}

.swiper-slide-active .dko-timeline__record__year {
    color:var(--pmn--blue);
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .swiper-slide-active .dko-timeline__record__year {
    color:white;
}

.swiper-slide-active .dko-timeline__record__year {
    color:var(--pmn--blue-light);
}

.dko-timeline__record__year::after {
    --bgcolor: white;
    --color: transparent;
    
    content: counter(record);
    display: flex;
    width: 40px;
    height: 40px;
    background-color: var(--bgcolor);
    border: 2px solid var(--border-color, var(--bgcolor));
    color: var(--color);
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 20px;
    
    transition-duration: 0.6s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: color, border-color, background-color, transform;
}

.dko-timeline__record__year::after{
    --bgcolor: var(--pmn--grey-light);
    --color:white 0;
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__record__year::after {
    --bgcolor: white;
    --color: var(--pmn--pink)
}

.swiper-slide-active .dko-timeline__record__year::after {
    --bgcolor: var(--pmn--blue);
    --color: var(--ftc--white);
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .swiper-slide-active .dko-timeline__record__year::after {
    --color: var(--pmn--blue);
}

.swiper-slide-active .dko-timeline__record__year::after{
    --bgcolor: var(--pmn--blue-light);
    --color: var(--ftc--white);
}

.swiper-slide-active ~ .swiper-slide > .dko-timeline__record__year::after {
    --border-color: white;
    --bgcolor: white;
    --color: white;
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .swiper-slide-active ~ .swiper-slide > .dko-timeline__record__year::after {
    --color: var(--pmn--pink);
}


.swiper-slide-active ~ .swiper-slide > .dko-timeline__record__year::after{
    --border-color: var(--grey-light);
    --bgcolor: var(--pmn--grey-light);
    --color:white 0;
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .swiper-slide-active ~ .swiper-slide > .dko-timeline__record__year::after{
    --border-color: white;
    --bgcolor: white;
}

.dko-timeline__record__card {
    border-radius: 30px;
    /*transition: opacity 300ms linear 0s;*/
    opacity: 0;
}
.swiper-slide-active .dko-timeline__record__card {
    opacity: 1;
}

.dko-timeline__record__text {
    margin-top: 10px;
}

.dko-timeline__swiper-button-prev, 
.dko-timeline__swiper-button-next {
    --record-year--height: 86px;
    --record-year-index--height: 40px;
    --diff: calc(var(--record-year-index--height) - var(--btn-size));
    
    top: calc(var(--record-year--height) - var(--record-year-index--height) + var(--diff) / 2);
    width: var(--btn-size);
    height: var(--btn-size);
    
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    box-sizing: border-box;
    border: 2px solid white;
    border-radius: 20px;
    background-color: transparent;
    background-image: var(--ftc--icon--chevron--blue);
    transition: background 300ms ease-in-out;
    flex: none;
    z-index: 1;
}
.dko-timeline__swiper-button-prev:hover, 
.dko-timeline__swiper-button-next:hover {
    background-color: white;
    background-image: var(--ftc--icon--chevron--blue);
}


.dko-timeline__swiper-button-prev,
.dko-timeline__swiper-button-next {
    border: 2px solid var(--pmn--grey-light);
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper-button-prev,
.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper-button-next {
    border: 2px solid white;
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper-button-prev, 
.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper-button-next {
    background-image: var(--evo--icon--chevron--white);
}

.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper-button-prev:hover, 
.dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper-button-next:hover {
    background-image: var(--ftc--icon--chevron--blue);
}


.dko-timeline__swiper-button-prev {
    order: -1;
}

@media screen and (max-width: 567px) {
    .dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper-button-prev, 
    .dko-timeline[style="background-color: var(--pmn--pink);"] .dko-timeline__swiper-button-next {
        background-image: var(--ftc--icon--chevron--blue);
        background-color:white;
    }
    .dko-timeline__swiper-button-prev, 
    .dko-timeline__swiper-button-next {
        background-color:white;
    }
    .dko-timeline__swiper-container {
        width: calc(100% + 2 * var(--global-block-padding));
        margin-left: calc(-1 * var(--global-block-padding));
        /*padding: 0 var(--global-block-padding);*/
        padding: 0;
    }
    .dko-timeline__record__card {
        margin-top: 30px;
        width: calc(200% - 2 * var(--global-block-padding));
        
        padding: 27px 27px 24px;
    }
    .dko-timeline__record__year {
        transform: translateX(0);
        transition-property: color, transform;
    }
    .swiper-slide-prev .dko-timeline__record__year {
        /*transform: translateX(calc(50% + (0.8 * 40px / 2)));*/
        /*transform: translateX(calc(50% + 0.5 * 40px + var(--global-block-padding)));*/
        /*transform: translateX(calc(50% + 0.5 * 0.8 * 40px + var(--global-block-padding)));*/
        transform: translateX(calc(16px + var(--global-block-padding)));
    }
    .swiper-slide-next .dko-timeline__record__year {
        /*transform: translateX(calc(-50% - (0.8 * 40px / 2)));*/
        /*transform: translateX(calc(-50% - 0.5 * 0.8 * 40px - var(--global-block-padding)));*/
        transform: translateX(calc(-16px - var(--global-block-padding)));
    }
    .dko-timeline__record__year::after {
        transform: scale(0.8);
    }
    .swiper-slide-active .dko-timeline__record__year::after {
        transform: scale(1);
    }
    .dko-timeline__swiper-button-prev, 
    .dko-timeline__swiper-button-next {
        --btn-size: 32px;
        position: absolute;
        transition: transform 0.6s ease 0s;
    }
    .dko-timeline__swiper-button-prev {
        transform: scale(1) rotateZ(90deg);
    }
    .dko-timeline__swiper-button-next {
        transform: scale(1) rotateZ(-90deg);
    }
    .dko-timeline__swiper-button-prev.swiper-button-disabled {
        transform: scale(0) rotateZ(90deg);
    } 
    .dko-timeline__swiper-button-next.swiper-button-disabled {
        transform: scale(0) rotateZ(-90deg);
    }
    
    .dko-timeline__swiper-button-prev {
        left: var(--global-block-padding);
    }
    .dko-timeline__swiper-button-next {
        right: var(--global-block-padding);
    }
}
@media screen and (min-width: 568px) {
    .dko-timeline__swiper-container {
        display: flex; 
        flex-flow: row nowrap;
    }
    .dko-timeline__swiper {
        width: calc(100% - 2 * 32px);
        margin: 0 auto;
    }
    .dko-timeline__record__card {
        margin-top: 40px;
        width: max(374px, 32vw);
        
        padding: 34px 40px 36px;
    }
    .dko-timeline__swiper-button-prev, 
    .dko-timeline__swiper-button-next {
        --btn-size: 40px;
        position: relative;
    }
    .dko-timeline__swiper-button-prev {
        transform: rotateZ(90deg);
    }
    .dko-timeline__swiper-button-next {
        transform: rotateZ(-90deg);
    }
    .dko-timeline__swiper-button-prev.swiper-button-disabled,
    .dko-timeline__swiper-button-next.swiper-button-disabled {
        background-image: none;
        background-color: transparent;
    }
    
}
@media screen and (max-width: 767px) {
    .dko-timeline__swiper-container {
        margin-top: 60px;
    }
    .dko-timeline__record__title,
    .dko-timeline__record__text {
        line-height: 22px;
    }
    .dko-timeline__record__title {
        font-size: 18px;
    }
    .dko-timeline__record__text {
        font-size: 14px;
    }
    .dko-timeline--chronological .dko-timeline__cta {
        margin-top: 20px;
    }
}
@media screen and (min-width: 768px) {
    .dko-timeline__swiper-container {
        margin-top: 75px;
    }
    .dko-timeline__record__title {
        font-size: 24px;
        line-height: 28px;
    }
    .dko-timeline__record__text {
        font-size: 18px;
        line-height: 28px;
    }
    .dko-timeline--chronological .dko-timeline__cta {
        margin: 50px auto 0;
    }
}

/* === INTERLIGNE ENTRE TITRES === */

@media screen and (max-width: 767px) {
    .dko-timeline h2 {
        line-height:1.3 ;
    }
}
@media screen and (min-width: 768px) {
    .dko-timeline h2 {
        line-height:1.25 ;
    }
}