﻿.blockCenter,
.blockBottom {
    width: 100%;
    float: left;
}

.blockCenter {
    display: flex
}

.divRight {
    width: calc(50% - 1px);
    border-bottom: var(--border);
}

.divLeft {
    width: 50%;
    border-bottom: var(--border);
    border-right: var(--border);
}

.button a {
    text-decoration: underline;
}

.blockImage {
    display: flex;
    aspect-ratio: 960 / 656;
}

    .blockImage img {
        width: 100%;
        height: auto;
    }

.btLinkTitre br {
    display: none;
}

/*--------Font-size--------*/
/*maxWidth 600px*/
.fontTitre.titreHome {
    font-size: calc((26 / var(--width3))* 100vw);
    letter-spacing: -0.08em;
}

.btLinkTitre {
    font-size: calc((33 / var(--width3)) * 100vw);
    line-height: calc((32 / var(--width3)) * 100vw);
}

.infos {
    font-size: calc((14 / var(--width3)) * 100vw);
    line-height: calc((16 / var(--width3)) * 100vw);
}

.btInfos {
    font-size: calc((10 / var(--width3)) * 100vw);
}

.button a {
    font-size: calc((10 / var(--width3)) * 100vw);
}

.infosBottom {
    font-size: calc((15 / var(--width3)) * 100vw);
    line-height: calc((17 / var(--width3)) * 100vw);
}
/*-----601px------ */
@media (min-width: 37.563em) {
    /*font-size*/
    .fontTitre.titreHome {
        font-size: calc((40 / var(--width2))* 100vw);
        letter-spacing: calc((-2 / var(--width2))* 100vw);
    }

    .btLinkTitre {
        font-size: calc((24 / var(--width2)) * 100vw);
        line-height: normal;
        letter-spacing: calc((-0.6 / var(--width1)) * 100vw);
    }

    .infos {
        font-size: calc((14 / var(--width2)) * 100vw);
        line-height: calc((16 / var(--width2)) * 100vw);
    }

    .btInfos {
        font-size: calc((8 / var(--width2)) * 100vw);
        letter-spacing: calc((0.8 / var(--width2))* 100vw);
    }

    .button a {
        font-size: calc((10 / var(--width2)) * 100vw);
    }

    .infosBottom {
        font-size: calc((18 / var(--width2)) * 100vw);
        line-height: calc((23 / var(--width2)) * 100vw);
    }
}
/*--------1111x---------*/
@media (min-width: 69.438em) {
    /*font-size*/
    .fontTitre.titreHome {
        font-size: calc((84 / var(--width1))* 100vw);
        letter-spacing: calc((-5 / var(--width1))* 100vw);
    }

    .btLinkTitre {
        font-size: calc((46 / var(--width1)) * 100vw);
        line-height: normal;
        letter-spacing: calc((-1 / var(--width1)) * 100vw);
    }

    .infos {
        font-size: calc((20 / var(--width1)) * 100vw);
        line-height: calc((24 / var(--width1)) * 100vw);
    }

    .btInfos {
        font-size: calc((16 / var(--width1)) * 100vw);
        letter-spacing: calc((0.6 / var(--width1))* 100vw);
    }

    .button a {
        font-size: calc((16 / var(--width1)) * 100vw);
    }

    .infosBottom {
        font-size: calc((40 / var(--width1)) * 100vw);
        line-height: calc((45 / var(--width1)) * 100vw);
    }
}
/*--------1921px---------*/
@media (min-width: 120.063em) {
    /*font-size*/
    .fontTitre.titreHome {
        font-size: 5.25rem;
    }

    .btLinkTitre {
        font-size: 2.875rem;
        line-height: normal;
    }

    .infos {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .btInfos {
        font-size: 1rem;
        ;
    }

    .button a {
        font-size: 1rem;
    }

    .infosBottom {
        font-size: 2.5rem;
        line-height: 2.8125rem;
    }
}



/*width, margin, padding*/
#ecrHome .divTitre {
    padding: 0.813rem var(--padding) 1.125rem var(--padding);
    line-height: 5.25rem;
}

.blockInfos {
    padding: 1rem var(--padding);
}

    .blockInfos .button {
        padding-bottom: 2.25rem;
    }

.blockBottom {
    padding: var(--padding) var(--padding) 4.625rem var(--padding);
}

.infos {
    padding: 1rem 0;
}

.blockBouton {
    padding: 0 var(--padding) var(--padding);
}

.blockTitreBouton {
    padding: 0.938rem var(--padding);
}

/*--------1920px---------*/
@media (max-width: 120em) {
    #ecrHome .divTitre {
        padding: calc((13 / var(--width1))* 100vw) var(--padding) calc((18 / var(--width1))* 100vw) var(--padding);
        line-height: calc((84 / var(--width1))* 100vw);
    }

    .blockTitreBouton {
        padding: calc((15 / var(--width1)) * 100vw) var(--padding);
    }

    .blockInfos {
        padding: calc((16 / var(--width1))* 100vw) var(--padding);
    }

        .blockInfos .button {
            padding-bottom: calc((36 / var(--width1))* 100vw);
        }

    .blockBottom {
        padding: var(--padding) var(--padding) calc((74 / var(--width1))* 100vw) var(--padding);
    }

    .infos {
        padding: calc((16 / var(--width1))* 100vw) 0;
    }
}

/*--------1110px---------*/
@media (max-width: 69.375em) {
    #ecrHome .divTitre {
        padding: calc((10 / var(--width2))* 100vw) var(--padding2) calc((8 / var(--width2))* 100vw) var(--padding2);
        line-height: calc((40 / var(--width2))* 100vw);
    }

    .blockTitreBouton {
        padding: calc((8 / var(--width2)) * 100vw) var(--padding2);
    }

    .blockImage {
        aspect-ratio: 549 / 480;
    }

    .blockInfos {
        padding: calc((3 / var(--width2))* 100vw) var(--padding2);
        line-height: calc((14 / var(--width2))* 100vw);
    }

        .blockInfos .button {
            padding-bottom: calc((7 / var(--width2))* 100vw);
        }

    .infos {
        padding: calc((10 / var(--width2))* 100vw) 0;
    }

    .blockBottom {
        padding: calc((10 / var(--width2))* 100vw) var(--padding2);
    }
}

/*-----600px------ */
@media (max-width: 37.5em) {
    .blockCenter {
        flex-flow: column;
    }

    .divLeft,
    .divRight {
        width: 100%;
        border: none;
        position: relative;
    }

    .blockImage {
        width: 100%;
        aspect-ratio: 390 / 240;
    }

    .blockInfos {
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
    }

        .blockInfos.open {
            padding: calc((10 / var(--width3))* 100vw) var(--padding3) calc((10 / var(--width3))* 100vw) var(--padding3);
            border-bottom: var(--border);
        }

    .infos {
        padding-bottom: calc((10 / var(--width3))* 100vw);
    }

    .blockBouton {
        padding: 0 var(--padding3);
    }

    #ecrHome .divTitre {
        padding: calc((13 / var(--width3))* 100vw) var(--padding3) calc((13 / var(--width3))* 100vw) var(--padding3);
        line-height: calc((26 / var(--width3))* 100vw);
    }

    .blockTitreBouton {
        padding: calc((10 / var(--width3)) * 100vw) var(--padding3);
        position: absolute;
    }

    .btLinkTitre {
        color: #fff;
        text-shadow: #000 0 0 12px;
    }

        .btLinkTitre br {
            display: block;
        }

    .btInfos {
        position: absolute;
        bottom: calc( var(--padding3) - ((4 / var(--width3)) * 100vw));
        right: var(--padding3);
        width: 25px;
        height: 25px;
        background-image: url('../../../Images/_Common/Svg/btPlusWhite.svg');
        background-repeat: no-repeat;
        background-size: 25px;
    }

        .btInfos.open {
            top: var(--padding3);
            bottom: unset;
            height: 10px;
            background-image: url(../../../Images/_Common/Svg/btMinus1.svg);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }

        .btInfos span {
            display: none;
        }

    .blockBottom {
        padding: calc((19 / var(--width3))* 100vw) var(--padding3);
    }
}
