/* ==========================================================================
   ==========================================================================

    * Statics *
    Styles des éléments et des pages en html statique.

    Sommaire :
    - PMT : Pages statiques

============================================================================= */


/* =============================================================================
   # PMT : Pages statiques
   ========================================================================== */

/*style global*/
.PMTContent .title-h2 {
    text-transform: uppercase;
    text-align: center;
    font-weight: 900;
}

.PMTContent a {
    color: var(--bgCMO);
}

    .PMTContent a:hover {
        text-decoration: underline;
    }

.PMTContent .more {
    height: 24px;
    width: 24px;
    border: 2px solid #212121;
    border-radius: 24px;
    display: inline-flex;
    justify-content: center;
    position: relative;
    align-items: center;
    transition: border 0.3s;
}

    .PMTContent .more .cross:before {
        content: "";
        height: 36%;
        width: 10%;
        display: block;
        background-color: #212121;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.3s;
    }

    .PMTContent .more .cross:after {
        content: "";
        height: 10%;
        width: 36%;
        display: block;
        background-color: #212121;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.3s;
    }

    .PMTContent .more:before {
        content: "";
        height: 0%;
        width: 0%;
        background-color: #212121;
        display: block;
        border-radius: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: height 0.3s, width 0.3s, background-color 0.3s;
    }

.PMTContent .mainBtn {
    background-color: #fcc40e;
    padding: 8px 32px;
    border-radius: 24px;
    color: #212121;
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 auto;
    display: block;
    width: fit-content;
    margin-top: 32px;
    border: 2px solid #fcc40e;
    text-decoration: none;
    transition-duration: 0.3s;
}

    .PMTContent .mainBtn:hover {
        background-color: transparent;
    }

.PMTContent #intro,
.PMTContent #orientations,
.PMTContent #plansActions,
.PMTContent #performance,
.PMTContent #video,
.PMTContent #valeurs {
    scroll-margin-top: 84px;
}

/*style*/

.PMTContent .menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    width: calc(((100vw - 1160px) / 2) - 24px);
    padding-right: 24px;
    max-width: 400px;
}

    .PMTContent .menu h2 {
        font-size: 3rem;
        font-weight: 600;
        border-radius: 0 8px 8px 0;
        padding-left: 24px;
        background: linear-gradient(90deg, #003394 0%, #900e59 100%);
        color: transparent;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        width: fit-content;
        margin-bottom: 12px;
    }

    .PMTContent .menu .niv1-title{
        font-size: 2rem;
        font-weight: 600;
        border-radius: 0 8px 8px 0;
        margin-bottom: 12px;
        padding-left: 24px;
        color: #212121;
    }

        .PMTContent .menu p a {
            color: #212121;
        }

    .PMTContent .menu ul.niv2 {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
        padding-left: 24px;
    }

        .PMTContent .menu ul.niv2 li {
            display: flex;
            align-items: center;
            gap: 12px;
        }

            .PMTContent .menu ul li:not(.niv1):before {
                content: "";
                display: block;
                min-width: 12px;
                height: 12px;
                border: 2px solid #212121;
                border-radius: 12px;
                transition: background 0.3s, border-color 0.3s;
                border-color: #212121;
                background: linear-gradient(135deg, #fff 0%, #e12752 1fff);
            }

            .PMTContent .menu ul li:hover:before,
            .PMTContent .menu ul li.active:before,
            .PMTContent .menu ul.active li:before {
                background: linear-gradient(135deg, #003394 0%, #e12752 100%);
                min-width: 16px;
                height: 16px;
                border: 0px solid transparent;
                border-color: transparent;
            }

            .PMTContent .menu ul li.active a,
            .PMTContent .menu ul.active li a {
                font-weight: 900;
            }

            .PMTContent .menu ul li a {
                color: #212121;
                line-height: 1.8rem;
            }

.PMTHeader .logoCM {
    height: 44px;
    text-align: end;
}

    .PMTHeader .logoCM img {
        height: 100%;
    }

@media (max-width: 1800px) {
    .PMTContent {
        padding: 0 14px;
    }

        .PMTContent .menu {
            display: none;
        }

    .PMTHeader {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        gap: 16px;
    }

        .PMTHeader .logoCM {
            text-align: center;
        }
}

.PMTHeader {
    background: linear-gradient(45deg, #e9264f, #2b449e);
    border-radius: 32px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 100px;
    align-items: center;
    padding: 0px 48px;
}

    .PMTHeader .logo {
        height: 72px;
    }

        .PMTHeader .logo img {
            height: 100%;
        }

    .PMTHeader .title-h1 {
        margin: 0;
        color: var(--color-invariant_white);
        font-weight: bold;
        text-align: center;
    }

.PMTContent .intro {
    display: flex;
    gap: 48px;
    margin: 48px 0;
}

    .PMTContent .intro .video iframe {
        aspect-ratio: 16 / 9;
        height: auto;
        background: linear-gradient(-90deg, #e9264f, #2b449e);
        padding: 6px;
    }


    .PMTContent .intro .title-h2 {
        text-align: left;
        font-size: 2.6rem;
        line-height: 3rem;
        font-weight: 900;
        background: linear-gradient(90deg, #003394 0%, #900e59 100%);
        color: transparent;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        width: fit-content;
        max-width: 100%;
        margin-bottom: 8px;
        text-transform: none;
    }

    .PMTContent .intro .content p {
        margin-bottom: 8px;
    }

        .PMTContent .intro .content p span {
            font-weight: 900;
        }

    .PMTContent .intro .content .signature {
        display: flex;
        gap: 48px;
    }

        .PMTContent .intro .content .signature p {
            font-size: 1.2rem;
            margin: 0;
        }

            .PMTContent .intro .content .signature p.name {
                color: var(--bgCMO);
                font-size: 1.4rem;
                font-weight: 900;
            }

        .PMTContent .intro .content .signature > div {
            position: relative;
        }

            .PMTContent .intro .content .signature > div:not(:last-child):after {
                content: "/";
                color: var(--bgCMO);
                font-size: 1.4rem;
                font-weight: 900;
                position: absolute;
                top: 50%;
                transform: translate(50%, -50%);
                right: -24px;
            }

@media (max-width: 999px) {
    .PMTContent .intro {
        flex-direction: column;
        gap: 24px;
    }

        .PMTContent .intro .video {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

            .PMTContent .intro .video iframe {
                width: 100%;
                max-width: 500px;
            }

    .PMTHeader {
        display: flex;
        flex-direction: column;
        padding: 16px;
    }

        .PMTHeader .title-h1 {
            font-size: 2.6rem;
        }
}

.PMTContent .orientations .orientations-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    justify-content: space-evenly;
    margin: 24px 0;
    justify-items: center;
    overflow: hidden;
}

    .PMTContent .orientations .orientations-list .element,
    .PMTContent .valeurs .valeurs-list .element {
        width: 100%;
        max-width: 300px;
        grid-row: 1 / 2;
        transition-duration: 0.3s;
        cursor: pointer;
        margin-bottom: 4px;
        background: none;
    }

    .PMTContent .orientations .orientations-list .mainElement,
    .PMTContent .valeurs .valeurs-list .mainElement {
        aspect-ratio: 1;
        --o: calc(50%* tan(-22.5deg));
        clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
        background-color: #fcc40e;
        position: relative;
        padding: 16px;
        display: flex;
        bottom: 0;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition-duration: 0.3s;
    }

    .PMTContent .orientations .orientations-list .element.active .mainElement,
    .PMTContent .valeurs .valeurs-list .element.active .mainElement {
        bottom: -20px;
    }

    .PMTContent .orientations .orientations-list .mainElement .background,
    .PMTContent .valeurs .valeurs-list .mainElement .background {
        display: block;
        position: absolute;
        width: calc(100% - 32px);
        aspect-ratio: 1;
        --o: calc(50%* tan(-22.5deg));
        clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
        background-color: var(--color-background);
        z-index: -1;
        transition-duration: 0.3s;
        overflow: hidden;
    }

        .PMTContent .orientations .orientations-list .mainElement .background img,
        .PMTContent .valeurs .valeurs-list .mainElement .background img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: relative;
            top: -100%;
            right: 100%;
            transition-duration: 0.6s;
            clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
        }

    .PMTContent .orientations .orientations-list .element.active .background img,
    .PMTContent .valeurs .valeurs-list .element.active .background img {
        top: 00%;
        right: 00%;
    }

    .PMTContent .orientations .orientations-list .mainElement > p,
    .PMTContent .valeurs .valeurs-list .mainElement > p {
        color: var(--bgCMO);
        font-size: 1.6rem;
        font-weight: 600;
        text-align: center;
        padding: 24px;
        right: 0;
        line-height: 2.7rem;
        transition-duration: 0.3s;
        position: relative;
    }

    .PMTContent .orientations .orientations-list .element.active .mainElement > p,
    .PMTContent .valeurs .valeurs-list .element.active .mainElement > p {
        right: -100%;
    }

    .PMTContent .orientations .orientations-list .mainElement > p .highlight{
        display: block;
        width: 100%;
        text-transform: uppercase;
        color: #212121;
        font-size: 1.8rem;
        transition-duration: 0.3s;
    }

    .PMTContent .orientations .orientations-list .content,
    .PMTContent .valeurs .valeurs-list .content {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        width: 100%;
        max-height: 0;
        overflow: hidden;
    }

    .PMTContent .orientations .orientations-list .element.active + .content,
    .PMTContent .valeurs .valeurs-list .element.active + .content {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        visibility: hidden; 
    }

    .PMTContent .orientations .orientations-list .content .detail,
    .PMTContent .valeurs .valeurs-list .content .detail {
        padding: 24px;
        border: 2px solid transparent;
        border-radius: 24px;
        transition-duration: 0.6s;
        transition-delay: 1s;
    }

    .PMTContent .orientations .orientations-list .element.active + .content .detail,
    .PMTContent .valeurs .valeurs-list .element.active + .content .detail {
        border: 2px solid #fcc40e;
    }

    .PMTContent .orientations .orientations-list .content h3 {
        color: var(--bgCMO);
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 2.7rem;
        position: relative;
        left: -100%;
        opacity: 0;
        transition-duration: 0.3s;
    }

        .PMTContent .orientations .orientations-list .content h3 .highlight {
            text-transform: uppercase;
            color: #212121;
            font-size: 1.8rem;
        }

    .PMTContent .orientations .orientations-list .element.active + .content h3 {
        left: 0%;
        opacity: 1;
        transition-delay: 0.4s;
    }

    .PMTContent .orientations .orientations-list .content ul {
        position: relative;
        left: -100%;
        opacity: 0;
        transition-duration: 0.3s;
        list-style: disc;
        padding-left: 16px;
        margin-top: 16px;
    }

        .PMTContent .orientations .orientations-list .content ul li + li {
            margin-top: 8px;
        }

        .PMTContent .orientations .orientations-list .content ul li::marker {
            color: #212121;
        }

    .PMTContent .orientations .orientations-list .element.active + .content ul {
        left: 0%;
        opacity: 1;
        transition-delay: 0.7s;
    }

    .PMTContent .orientations .orientations-list .element.active + .content {
        max-height: 1000px;
        visibility: initial; 
    }

    .PMTContent .orientations .orientations-list .element .infos,
    .PMTContent .valeurs .valeurs-list .element .infos {
        text-align: center;
        display: flex;
        gap: 8px;
        position: absolute;
        bottom: 40px;
        align-items: center;
    }

    .PMTContent .orientations .orientations-list .element.active .infos,
    .PMTContent .valeurs .valeurs-list .element.active .infos {
        background-color: #ffffff;
        outline: #ffffff solid 4px;
        border-radius: 36px;
        color: var(--bgDark);
    }

    .PMTContent .orientations .orientations-list .element:hover .infos .more,
    .PMTContent .valeurs .valeurs-list .element:hover .infos .more {
        border: 2px solid white;
    }

    .PMTContent .orientations .orientations-list .element .infos .more:before,
    .PMTContent .valeurs .valeurs-list .element .infos .more:before {
        background-color: var(--bgCMO);
    }

    .PMTContent .orientations .orientations-list .element:hover .infos .more:before,
    .PMTContent .valeurs .valeurs-list .element:hover .infos .more:before {
        width: calc(100% + 5px);
        height: calc(100% + 5px);
    }

    .PMTContent .orientations .orientations-list .element:hover .infos .more .cross:before,
    .PMTContent .orientations .orientations-list .element:hover .infos .more .cross:after,
    .PMTContent .valeurs .valeurs-list .element:hover .infos .more .cross:before,
    .PMTContent .valeurs .valeurs-list .element:hover .infos .more .cross:after {
        background-color: white;
    }


.PMTContent .orientations > .infos {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #212121;
    justify-content: flex-end;
}

    .PMTContent .orientations > .infos:hover .more:before {
        background-color: var(--bgCMO);
    }

    .PMTContent .orientations > .infos:hover .more:before {
        width: calc(100% + 5px);
        height: calc(100% + 5px);
    }

    .PMTContent .orientations > .infos:hover .more .cross:before,
    .PMTContent .orientations > .infos:hover .more .cross:after {
        background-color: white;
    }

@media (max-width: 999px) {
    .PMTContent .orientations .orientations-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .PMTContent .orientations > .infos {
        text-align: center;
        justify-content: center;
    }

    .PMTContent .line.orientations {
        padding-right: 0;
    }

    .PMTContent .orientations .orientations-list .element .mainElement {
        bottom: -20px;
    }
}

.PMTContent .plansActions {
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
}

    .PMTContent .plansActions .illustration img {
        width: 445px;
    }

    .PMTContent .plansActions .title-h2 {
        margin-bottom: 12px;
    }

    .PMTContent .plansActions .mainBtn {
        margin-top: 12px;
        margin-bottom: 24px;
        width: fit-content;
    }

    .PMTContent .plansActions .plan-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-end;
    }

        .PMTContent .plansActions .plan-list .more {
            height: 34px;
            width: 34px;
        }

        .PMTContent .plansActions .plan-list li a {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #212121;
            text-decoration: none;
        }

            .PMTContent .plansActions .plan-list li a p {
                position: relative;
                transition: transform 0.3s;
            }

        .PMTContent .plansActions .plan-list li .title {
            color: var(--color);
        }

        .PMTContent .plansActions .plan-list .more:before {
            content: "";
            height: 0%;
            width: 0%;
            background-color: var(--color);
            display: block;
            border-radius: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: height 0.3s, width 0.3s, background-color 0.3s;
        }

    .PMTContent .plansActions .commerciales,
    .PMTContent .plansActions .mutualistes,
    .PMTContent .plansActions .salaries {
        font-weight: 900;
    }

    .PMTContent .plansActions .commerciales {
        --color: #eb155e;
    }

    .PMTContent .plansActions .mutualistes {
        --color: #3e4f9d;
    }

    .PMTContent .plansActions .salaries {
        --color: #2da0e7;
    }

    .PMTContent .plansActions .plan-list li a:hover p {
        transform: translateX(-8px);
    }

    .PMTContent .plansActions .plan-list li a:hover .more {
        border: 2px solid white;
    }

        .PMTContent .plansActions .plan-list li a:hover .more:before {
            width: calc(100% + 5px);
            height: calc(100% + 5px);
        }

        .PMTContent .plansActions .plan-list li a:hover .more .cross:before,
        .PMTContent .plansActions .plan-list li a:hover .more .cross:after {
            background-color: white;
        }

@media (max-width:999px) {
    .PMTContent .plansActions {
        flex-direction: column;
        gap: 24px;
    }

        .PMTContent .plansActions .illustration img {
            width: 445px;
            max-width: 100%;
        }

    .PMTContent .line.plan {
        padding-right: 0;
        justify-content: center;
    }
}


.PMTContent .performance .content {
    border: 2px dotted #00339485;
    padding: 32px 48px;
    border-radius: 32px;
    margin-top: 32px;
}

.PMTContent .performance .performanceList > li {
    display: flex;
    gap: 48px;
    align-items: center;
    padding: 16px 0;
}

    .PMTContent .performance .performanceList > li:not(:last-child) {
        border-bottom: 2px dotted #00339485;
    }

    .PMTContent .performance .performanceList > li .intitule {
        aspect-ratio: 1;
        --o: calc(50%* tan(-22.5deg));
        clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
        background-color: #fcc40e;
        position: relative;
        padding: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        max-width: 160px;
        text-align: center;
        align-self: flex-start;
    }

        .PMTContent .performance .performanceList > li .intitule:before {
            content: "";
            display: block;
            position: absolute;
            width: calc(100% - 16px);
            aspect-ratio: 1;
            --o: calc(50%* tan(-22.5deg));
            clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
            background-color: var(--color-background);
            z-index: -1;
        }

    .PMTContent .performance .performanceList > li .avantages {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        text-align: center;
        gap: 24px;
        font-weight: 600;
        width: 100%;
    }

@media (max-width: 999px) {
    .PMTContent .performance .performanceList > li {
        flex-direction: column;
    }

        .PMTContent .performance .performanceList > li .intitule {
            margin: 0 auto;
        }

    .PMTContent .performance .performanceList > li {
        flex-direction: column;
        gap: 24px;
    }

        .PMTContent .performance .performanceList > li .avantages {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

            .PMTContent .performance .performanceList > li .avantages li {
                width: 120px;
            }

    .PMTContent .line.performance {
        padding-right: 0;
        justify-content: center;
    }
}

.PMTContent .mainVideo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

    .PMTContent .mainVideo iframe {
        background: linear-gradient(-90deg, #e9264f, #2b449e);
        padding: 10px;
        aspect-ratio: 16 / 9;
        width: 720px;
        height: auto;
        max-width: 100%;
    }

.PMTContent #valeurs {
    margin-bottom: 48px;
}

.PMTContent .valeurs .valeursList {
    display: flex;
    justify-content: space-evenly;
    margin: 24px 0;
}

    .PMTContent .valeurs .valeursList > li {
        aspect-ratio: 1;
        --o: calc(50%* tan(-22.5deg));
        clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
        position: relative;
        padding: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }

        .PMTContent .valeurs .valeursList > li.raison {
            background-color: #424b9a;
        }

        .PMTContent .valeurs .valeursList > li.valeurs {
            background-color: #e7274e;
        }

        .PMTContent .valeurs .valeursList > li.rse {
            background-color: #fec311;
        }

    .PMTContent .valeurs .valeursList p {
        color: var(--color-invariant_white);
        font-size: 1.4rem;
        text-align: center;
        padding: 24px;
        line-height: 2.7rem;
    }

        .PMTContent .valeurs .valeursList p span {
            display: block;
            font-weight: 600;
            width: 100%;
            text-transform: uppercase;
            font-size: 1.8rem;
        }


.PMTContent .valeurs .valeurs-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    justify-content: space-evenly;
    margin: 24px 0;
    justify-items: center;
    position: relative;
    overflow: hidden;
}

    .PMTContent .valeurs .valeurs-list .cmo {
        --valeur_color: #424b9a;
        --valeur_text: var(--color-invariant_white);
    }

    .PMTContent .valeurs .valeurs-list .valeurs {
        --valeur_color: #df0650;
        --valeur_text: #FFF;
    }

    .PMTContent .valeurs .valeurs-list .rse {
        --valeur_color: #2eb9d4;
        --valeur_text: #212121;
    }

    .PMTContent .valeurs .valeurs-list .mainElement {
        background-color: var(--valeur_color);
    }

    .PMTContent .valeurs .valeurs-list .mainElement > p {
        color: var(--valeur_color);
        padding: 22px;
    }

    .PMTContent .valeurs .valeurs-list .mainElement > p .highlight {
        display: block;
        width: 100%;
        text-transform: uppercase;
        font-size: 1.8rem;
        transition-duration: 0.3s;
        font-weight: 600;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        width: 100%;
        max-height: 0;
        overflow: hidden;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content .detail {
        border: 2px solid var(--valeur_color);
    }

        .PMTContent .valeurs .valeurs-list .element.active + .content .detail h3 {
            margin-bottom: 8px;
        }
        .PMTContent .valeurs .valeurs-list .element.active + .content .detail h3 .highlight {
            color: var(--valeur_color);
        }

    .PMTContent .valeurs .valeurs-list .content ul {
        position: relative;
        list-style: disc;
        padding-left: 16px;
        margin-top: 16px;
    }

        .PMTContent .valeurs .valeurs-list .content ul li + li {
            margin-top: 8px;
        }

        .PMTContent .valeurs .valeurs-list .content ul li::marker {
            color: var(--valeur_color);
        }

    .PMTContent .valeurs .valeurs-list .element.active + .content {
        max-height: fit-content;
        visibility: initial;
    }

.PMTContent .valeurs .element + .content.cmo p,
.PMTContent .valeurs .element + .content.cmo h3 {
    position: relative;
    left: -100%;
    opacity: 0;
    transition-duration: 0.3s;
}

.PMTContent .valeurs .element.active + .content.cmo h3 {
    left: 0%;
    opacity: 1;
    transition-delay: 0.4s;
}

.PMTContent .valeurs .element.active + .content.cmo .first {
    left: 0%;
    opacity: 1;
    transition-delay: 0.6s;
}

.PMTContent .valeurs .element.active + .content.cmo .second {
    left: 0%;
    opacity: 1;
    transition-delay: 0.8s;
}

.PMTContent .valeurs .content.cmo p + p {
    margin-top: 12px;
}

.PMTContent .valeurs .content.cmo .color {
    color: var(--valeur_color);
    font-weight: 700;
}

.PMTContent .valeurs .element + .content.valeurs .detail {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    gap: 24px;
}

.PMTContent .valeurs .valeurs-list .element.active + .content.valeurs .detail h3 {
    grid-column: span 3;
}

.PMTContent .valeurs .element + .content.valeurs .detail > div,
.PMTContent .valeurs .element + .content.valeurs .detail > h3{
    width: 100%;
    left: -100vw;
    opacity: 0;
    position: relative;
    transition-duration: 0.3s;
}

.PMTContent .valeurs .element.active + .content.valeurs .detail h3 {
    left: 0%;
    opacity: 1;
    transition-delay: 0.4s;
}

.PMTContent .valeurs .element.active + .content.valeurs .detail > .third {
    left: 0%;
    opacity: 1;
    transition-delay: 0.6s;
}

.PMTContent .valeurs .element.active + .content.valeurs .detail > .second {
    left: 0%;
    opacity: 1;
    transition-delay: 0.8s;
}

.PMTContent .valeurs .element.active + .content.valeurs .detail > .first {
    left: 0%;
    opacity: 1;
    transition-delay: 1s;
}

.PMTContent .valeurs .element + .content.valeurs .detail > div img {
    height: 50px;
    margin: 0 auto 12px auto;
    display: block;
}

.PMTContent .valeurs .content.valeurs .color {
    color: var(--valeur_color);
    font-weight: 700;
}

.PMTContent .valeurs .content.valeurs h4 {
    margin-bottom: 12px;
}

.PMTContent .valeurs .valeurs-list .content.rse ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
}

    .PMTContent .valeurs .valeurs-list .content.rse ul li {
        width: 100%;
        text-align: center;
        margin: 0;
        left: -100vw;
        opacity: 0;
        position: relative;
        transition-duration: 0.3s;
    }

    .PMTContent .valeurs .valeurs-list .content.rse .detail > p,
    .PMTContent .valeurs .valeurs-list .content.rse .detail > h3 {
        left: -100vw;
        opacity: 0;
        position: relative;
        transition-duration: 0.3s;
    }

        .PMTContent .valeurs .valeurs-list .content.rse ul li b {
            color: var(--bgCMO);
        }

.PMTContent .valeurs .valeurs-list .element.active + .content.rse h3 {
    left: 0%;
    opacity: 1;
    transition-delay: 0.4s;
}

.PMTContent .valeurs .valeurs-list .element.active + .content.rse .detail > p {
    left: 0%;
    opacity: 1;
    transition-delay: 0.6s;
}

.PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li {
    left: 0%;
    opacity: 1;
}

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(1) {
        transition-delay: 0.9s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(2) {
        transition-delay: 0.8s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(3) {
        transition-delay: 0.7s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(4) {
        transition-delay: 0.6s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(5) {
        transition-delay: 0.5s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(6) {
        transition-delay: 0.4s;
    }

.PMTContent .valeurs .title-h2 {
    padding: 72px 0 24px 0;
    margin-top: 48px;
    position: relative;
}

@media (max-width: 999px) {
    .PMTContent .valeurs .title-h2 {
        padding: 0;
        margin-bottom: 0;
    }

    .PMTContent .line.title {
        display: none;
    }

    .PMTContent .valeurs .valeurs-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
    }

        .PMTContent .valeurs .valeurs-list .element .mainElement {
            bottom: -20px;
        }

    .PMTContent .valeurs .element .line.element {
        display: none;
    }

    .PMTContent .valeurs .element + .content.valeurs .detail {
        display: flex;
        flex-direction: column;
    }

    .PMTContent .valeurs .element.active + .content.valeurs .detail > .first {
        transition-delay: 0.4s;
    }

    .PMTContent .valeurs .element.active + .content.valeurs .detail > .third {
        transition-delay: 0.8s;
    }

    .PMTContent .valeurs .valeurs-list .content.rse ul {
        flex-direction: column;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(1) {
        transition-delay: 0.4s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(2) {
        transition-delay: 0.5s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(3) {
        transition-delay: 0.6s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(4) {
        transition-delay: 0.7s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(5) {
        transition-delay: 0.8s;
    }

    .PMTContent .valeurs .valeurs-list .element.active + .content.rse ul li:nth-child(6) {
        transition-delay: 0.9s;
    }
}

.PMTContent .line img {
    max-width: 100%;
}

.PMTContent .line.intro {
    margin-bottom: 24px;
    margin-top: 48px;
    height: 168px;
    display: flex;
    justify-content: center;
    padding-left: 16%;
}

.PMTContent .line.orientations {
    height: 180px;
    display: flex;
    margin: 24px 0 -48px 0;
    justify-content: center;
    padding-right: 10%;
}

.PMTContent .line.plan {
    height: 180px;
    display: flex;
    padding-right: 18%;
    justify-content: flex-end;
    margin: -24px 0 24px 0;
}

.PMTContent .line.performance {
    display: flex;
    height: 150px;
    justify-content: flex-end;
    padding-right: 25%;
    margin: 48px 0 24px 0;
}

.PMTContent .line.title {
    position: absolute;
    width: 168px;
    top: 0;
    transform: rotate(90deg) translateY(45px);
    left: 0;
}

.PMTContent .valeurs .element.cmo .line.element {
    width: 168px;
    position: absolute;
    top: 300px;
    left: 33.3%;
    transform: translate(-50%, -100%);
    margin-left: -8px;
}

.PMTContent .valeurs .element.valeurs .line.element {
    width: 168px;
    position: absolute;
    top: 300px;
    left: 66.6%;
    transform: translate(-50%, -100%);
    margin-left: -8px;
}

.PMTContent .valeurs .content.rse .infos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #212121;
    margin-top: 4px;
    left: -100vw;
    opacity: 0;
    position: relative;
    transition-duration: 0.3s;
}

.PMTContent .valeurs .element.active + .content.rse .infos {
    left: 0%;
    opacity: 1;
    transition-delay: 1s;
}

    .PMTContent .valeurs .content.rse .infos:hover .more:before {
        width: calc(100% + 5px);
        height: calc(100% + 5px);
    }

    .PMTContent .valeurs .content.rse .infos:hover .more:before {
        background-color: var(--bgCMO);
    }

    .PMTContent .valeurs .content.rse .infos:hover .more .cross:after {
        background-color: white;
    }

    .PMTContent .valeurs .content.rse .infos:hover .more .cross:before {
        background-color: white;
    }

.PMTContent .content.rse .bottom {
    margin-top: 16px;
}

.PMTContent .element.active + .content.rse .bottom {
    transition-delay: 1s;
}

@media (max-width:999px) {
    .PMTContent .line.intro {
        padding: 0;
        text-align: center;
    }

    .PMTContent .line img {
        height: 100%;
        width: auto;
    }
}