/* section realisation */
    .container_realisations{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 32px 16px;
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        margin-bottom: 32px;
    }

    .content_realisation{
        flex: 0 0 340px;
        border-radius: 16px;
        position: relative;
    }

    .box_img_realisation{        
        height: 250px;
        border-radius: 16px;
        overflow: hidden;
        img{
            border-radius: 16px;
            object-fit: cover;
        }
    }

    .content_realisation:hover img{
        scale: 1.1;
    }

    .info_realisation{
        width: 90%; height: auto;
        border-radius: 16px;
        border: 3px solid var(--white);
        padding: 16px;
        position: absolute;
        left: 50%; bottom: -16px;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        p,h3{
            color: var(--white);
        }
    }

    .content_realisation:nth-child(odd) .info_realisation{
        background-color: var(--yellow);
    }

    .content_realisation:nth-child(even) .info_realisation{
        background-color: var(--blue);
    }

    .categorie_realisation{
        font-size: 14px;
    }

    .nom_realisation{
        font-size: 17px;
    }

    .btn_realisation{
        width: 35px; height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: var(--white);
        i{
            font-size: 18px;
            color: var(--white);
        }
    }

    .content_realisation:nth-child(odd) .btn_realisation i{
        color: var(--blue);
    }

    .content_realisation:nth-child(even) .btn_realisation i{
        color: var(--yellow);
    }
    
    .content_realisation:nth-child(odd) .btn_realisation:hover{
        background-color: var(--blue);
        i{
            color: var(--white);
        }
    }

    .content_realisation:nth-child(even) .btn_realisation:hover{
        background-color: var(--yellow);
        i{
            color: var(--white);
        }
    }
/* section realisation */

/* responsive */
    /* section realisation */
        @media screen and (max-width: 450px) {
            .content_realisation{
                flex: 0 0 95%;
            }
        }
    /* section realisation */
/* responsive */