html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body{
    background: linear-gradient(134deg, #FFF 29.52%, #C7D5E0 118.05%), #FFF;
    overflow-x: hidden;
}


.Header {
    color: black;
}

.NavBar {
    display: flex;
    justify-content: center;
    align-items: center;
/* 
pour nav bar en fixed
    background: linear-gradient(134deg, #FFF 29.52%, #C7D5E0 118.05%), #FFF;

margin-top: 45px; */

}
.NavBarListContainer { 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
    /* pour mettre en fixed
    
    position: fixed;
    
    pas oublier plus haut de rajouter du margin
    */
     
}
.NavBarListElement { 
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    margin-left: 40px;
    margin-right: 40px;
    color: #32394E;
    font-family: Sora;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    list-style: none; 
}
    
.NavBarLink{
    position: relative;
    text-decoration: none;
    color: #32394eac;

}
.NavBarLink:after{
    content: "";
    position: absolute;
    background-color: #32394E;
    height: 3px;
    width: 0;
    left: 0;
    bottom: -7px;
    transition: 0.3s;
}
.NavBarLink:hover{
    color: #32394E;
}
.NavBarLink:hover:after{
    width: 100%;
}
    
.HtmlFixedBurger{
    overflow-x: initial;
}

.SectionIntroContainer { 
/* background-color: red; */
display: flex;
justify-content:space-around;    
align-items: center;
flex-wrap: wrap-reverse;
}
 .SectionIntroTextContainer { 
width: 55%;
margin-top: -50px;
 }
 
 
.SectionIntroProjectContainer { 
    width: 400px;

    /* background-color: blueviolet; */
    display: flexbox;
    justify-content: center;
    align-items: center;
}


.Titre1{
    color: #FFE606;
    font-family: Sora;
    font-size: 3.75vw;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 1px;
    text-align: center  ;
}


.Titre2{
    color: #32394E;
    font-family: Sora;
    font-size: 3.75vw;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-top: 1px;
    margin-bottom: 1px;
}   

.SectionIntroText{
    color: #32394E;
text-align: justify;
font-family: Sora;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center  ;
}


.DivSéparationVoirPlusContainer{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: top;
    /* height: 550px; */
}

.VoirplusTexte{
    color: #32394E;
    font-family: Sora;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: 45px;
}

.VoirplusTexte::after{
    content: url(../Images/RessourcesSites/Arrow.svg);
    position: relative;
    top: 35px;
    left: -40px;
    width: 200px;
    height: 200px;
    animation: 1.70s linear 1s infinite alternate slidein;
}

  
  @keyframes slidein {
    from {
        top: 35px;
    }
    to {
        top: 50px;
    }
  }

.SectionIntroImageContainer{
    display: flex;
    justify-content: center;
    align-items: center;
}


.SectionIntroImage{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;   
    border-bottom: solid;
    border-bottom-color: red;
    border-bottom-width: 65%;
    border-bottom: outset;
    padding-bottom: 52px;
    border-bottom-width: 3px;
    width: 65%;

  }

.SectionIntroImageContent{
 width: 100%;
}


.SectionProjectOverviewMainContainer{
    display: flex;
    justify-content: center;
    align-items: center;
}

.SectionProjectOverviewContainer{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: top;
    border-radius: 40px;
background: linear-gradient(103deg, #FDFCFC 5.3%, #ECF3F8 104.6%);
box-shadow: 4px 4px 22px 0px rgba(0, 0, 0, 0.07);
margin-top: 65px;
width: 66%;
}

.SectionProjectOverviewTitre{
    color: #32394E;
    font-family: Sora;
        font-size: 2.25vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.SectionProjectOverviewTexte{
    color: #32394E;
text-align: justify;
font-family: Sora;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.SectionProjectOverviewIntro{
    width: 35%;
    margin-top: 35px;
    margin-bottom: 35px;
    margin-right:75px;
}

.SectionProjectOverviewIntro2{
    width: 35%;
    margin-top: 35px;
    margin-bottom: 35px;
}

.SectionProjectOverviewGallerieConteneurCentre{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 55px;
}

.SectionProjectOverviewGallerieConteneurTampon{
    width: 66%;
    border-bottom: outset;
    padding-bottom: 52px;
    border-bottom-width: 3px;
    width: 65%;
}

.SectionProjectOverviewGallerieConteneurGallerieMainImage{
   max-width: 100%;
}

.SectionProjectOverviewGallerieConteneurSlider{
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.SectionProjectOverviewGallerieConteneurSliderImage{
    max-width: 20%;
    margin: 10px;
}

.DesignTechniquesArticleTitre2{
    color: #32394E;
    font-family: Sora;
    font-size: 2.25vw;
    font-style: normal;
    /* font-weight: 600; */
    line-height: normal;
    margin-bottom: -20px;
}

.DesignTechniquesArticleTitre3{
    color: #32394E;
font-family: Sora;
font-size: 1.35vw;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom: 0px;
margin-top: 20px;
}

.DesignTechniquesArticleTexte{
    margin-right: 85px;
    max-width: 35%;
}

.DesignTechniquesArticleTexte2{
    margin-left: 85px;
    max-width: 35%;
}


.DesignTechniquesConteneur{
    display: flex;
    justify-content: center;
    align-items: center;
}

.DesignTechniquesConteneur2{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


.hr{
    margin-top: 45px;
    background-color: #707b9e;
    height: 2px;
    width: 70%;
    text-align: center;
}

.DesignTechniquesArticleTexteContent{
    color: #32394E;
    text-align: justify;
    font-family: Sora;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.DesignTechniquesArticleImage{
    max-width: 60%;
}

.DesignTechniquesArticle{
    width: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 85px;
}

.DesignTechniquesArticleImageContent{
    max-width: 100%;
}


.SectionCombatEncounter{
margin-top: 80px;
}

.CombatEncounterDivPrincipale{
    display: flex;
    justify-content: center;
    align-items: center;
}

.CombatEncounterContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80%;
}

.CombatEncounterArticle{
    max-width: 45%;
    margin: 25px;
}

.CombatEncounterArticleImage{
    max-width: 100%;
}


.CombatEncounterArticleTitre{
    color: #32394E;
    font-family: Sora;
    font-size: 2.25vw;
    font-style: normal;
    /* font-weight: 600; */
    line-height: normal;
    margin-bottom: -2px;
}

.CombatEncounterArticleTexte{

    color: #32394E;
    text-align: justify;
    font-family: Sora;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.Reflection{
 margin-top: 65px;
display: flex;
justify-content: center;
align-items: center;
z-index: -2;
}

.ReflectionContainer{
display: flex;
justify-content: center;
align-items: center;

}

.ReflectionGreatContainer{
    background: linear-gradient(103deg, #F1F4F6 5.3%, #D9E4EC 104.6%);
    box-shadow: 4px 4px 22px 0px rgba(0, 0, 0, 0.07);
    margin-bottom: 75px;
    border-radius: 42px;    
    width: 80%;
}

.ReflectionContent{
    width: 85%;
}

.ReflectionContentText{
    color: #32394E;

    text-align: justify;
    font-family: Sora;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.ContainerButton{
    margin-top: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 55px;
}

.ReflectionButton{
    width: 159px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 22.5px;
background: #FFE606;
color: #232323;
font-family: Sora;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
border: none;
transition: 0.75s;
}

.TitreIntersectionContainer{
    display: flex;
    justify-content: center;
    align-items: center;
}



.TitreIntersectionContent{

color: #32394E;

font-family: Sora;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: normal;
z-index: 3;
}

.ReflectionContentText{
    z-index: 3;
}

.TitreIntersectionContent::after{
content: url(../Images/RessourcesSites/Circle.svg);
position: relative;
width: 55px;
height: 55px;
top: 15px;
left: -29px;
z-index: -1;
    fill: #FAE57A;
}



.SectionLevelFlowChartContainer{
    display: flex;
    justify-content: center;
    align-items: center;
}

.SectionLevelFlowChartContainerTab{
    width: 85%;
}

.SectionLevelFlowChartImage{
    padding: 10px;
    max-width: 30%;
}




.SectionLevelFlowChartContainerChartTitre{
    color: rgb(50, 57, 78);
    font-family: Sora;
    font-size: 2.25vw;
    font-style: normal;
    line-height: normal;
    margin-bottom: -20px;
}

.SectionLevelFlowChartContainerChartTitreContainter{
    display: flex;
    justify-content: center;
    align-items: center;
}

.SectionLevelFlowChartContainerChartContainter{
    margin-top: 35px;
    margin-bottom: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FlowchartContainer{
    width: 80%;
    height: 215px;
    border-radius: 50px;
background: linear-gradient(103deg, #FDFCFC 5.3%, #ECF3F8 104.6%);
}



.NavBarMenuBurger{
    display: none;
}













/* Responsive */


@media (max-width: 1000px) {
    .SectionIntroTextContainer{
        margin-top: 15px;
    }

    .SectionProjectOverviewContainer{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: top;
        border-radius: 53px;
        background: linear-gradient(103deg, #FDFCFC 5.3%, #ECF3F8 104.6%);
        box-shadow: 4px 4px 22px 0px rgba(0, 0, 0, 0.07);
        margin-top: 65px;
        width: 75%;
        flex-direction: column;
        align-content: center;
    
    }
    
    .SectionProjectOverviewIntro {
        width: 65%;
        margin-top: 35px;
        margin-bottom: 35px;
        margin-right: 0%;
    }
    
    .SectionProjectOverviewIntro2 {
        margin-top: 0px; 
        margin-bottom: 35px;
        width: 65%;
    }
    

}

@media (max-width: 980px) {
    .DesignTechniquesArticle {
        width: 82%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 85px;
    }

    .DesignTechniquesArticleTexte {
        margin-right: 30px;
        max-width: 42%;
    }

    .DesignTechniquesArticleTexte2 {
        margin-left: 30px;
        max-width: 42%;
    }

}


@media (max-width: 910px) {

    .Project_1Container{
    display: none;
    }

    .SectionIntroProjectContainer{
        width: 55%;
    }

    .ProjectSectionProjet_1 {
        max-width: 79.5%;
      
    }

    .testChad::after{
    display: none;
    }

    .Project_1Img{
        margin-left: 0;
        margin-top: 0;
    }

    .SectionIntroContainer{
        flex-direction: column;
    }
    
    .SectionIntroTextContainer{
        width: 75%;
    }

    .SectionIntroButton{
        text-align: center;
    }

    .Titre1{
        text-align: center;
        font-size: 6.75vw;
    }

    .Titre2{
        text-align: center;
        font-size: 6.75vw;
    }

    .Titre3{
        text-align: center;
        font-size: 3.5vw;
    }

    .SectionIntroButtonContainer{
        display: flex;
        justify-content: center;
        align-items: center;
    }

   .Project_1{
    margin-top: 35px;
   }

   .VoirplusTexte {
    color: #32394E;
    font-family: Sora;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: 20px;
}
    
.SectionIntroTextContainer{
    margin-top: 70px;
}

.SectionIntroTextContainer {
    margin-top: -20px;
}


}

@media (max-width: 832px) {
    .SectionLevelFlowChartImage {
        padding: 10px;
        max-width: 46%;
    }

    .ReflectionGreatContainer{
        border-radius: 30px;
        margin: 20px;
    }

}


@media (max-width: 780px) {
    .DesignTechniquesArticle {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 85px;
        flex-direction: column;
    }

    .SectionProjectOverviewContainer{
        border-radius: 25px;
    }

    .DesignTechniquesArticleTexte {
        margin-right: 0;
        max-width: 85%;
    }

    .DesignTechniquesArticleImage {
        max-width: 85%;
        margin-top: 15px;
    }

    .DesignTechniquesArticleTexte2 {
        margin-left: 0px; 
        max-width: 85%;
        margin-top: 15px
    }

    #Reversed{
        flex-direction: column-reverse;
    }

}

@media (max-width: 680px) {
    .SectionLevelFlowChartImage {
        padding: 10px;
        max-width: 45%;
    }
}


@media (max-width: 580px) {

    body{
        margin: 0;
    }

    .Header{
        margin-top: 0;
    }

    .NavBarListContainer{
        margin-top: 0;
    }

    .NavBar{
        display: block;
    }

    .Titre1{
        text-align: center;
        font-size: 9.75vw;
    }

    .Titre2{
        text-align: center;
        font-size: 11.75vw;
    }

    .Titre3{
        text-align: center;
        font-size: 7.5vw;
    }
    
    .SectionIntroButtonContainer{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .NavBar{
        width: 32px;
        height: 32px;
    }
    
    
    .NavBarMenuBurger{
        display:flex;
        height: 32px;
        width: 32px;
        position: absolute;
        top: 30px;
        right: 30px;
    }
    .SectionIntroTextContainer {
        margin-top: 30px;
    }
    
    .ReflectionGreatContainer{
        border-radius: 30px;
    }

    .ProjectSectionTitre{
        font-size: 30px;
    }

    .NavBarListContainer{
       top: 0;
        display: flex;
        flex-direction: column;
        background: linear-gradient(265deg, #FFF 29.52%, #C7D5E0 118.05%), #FFF;
        width: 100vw;
        height: 109vh;
        padding: 0;
        backdrop-filter: blur(7px);
        transition: all 0.75s ease;
        margin-left: 6000%;
        overflow: hidden;
    }

    .NavBarListElement{
        font-size: 16px;
    }

    .SectionProjectOverviewTitre {
        color: #32394E;
        font-family: Sora;
        font-size: 5.25vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .DesignTechniquesArticleTitre2 {
        color: #32394E;
        font-family: Sora;
        font-size: 5.25vw;
        font-style: normal;
        /* font-weight: 600; */
        line-height: normal;
        margin-bottom: -20px;
    }

    .DesignTechniquesArticleTitre3 {
        color: #32394E;
        font-family: Sora;
        font-size: 3.35vw;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 0px;
        margin-top: 20px;
    }

    .CombatEncounterArticleTitre {
        color: #32394E;
        font-family: Sora;
        font-size: 5.25vw;
        font-style: normal;
        /* font-weight: 600; */
        line-height: normal;
        margin-bottom: -2px;
    }
    

}

@media (max-width: 537px) {
    .SectionLevelFlowChartImage {
        padding: 10px;
        max-width: 44%;
    }
}

@media (max-width: 720px) {

    .CombatEncounterContainer {
        max-width: 100%;
        flex-direction: column;
    }

    .CombatEncounterArticle {
        max-width: 85%;
        margin: 25px;
    }

}

@media (max-width: 605px) {
    .SectionProjectOverviewContainer{
        width: 100%;
        margin: 20px;
    }

    .SectionProjectOverviewIntro{
        width: 75%;
    }
    
    .SectionProjectOverviewIntro2{
        width: 75%;
    }
}

@media (max-width: 580px) {

    .TitreIntersectionContent::after {
     display: none;
    }
    .ReflectionGreatContainer {
        width: 100%;
    }

    .TitreIntersectionContent {
        font-size: 35px;
        margin-bottom: 0px;
    }

    .ReflectionContent {
        width: 85%;
    }

    .ContainerButton {
        margin-top: 40px;
    }

}


@media (max-width: 480px) {
    .DesignTechniquesArticle {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 85px;
        flex-direction: column;
    }
}

@media (max-width: 450px) {
    .SectionLevelFlowChartImage {
        padding: 10px;
        max-width: 42%;
    }
}

@media (max-width: 339px) {
    .SectionLevelFlowChartImage {
        padding: 10px;
        max-width: 41%;
    }
}

@media (max-width: 320px) {
    .SectionLevelFlowChartImage {
        padding: 10px;
        max-width: 40%;
    }

    .TitreIntersectionContent::after {
       display: none;
    }
    .ReflectionGreatContainer {
        width: 100%;
    }

    .TitreIntersectionContent {
        font-size: 35px;
        margin-bottom: 0px;
    }

    .ReflectionContent {
        width: 82%;
    }

    .ContainerButton {
        margin-top: 40px;
    }
}

.mobile-menu{
    margin-left: 0%;
    overflow: hidden;
}

/* Bouton hover */


.ReflectionButton:hover{
    cursor: pointer; 
    background: #ffda06;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); 
    color: #414141;
    border: 1px solid #232323;
    transform: translateY(-5px);
}



/* Intégration Back to Up */


.UpButton{
    width: 45px;
    height: 45px;
    background-color: #FFE606;
    position: fixed;
    top: 90%;
    left: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    border-radius: 5px;
}

.UpIcon{
  position: relative;
    animation: 1.20s cubic-bezier(0.165, 0.84, 0.44, 0.84) 1s infinite alternate slidein2;
}

@keyframes slidein2 {   
    from {
        top: 2px;
    }
    to {
        top: -7px;
    }
  }

  .UpButton:hover{
    width: 47px;
    height: 47px;
    background-color: #FFE606;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); 
    color: #414141;
    transform: translateY(-2px);

}

@media (max-width: 910px) {
    .UpButton{
        top: 90%;
        left: 90%;
    }
}

@media (max-width: 475px) {
    .UpButton{
        top: 90%;
        left: 85%;
    }
}

@media (max-width: 300px) {
    .UpButton{
        top: 90%;
        left: 82%;
    }
}