.black_container {
    display: inline-flex;
    align-items: center;
    width: 150%;
}

.MycontainerNoir {
    background-color: black;
    font-size: 1.04vw;
    width: auto;
    border: 1px solid #F2BE4E;
    border-radius: 2.5vw 0vw 0vw 2.5vw;
    padding-left: 4.375vw;
    padding-top: 1.7vw;
    padding-bottom: 1.7vw;
    font-size: 1.04vw;
    font-weight: bold;
    color: #fff;
    position: relative; /* Add this to establish the containing block for the pseudo-element */
    overflow: visible; /* Add this to ensure the pseudo-element is visible outside the container */
    display: flex;
}

.MycontainerNoir::before {
    content: "";
    position: absolute;
    left: -0.3vw; /* Adjust this value to move the border half inside and half outside */
    top: 50%;
    transform: translateY(-50%);
    width: 0.6vw;
    height: 50%; /* Set the height of the border-left */
    background-color: #F2BE4E;
}


.MycontainerNoir p {
    margin-bottom: unset;
    display:flex;
    flex-direction: column;
    margin-right: 4vw;
}
.MycontainerNoir span {
    color: white;
}
.ligneV {
    transform: translate(-4.7vw, -4.4vw);
}
/* .verticalV {
    border-left: 0.6vw solid #F2BE4E;
    height: 4.3vw;
    position: absolute;
    opacity: 1 !important;
} */
img.MyimageGroupe {
    max-width: 75% !important;
}

.image_content {
    width:100%;
}

img, svg {
    vertical-align: middle;
}

.sp1B {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-top: 2vw;
}

.sp1B .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.sp1B .col-9 {
    display: flex;
    flex-direction: column;
    /* flex: 0 0 auto; */
    width: 62%;
}

.AcontainerNoir {
    background-color: black;
    width: 36vw;
    border: 1px solid #F2BE4E;
    border-radius: 1.5vw 0vw 0vw 0vw;
    padding-left: 0vw !important;
    padding-right: 0vw !important;
    padding-top: 5vw;
    padding-bottom: 3vw;
    font-size: 1.04vw;
    color: #fff;
}

.AcontainerNoir p {
    /* margin-bottom: 2vw; */
    margin-left: 7vw;
    margin-right: -6vw;
    padding-right: 11vw;
    border-left: 0.2vw solid #F2BE4E;
    padding-left: 1vw;
    display: flex;
    flex-direction: column;
    max-width: 88%;
}

.AcontainerNoir #lejaune {
    color: #F2BE4E;
    margin-bottom: 2vw;
}

.AligneV {
    height: 100%;
    transform: translate(5.3vw, 0.3vw);
}

.Avertical {
    border-left: 0.2vw solid #F2BE4E;
    height: 17vw;
    position: absolute;
}

.AcontainerNoir .col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.AimgContainerNoir {
    display: flex;
    justify-content: center;
}

img.AimageGroupe {
    /* height: 18vw !important; */
    /* transform: translate(-5.7vw, 3vw); */
    height: auto;
    object-fit: contain;
    max-width: none !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: inherit;
    z-index: 1;
}

.containertest {
    position: relative;
    display: inline-block;
    transform: translate(-33%,50%);
    width: 32% !important;
}

.rectangle-1 {
    position: inherit;
    /* width: 200px;
    height: 200px;
    background-color: #4caf50; */
    z-index: 1;
}

.rectangle-2 {
    position: absolute;
    top: -20%;
    left: 33%;
    width: 86%;
    height: 70%;
    background-color: #F2BE4E;
    box-sizing: border-box;
    z-index: 0;
}

@media only screen and (max-width: 768px) {
    .containertest {
        width: auto !important;
    }
    .rectangle-2 {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        background-color: transparent;
        box-sizing: content-box;
        z-index: auto;
    }
    
    .black_container {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: auto !important;
    }
    .MycontainerNoir {
        background-color: black;
        font-size: 3.8vw !important;
        width: 89vw;
        border-radius: 6vw 6vw 0vw 0vw;
        padding-left: 6.2vw;
        padding-right: 6.2vw;
        padding-top: 7.2vw;
        padding-bottom: 6.7vw;
        font-size: 1.04vw;
        font-weight: bold;
        color: #fff;
        text-align: center; 
    }
    .MycontainerNoir p {
        margin-bottom: unset;
    }
    
    img, svg {
        vertical-align: middle;
    }
    .verticalV {
        display: none;
    }

    .sp1B {
        display:flex;
    }

    .sp1B .row{
        display: inline-flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        margin-top: 2vw;
        flex-direction: column-reverse;
    }

    .AcontainerNoir {
        background-color: black;
        width: 90vw;
        border-radius: 8vw;
        padding-left: 0vw !important;
        padding-right: 0vw !important;
        padding-top: 42.5vw;
        padding-bottom: 12vw;
        font-size: 3.8vw;
        color: #fff;
    }
    .AcontainerNoir p {
        margin-bottom: 2vw;
        padding-right: 5vw;
        border:none;
    }
    .containertest.col-3.px-0.h-100{
        flex: 0 0 auto;
        width: 50% !important;
    }
    .AimgContainerNoir {
        display: flex;
        justify-content: center;
    }
    .AimageGroupe {
        height: 47vw !important;
        margin-bottom: -31vw;
        z-index: 2;
    }
    .sp1B .col-9 {
       display: flex;
       flex-direction: column;
       width:auto;
    }
    img.rectangle-1 {
        max-width:none !important;
        height: 47vw !important;
    }
    img.MyimageGroupe {
        max-width: 100% !important;
    } 
}