:root{
	--colorText:#183E2C;
	--colorBack: #91B79B;
}

h1, h2{
	color: #2C7351;
	margin:0;
}

h1{
	font-family: "Cabinet Grotesk Variable";
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 3.5rem; 
	max-width: 53.75rem;
	display: flex;
}

@media(max-width: 576px){
    h1{
        font-size: 2rem;
        line-height: 3rem;
    }
}

h2{
    color: #2C7351;
    text-align: center;
    font-family: "Cabinet Grotesk Variable";
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.24rem;
    text-transform: uppercase;
}

@media(max-width: 576px){
    h2{
        font-size: 1.5rem;
        line-height: 2rem;
    }
}



#column{
    background-color: #D2E6D7;
}

#pictureProject p{
    color: #1D402F;
}

#pictureProjectP{
    text-align: center;
    font-family: "Satoshi Variable";
    font-size: 1.46rem;
    font-weight: 400;
}

#pictureProject .gras{
    text-align: center;
    font-family: "Satoshi Variable";
    font-size: 1.46rem;
    font-weight: 700;
}

#dropbtn, #rightbtn, #leftbtn{
    background: #D2E6D7;
}

#dropbtn{
    display: none;
}


@media(max-width:665px){
    #dropbtn{
        display: flex;
        height: 2.8125rem;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }
}


main #column .swipeZone #upbtn{
    background: #D2E6D7;
}

#summary{
    background: #FFF;
    color: #276848;
}

@media(max-width:665px){
    #summary{
        background: #D2E6D7;
    }
}

.summaryTitle p, #summaryNav a{
    color: #276848;
}

#summaryNav a:hover{
    color: #1D402F;
}

.button{
    background-color: #1D402F;
}

.button:hover{
    background-color: #386F54;
}

#buttonSec{
    background-color: white;
    border-color: #1D402F;
}

#buttonSec:hover{
    border: 2px solid #386F54;
    background: #F8F9F9;
    color: #386F54;
}

/*main bloc*/

#mainBloc{
    display: flex;
    padding: 5.5rem 4.5rem 5.5rem 4.5rem;
    flex-direction: column;
    align-items: center;
    gap: 7.5rem;
}

@media(max-width:660px){
    #mainBloc{
        gap : 4rem;
        padding: 3.75rem 2.5rem 2.5rem 2.5rem;
    }
}
#ariane{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2rem; /* 160% */
}

#intro a{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2rem; /* 160% */
}
.subtitle{
	font-family: "Satoshi Variable";
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 2.5rem;
	width: 83.33%;	
}

@media(max-width:1100px){
    .subtitle{
        width:100%;
    }
}

@media(max-width: 660px){
    .subtitle{
       font-size: 1rem;
       line-height: 2rem;
    }
}

#intro{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5rem;
}

@media(max-width: 660px){
    #intro{
        gap: 2.5rem;
    }
}

#introContent{
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

@media(max-width: 660px){
    #introContent{
        gap: 2.5rem;
    }
}

.intro{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    align-self: stretch;
}

@media(max-width: 660px){
    .intro{
        gap: 2rem;
    }
}

.intro p{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 2rem; 
    width: 66.67%;
}

@media(max-width: 660px){
    .intro p{
        font-size: 0.875rem;
        line-height: 2rem;

    }
}

@media(max-width: 550px){
    .intro p{
        width:100%;

    }
}

#servNum, #strat, #graph, #progra, #ecoconception, #intervEntreprise{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    align-self: stretch;
}

@media(max-width: 660px){
    #servNum, #strat, #graph, #progra, #ecoconception{
        gap:2.5rem;
    }
}

.squares{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 1rem;
    align-self: stretch;
    flex-wrap: wrap;
}

@media(max-width:1000px){
    .squares{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: normal;
    }
}

@media(max-width:660px){
    .squares{
        gap: 0.5rem 1rem; 
    }
}


.square{
    display: flex;
    min-width: 40%;
    max-width: 50%;
    padding: 1.5rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    flex: 1 0 0;
    border-radius: 0.5rem;
    background: #D2E6D7;
    align-self: stretch;
}

@media(max-width:1000px){
    .square{
        max-width:none;
    }
}

@media(max-width:660px){
    .square{
       padding:1rem;
       gap:1.25rem;
    }
}



h3{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #000;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 2rem; 
    letter-spacing: 0.12rem;
}

.squareText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    align-self: stretch;
    border-radius: 1.38238rem;
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1rem;
    font-weight: 500;
    line-height: 2rem; /* 200% */
    letter-spacing: 0.03rem;
}



/*METHODOLOGIE*/

#miniSteps{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0.67rem;
}

@media(max-width: 1000px){
    #miniSteps{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem 1.5rem;
        grid-template-rows: 15rem 15rem;
    }
}

@media(max-width:660px){
    #miniSteps{
        gap: 1.5rem 0.238rem;
    }
}

@media(max-width:400px){
    #miniSteps{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 15rem 15rem 15rem;
    }
}

.miniStep{
    display: flex;
    padding-top: 1rem;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}


.miniStep:hover{
    border-radius: 0.5rem;
    background: #D2E6D7;
}

.miniStep img{
    width: 100%;
    height: 5rem;
}



.miniStepImage{
    height: 5rem;
    max-width: 7.02rem;
}



.miniStepImage img{
    height: auto;
}

.miniStepNum{
    color: #2C7351;
    font-family: "Cabinet Grotesk Variable";
    font-size: 3rem;
    font-weight: 900;
}

@media(max-width:660px){
    .miniStepNum{
        font-size: 2.125rem;
    }
}

.miniStepText{
    color: #000;
    text-align: center;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.33438rem; 
}

@media(max-width:1269px){
    .miniStepText{
        font-size: 0.8rem;
    }
}

@media(max-width:1269px){
    .miniStepText{
        font-size: 1rem;
    }
}

@media(max-width:400px){
    .miniStepText{
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

#steps{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7.5rem;
    align-self: stretch;
}

.step{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    align-self: stretch;
}

@media(max-width:660px){
    .step{
        gap:1.875rem;
    }
}


.step img{
    align-self: center;
    max-width: 100%;
}

.stepGroup{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    align-self: stretch;
}

.stepGroupTitle{
    display: flex;
    align-items: flex-start;
    width: 66.67%;
    gap: 1rem;
}

@media(max-width:660px){
    .stepGroupTitle{
        width:100%;
    }
}

.stepGroupTitleProj{
    display: flex;
    align-items: flex-start;
    width :100%;
    gap: 1rem;
}

.stepNum{
    display: flex;
    height: fit-content;
}

.stepNum p{
    color: #2C7351;
    font-family: "Cabinet Grotesk Variable";
    font-size: 7.5rem;
    font-weight: 900;
    line-height: 5.8rem;
    margin:0;
    padding: 0;
}

.stepTitleRight{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    gap:0.1rem;
}

.stepTitle{
    color: #000;
    font-family: "Cabinet Grotesk Variable";
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 2rem;
    text-align: left; 
    align-self: auto;
    padding: 0;
    letter-spacing: normal;
    text-transform: none;
}

@media(max-width:660px){
    .stepTitle{
        font-size: 2rem;
        line-height: 1.75rem;
    }
}

@media(max-width:350px){
    .stepTitle{
        font-size: 1.5rem;
    }
}

.stepSubtitle{
    color: #2C7351;
    font-family: "Satoshi Variable";
    font-size: 2rem;
    font-weight: 700;
    line-height:2.75rem; 
}

@media(max-width:570px){
    .stepSubtitle{
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

@media(max-width:350px){
    .stepSubtitle{
        font-size: 1.3rem;
    }
}

.stepContent{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}



@media(max-width:1000px){
    .stepContent{
        flex-direction: column;
    }
}

@media(max-width:660px){
    .stepContent{
        font-size: 1.5rem;
        gap:0.5rem;
    }
}

.stepText{
    display: flex;
    flex-direction: column;
    padding-right: 1.5rem;
    align-items: flex-start;
    gap: 2.5rem;
    width: 50%;
}

@media(max-width:1000px){
    .stepText{
        width:100%;
    }
}

.stepTextProj{
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    align-self: stretch;
}

#stepText5{
    width: 83.33%;
}

#stepText5 a{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1rem;
    font-weight: 400;
    line-height: 2rem; 
    letter-spacing: 0.04rem;
    text-decoration: underline;
}

.stepText p{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 1rem;
    font-weight: 400;
    line-height: 2rem; 
    letter-spacing: 0.04rem;
}

@media(max-width:660px){
    .stepText p{
        font-size: 0.875rem;
        line-height: 1.5rem;
        letter-spacing: 0.035rem;
    }
}


.stepText strong{
    font-weight: 700;
}

@media(max-width:660px){
    .stepText strong{
        font-weight: 400;
    }
}

.stepSquares{
    display: flex;
    padding-top: 0.6875rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 0 0;
}

@media(max-width:660px){
    .stepSquares{
        gap: 0.6575rem;
    }
}

.asterisk{
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 0.875rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.25rem; 
}

@media(max-width:660px){
    .asterisk{
        font-size: 0.57531rem;
        line-height: 0.986rem;
    }
}

.squareMethodo{
    min-width: none;
    max-width: none;
}

/*PRESTATIONS PROJET */


.bloc{
    display: flex;
    flex-direction: column;
    width: 66.67%;
    flex-direction: column;
    align-items: flex-start;
    gap:5rem;
}

@media(max-width:1000px){
    .bloc{
        width:80%;
    }
}

@media(max-width:660px){
    .bloc{
        gap:2.5rem;
        width:100%;
    }
}

.blocContent{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.5rem;
    align-self: stretch;
}

.blocItem{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    align-self: stretch;
}


/*FAIT MAISON */

.homemadeContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.5rem;
    align-self: stretch;
}

@media(max-width:660px){
    .homemadeContent{
        gap:2.5rem;
    }
}

.homemadeBloc{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    gap: 2rem;
    align-self: stretch;
}

@media(max-width:1000px){
    .homemadeBloc{
        flex-direction: column;
        gap:1rem;
    }
}

.homemadeBloc img{
    width: 50%;
}

@media(max-width:1000px){
    .homemadeBloc img{
        width:100%;
        order: 1;
    }
}

.homemadeBlocText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    width: 50%;
}

@media(max-width:1000px){
    .homemadeBlocText{
        width:100%;
        order: 2;
    }
}

.homemadeText{
    width: 100%;
}