/* --------------------------- SECTION 1 --------------------------- */

.pageMethode .section1 {
    margin-top: 16px;
    margin-bottom: 70px;
    width: 100%;
    min-height: 22vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-radius: 32px;
    padding: 50px 20px;
}

.pageMethode .section1::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 40%);
    z-index: 1;
}

.pageMethode .section1 h1{
    color: var(--color-white);
    text-align: center;
    max-width: 600px;
    z-index: 1;
}

.pageMethode .section1 .background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
}

@media (max-width: 992px) {
    .pageMethode .section1{
        min-height: 250px;
        margin-bottom: 30px;
    }
}

/* --------------------------- SECTION 2 --------------------------- */

.pageMethode .section2{
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 100px;
}

.pageMethode .section2 .columnLeft,
.pageMethode .section2 .columnRight{
    width: 50%;
}

.pageMethode .section2 .columnLeft .titre{
    margin-bottom: 16px;
}

.pageMethode .section2 .columnLeft .reassurances{
    display: flex;
    flex-direction: column;
    width: fit-content;
}

.pageMethode .section2 .columnLeft .reassurances .reassurance{
    font-size: 20px;
    line-height: normal;
    font-weight: 500;
    padding-block: 24px;
    color: var(--color-primary);
    border-bottom: solid 1px var(--color-secondary);
}

.pageMethode .section2 .columnRight{
    display: flex;
    align-items: end;
    aspect-ratio: 530/482;
    position: relative;
}

.pageMethode .section2 .columnRight img{
    display: block;
    aspect-ratio: 1;
    width: 85%;
    height: auto;
    border-radius: 24px;
    position: absolute;
    top: 0;
    right: 0;
}

.pageMethode .section2 .columnRight .projet{
    background-color: var(--color-primary);
    border-radius: 24px;
    padding: 42px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: fit-content;
    height: fit-content;
    position: relative;
}

.pageMethode .section2 .columnRight .projet::before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='334' height='171' viewBox='0 0 334 171' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M227.304 145.061C227.251 152.374 227.358 159.661 227.118 166.973H238.423C238.423 166.973 238.423 166.947 238.45 166.92C238.477 166.814 238.503 166.734 238.53 166.628C238.53 166.575 238.556 166.468 238.583 166.415C238.583 166.335 238.583 166.255 238.583 166.176C238.583 166.096 238.583 166.016 238.583 165.91C238.583 165.883 238.583 165.777 238.556 165.724C238.477 165.378 238.556 165.112 238.689 164.873C238.61 158.251 238.689 151.63 238.61 145.035C248.798 144.955 258.959 145.114 269.147 144.955C257.336 96.6898 246.35 48.2119 234.407 0C222.703 48.2651 211.584 96.7164 200.039 145.008C209.136 145.008 218.207 144.955 227.304 145.061Z' fill='%2300471C'/%3E%3Cpath d='M307.132 154.502C307.132 158.677 307.185 162.825 307.185 167C310.058 167 312.905 167 315.777 167C315.777 162.852 315.777 158.73 315.777 154.581C321.762 154.581 327.774 154.581 333.759 154.581C326.87 125.25 320.14 95.8654 312.745 66.667C306.254 96.025 299.072 125.277 292.156 154.555C297.131 154.608 302.131 154.635 307.132 154.555V154.502Z' fill='%2300471C'/%3E%3Cpath d='M34.2494 170H43.5351C43.5351 163.157 43.5351 156.314 43.5624 149.498C54.5141 147.869 64.8376 142.058 71.1191 132.88C81.9889 117.782 79.6948 95.081 65.8208 82.59C52.8754 69.8818 30.7536 68.4154 16.2242 79.2772C1.72207 89.2428 -4.01322 109.554 2.95107 125.602C8.08552 138.474 20.6212 147.597 34.304 149.444C34.2221 156.314 34.2494 163.157 34.2494 170.027V170Z' fill='%2300471C'/%3E%3C/svg%3E%0A");
}

.pageMethode .section2 .columnRight .projet .titre{
    color: var(--color-white);
    font-size: 20px;
    font-weight: 500;
    z-index: 1;
}

@media (max-width: 992px) {
    .pageMethode .section2{
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 50px;
    }
    .pageMethode .section2 .columnLeft,
    .pageMethode .section2 .columnRight{
        width: 100%;
    }
    .pageMethode .section2 .columnLeft .reassurances{
        width: 100%
    }
    .pageMethode .section2 .columnLeft .reassurances .reassurance{
        font-size: 18px;
        padding-block: 18px;
    }
    .pageMethode .section2 .columnRight .projet{
        padding: 24px;
        gap: 22px;
    }
}

/* --------------------------- SECTION 3 --------------------------- */

.pageMethode .section3{
    margin-bottom: 100px;
}

.pageMethode .section3 h2{
    margin-bottom: 32px;
    text-align: center;
}

.pageMethode .section3 > .paragraphe{
    max-width: 600px;
    margin-inline:  auto;
    text-align: center;
}

.pageMethode .section3 .image{
    width: 100%;
    height: auto;
    aspect-ratio: 1140/320;
    border-radius: 24px;
    display: block;
}

.pageMethode .section3 .reassurances{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px 0px;
    margin-top: 50px;
    margin-bottom: 65px;
}

.pageMethode .section3 .reassurances .reassurance{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 60px;
    max-width: 430px;
}

.pageMethode .section3 .reassurances .reassurance:not(:last-child){
    border-right: solid 1px var(--color-secondary);
}

.pageMethode .section3 .reassurances .reassurance img{
    width: 48px;
    min-width: 48px;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1;
}

.pageMethode .section3 .reassurances .reassurance .titre{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
}

.pageMethode .section3 .reassurances .reassurance .paragraphe{
    text-align: center;
}

@media (max-width: 1500px) {
    .pageMethode .section3 .reassurances .reassurance{
        padding: 20px 40px;
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .pageMethode .section3{
        margin-bottom: 30px;
    }
    .pageMethode .section3 h2{
        margin-bottom: 24px;
    }
    .pageMethode .section3 .reassurances{
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0px;
        margin-top: 30px;
        margin-bottom: 40px;
        overflow-x: scroll; 
        padding-inline: 20px;
        transform: translateX(-20px);
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .pageMethode .section3 .reassurances::-webkit-scrollbar {
        display: none;
    }
    .pageMethode .section3 .reassurances .reassurance{
        justify-content: center;
        padding: 20px 35px;
        min-width: 80vw;
        max-width: 80vw;
        width: 80vw;
    }
    .pageMethode .section3 .image{
        aspect-ratio: 1;
    }
}

/* --------------------------- SECTION 4 --------------------------- */

.pageMethode .section4{
    margin-bottom: 100px;
    display: grid;
    grid-template-columns: 4fr 5fr 3fr;
    align-items: end;
    gap: 30px;
}

.pageMethode .section4 .imgContainer1{
    position: relative;
}

.pageMethode .section4 .imgContainer1 img{
    width: 100%;
    height: auto;
    aspect-ratio: 368/492;
    display: block;
    border-radius: 24px;
    position: relative;
}

.pageMethode .section4 .imgContainer1::after{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 10px;
    width: 85%;
    height: auto;
    aspect-ratio: 326/408;
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='326' height='408' viewBox='0 0 326 408' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M66.3546 353.565C66.2251 371.389 66.484 389.148 65.9014 406.972H93.4143C93.4143 406.972 93.4143 406.907 93.479 406.842C93.5438 406.583 93.6085 406.389 93.6732 406.129C93.6732 406 93.738 405.741 93.8027 405.611C93.8027 405.417 93.8027 405.222 93.8027 405.028C93.8027 404.833 93.8027 404.639 93.8027 404.379C93.8027 404.315 93.8027 404.055 93.738 403.926C93.5438 403.083 93.738 402.435 94.0616 401.852C93.8674 385.713 94.0616 369.574 93.8674 353.5C118.661 353.305 143.391 353.694 168.185 353.305C139.442 235.667 112.706 117.509 83.6391 0C55.1552 117.639 28.0955 235.731 0 353.435C22.1398 353.435 44.2148 353.305 66.3546 353.565Z' fill='%2300C674'/%3E%3Cpath d='M260.46 376.574C260.46 386.75 260.59 396.861 260.59 407.037C267.581 407.037 274.508 407.037 281.499 407.037C281.499 396.926 281.499 386.879 281.499 376.768C296.065 376.768 310.695 376.768 325.261 376.768C308.494 305.277 292.116 233.657 274.119 162.49C258.324 234.046 240.845 305.342 224.014 376.703C236.119 376.833 248.29 376.898 260.46 376.703V376.574Z' fill='%2300C674'/%3E%3C/svg%3E%0A");
}

.pageMethode .section4 .imgContainer2 img{
    width: 100%;
    height: auto;
    aspect-ratio: 270/240;
    display: block;
    border-radius: 24px;
}

.pageMethode .section4 .textContainer .titre{
    margin-bottom: 24px;
}

@media (max-width: 992px) {
    .pageMethode .section4{
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
    }
}