body.realisations, body.blog {
    ul.pagination {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        li {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            margin-right: 10px; 

            button.page-link, button.page-link:active, button.page-link:focus, button.page-link:first-of-type, button.page-link:last-of-type {
                border: none !important;
                background-color: transparent !important;
                font-size: 21px;
                color: #000;
                font-family: 'ClashGrotesk-Regular';
                text-align: center !important;
                border-radius: 0;
                box-shadow: none !important;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

            &.active {
                button.page-link {
                    font-size: 25px;
                    color: var(--bs-vert-mousse);
                    font-family: 'ClashGrotesk-Medium';
                }
            }

            &.arrow {
                margin-left: 40px;
                margin-right: 40px;
                width: 14px;
                height: 14px;
                background-color: var(--bs-vert-mousse) !important;
                
                button.page-link, button.page-link:active, button.page-link:focus, button.page-link:first-of-type, button.page-link:last-of-type {
                    color: var(--bs-gris-vert);
                    font-size: 8px;
                }
            }
        }
    }

    .pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

body.realisation, body.article {
    #illustration-realisation {
        position: relative; 
        height: 100px; 
        overflow: visible;

        img {
            height: 300px;
        }
        overflow: visible;

        @media (min-width: 768px) {
            height: 100%;
            img {
                height: auto;
            }
        }
    }

    section#taches-realises {
        position: relative;
        z-index: 1;
        padding-top: calc(2rem + 180px) !important;
        margin-top: -50px;
        background-image: url("../../images/bg-realisation-qgokrk5.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;

        @media (min-width: 768px) {
            padding-top: calc(2rem + 60px) !important;
        }
    }

    
    #title-link {
        display: none;

        @media (min-width: 768px) {
            display: block;
            margin-top: -120px;
            margin-bottom: 60px;
        }
    }
}

.realisation-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: none;
    overflow: hidden;
    color: #000;
    text-decoration: none;


    .realisation-img {
        height: 200px;
        object-fit: cover;
        width: 100%;

        @media (min-width: 768px) {
            height: 250px;
        }
        @media (min-width: 992px) {
            height: 300px;
        }
    }

    .realisation-title {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 25px 30px;
        background-color: var(--bs-gris-vert);
        transition: transform 0.25s ease;
        text-align: left;

        h5 {
            color: #000;
            font-size: 20px;
            font-family: 'ClashGrotesk-Regular';
            margin: 0;
        }
    }

    .realisation-bg-slide {
        position: absolute;
        top: 100%;
        height: 100%;
        width: 100%;
        background-color: var(--bs-gris-vert);
        transition: top 0.25s ease;
    }

    .realisation-desc {
        position: absolute;
        bottom: 0;
        background-color: var(--bs-gris-vert);
        padding: 25px 40px 50px 30px;
        opacity: 0;
        transition: opacity 0.25s ease;
        color: #000;
    }

    /* TRAIT */
    &::before {
        z-index: 2;
        content: "";
        position: absolute;
        right: 10px;
        bottom: 28px;

        width: 13px;
        height: 2px;
        background: currentColor;

        transform: translateY(-50%);
        transition: width 0.25s ease;
    }
    /* POINTE */
    &::after {
        z-index: 2;
        content: "";
        position: absolute;
        right: 10px;
        bottom: 19px;

        width: 11px;
        height: 11px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;

        transform: translateY(-50%) rotate(45deg);
    }
    /* HOVER */
    &:hover::before {
        width: 20px; /* seul le trait s'allonge */
    }

    &:hover {
        div.realisation-bg-slide {
            top: 0;
        }
        div.realisation-title {
            transform: translateY(-160px);
        }
        div.realisation-desc {
            opacity: 1;
        }
    }
}