/* ===================================
   MON PARCOURS PAGE
=================================== */

.parcours-page {
    padding:
        22px
        0
        32px;

    background: white;
}

.parcours-heading {
    margin-bottom: 18px;
}

.parcours-heading h1 {
    margin: 0;

    color: var(--title);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2rem;

    font-weight: 400;

    line-height: 1.15;
}

.parcours-card {
    display: grid;

    grid-template-columns:
        minmax(0, 36%)
        minmax(0, 64%);

    align-items: stretch;

    overflow: hidden;

    border:
        1px solid
        #dbeaf1;

    border-radius: 11px;

    background:
        linear-gradient(
            120deg,
            #f5fafc,
            #ffffff
        );

    box-shadow:
        0 3px 14px
        rgba(38, 81, 104, 0.05);
}

.parcours-photo {
    padding:
        14px;

    background:
        linear-gradient(
            145deg,
            #edf7fb,
            #f8fcfd
        );
}

.parcours-photo img {
    width: 100%;
    height: 100%;

    min-height: 520px;

    object-fit: cover;

    object-position: center top;

    border-radius: 9px;
}

.parcours-timeline {
    position: relative;

    padding:
        24px
        28px
        24px
        22px;

    background:
        rgba(
            255,
            255,
            255,
            0.84
        );
}

.parcours-item {
    display: grid;

    grid-template-columns:
        82px
        28px
        minmax(0, 1fr);

    align-items: start;

    min-height: 118px;
}

.parcours-item-last {
    min-height: 90px;
}

.parcours-year {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        7px
        10px;

    border-radius: 11px;

    background: #e8f4fa;

    color: #5c88a4;

    font-size: 0.88rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    line-height: 1.15;

    text-align: center;
}

.parcours-year-double {
    flex-direction: column;

    gap: 2px;
}

.parcours-line {
    position: relative;

    align-self: stretch;

    display: flex;

    justify-content: center;
}

.parcours-line::before {
    content: "";

    position: absolute;

    top: 18px;
    bottom: -1px;

    width: 2px;

    background: #d0e4ee;
}

.parcours-item-last .parcours-line::before {
    display: none;
}

.parcours-dot {
    position: relative;

    z-index: 2;

    width: 12px;
    height: 12px;

    margin-top: 13px;

    border:
        3px solid
        #c2deec;

    border-radius: 50%;

    background: #79acc8;

    box-shadow:
        0 0 0 3px
        #eef7fb;
}

.parcours-item-content {
    padding:
        1px
        0
        24px
        4px;
}

.parcours-item-content h2 {
    margin:
        0
        0
        7px;

    color: var(--title);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.32rem;

    font-weight: 400;

    line-height: 1.2;
}

.parcours-item-content p {
    margin:
        0
        0
        8px;

    color: var(--text-light);

    font-size: 0.79rem;

    line-height: 1.5;
}

.parcours-item-content p:last-child {
    margin-bottom: 0;
}

.parcours-list {
    margin:
        0
        0
        9px;

    padding-left: 19px;

    color: var(--text-light);

    font-size: 0.79rem;

    line-height: 1.5;
}

.parcours-list li {
    margin-bottom: 5px;
}

.parcours-list li::marker {
    color: #76a9c8;
}

.parcours-link {
    display: inline-block;

    margin-top: 2px;

    color: #438db6;

    font-size: 0.76rem;

    font-weight: 600;

    text-decoration: underline;
}

.parcours-link:hover {
    color: #286d92;
}


/* ===================================
   PARCOURS DESKTOP HEIGHTS
=================================== */

@media (min-width: 1001px) and (max-height: 820px) {

    .parcours-page {
        padding:
            14px
            0
            22px;
    }

    .parcours-heading {
        margin-bottom: 11px;
    }

    .parcours-heading h1 {
        font-size: 1.75rem;
    }

    .parcours-photo {
        padding: 11px;
    }

    .parcours-photo img {
        min-height: 455px;
    }

    .parcours-timeline {
        padding:
            18px
            24px
            18px
            20px;
    }

    .parcours-item {
        min-height: 100px;
    }

    .parcours-item-last {
        min-height: 72px;
    }

    .parcours-year {
        font-size: 0.78rem;
    }

    .parcours-item-content {
        padding-bottom: 18px;
    }

    .parcours-item-content h2 {
        margin-bottom: 5px;

        font-size: 1.16rem;
    }

    .parcours-item-content p,
    .parcours-list {
        font-size: 0.73rem;

        line-height: 1.42;
    }
}


@media (min-width: 1001px) and (min-height: 821px) and (max-height: 1050px) {

    .parcours-photo img {
        min-height: 520px;
    }
}


@media (min-width: 1001px) and (min-height: 1051px) {

    .parcours-photo img {
        min-height: 560px;
    }

    .parcours-item {
        min-height: 128px;
    }
}



/* ===================================
   MON PARCOURS MOBILE
=================================== */

@media (max-width: 700px) {

    .parcours-page {
        padding:
            18px
            0
            30px;
    }

    .parcours-heading {
        margin-bottom: 13px;
    }

    .parcours-heading h1 {
        font-size: 1.55rem;

        line-height: 1.2;
    }

    .parcours-card {
        display: flex;

        flex-direction: column;
    }

    .parcours-photo {
        padding: 10px;
    }

    .parcours-photo img {
        width: 100%;
        height: auto;

        min-height: 0;
        max-height: none;

        object-fit: contain;

        border-radius: 8px;
    }

    .parcours-timeline {
        padding:
            20px
            15px
            8px;
    }

    .parcours-item {
        grid-template-columns:
            62px
            23px
            minmax(0, 1fr);

        min-height: 0;

        margin-bottom: 4px;
    }

    .parcours-year {
        min-height: 34px;

        padding:
            6px
            7px;

        font-size: 0.72rem;

        border-radius: 9px;
    }

    .parcours-line::before {
        top: 16px;
    }

    .parcours-dot {
        width: 11px;
        height: 11px;

        margin-top: 12px;
    }

    .parcours-item-content {
        padding:
            0
            0
            23px
            2px;
    }

    .parcours-item-content h2 {
        margin-bottom: 6px;

        font-size: 1.14rem;
    }

    .parcours-item-content p,
    .parcours-list {
        font-size: 0.77rem;

        line-height: 1.5;
    }

    .parcours-link {
        font-size: 0.75rem;
    }

}


/* ===================================
   SMALL MOBILE
=================================== */

@media (max-width: 420px) {

    .parcours-timeline {
        padding:
            18px
            11px
            6px;
    }

    .parcours-item {
        grid-template-columns:
            58px
            21px
            minmax(0, 1fr);
    }

    .parcours-year {
        font-size: 0.68rem;
    }

    .parcours-item-content h2 {
        font-size: 1.08rem;
    }

}