/* -------------------------- CONTENT -------------------------- */

.pageLMA .content{
    display: flex;
    align-items: center;
    gap: 120px;
    padding: 200px 11% 250px 11%;
    overflow: hidden;
}

.pageMoteur .content{
    padding-bottom: 130px;
}

.pageLMA .content .left{
    max-width: 50%;
}

.pageLMA .content .left .titre{
    font-size: 120px;
    line-height: 120px;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 100;
    white-space: nowrap;
}

.pageLMA .content .left .paragraphe{
    margin-bottom: 52px;
}

.pageLMA .content .left ul{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pageLMA .content .left ul li a{
    display: flex;
    align-items: center;
    gap: 23px;
    font-size: 40px;
    line-height: 60px;
    text-transform: uppercase;
    font-weight: 100;
    color: #000;
    transition: 150ms ease;
    width: fit-content;
}

.pageLMA .content .left ul li a svg{
    flex-shrink: 0;
}

.pageLMA .content .left ul li a h2{
    position: relative;
    font-weight: 100;
}

.pageLMA .content .left ul li a h2::after{
    position: absolute;
    content: "";
    width: 0%;
    height: 5px;
    left: 0px;
    bottom: 0px;
    background-color: var(--gold);
    transition: 300ms ease;
}

.pageLumiere .content .left ul li a svg > path,
.pageMoteur .content .left ul li a svg > g{
    transition: 300ms ease;
    stroke: #000;
    fill: #fff;
}

.pageApropos .content .left ul li a svg path{
    transition: 300ms ease;
    fill: #000;
}

.pageLMA .content .right{
    min-width: 50%;
    position: relative;
    height: fit-content;
}

.pageLMA .content .right > svg{
    position: absolute;
    top: 50%;
    right: -110%;
    transform: translate(0%, -50%);
    z-index: -1;
    width: 150%;
    height: auto;
}

@media (max-width: 1800px){
    .pageLMA .content .left ul li a{
        font-size: 34px;
        line-height: 50px;
    }
}

@media (max-width: 1600px){
    .pageLMA .content{
        padding: 200px 10% 130px 10%;
        gap: 90px;
    }
}

@media (max-width: 1200px){
    .pageLMA .content .right{
        min-width: 45%;
        max-width: 45%;
    }
    .pageLMA .content .left{
        max-width: 55%;
        width: 55%;
    }
}

@media (max-width: 1300px){
    .pageLMA .content{
        padding: 110px 80px 110px 80px;
    }
    .pageLMA .content .left .titre{
        font-size: 90px;
        line-height: 90px;
        margin-bottom: 18px;
    }
    .pageLMA .content .left .paragraphe{
        margin-bottom: 33px;
    }
    .pageLMA .content .left .paragraphe p{
        line-height: 26px;
    }
    .pageLMA .content .left ul li a{
        font-size: 30px;
        line-height: 50px;
    }
}

@media (max-width: 1200px){
    .pageLMA .content{
        gap: 40px;
    }
}

@media (max-width: 992px){
    .pageLMA .content{
        flex-direction: column;
        padding-bottom: 200px;
    }
    .pageLMA .content .right,
    .pageLMA .content .left{
        max-width: none !important;
        min-width: 0px !important;
        width: 100% !important;
    }
}

@media (min-width: 993px){
    .pageLMA .content .left ul li a:hover h2{
        transition: 150ms ease;
        font-weight: 700;
    }
    .pageLMA .content .left ul li a:hover h2::after{
        transition: 300ms ease;
        width: 100%;
    }
    .pageLumiere .content .left ul li a:hover svg > path,
    .pageMoteur .content .left ul li a:hover svg > g{
        transition: 300ms ease;
        stroke: var(--gold);
        fill: var(--gold);
    }
    .pageApropos .content .left ul li a:hover svg path{
        transition: 300ms ease;
        fill: var(--gold);
    }
}

@media (max-width: 600px){
    .pageLMA .content{
        padding: 110px 36px 110px 36px;
    }
    .pageLMA .content .left .titre{
        font-size: 46px;
        line-height: 46px;
        margin-bottom: 10px;
    }
    .pageLMA .content .left ul{
        gap: 16px;
    }
    .pageLMA .content .left ul li a{
        font-size: 27px;
        line-height: 40px;
        font-weight: 300;
        gap: 12px;
    }
    .pageLMA .content .left ul li a svg{
        max-width: 30px;
    }
}

@media (min-width: 501px){
    .pageLMA .content .left .lireplus{
        display: none;
    }
}

@media (max-width: 500px){
    .pageLMA .content .left .paragraphe{
        max-height: 80px;
        overflow: hidden;
        transition: 300ms ease;
        margin-bottom: 8px;
    }
    .pageLMA .content .left .paragraphe.open{
        max-height: 400px;
        transition: 300ms ease;
    }
    .pageLMA .content .left .lireplus{
        margin-bottom: 33px;
        text-decoration: underline;
    }
}


/* -------------------------- RDV -------------------------- */

.pageLMA .rdv,
.template2 .sectionRDV,
main.action .rdv{
    display: flex;
    align-items: center;
    gap: 78px;
    padding: 0px 13% 110px 8%;
    margin-top: -130px;
}

main.action .rdv{
    flex-direction: row-reverse;
}

.pageMoteur .rdv,
.template2 .sectionRDV{
    margin-top: -40px;
}

.pageLMA .rdv .left,
.template2 .sectionRDV .left,
main.action .rdv .left{
    min-width: 50%;
}

.pageLMA .rdv .right,
.template2 .sectionRDV .right,
main.action .rdv .right{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pageLMA .rdv .right .contact,
.template2 .sectionRDV .right .contact,
main.action .rdv .right .contact{
    font-size: 26px;
    line-height: 39px;
    text-transform: uppercase;
    font-weight: 300;
}

.pageLMA .rdv .right .separation,
.template2 .sectionRDV .right .separation,
main.action .rdv .right .separation{
    height: 39px;
    width: 1px;
    background-color: #707070;
    margin: 14px 0px;
}

.pageLMA .rdv .right .besoin,
.pageLMA .rdv .right .dun,
.pageLMA .rdv .right .rendezvous,
.template2 .sectionRDV .right .besoin,
.template2 .sectionRDV .right .dun,
.template2 .sectionRDV .right .rendezvous,
main.action .rdv .right .besoin,
main.action .rdv .right .dun,
main.action .rdv .right .rendezvous{
    font-size: 76px;
    line-height: 76px;
    text-transform: uppercase;
    font-weight: 100;
    text-align: center;
}

.pageLMA .rdv .right .dun,
.pageLMA .rdv .right .rendezvous,
.template2 .sectionRDV .right .dun,
.template2 .sectionRDV .right .rendezvous,
main.action .rdv .right .dun,
main.action .rdv .right .rendezvous{
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

@media (max-width: 1600px){
    .pageLMA .rdv,
    .template2 .sectionRDV,
    main.action .rdv{
        padding: 0px 8% 110px 8%;
        gap: 60px;
        margin-top: -20px;
    }
    .pageLMA .rdv .right .besoin,
    .pageLMA .rdv .right .dun,
    .pageLMA .rdv .right .rendezvous,
    .template2 .sectionRDV .right .besoin,
    .template2 .sectionRDV .right .dun,
    .template2 .sectionRDV .right .rendezvous,
    main.action .rdv .right .besoin,
    main.action .rdv .right .dun,
    main.action .rdv .right .rendezvous{
        font-size: 65px;
        line-height: 65px;
    }
}

@media (max-width: 1300px){
    .pageLMA .rdv .left,
    .template2 .sectionRDV .left,
    main.action .rdv .left{
        min-width: 43%;
    }
}

@media (max-width: 992px){
    .pageLMA .rdv,
    .template2 .sectionRDV,
    main.action .rdv{
        flex-direction: column;
        gap: 85px;
        margin-top: -80px;
    }
}

@media (max-width: 600px){
    .pageLMA .rdv .right .contact,
    .template2 .sectionRDV .right .contact,
    main.action .rdv .right .contact{
        font-size: 18px;
        line-height: 27px;
    }
    .pageLMA .rdv .right .separation,
    .template2 .sectionRDV .right .separation,
    main.action .rdv .right .separation{
        height: 24px;
        margin: 8px 0px;
    }
    .pageLMA .rdv .right .besoin,
    .pageLMA .rdv .right .dun,
    .pageLMA .rdv .right .rendezvous,
    .template2 .sectionRDV .right .besoin,
    .template2 .sectionRDV .right .dun,
    .template2 .sectionRDV .right .rendezvous,
    main.action .rdv .right .besoin,
    main.action .rdv .right .dun,
    main.action .rdv .right .rendezvous{
        font-size: 46px;
        line-height: 46px;
    }
    .pageLMA .rdv,
    .template2 .sectionRDV,
    main.action .rdv{
        margin-top: -20px;
    }
}

/* -------------------------- LUMIÈRE -------------------------- */

.pageLumiere .content .right .image__container img,
.pageApropos .content .right .image__container img{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='719.184' height='810.218' viewBox='0 0 719.184 810.218'%3E%3Cpath id='Tracé_19627' data-name='Tracé 19627' d='M686.256,179.067,392.018,9.191a64.842,64.842,0,0,0-64.853,0L32.925,179.067A64.848,64.848,0,0,0,.5,235.231V574.988a64.852,64.852,0,0,0,32.425,56.164L327.166,801.028a64.842,64.842,0,0,0,64.853,0L686.256,631.152a64.856,64.856,0,0,0,32.428-56.164V235.231A64.851,64.851,0,0,0,686.256,179.067Z' transform='translate(0 -0.001)' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='719.184' height='810.218' viewBox='0 0 719.184 810.218'%3E%3Cpath id='Tracé_19627' data-name='Tracé 19627' d='M686.256,179.067,392.018,9.191a64.842,64.842,0,0,0-64.853,0L32.925,179.067A64.848,64.848,0,0,0,.5,235.231V574.988a64.852,64.852,0,0,0,32.425,56.164L327.166,801.028a64.842,64.842,0,0,0,64.853,0L686.256,631.152a64.856,64.856,0,0,0,32.428-56.164V235.231A64.851,64.851,0,0,0,686.256,179.067Z' transform='translate(0 -0.001)' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
}

.pageLumiere .content .right .image__container > svg,
.pageApropos .content .right .image__container > svg{
    left: 1%;
    top: 1%;
}

.pageLumiere .rdv .left .image__container img{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='871.986' height='982.391' viewBox='0 0 871.986 982.391'%3E%3Cpath id='Tracé_19640' data-name='Tracé 19640' d='M832.158,217.06,475.318,11.04a78.638,78.638,0,0,0-78.651,0L39.823,217.06A78.645,78.645,0,0,0,.5,285.174V697.219a78.651,78.651,0,0,0,39.323,68.113l356.844,206.02a78.638,78.638,0,0,0,78.651,0l356.84-206.02a78.654,78.654,0,0,0,39.328-68.113V285.174A78.649,78.649,0,0,0,832.158,217.06Z' transform='translate(0 0)' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='871.986' height='982.391' viewBox='0 0 871.986 982.391'%3E%3Cpath id='Tracé_19640' data-name='Tracé 19640' d='M832.158,217.06,475.318,11.04a78.638,78.638,0,0,0-78.651,0L39.823,217.06A78.645,78.645,0,0,0,.5,285.174V697.219a78.651,78.651,0,0,0,39.323,68.113l356.844,206.02a78.638,78.638,0,0,0,78.651,0l356.84-206.02a78.654,78.654,0,0,0,39.328-68.113V285.174A78.649,78.649,0,0,0,832.158,217.06Z' transform='translate(0 0)' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
}

.pageLumiere .rdv .left .image__container > svg{
    left: 50%;
    bottom: -3%;
    transform: translateX(-50%);
}

/* -------------------------- MOTEUR -------------------------- */

.pageMoteur .content .right .image__container img{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='749' height='749' viewBox='0 0 749 749'%3E%3Cg id='Ellipse_20' data-name='Ellipse 20' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='374.5' cy='374.5' r='374.5' stroke='none'/%3E%3Ccircle cx='374.5' cy='374.5' r='374' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='749' height='749' viewBox='0 0 749 749'%3E%3Cg id='Ellipse_20' data-name='Ellipse 20' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='374.5' cy='374.5' r='374.5' stroke='none'/%3E%3Ccircle cx='374.5' cy='374.5' r='374' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A");
    z-index: 1;
    position: relative;
}

.pageMoteur .content .right .image__container > svg{
    z-index: 0;
    right: -1%;
    top: 18%;
    width: 90%;
}

.pageMoteur .rdv .left .image__container img,
.pageApropos .rdv .left .image__container img{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='914.209' height='914.209' viewBox='0 0 914.209 914.209'%3E%3Cg id='Ellipse_22' data-name='Ellipse 22' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='457.104' cy='457.104' r='457.104' stroke='none'/%3E%3Ccircle cx='457.104' cy='457.104' r='456.604' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='914.209' height='914.209' viewBox='0 0 914.209 914.209'%3E%3Cg id='Ellipse_22' data-name='Ellipse 22' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='457.104' cy='457.104' r='457.104' stroke='none'/%3E%3Ccircle cx='457.104' cy='457.104' r='456.604' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.pageMoteur .rdv .left .image__container > svg,
.pageApropos .rdv .left .image__container > svg{
    left: 45%;
    bottom: -3%;
    transform: translateX(-50%);
    width: 100%;
}

.pageMoteur .content .left,
.pageApropos .content .left{
    max-width: 53%;
}

.pageMoteur .content .right,
.pageApropos .content .right{
    min-width: 47%;
}

@media (max-width: 1500px){
    .pageMoteur .content .left,
    .pageApropos .content .left{
        max-width: 57%;
    }
    .pageMoteur .content .right,
    .pageApropos .content .right{
        min-width: 43%;
    }
}
