body {
    background: var(--bgCard);
}
main {
    max-width: 1400px;
}

section {
    margin: 50px 20px;
    display: flex;
    width: calc(100% - 40px);
    flex-direction: column;
    align-items: flex-start;
}
section h3{
    font-size: 16px;
}

.speechBtnDiv {
    padding: 12px;
}

.speechDiv {
    top: 0px;
    z-index: 10;
    position: sticky;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 0;
}

.speechDiv button {
    padding: 14px;
    background: var(--color);
    border-radius: 50px;
    box-shadow: 4px 4px 8px #00000010;
    transition: 0.4s;
}

.speechDiv button.active {}

.speechDiv button svg {
    height: 21px;
    width: 21px;
    stroke: var(--htext);
}

.speechDiv button.active svg {
    stroke: var(--act1);
}

.descriptionDiv,
.parcour,
.supports,
.Contributeurs,
.certification,
.projets,
.financement,
.conditions,
.help {
    width: calc(100% - 290px - 10vw);
    padding: 20px;
    border-radius: 10px;
    background-color: var(--color);
    /* border: solid 2px #e9e9e9; */
    box-shadow: 3px 2px 6px #00000010;
}

section .title {}

section .title h2 {}

section .title p {}

.hero {
    height: auto;
    min-height: 40vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: calc(100% - 10vw);
    /* padding-bottom: 0; */
    background: #248aff14;
}


.resumDiv {
    display: flex;
    justify-content: flex-end;
    width: calc(30% - 20px);
    align-items: center;
    height: 0px;
}

.resumDiv .resum {
    /* width: calc(100% - 20px); */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    position: fixed;
    translate: 20px 0px;
    background-color: var(--color);
    /* border: solid 2px #e9e9e9; */
    box-shadow: 3px 2px 6px #00000010;
}

.resumDiv .resum .InfosDiv {
    min-width: 250px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    font-size: smaller;
    align-items: center;
    /* border: solid;
    border-width: 0px 0px 2px 0px; */
    width: -webkit-fill-available;
}

.resumDiv .resum .InfosDiv .Info {
    display: flex;
    gap: 5px;
    max-width: 50%;
    align-items: center;
}

.resumDiv .resum .InfosDiv .Info .ico {
    display: flex;
    align-items: center
}

.resumDiv .resum .InfosDiv .value {
    max-width: 50%;
}

.resumDiv .resum .InfosDiv .Info .name {
    display: flex;
    align-items: center;
    gap: 4px;
}
.resumDiv .resum .InfosDiv .Info .name p {font-size: 12px;color:var(--htext)}
.resumDiv .resum .InfosDiv .Info .name b {font-size: 12px;color:var(--htext)}
.resumDiv .resum .InfosDiv .Info .name svg {height: 14px;width 18px;color:var(--first);width: 14px;}

.resumDiv .resum .InfosDiv .value p {
    font-size: 12px;
    text-transform: capitalize;
}

.resumDiv .resum .CTAsDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding-top: 10px;
    flex-direction: column;
}

.resumDiv .resum .CTAsDiv .cta {
    width: 100%;
}

.resumDiv .resum .CTAsDiv .cta button {
    width: 100%;
    padding: 12px 18px;
}

.resumDiv .resum .CTAsDiv .cta .commit {}

.descriptionDiv {}

.descriptionDiv .decription {}

.descriptionDiv .decription p {
    font-size: 16px;
    line-height: 140%;
}

.descriptionDiv .debouches {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
}

.descriptionDiv .debouches .col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 45%;
}

.descriptionDiv .debouches .col h3 {}

.descriptionDiv .debouches .col .liste {

    margin: 0 0 0 20px;
}

.descriptionDiv .debouches .col .liste li {
    font-size: 16px;
    font-weight: 500;
    line-height: 160%;
}

.parcour {}

.parcour .parcourDiv {}

.parcour .parcourDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.parcour .parcourDiv .objectif {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}

.parcour .parcourDiv .objectif .ico {
    padding: 14px;
    background-color: var(--bgCard);
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.parcour .parcourDiv .objectif .ico svg {
    height: 20px;
    width: 20px;
    /* color:var(--third); */
}

.parcour .parcourDiv .objectif .ExplaneDiv {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 15px;
    background-color: var(--bgCard);
    border-radius: 5px;
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane {}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane .name {}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane .name h4 {
    font-weight: 600;
}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane .exp {
    display: none;
}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane .exp.active {
    display: block;
}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane .exp .obj {
    background: var(--color);
    padding: 10px 15px;
    border-radius: 5px;
    margin: 10px 0;
}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane .exp p {
    font-size: 12px;
}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane .exp .toGet {
    width: calc(100% - 30px);
    background: var(--color);
    padding: 10px 15px;
    border-radius: 5px;
}

.parcour .parcourDiv .objectif .ExplaneDiv .Explane .exp .toGet b {
    font-size: 12px;
}

.parcour .parcourDiv .objectif .ExplaneDiv .moreIco {
    translate: 10px -10px;
    border: none;
    padding: 2px;
    border-radius: 10px;
}

.parcour .parcourDiv .objectif .ExplaneDiv .moreIco.active {
    rotate: 45deg;
}

.parcour .parcourDiv .objectif .ExplaneDiv .moreIco svg {
    /* height: 18px; */
    /* width: 18px; */
}

.supports {}

.supports .supportsDiv {
    display: grid;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(250px, 3fr));
}

.supports .supportsDiv .support {
    display: flex;
    align-items: stretch;
    gap: 10px;
    /* width: 27%; */
    /* width: 40%; */
    justify-content: flex-start;
    padding: 15px;
    background-color: var(--bgCard);
    border-radius: 5px;
    flex-direction: column;
}

.supports .supportsDiv .support .tit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.supports .supportsDiv .support .tit .ico {
    display: flex;
    align-items: center;
}

.supports .supportsDiv .support .tit svg {
    width: 20px;
    height: 20px;
    color: var(--third);
}

.supports .supportsDiv .support .exp {
    font-size: small;

}

.Contributeurs {}

.Contributeurs .contibuteursDiv {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.Contributeurs .contibuteursDiv .contibuteur {
    display: flex;
    align-items: stretch;
    /* gap: 10px; */
    /* width: 27%; */
    justify-content: flex-start;
    padding: 15px;
    background-color: var(--bgCard);
    border-radius: 10px;
    flex-direction: column;
}

.Contributeurs .contibuteursDiv .contibuteur .de {
    display: flex;
    gap: 10px;
}

.Contributeurs .contibuteursDiv .contibuteur .de .pic {
    width: 50px;
    height: 50px;
}

.Contributeurs .contibuteursDiv .contibuteur .de .pic img {
    height: 100%;
    border-radius: 30px;
    width: 100%;
}

.Contributeurs .contibuteursDiv .contibuteur .de .who {}

.Contributeurs .contibuteursDiv .contibuteur .de .who .name {}

.Contributeurs .contibuteursDiv .contibuteur .de .who .name p {
    font-weight: 600;
    font-size: 16px;
}

.Contributeurs .contibuteursDiv .contibuteur .de .who .profetion {}

.Contributeurs .contibuteursDiv .contibuteur .de .who .profetion b {
    font-size: 12px;
    opacity: .8;
    font-weight: 400;
}

.Contributeurs .contibuteursDiv .contibuteur .de .who .profetion p {
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
}

.Contributeurs .contibuteursDiv .contibuteur .text {
    display: flex;
    padding: 10px 20px;
    flex-direction: column;
    align-items: flex-end;
}

.Contributeurs .contibuteursDiv .contibuteur .text .ico {
    height: 0;
    translate: 20px -40px;
}


.Contributeurs .contibuteursDiv .contibuteur .text svg {
    fill: var(--third);
    stroke: transparent;
    height: 32px;
    width: 32px;
}

.Contributeurs .contibuteursDiv .contibuteur .text p {
    font-weight: 600;
    font-size: 16px;
    opacity: 0.4;
    line-height: 21px;
    padding-left: 40px;
}

.certification {}

.certification .certificationDiv {
    display: flex;
    width: 100%;
    gap: 10px;
}

.certification .certificationDiv svg {
    stroke: var(--third);
    /* stroke-width: 0; */
}

.certification .certificationDiv .tit {
    display: flex;
    width: 100%;
    margin: 0;
    gap: 5px;
    align-items: center;
}

.certification .certificationDiv .certifMain {
    width: calc(50%);
    background-color: var(--bgCard);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.certification .certificationDiv .certifMain .liste {

    padding: 0 10px;

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.certification .certificationDiv .certifMain .liste .point {

    display: flex;

    gap: 5px;
}

.certification .certificationDiv .certifMain .liste b {}

.certification .certificationDiv .certifMain .liste .point .ico {}

.certification .certificationDiv .certifMain .liste .point .ico svg {}

.certification .certificationDiv .certifOptDiv {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.certification .certificationDiv .certifOptDiv .certifOpt {
    height: calc(100% - 10px);
    width: calc(100% - 20px);
    background-color: var(--bgCard);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.projets {}

.projets .projetsTypeDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.projets .projetsTypeDiv .projetType {
    padding: 10px;
    /* border: solid 1px #00000010; */
    border-radius: 5px;
    background: var(--bgCard);
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: calc(50% - 25px);
}

.projets .projetsTypeDiv .projetType .details {
    display: flex;
    gap: 10px;
}

.projets .projetsTypeDiv .projetType .details .duree {}

.projets .projetsTypeDiv .projetType .details .qualite {}

.projets .projetsTypeDiv .projetType .description {}

.conditions {}

.conditions .conditionsDiv {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;

}

.conditions .conditionsDiv .condition {
    display: flex;
    align-items: stretch;
    gap: 5px;
    justify-content: flex-start;
    padding: 15px;
    background-color: var(--bgCard);
    border-radius: 5px;
    flex-direction: column;
    width: calc(50% - 35px);
}

.conditions .conditionsDiv .condition .name {
    display: flex;
    align-items: center;
    gap: 5px;
}

.conditions .conditionsDiv .condition .name .ico {
    display: flex;
    align-items: center;
}

.conditions .conditionsDiv .condition .termes {}

.conditions .conditionsDiv .condition .termes h4 {}

.conditions .conditionsDiv .condition .termes p {
    margin: 0 24px;
}

.financement {}

.financement .financementDiv {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(250px, 4fr));
    flex-wrap: wrap;
}

.financement .financementDiv .Option {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 27%;
    min-width: 40%;
    justify-content: flex-start;
    padding: 15px;
    background-color: var(--bgCard);
    border-radius: 5px;
    flex-direction: column;
    flex: 1;
    flex-wrap: wrap;
}

.financement .financementDiv .Option .tit {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;
    margin: 0;
    flex-wrap: wrap;
    justify-content: space-between;
}

.financement .financementDiv .Option .tit .ico {
    display: flex;
    align-items: center;
}

.financement .financementDiv .Option .tit svg {
    width: 20px;
    height: 20px;
    color: var(--third);
}

.financement .financementDiv .Option .tit .price {
    padding: 4px;
    margin-left: auto;
    background: var(--act2);
    border-radius: 20px;
    min-width: max-content;
}

.financement .financementDiv .Option .tit .price b {
    color: var(--first);
    font-size: 12px;
}

.financement .financementDiv .Option .exp {
    font-size: small;

}
.financement .cta {
    margin-top: 14px;
}

.financement .cta button {
    font-size: 16px;
    padding: 12px 18px;
}

.help {
    /* background-color: #b85e8e; */
    padding: 20px;
    /* border-radius: 20px; */
    /* width: calc(100% - 100px); */
}

.help .tit {
    width: 100%;
    margin: 0 0 10px 0;
    display: flex;
    gap: 4px;
    flex-direction: column;
}

.help .tit h3 {}

.help .tit b {}

.help .tit p {}

.help .question {
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.help .question .inp {
    width: 100%;
    height: 40px;
    background-color: var(--bgCard);
    border-radius: 25px 0px 0px 25px;
    padding: 5px;
    border: solid 1px var(--act1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.help .question .inp input {
    border: none;
    outline: none;
    padding: 10px;
    font-size: 14px;
    color: hsl(0deg 0% 0% / 90%);
    background-color: transparent;
}

.help .question .opt {
    color: var(--act2);
    /* height: 40px; */
    background-color: var(--act1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 25px 25px 0px;
    padding: 0px 12px;
    border: solid 1px #00000020;
    cursor: pointer;
}

.help .question .opt .info {
    display: none;
    position: relative;
    top: -40px;
    flex-direction: column;
    align-items: center;
    width: 0px;
    opacity: 1;
    transition: 0.4s;
    padding: 12px;
}

.help .question .opt:hover .info {
    display: flex;
}

.help .question .opt .info p {
    text-align: center;
    font-size: xx-small;
    font-weight: 500;
    width: max-content;
    padding: 5px;
    background: var(--bg);
    border-radius: 5px;
    color: var(--htext);
}

.help .question .answer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}

.help .question .answer .ico {
    display: flex;
    align-items: center;
    gap: 10px;
}

.help h3 {}

.help p {}

.help button {}

@media screen and (max-width: 1023px) {

    .descriptionDiv,
    .parcour,
    .supports,
    .Contributeurs,
    .certification,
    .projets,
    .financement,
    .conditions {
        width: calc(100% - 80px);
    }

    .hero .tit {
        width: 100%;
    }

    .resumDiv {
        width: 100%;
        height: auto;
    }

    .resumDiv .resum {
        width: calc(100% - 20px);
        position: static;
        right: 20px;
        translate: 0;
    }

    .supports .supportsDiv .support {
        width: calc(100% - 30px);

    }

    .certification .certificationDiv {
        flex-direction: column;
    }

    .certification .certificationDiv .certifMain {
        width: auto;
    }

    .certification .certificationDiv .certifOptDiv {
        width: auto;
    }

    .projets .projetsTypeDiv .projetType {

        width: calc(100% - 20px);
    }

    .help {
        width: auto;
    }


}

@media screen and (max-width:700px) {
    .conditions .conditionsDiv .condition {
        width: auto;
    }

}