
.componentDevis{
    display: flex;
    gap: 20px;
}

.componentDevis .columnLeft{
    width: 55%;
    padding: 65px 30px 100px 30px;
    background-color: var(--color-tertiary);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.componentDevis .columnLeft::before{
    content: "";
    position: absolute;
    display: block;
    width: 80%;
    height: auto;
    max-height: 80%;
    aspect-ratio: 353 / 139;
    bottom: 0;
    left: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='353' height='139' viewBox='0 0 353 139' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.9767 120.74C22.9319 126.826 23.0216 132.891 22.8198 138.978H32.3468C32.3468 138.978 32.3468 138.956 32.3692 138.934C32.3916 138.845 32.414 138.779 32.4364 138.69C32.4364 138.646 32.4589 138.557 32.4813 138.513C32.4813 138.447 32.4813 138.38 32.4813 138.314C32.4813 138.247 32.4813 138.181 32.4813 138.093C32.4813 138.07 32.4813 137.982 32.4589 137.938C32.3916 137.65 32.4589 137.428 32.5709 137.229C32.5037 131.718 32.5709 126.207 32.5037 120.718C41.0891 120.651 49.6522 120.784 58.2376 120.651C48.2848 80.4783 39.0268 40.1285 28.9619 0C19.0987 40.1728 9.72869 80.5005 0 120.695C7.66639 120.695 15.3104 120.651 22.9767 120.74Z' fill='%23D7E6E0'/%3E%3Cpath d='M95.8587 128.575C95.8587 132.05 95.9035 135.503 95.9035 138.978C98.3245 138.978 100.723 138.978 103.144 138.978C103.144 135.525 103.144 132.094 103.144 128.642C108.188 128.642 113.254 128.642 118.297 128.642C112.492 104.228 106.82 79.7702 100.589 55.4673C95.119 79.903 89.0665 104.25 83.2383 128.619C87.4301 128.664 91.6444 128.686 95.8587 128.619V128.575Z' fill='%23D7E6E0'/%3E%3Cpath d='M172.159 138.955H179.984C179.984 133.26 179.984 127.564 180.007 121.891C189.236 120.535 197.936 115.698 203.23 108.059C212.39 95.4924 210.456 76.5976 198.765 66.2009C187.855 55.6234 169.213 54.4029 156.969 63.4435C144.748 71.7382 139.915 88.6442 145.784 102.002C150.111 112.715 160.675 120.309 172.205 121.846C172.136 127.564 172.159 133.26 172.159 138.978V138.955Z' fill='%23D7E6E0'/%3E%3Cpath d='M246.62 128.575C246.62 132.05 246.665 135.503 246.665 138.978C249.086 138.978 251.485 138.978 253.906 138.978C253.906 135.525 253.906 132.094 253.906 128.642C258.949 128.642 264.015 128.642 269.059 128.642C263.253 104.228 257.582 79.7702 251.35 55.4673C245.881 79.903 239.828 104.25 234 128.619C238.192 128.664 242.406 128.686 246.62 128.619V128.575Z' fill='%23D7E6E0'/%3E%3Cpath d='M317.035 120.74C316.991 126.826 317.08 132.891 316.878 138.978H326.405C326.405 138.978 326.405 138.956 326.428 138.934C326.45 138.845 326.473 138.779 326.495 138.69C326.495 138.646 326.517 138.557 326.54 138.513C326.54 138.447 326.54 138.38 326.54 138.314C326.54 138.247 326.54 138.181 326.54 138.093C326.54 138.07 326.54 137.982 326.517 137.938C326.45 137.65 326.517 137.428 326.63 137.229C326.562 131.718 326.63 126.207 326.562 120.718C335.148 120.651 343.711 120.784 352.296 120.651C342.343 80.4783 333.085 40.1285 323.02 0C313.157 40.1728 303.787 80.5005 294.059 120.695C301.725 120.695 309.369 120.651 317.035 120.74Z' fill='%23D7E6E0'/%3E%3C/svg%3E%0A");
}

.componentDevis .columnLeft h2{
    margin-bottom: 24px;
    z-index: 1;
    position: relative;
}

.componentDevis .columnLeft .paragraphe{
    z-index: 1;
    position: relative;
}

.componentDevis .columnRight{
    width: 45%;
}

.componentDevis .columnRight img{
    border-radius: 24px;
    display: block;
    height: 100%;
    aspect-ratio: 1140 / 250;
}

.componentDevis .columnLeft .btnContainer{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: var(--color-white);
    padding: 20px 1px 0px 1px;
    border-radius: 0;
    z-index: 1;
}

.componentDevis .columnLeft .btnContainer::before {
    content: "";
    position: absolute;
    display: block;
    width: 24px;
    height: auto;
    aspect-ratio: 1;
    top: 0;
    right: 0;
    transform: translateY(-100%);
    background-color: var(--color-white);
    clip-path: path("M0,0H24A0,0 0,0,1 24,0V24A0,0 0,0,1 24,24H0A0,0 0,0,1 0,24V24A0,0 0,0,1 0,24H0A24,24 0,0,0 24,0V0A0,0 0,0,1 24,0");
}

.componentDevis .columnLeft .btnContainer::after {
    content: "";
    position: absolute;
    display: block;
    width: auto;
    height: 100%;
    aspect-ratio: 90/94;
    bottom: 0;
    left: 1px;
    transform: translateX(-100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='94' viewBox='0 0 90 94' fill='none'%3E%3Cpath d='M90 0.0151342C89.0443 0.0151342 88.0924 0.0151342 87.1329 0.0151342C83.6006 -0.0871138 78.524 0.276435 73.3059 2.73417C64.8307 6.73321 60.855 13.9739 55.5184 24.0358C55.5184 24.0358 54.1728 26.5731 37.0276 58.6866C26.339 78.7082 21.5988 85.2786 13.3148 89.7207C8.1846 92.4701 3.32583 93.5342 0 94H90V0.0151342Z' fill='white'/%3E%3C/svg%3E");
}

@media (max-width: 1400px) {
    .componentDevis .columnLeft{
        padding: 65px 30px;
    }
}

@media (max-width: 992px) {
    .componentDevis{
        flex-direction: column;
    }
    .componentDevis .columnLeft{
        width: 100%;
        padding: 40px 30px 80px 30px;
    }
    .componentDevis .columnRight{
        width: 100%;
    }
    .componentDevis .columnLeft .btnContainer{
        padding: 15px 1px 0px 1px;
    }
    .componentDevis .columnRight img{
        aspect-ratio: 13 / 10;
    }
    .componentDevis .columnLeft::before{
        width: 100%;
        left: 10px;
    }
}