body {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background: var(--color);
    min-height: 100vh;
    align-items: center;
}

main {

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1400px;

}

/* hero */
.hero {
    display: flex;
    align-items: center;
    padding-bottom: 21px;
    min-height: 58vh;
    /* background: #248aff14; */
    flex-direction: row;
    justify-content: space-between;
}

.hero .vp {
    min-width: 60%;
    width: 60%;
}

.hero .vp .benef {
    display: flex;
    align-items: center;
    padding: 4px;
    /* border: solid 2px var(--act1); */
    border-radius: 8px;
    background: var(--actText1);
}

.hero .vp .benef .ico {
    padding: 8px;
    /* background: var(--bg); */
    display: flex;
    justify-content: center;
    border-radius: 5px;
}

.hero .vp .benef .ico svg {
    stroke-width: 0px;
    height: 18px;
    width: 18px;
    fill: var(--act1);
}

.hero .vp .benef p {
    color: var(--actText2);
    padding-right: 8px;
    font-weight: 400;
    font-size: 12px;
}

.hero .vp h2 {
    font-size: 28px;
    text-align: end;
    width: 100%;
}
.hero .vp h2 #anim {
    min-height: 52px;
    }

.hero .vp h2 span {
    font-weight: 700;
    font-size: 52px;
    line-height: 100%;
}

.hero .vp p {
    font-size: 16px;
    font-weight: 500;
    line-height: 160%;
    text-align: right;
}

.hero .vp .cta {
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
}

.hero .heroImg {
    height: 100%;
    max-width: 36%;
    display: flex;
    align-items: center;
}

.hero .heroImg img {
    max-width: 100%;
    height: auto;
}


 section .title h2 {
    font-size: 38px;
    font-weight: 700;
}

/* parcours */
.parcours {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-between;
}

.parcours .parcoursDiv {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

.parcours .parcoursDiv .parcour {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    width: calc(25% - 20px);
    min-width: 210px;
    padding: 40px;
    border-radius: 10px;
    background: var(--act2);
    box-shadow: 4px 4px 8px #00000010;
    outline: solid 2px var(--bgCard);
    flex-wrap: wrap;
}

.parcours .parcoursDiv .parcour.two {
    width: calc(50% - 90px);
    min-width: 260px;
    padding: 40px;
    border-radius: 30px;
}

.parcours .parcoursDiv .parcour.three {
    min-width: 210px;
    width: calc(25% - 20px);
}

.parcours .parcoursDiv .parcour.V {
    width: calc(100% - 80px);
    flex-direction: row;
    gap: 12px;
    padding: 40px;
    border-radius: 30px;
    /* background: var(--bg); */
    max-width: calc(100% - 80px);
}

.parcours .parcoursDiv .parcour .badgeDiv {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    translate: 25px -25px;
    margin-bottom: -25px;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 4px;
}

.parcours .parcoursDiv .parcour .badgeDiv .badge {
    background-color: var(--bg);
    padding: 10px 15px;
    font-weight: 500;
    height: fit-content;
    border-radius: 20px;
    border: solid 2px var(--bgCard);
}

.parcours .parcoursDiv .parcour.V .badgeDiv .badge {
    /* background-color: var(--color); */
}

.parcours .parcoursDiv .parcour .badgeDiv .badge.G {
    filter: hue-rotate(310deg);
}

.parcours .parcoursDiv .parcour .badgeDiv .badge.P {
    filter: hue-rotate(45deg);
}

.parcours .parcoursDiv .parcour .badgeDiv .badge.R {
    filter: hue-rotate(100deg);
}

.parcours .parcoursDiv .parcour .badgeDiv .badge p {
    font-size: 10px;
    font-family: var(--pFont);
    color: var(--first);
    font-weight: 500;
}

.parcours .parcoursDiv .parcour .titre {
    font-size: 1.2em;
    font-weight: 500;
    width: 100%;
}

.parcours .parcoursDiv .parcour .titre h3 {
    font-size: 1.2em;
}

.parcours .parcoursDiv .parcour .desc {
    font-size: smaller;
    /* padding: 10px 0; */
}

.parcours .parcoursDiv .parcour .tagsDiv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.parcours .parcoursDiv .parcour .tagsDiv .mainTags {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;
    flex-wrap: wrap;
}

.parcours .parcoursDiv .parcour .tagsDiv .mainTags .Tag {
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 400;
    font-size: smaller;
    background: var(--bgCard);
}

.parcours .parcoursDiv .parcour .tagsDiv .mainTags .Tag b {
    color: var(--htext);
    font-size: 12px;
    font-weight: 500;
}

.parcours .parcoursDiv .parcour .tagsDiv .icoTags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
    max-width: 600px;
}

.parcours .parcoursDiv .parcour .tagsDiv .icoTags .icoTag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    background-color: var(--bgCard);
    padding: 5px 10px 5px 5px;
    border-radius: 20px;
    font-size: smaller;
    /* border: solid 2px var(--bgCard); */
}

.parcours .parcoursDiv .parcour .tagsDiv .icoTags .icoTag.M {
    padding: 5px 10px 5px 10px;
}

.parcours .parcoursDiv .parcour .tagsDiv .icoTags .icoTag.M b {}

.parcours .parcoursDiv .parcour.V .tagsDiv .icoTags .icoTag {
    background-color: var(--color);
}

.parcours .parcoursDiv .parcour .tagsDiv .icoTags .icoTag .ico {
    display: flex;
    align-items: center;
    padding: 0 2px;
}

.parcours .parcoursDiv .parcour .tagsDiv .icoTags .icoTag .ico svg {
    height: 14px;
    width: 14px;
}

.parcours .parcoursDiv .parcour .tagsDiv .icoTags .icoTag p {
    /* font-weight: 600; */
    margin: 0;
    font-size: 12px;
    color: var(--htext);
    line-height: 0;
}

.parcours .parcoursDiv .parcour .tagsDiv .icoTags .icoTag b {
    /* font-weight: 600; */
    margin: 0;
    font-size: 12px;
    color: var(--htext);
    line-height: 0;
}

.parcours .parcoursDiv .parcour .imgDiv {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.parcours .parcoursDiv .parcour .imgDiv img {
    border-radius: 5px;
    width: 100%;
    max-width: 600px;
}

.parcours .parcoursDiv .parcour .commitDiv {}

.parcours .parcoursDiv .parcour .commitDiv button {
    width: 100%;
    padding: 12px;
}

.parcours .parcoursDiv .parcour.V {}

.parcours .parcoursDiv .parcour.V h2 {
    color: var(--color);
}

.parcours .parcoursDiv .parcour.V h3 {}

.parcours .parcoursDiv .parcour.V p {}

.parcours .parcoursDiv .parcour.V .commitDiv {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* width: 100%; */
}

.parcours .parcoursDiv .parcour.V .commitDiv button {
    width: auto;
}

/* partenaires */
.partenairesDiv {
    /* width: 100%; */
    margin: 20px 0;
    padding: 40px 20px;
    border-radius: 20px;
    background-color: var(--htext);
    min-height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.partener {
    display: flex;
    padding: 10px;
    align-items: center;
    /* height: 70px; */
    width: 140px;
    background-color: #00000000;
    border-radius: 10px;
    transition: 400ms;
    scale: 1;
    filter: saturate(0);
    opacity: 0.5;
}

.partener:hover {
    background-color: #00000010;
    filter: saturate(1);
    scale: 1.2;
    opacity: 1;
}

.partener img {
    width: 100%;
}

/* chiffres */
.chiffre {}

.chiffresDiv {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 20px 0;
    width: 100%;

}

.chiffresDiv .keyValueDiv {
    min-width: 50%
}

.chiffresDiv .keyValueDiv .keyValue {
    height: 34vw;
    width: calc(100% - 40px);
    background-color: #00000010;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chiffresDiv .keyValueDiv .keyValue .chiffre {}

.chiffresDiv .keyValueDiv .keyValue .chiffre .indice {
    text-align: end;
    height: 0;
}

.chiffresDiv .keyValueDiv .keyValue .chiffre .valeur {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.chiffresDiv .keyValueDiv .keyValue .chiffre .valeur h4 {
    line-height: 1em;
    font-size: 5em;
    margin: 0;
}

.chiffresDiv .keyValueDiv .keyValue .chiffre .valeur .tit {}

.chiffresDiv .keyValueDiv .keyValue .chiffre .valeur .tit h3 {
    line-height: 1em;
    font-size: 2em;
    margin: 0;
}

.chiffresDiv .keyValueDiv .keyValue .chiffre .valeur b {
    margin: 0;
    font-size: larger;
}

.chiffresDiv .keyValueDiv .keyValue .chiffre .valeur p {
    margin: 0;
    font-size: small;
}

.chiffresDiv .keyValueDiv .keyValue .indicatrues {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

.chiffresDiv .keyValueDiv .keyValue .indicatrues .indicatrue {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chiffresDiv .keyValueDiv .keyValue .indicatrues .indicatrue .ico {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #00000010;
    padding: 20px 15px;
    margin: 5px;
    border-radius: 50px;
}

.chiffresDiv .keyValueDiv .keyValue .indicatrues .indicatrue p {
    margin: 0;
    text-align: center;
    font-size: smaller;
}

.chiffresDiv .keyValueDiv .keyValue .indicatrues .indicatrue b {
    margin: 0;
    text-align: center;
    font-size: smaller;
}

.chiffresDiv .ValuesDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}

.chiffresDiv .ValuesDiv .value {
    height: calc(50% - 45px);
    width: calc(32% - 41px);
    background-color: #00000010;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chiffresDiv .ValuesDiv .value .ico {}

.chiffresDiv .ValuesDiv .value .tit {
    margin-bottom: 6px;
}

.chiffresDiv .ValuesDiv .value .tit p {
    font-size: smaller;

}

.chiffresDiv .ValuesDiv .value .tit b {
    font-size: smaller;

}

/* entreprises */
.entreprises .entreprisesDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    width: 100%;
}

.entreprises .entreprisesDiv .TypeDiv {}

.entreprises .entreprisesDiv .TypeDiv .type {}

.entreprises .entreprisesDiv .TypeDiv .type button {
    margin: auto;
    font-size: 12px;
    border: none;
    border-radius: 20px;
    transition: 0.4s;
}

.entreprises .entreprisesDiv .typeContent {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px;
    /* background: var(--bgCard); */
    /* margin: 20px 0px; */
    border-radius: 30px;
    transition: 400ms;
    opacity: 0;
    animation: fade 0.8s;
    width: calc(100% - 60px);
}

div#type2 {}


.entreprises .entreprisesDiv .typeContent .textContent {
    width: 70%;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.entreprises .entreprisesDiv .typeContent .textContent .tit {
    margin: 0 0 12px 0;
}

.entreprises .entreprisesDiv .typeContent .textContent h3 {
    font-size: 1.8em;
}

.entreprises .entreprisesDiv .typeContent .textContent b {
    font-weight: 400;
}

.entreprises .entreprisesDiv .typeContent .textContent p {
    margin-bottom: 12px;
}

.entreprises .entreprisesDiv .typeContent .textContent button {
}

.entreprises .entreprisesDiv .imgContent {
    display: flex;
    width: 27%;
    margin: 10px;
    overflow: hidden;
    border-radius: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.entreprises .entreprisesDiv .full {
    border-radius: 10px;
    width: 100%;
}

.entreprises .entreprisesDiv .helf {
    border-radius: 10px;
    width: calc(50% - 5px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bgCard);
    min-width: auto;
}

/* didactique */
.didactique {
    background: #00336d;
    border-radius: 50px;
    width: calc(100% - 20vw);
    background-image: url(../img/patern3.png);
    background-blend-mode: hue;
    background-size: contain;
}

.didactique .title {
    text-align: center;
}
.didactique .title h2{
    color: var(--actText1);
}
.didactique .title p{
    color: var(--actText1);
}

.didactique .didactiqueDiv {
    display: flex;
    justify-content: center;
    width: calc(100% + 10vw);
    align-items: stretch;
    flex-direction: row;
}

.didactique .didactiqueDiv.L {}

.didactique .didactiqueDiv.R {
    flex-direction: row-reverse;
}

.didactique .didactiqueDiv .image {
    width: 41%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.didactique .didactiqueDiv .image img {
    width: 100%;
    width: 75%;
    border-radius: 20px;
    aspect-ratio: 1 / 1;

}

.didactique .didactiqueDiv .texte {

    width: calc(50% - 100px);
    display: flex;
    flex-direction: column;
    padding: 50px;
    gap: 20px;
    min-width: calc(50% - 100px);
    justify-content: center;
}

.didactique .didactiqueDiv .texte h3 {
    font-size: 28px;
    color: var(--actText1);
    font-weight: 700;
}

.didactique .didactiqueDiv .texte p {
    font-size: 16px;
    font-weight: 500;
}

.didactique .didactiqueDiv .texte .benefices {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    /* margin: 0 12px; */
}

.didactique .didactiqueDiv .texte .benefices p {
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    margin-left: 38px;
}

.didactique .didactiqueDiv .texte .benefices .benefice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.didactique .didactiqueDiv .texte .benefices .benefice .titre {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* margin: 0 0 4px 0; */
}
.didactique .didactiqueDiv .texte .benefices h4 {
    color: var(--actText1);
    font-size: 18px;
}
.didactique .didactiqueDiv .texte .benefices p {
    font-weight: 400;
    color: var(--actText1);
}

.didactique .didactiqueDiv .texte .benefices .benefice .ico {
    width: 30px;
    height: 30px;
    min-width: 30px;
    /* margin-top: 4px; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--actText1);
    border-radius: 5px;
}

.didactique .didactiqueDiv .texte .benefices .benefice .ico svg {
    color: var(--color);

}

/* blog */
.blog {}

.blog .blogDiv {
    display: flex;
    margin: 20px 0;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.blog .blogDiv .article {
    width: 25%;
    min-width: 285px;
    padding: 10px;
    background-color: #00000010;
    border-radius: 10px;
}

.blog .blogDiv .article .img {}

.blog .blogDiv .article .img img {
    width: 100%;
    border-radius: 5px;
}

.blog .blogDiv .article .content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog .blogDiv .article .content .tit {
    margin: 10px 0;
}

.blog .blogDiv .article .content .meta {
    display: flex;
    /* justify-content: space-between; */
    gap: 20px;
    font-size: small;
}

.blog .blogDiv .article .content .meta p {
    margin: 0;
}

.blog .blogDiv .article .content .meta .date {}

.blog .blogDiv .article .content .meta .auteur {}

.blog .blogDiv .article .content .extais {}

.blog .blogDiv .article .content .cta {}

/* entreprises */
.carriere {}

.carriere .carriereDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

.carriere .carriereDiv .TypeDiv {}

.carriere .carriereDiv .TypeDiv .type {}

.carriere .carriereDiv .TypeDiv .type button {
    margin: auto;
    font-size: x-small;
}

.carriere .carriereDiv .typeContentA {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    padding: 20px;
    margin: 20px 0px;
    border-radius: 10px;
    transition: 400ms;
    opacity: 0;
    animation: fade 0.8s;
}

.carriere .carriereDiv .typeContentA .textContent {
    width: 50%;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.carriere .carriereDiv .typeContentA .textContent .tit {
    margin: 0 0 20px 0;
}

.carriere .carriereDiv .typeContentA .textContent h3 {
    font-size: 1.8em;
}

.carriere .carriereDiv .typeContentA .textContent b {
    font-weight: 600;
}

.carriere .carriereDiv .typeContentA .textContent p {}

.carriere .carriereDiv .typeContentA .textContent button {}

.carriere .carriereDiv .imgContent {
    width: 40%;
    margin: 10px;
    overflow: hidden;
    border-radius: 10px;
}

.carriere .carriereDiv img {
    min-width: 100%;
    border-radius: 10px;
    filter: invert(1);
    height: 100%;
    scale: 1.1;
}

/* avis */
.Avis {}

.Avis .avisDiv {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 10px;
}

.Avis .avisDiv .avisCol {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 10px;
}

.Avis .avisDiv .avisCol .avis {
    width: calc(100% - 20px);
    max-width: 280px;
    min-width: 212px;
    background-color: var(--bgCard);
    border: solid 1px #00000010;
    border-radius: 10px;
    padding: 10px;
}

.Avis .avisDiv .avisCol .avis .de {
    display: flex;
    gap: 10px;
}

.Avis .avisDiv .avisCol .avis .de .pic {}

.Avis .avisDiv .avisCol .avis .de .pic img {
    height: 50px;
    width: 50px;
    border-radius: 5px;
}

.Avis .avisDiv .avisCol .avis .de .who {
    margin: 5px 0;
}

.Avis .avisDiv .avisCol .avis .de .who p {
    margin: 0;
    font-weight: 700;

}

.Avis .avisDiv .avisCol .avis .de .who b {
    font-size: small;
    margin: 0;
    opacity: 0.4;
}

.Avis .avisDiv .avisCol .avis .de .who .name {}

.Avis .avisDiv .avisCol .avis .de .who .name .profetion {}

.Avis .avisDiv .avisCol .avis .text {}

.Avis .avisDiv .avisCol .avis .text p {}

@media screen and (max-width: 1023px) {
    nav .deskMainMenu {
        display: none;
    }

    nav .deskSubMenu {
        display: none;
    }

    nav .MobMainMenu {
        display: flex;
    }

    nav .MoSubnMenu {
        display: flex;
    }

    .hero .vp h2 {
        font-size: 21px;
        text-align: left;
    }

    .hero .vp h2 span {
        font-size: 42px;
    }

    .parcours .parcoursDiv .parcour.V {
        flex-direction: column;
    }

    .parcours .parcoursDiv .parcour .imgDiv img {
        width: 100%;
    }
    .didactique {
    border-radius: 0px;
                width: calc(100% - 10vw);

    }

    .chiffresDiv {
        gap: 20px;
        margin: 20px 0;
        flex-direction: column;
        align-items: center;
    }

    .chiffresDiv .keyValueDiv .keyValue {
        height: calc(100vw - 96px);
        width: calc(100% - 40px);
        background-color: #00000010;
        border-radius: 10px;
        max-height: 350px;
    }

    .chiffresDiv .keyValueDiv .keyValue .chiffre .valeur {
        /* flex-direction: row; */
    }

    .chiffresDiv .ValuesDiv {
        gap: 10px;
        width: 100%
    }

    .chiffresDiv .ValuesDiv .value {
        width: calc(50% - 45px);
        height: auto;

    }


    .Avis .avisDiv {
        flex-wrap: wrap;
    }
}


@media screen and (max-width:700px) {
    .hero .vp {
        width: 100%;
    }

    .hero .vp .benef span {
        display: none;
    }
    .hero .vp p {
    text-align: left;
    }
    .hero .heroImg {
    display: none;
    }



    section .title {
        /* text-align: center; */
    }

    .parcours .parcoursDiv .parcour.V .commitDiv button {
        width: 100%;
    }

    .entreprises .entreprisesDiv .typeContent .textContent {
        width: 100%;
    }

    .entreprises .entreprisesDiv img {
        width: 100%;
        min-width: 278px;
        border-radius: 10px;
    }

    .didactique .didactiqueDiv {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .didactique .didactiqueDiv.R {
        flex-direction: column;
    }

    .didactique .didactiqueDiv .image {
        width: 90%;
    }

    .didactique .didactiqueDiv .image img {
        /* width: 85%; */
    }

    .didactique .didactiqueDiv .texte {
        width: auto;
    }

    .didactique .didactiqueDiv .texte h3 {
        /* font-size: 21px; */
    }

    .entreprises .entreprisesDiv .imgContent {
        width: auto;
    }

    .carriere .carriereDiv .typeContentA .textContent {
        width: 100%;
    }

    .carriere .carriereDiv img {
        width: 100%;
        min-width: 278px;
        border-radius: 10px;
    }

    .carriere .carriereDiv .imgContent {
        width: auto;
    }

}