Clip-path, z-index on 3 different items - html

Question

I have a request from my client to do somehting like this (css only):
On the background, have a color, sectionned on the bottom
On the right side, have a text block, sectionned on top and bottom
Between them, show an image
As you can see here. But the problem, is that the bottom of the image should follow the sectionned part of the 1 layer.
As far as I know, it's not possible to achieve such thing because of how the css is working, because the image can't be "behind" the 1 layer and in front of the 3d.
So far, I have my 2nd layer working well (I used the clippy website to help me).
The when I try to apply the clippath 1 layer, it also clips the 2nd (as expected by clippath)
This is the html of the last try i've done
<div class="parent">
<div style="background: green">
<div class="left-content" style="background: green">
<p class="top-titre">title</p>
</div>
<div class="center-content" style="background: green">
<div>
<img src="..." alt="">
</div>
</div>
<div class="right-content">
<div class="clip-top" style="background: yellow"></div>
<div class="d-flex flex-column content" style="background: yellow">
<p>subtitle</p>
<p>description</p>
</div>
<div class="clip-bottom" style="background: yellow"></div>
</div>
</div>
<div class="clip-bottom" style="background: #000000"></div>
</div>
and the last css
.parent {
margin: auto;
display: flex;
flex-direction: column;
width: 85%;
> .clip-bottom {
width: 100%;
height: 100px;
clip-path: polygon(100% 0, 0 0, 0 70%);
}
> div {
position: relative;
padding: 0 120px 0 95px;
width: 100%;
display: flex;
//clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
.left-content {
width: 20%;
display: flex;
position: relative;
z-index: 5;
p {
color: white;
font-size: 2em;
font-weight: bold;
}
}
.center-content {
width: 25%;
position: relative;
img {
position: absolute;
bottom: 0;
left: 100%;
transform: translateX(-50%);
z-index: 20;
}
}
.right-content {
position: relative;
z-index: 10;
width: 55%;
.content {
padding: 40px 50px 60px 300px;
.field--name-field-titre {
.field__item {
font-size: 1.5em;
font-weight: bold;
}
}
.field--name-field-description {
padding: 70px 0 90px;
}
}
.clip-top, .clip-bottom {
height: 100px;
}
.clip-top {
clip-path: polygon(100% 30%, 0 100%, 100% 100%);
}
.clip-bottom {
clip-path: polygon(100% 0, 0 0, 100% 70%);
}
}
}
}