body{
    margin:0;
}
main{
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

.pictureFull{
    width: 100%;
    height: var(--picture-picture-full-height, 700px);
}

.bandeau{
    display: flex;
    padding: var(--spaces-inicio-bloc-H1-Padding-vertical, 56px) var(--spaces-inicio-bloc-H1-Padding-horizontal, 0px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spaces-inicio-bloc-H1-Gap, 56px);
    align-self: stretch;
}

.bandeauTitle{
    display: flex;
    flex-direction: column;
    gap: 45px;
    align-self: stretch;
    justify-content: center;
}

.bandeauTitle h2{
    line-height: var(--font-H2-LineHeight, 104px); /* 200% */
}

.bandeauPhoto img{
    aspect-ratio: 2.5;
}

@media(max-width:550px){
    .bandeauPhoto img{
    aspect-ratio: 0,66;
}
}

p{
    color: #0D3C30;
    margin:0;
}

h1{
    color: #0D3C30;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    
    /* H1 */
    font-family: var(--font-H1-name, Anton);
    font-size: var(--font-H1-Size, 72px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--font-H1-LineHeight, 80px); /* 111.111% */
    letter-spacing: 11.52px;
    text-transform: uppercase;
    margin:0;
}


h2{
    color: #0D3C30;
    text-align: center;
    
    /* H2 */
    font-family: var(--font-H2-name, amarillo);
    font-size: var(--font-H2-Size, 52px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--font-H2-LineHeight, 104px); /* 200% */
    margin:0;
}

@media(max-width:370px){
    h2{
        line-height: var(--font-H2-LineHeight, 104px);
    }
}

h3{
/* H3 */
color: #0D3C30;
font-family: var(--font-H2-name, amarillo);
font-size: var(--font-H3-Size, 40px);
font-style: normal;
font-weight: 400;
line-height: var(--font-H3-LineHeight, 72px); /* 180% */
margin:0;
text-align: center;
}


h4{
    color: #0D3C30;
    text-align: center;

    
    /* H4 */
    font-family: var(--font-H4-name, Anton);
    font-size: var(--font-H4-Size, 40px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--font-H4-LineHeight, 56px); /* 140% */
    letter-spacing: 6px;
}

.lightText{
    color: #FEFEE9;
}

.mainButtons{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 60px;
    align-self: stretch;
    flex-wrap: wrap;
}


@media(max-width:1250px){
    .mainButtons{
        gap:20px;
    }
}

@media(max-width:549px){
    .mainButtons{
        gap:16px;
    }
}

.mainButton{
    display: flex;
    height: 164px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border :none;
    background: none;
    cursor: pointer;
    text-decoration: none;
}


@media(max-width:1250px){
    .mainButton{
        width: 156px;
        height: 150px;
    }
}

@media(max-width:549px){
    .mainButton{
        width: 120px;
        height: 120px;
    }
}


.mainButton:hover{

    transform: translate(0, -15px); 
    transition : transform 0.3s;
    
}



.bandeau3a .lightButton, .lightButton{
    background-color: #FEFEE9;
    color :#0D3C30;
}

.mainButton img{
    width: 58.443px;
    height: 52px;
    flex-shrink: 0;
    aspect-ratio: 58.44/52.00;
}

.mainButtonText{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.mainButtonText p{
    color: #0D3C30;
    text-align: center;
/* bouton */
font-family: var(--font-Body-1-name, "Satoshi Variable");
font-size: var(--font-bouton-Size, 20px);
font-style: normal;
font-weight: 400;
line-height: var(--font-bouton-LineHeight, 20px); /* 100% */
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
}


.bandeau2{
    display: flex;
    padding: var(--spaces-inicio-bloc-H2-Padding-vertical, 104px) 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spaces-inicio-bloc-H1-Gap-vertical, 80px);
    align-self: stretch;
    
}

@media(max-width:393px){
    .bandeau2{
        display: flex;
        padding: 30px 40px;
        justify-content: center;
        align-items: center;
        gap: 54px;
        align-self: stretch;
    }
}

.backGreenYellow{
    background: #F1F8D3;
}

.backGreen{
    background: #6EA08F;
}

.backYellow{
    background: #FEFEE9;
}

.backBlue{
    background: #3E5479;
}

.backBlack{
    background: #2C2420;
}

.backSkyBlue{
    background: #D2EDE4;
}

.backCloudBlue{
    background: #87B9C1;
}

.backFlashGreen{
    background: #0D3C30;
}

.backOcre{
    background: #E8E3B8;
}

.backBrown{
    background: #B15543;
}

.backApple{
    background: #DEECB5;
}

.backLake{
    background: #3E5479;
}

.backOrange{
    background: #F3C0AE;
}

.backBlueLight{
    background: #BCCDDE;
}

.backCaca{
    background-color: #3C472C;
}

.backOrangeBright{
    background: #F1AF7C;
}

.backMarron{
    background:#753927
}

.backGrey{
    background: #ECE5DD;
}

.backLeaf{
    background: #7AB178;
}

.backEgg{
    background: #FDD58E;
}

.backBlueDuck{
    background: #5673B0;
}

.backGrass{
    background: #B4C78C;
}

.backGold{
    background: #D5C179;
}

.backBlueAlice{
    background: #EAF7FC;
}

.backChampagne{
    background: #FFE9CE;
}


.backBeige{
    background: #F6EAD0;
}

.backBrun{
    background: #271B04;
}

.bandeau2Text{
    display: flex;
    width: var(--spaces-inicio-bloc-H2-text-width, 800px);
    flex-direction: column;
    gap: var(--spaces-inicio-bloc-H2-Gap-vertical-text, 80px);
}

@media(max-width:400px){
    .bandeau2Text{
        width:auto;
    }

  
}



.body2{

    
    /* BODY2 */
    font-family: var(--font-Body-2-name, "Satoshi Variable");
    font-size: var(--font-Body-2-Size, 28px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--font-Body-2-LineHeight, 52px); /* 185.714% */
    
}

.pictureHalf{
    height: var(--picture-picture-half-height, 350px);
}

.bandeau3{
    display: flex;
    height: var(--spaces-inicio-bloc-illustration-height, 630px);
    padding: var(--spaces-inicio-bloc-illustration-padding-vertical-down, 0px) var(--spaces-inicio-bloc-illustration-padding-horizontal, 0px) var(--spaces-inicio-bloc-illustration-padding-vertical-down, 0px) var(--spaces-inicio-bloc-illustration-padding-horizontal, 0px);
    justify-content: center;
    align-items: center;
    gap: var(--spaces-inicio-bloc-illustration-Gap, 60px);
    align-self: stretch;
}

@media(max-width:917px){
    .bandeau3{
        display: flex;
        padding: var(--spaces-inicio-bloc-illustration-padding-vertical-down, 100px) var(--spaces-inicio-bloc-illustration-padding-horizontal, 50px);
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 44px var(--spaces-inicio-bloc-illustration-Gap, 44px);
        align-self: stretch;
        flex-wrap: wrap;
        height:auto;
    }
}

.bandeau3DiffOrder img{
    order :1;
}

@media(max-width:917px){
    .bandeau3DiffOrder img{
        order :0;
    }
}

.bandeau3DiffOrder .semiFrame{
    order :1;
}

@media(max-width:830px){
   
.bandeau3DiffOrder .semiFrame{
    order :0;
} 
}

.bandeau3DiffOrder .bandeau3Text{
    order:0;
}

.bandeau3 img{
    width: var(--spaces-inicio-bloc-illustration-illustration-width, 520px);
}

.bandeau3Text{
    display: flex;
    width: var(--spaces-inicio-bloc-illustration-text-width, 480px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spaces-inicio-bloc-illustration-Gap-vertical-text, 52px);
    max-width: 95%;
}

.bandeau3a{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}

.bandeau3Text a{
    display: flex;
    width: 250px;
    padding: 24px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background-color: #0D3C30;
    color : #FEFEE9;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Satoshi Variable';
}

picture{
    align-self: stretch;
}

picture img{
    display:block;
    width:100%;
}

@media(max-width:1340px){
    .semi img{
        width :auto;
        height: 100%;
    }
}

@media(max-width:1250px){
    .semi img{
        width:100%;
        height:auto;
    }
}

@media(max-width:1000px){
    .semi img{
        width:auto;
        height:100%;
    }
}

@media(max-width:830px){
    .semi img{
        height:auto;
        width:100%;
    }
}

.bandeau3Text p{
    font-family: var(--font-Body-2-name, "Satoshi Variable");
    font-size: var(--font-Body-2-Size, 28px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--font-Body-2-LineHeight, 52px);
}

.bandeau2Text p{
  
    


/* BODY2 */
font-family: var(--font-Body-2-name, "Satoshi Variable");
font-size: var(--font-Body-2-Size, 28px);
font-style: normal;
font-weight: 500;
line-height: var(--font-Body-2-LineHeight, 52px); /* 185.714% */
}

.activityBand p{
    font-family: var(--font-Body-1-name, "Satoshi Variable");
    font-size: var(--font-Body-1-Size, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--font-Body-1-LineHeight, 44px); /* 220% */
   }


.bandeauContact{
    display: flex;
    padding: var(--spaces-inicio-bloc-H2-Padding-vertical, 104px) 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 54px;
    align-self: stretch;
}

.contactInfo{
    display: flex;
    width: var(--spaces-inicio-bloc-H2-text-width, 800px);
    flex-direction: column;
    gap: var(--spaces-inicio-bloc-H2-Gap-vertical-text, 80px);
}

.contactar{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 80px var(--spaces-inicio-bloc-H2-Gap-vertical-text, 80px);
    align-self: stretch;
    flex-wrap: wrap;
}

.contactItem{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contactItem p{
    text-align: center;
}

.gras{
    color: #0D3C30;
    text-align: center;
    font-family: var(--font-Body-2-name, "Satoshi Variable");
    font-size: var(--font-Body-2-Size, 28px);
    font-style: normal;
    font-weight: 900;
    line-height: var(--font-Body-2-LineHeight, 52px); /* 185.714% */
    letter-spacing: 1.4px;
}

.contactButtons{
    display: flex;
    align-items: flex-start;
    gap: 54px;
}

.contactButton{
    display: flex;
    width: 264px;
    height: 142px;
    padding: 20px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background-color: transparent;
    text-decoration: none;
}

.contactButton p{
    color: #0D3C30;
    text-align: center;
    
    /* bouton */
    font-family: var(--font-Body-1-name, "Satoshi Variable");
    font-size: var(--font-bouton-Size, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--font-bouton-LineHeight, 20px); /* 100% */
    letter-spacing: 2px;
    text-transform: uppercase;
}


.contactButton:hover{

    transform: translate(0, -15px); 
    transition : transform 0.3s;
    
}


.logo2{
    position:absolute;
    top:180px;
    left:107px;
    width: 264px;
height: 264px;
}

.fullFrame .logo2{
     width: 264px;
height: 264px;
}

@media(max-width:1600px){
    .fullFrame .logo2{
        width: 200px;
        height: 200px;
        top:150px;
        left: 77px;
    }
}

@media(max-width:1300px){
    .fullFrame .logo2{
        width: 170px;
        height: 170px;
        top:130px;
        left: 57px;
    }
}

@media(max-width:930px){
    .fullFrame .logo2{
        width: 130px;
        height: 130px;
        top:130px;
        left: 45px;
    }
}

@media(max-width:700px){
    .fullFrame .logo2{
        width: 100px;
        height: 100px;
        top:115px;
        left: 25px;
    }
}

@media(max-width:350px){
    .fullFrame .logo2{
        width: 80px;
        height: 80px;
        top:115px;
        left: 25px;
    }
}

.fullFrame img{
    height:100%;
}