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

.frontpage .section1{
    margin-top: 16px;
    margin-bottom: 70px;
    width: 100%;
    min-height: calc(100vh - var(--site-header-height) - 52px - 40px);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: end;
    overflow: hidden;
}

.frontpage .section1 .background{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
    display: block;
    position: absolute;
}

.frontpage .section1 .textContainer{
    z-index: 1;
    position: relative;
    max-width: 600px;
    height: fit-content;
    margin: 48px;
    background-color: var(--color-white);
    padding: 32px;
    padding-right: 120px;
    border-radius: 24px;
}

.frontpage .section1 .textContainer .titre{
    margin-bottom: 16px;
}

.frontpage .section1 .textContainer .btnContainer{
    position: absolute;
    top: 15px;
    right: 15px;
}

.frontpage .section1 .textContainer .btnContainer a::after{
    content: '';
    display: block;
    width: 84px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: rotate(0deg);
    transition: 300ms ease;
    background-color: var(--color-secondary);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1.66016 18.26L18.2602 1.66M18.2602 15.1475V1.66H4.77266' stroke='white' stroke-width='3.32' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.frontpage .section1 .textContainer .btnContainer a:hover::after{
    transform: rotate(45deg);
    transition: 300ms ease;
    background-color: var(--color-primary);
}

@media (max-width: 1200px) {
    .frontpage .section1 .textContainer .btnContainer{
        top: 15px;
        right: 15px;
    }
    .frontpage .section1 .textContainer .btnContainer a::after{
        width: 60px;
        background-size: 15px 15px;
    }
}

@media (max-width: 992px) {
    .frontpage .section1{
        flex-direction: column;
        align-items: flex-start;
        justify-content: end;
        margin-bottom: 50px;
    }
    .frontpage .section1 .background{
        border-radius: 24px;
    }
    .frontpage .section1 .textContainer{
        padding: 16px;
        border-radius: 16px;
        max-width: none;
        margin: 8px;
        padding-right: 100px;
    }
}

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

.frontpage .section2{
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    gap: 30px 120px;
}

.frontpage .section2 .columnLeft,
.frontpage .section2 .columnRight{
    width: 50%;
    position: relative;
}

.frontpage .section2 .columnLeft h2{
    margin-bottom: 24px;
}

.frontpage .section2 .columnLeft .btn{
    margin-top: 24px;
}

.frontpage .section2 .columnRight img{
    width: 100%;
    height: auto;
    aspect-ratio: 56/50;
    display: block;
    border-radius: 24px;
}

.frontpage .section2 .columnRight .chiffresContainer{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: var(--color-white);
    padding: 25px;
    border-radius: 24px 0px 0px 0px;
    max-width: 80%;
}

.frontpage .section2 .columnRight .chiffresContainer::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");
}

.frontpage .section2 .columnRight .chiffresContainer::after {
    content: "";
    position: absolute;
    display: block;
    width: 24px;
    height: auto;
    aspect-ratio: 1;
    bottom: 0;
    left: 0;
    transform: translateX(-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");
}

.frontpage .section2 .columnRight .chiffresContainer .chiffres{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 50px;
}

.frontpage .section2 .columnRight .chiffresContainer .chiffres .element{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.frontpage .section2 .columnRight .chiffresContainer .chiffres .element .chiffre{
    font-family: "Aleo", serif;
    font-size: 36px;
    color: var(--color-primary);
    font-weight: 600;
    text-align: center;
}

.frontpage .section2 .columnRight .chiffresContainer .chiffres .element .label{
    font-size: 14px;
    text-align: center;
}

@media (max-width: 1300px) {
    .frontpage .section2{
        gap: 30px 80px;
    }
}

@media (max-width: 992px) {
    .frontpage .section2{
        flex-direction: column;
        margin-bottom: 40px;
    }
    .frontpage .section2 .columnLeft,
    .frontpage .section2 .columnRight{
        width: 100%;
    }
    .frontpage .section2 .columnRight .chiffresContainer{
        padding: 18px;
    }
    .frontpage .section2 .columnRight .chiffresContainer .chiffres{
        gap: 20px;
    }
    .frontpage .section2 .columnRight .chiffresContainer .chiffres .element .chiffre{
        font-size: 26px;
    }
}

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

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

.frontpage .section3 .entete{
    margin-bottom: 40px;
    max-width: 600px;
    margin-inline: auto;
}

.frontpage .section3 .entete .titre{
    margin-bottom: 24px;
    text-align: center;
}

.frontpage .section3 .entete .paragraphe{
    text-align: center;
}

.frontpage .section3 .contenu{
    display: flex;
    gap: 30px 24px;
}

.frontpage .section3 .contenu .columnLeft,
.frontpage .section3 .contenu .columnRight{
    width: 50%;
}

.frontpage .section3 .columnLeft{
    display: flex;
    align-items: end;
    aspect-ratio: 530/482;
    position: relative;
}

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

.frontpage .section3 .columnLeft .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;
}

.frontpage .section3 .columnLeft .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");
}

.frontpage .section3 .columnLeft .projet .titre{
    color: var(--color-white);
    font-size: 20px;
    font-weight: 500;
    z-index: 1;
}

.frontpage .section3 .contenu .columnRight .pages{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.frontpage .section3 .contenu .columnRight .pages .page a{
    font-size: 16px;
    line-height: normal;
    font-weight: 500;
    color: var(--color-primary);
    padding: 22px;
    border: solid 1px var(--color-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    cursor: pointer;
}

.frontpage .section3 .contenu .columnRight .pages .page a::after{
    content: '';
    display: block;
    width: 15px;
    height: auto;
    min-width: 15px;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: rotate(0deg);
    transition: 300ms ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M1.5956 14.8163L0 13.2207L10.9413 2.27943H1.13971V0H14.8163V13.6766H12.5369V3.87503L1.5956 14.8163Z' fill='%2300C674'/%3E%3C/svg%3E");
}

@media (min-width: 993px) {
    .frontpage .section3 .contenu .columnRight .pages .page a:hover::after{
        transform: rotate(45deg);
        transition: 300ms ease;
    }
}

@media (max-width: 992px) {
    .frontpage .section3{
        margin-bottom: 40px;
    }
    .frontpage .section3 .contenu{
        flex-direction: column;
    }
    .frontpage .section3 .contenu .columnLeft,
    .frontpage .section3 .contenu .columnRight{
        width: 100%;
    }
    .frontpage .section3 .columnLeft .projet{
        padding: 24px;
        gap: 22px;
    }
}

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

.frontpage .section4{
    margin-bottom: 100px;
}

.frontpage .section4 .entete{
    margin-bottom: 50px;
    display: grid;
    gap: 20px 130px;
}

.frontpage .section4 .entete .titre{
    grid-column: 1/2;
    grid-row: 1/2;
}

.frontpage .section4 .entete .btn{
    grid-column: 1/2;
    grid-row: 2/3;
}

.frontpage .section4 .entete .paragraphe{
    grid-column: 2/3;
    grid-row: 1/3;
}

.frontpage .section4 .grille{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1200px){
    .frontpage .section4 .entete{
        gap: 20px 80px;
    }
    .frontpage .section4 .grille{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .frontpage .section4{
        margin-bottom: 40px;
    }
    .frontpage .section4 .entete{
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 30px;
    }
    .frontpage .section4 .grille{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px){
    .frontpage .section4 .grille{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        transform: translateX(-20px);
        width: 100vw;
        padding-inline: 20px;
    }
    .frontpage .section4 .grille::-webkit-scrollbar {
        display: none;
    }
    .frontpage .section4 .grille .miniatureRealisation{
        min-width: 80vw;
        max-width: 80vw;
        width: 80vw;
    }
}