@font-face{
	font-family: "Abel";
	src: url('./font/Abel-Regular.ttf') format('truetype')
}

@font-face{
	font-family: "Satoshi Variable";
	src: url('./font/Satoshi-Variable.ttf') format('truetype')
}

@font-face{
	font-family: "Baby Girly Script";
	src: url('./font/BabyGirly.ttf') format('truetype')
}

@font-face{
	font-family: "Cabinet Grotesk Variable";
	src: url('./font/CabinetGrotesk-Variable.ttf') format('truetype')
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    text-decoration: none;
}


a{
    text-decoration: none;
}

body{
    padding:0;
    box-sizing: content-box;
}

/*Fil d'Ariane*/

#breadcrumbContainer{
    display: flex;
    height:52px;
    padding: 16px 80px;
    justify-content: space-between;
    background: var(--Clair);
    position: sticky;
  top: 0;
  z-index: 10;
}

@media(max-width:900px){
    #breadcrumbContainer{
        padding: 16px 40px;
    }
}

@media(max-width:900px){
    #breadcrumbContainer{
        padding: 8px 16px;
    }
}

@media(max-width:650px){
    #breadcrumbContainer{
        height:60px;
    }
}


#breadcrumb{
    display: flex;
    align-items: center;
    gap: 16px;
}

@media(max-width:650px){
    #breadcrumb{
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        flex-shrink: 0;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;
        width:60%;
         position: relative;
    }
}


@media(max-width:550px){
    #breadcrumb{
        width:50%;
       
    }
}

@media(max-width:600px){
    .breadcrumbFade{
          
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to right, rgba(237, 249, 255, 0), rgba(237, 249, 255, 1));
  pointer-events: none;
   }
}

#breadcrumbTitle{
    color: var(--Fonc, #072971);
    text-align: center;
    font-family: "Baby Girly Script";
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1.2px;
}

@media(max-width:750px){
    #breadcrumbTitle{
        font-size: 18px;
        letter-spacing: 0.9px;
    }
}

.breadcrumb a{
    color: var(--Foncé, #072971);
    text-align: center;
    font-family: "Cabinet Grotesk Variable";
    font-size: 18px;
    font-weight: 400;
    line-height: 20px; /* 111.111% */
    letter-spacing: 1.44px;
}

@media(max-width:750px){
    .breadcrumb a{
        font-size: 14px;
        line-height: 14px; /* 100% */
        letter-spacing: 1.12px;
    }
}

.breadcrumb a:hover{
    text-decoration: underline var(--Foncé);
}


.breadcrumb li + li::before {
  content: ">";
  color: #072971;
}

.breadcrumb ul{
    display: flex;
    list-style: none;
    margin:0;
    padding:0;
}

#topContainer{
    display: flex;
    align-items: center;
    gap: 16px;
    scroll-behavior: smooth;
    align-self: center;
}

#topContainer{
    color: var(--Fonc, #072971);
    text-align: center;
    font-family: "Cabinet Grotesk Variable";
    font-size: 18px;
    font-weight: 400;
    line-height: 20px; /* 111.111% */
    letter-spacing: 1.44px;
}


@media(max-width:650px){
    #topContainer{
        flex-direction: column;
        gap:4px;
    }
}

@media(max-width:750px){
    #topContainer p{
        font-size:14px;
    }
}

#topContainer:hover p{
    text-decoration: underline var(--Foncé);
}


main{
    background: url(./images/rectangle.jpg) ;
    background-attachment: fixed;
    width:100%;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
    flex-direction: column;
}

#backgroundVoid{
    display: flex;
    padding: 80px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex: 1 0 0;
    align-self: stretch;
    height:400px;
}

@media(max-width:900px){
    #backgroundVoid{
        height:405px;
    }
}

@media(max-width:450px){
    #backgroundVoid{
        height:459px;
    }
}



#headBand{
    display: flex;
    padding: 80px 160px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    background: var(--fonc-30, rgba(7, 41, 113, 0.30));

    /* background blur 60 */
    backdrop-filter: blur(30px);
    width:100%;
    }

@media(max-width:1000px){
    #headBand{
        flex-direction: column;
        gap:64px;

    }
}

@media(max-width:740px){
    #headBand{
        padding:80px 10%;
        gap:32px;
    }
}

@media(max-width:500px){
    #headBand{
        padding:80px 7%;
    }
}

h1{
   color: var(--Blanc, #FFFDFC);
text-align: center;
display: flex;
flex-direction: column;

}

.titlePrimary{
    /* H1_baby */
    font-family: "Baby Girly Script";
    font-size: var(--Font-Titles-H1baby-Fontsize, 56px);
    font-weight: 400;
    line-height: var(--Font-Titles-H1baby-Linheight, 80px); /* 142.857% */
    letter-spacing: var(--Font-Titles-H1baby-Letterspacing, 5px);
}

.titleHighlight{
    /* H1_cabinet */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Titles-H1cabinet-Fontsize, 48px);
    font-weight: 400;
    line-height: var(--Font-Titles-H1cabinet-Linheight, 80px);
    letter-spacing: var(--Font-Titles-H1cabinet-Letterspacing, 5px);
    width:100%;
}



.container{
        display: flex;
    padding: var(--Layout-Layout-Paddingvertical-Mainbloc, 80px) var(--Layout-Layout-Paddinghorizontal-Mainbloc, 260px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--Layout-Layout-Gap-Main, 60px);
    align-self: stretch;
    background: #072971;
}

@media(max-width:1600px){
    .container{
        padding:var(--Layout-Layout-Paddingvertical-Mainbloc, 80px) 10%;
    }
}

@media(max-width:1320px){
    .container{
        padding:var(--Layout-Layout-Paddingvertical-Mainbloc, 80px) 6%;
    }
}



@media(max-width:475px){
    .container{
        padding:var(--Layout-Layout-Paddingvertical-Mainbloc, 80px) 5%;
    }
}

.whiteBackground{
    background-color: var(--Blanc);
}

.h2Container .whiteBackground{
     background-color: var(--Blanc);
}

.clairBackground{
    background-color: var(--Clair);
}

h2{
    display: block;
    color: var(--Blanc, #FFFDFC);
    gap:10px;


}



.h2Prim{
        /* H2_cabinet */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Titles-H2cabinet-Fontsize, 40px);
    font-weight: 400;
    line-height: var(--Font-Titles-H2cabinet-Linheight, 64px); /* 160% */
    letter-spacing: var(--Font-Titles-H2cabinet-Letterspacing, 0);
    display: inline;
    }

.h2Sec{

    /* H2_baby */
    font-family: "Baby Girly Script";
    font-size: var(--Font-Titles-H2baby-Fontsize, 56px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Titles-H2baby-Linheight, 64px);
    letter-spacing: var(--Font-Titles-H2baby-Letterspacing, 0);
    display: inline;
    }

.expertiseDomain{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px var(--Layout-Layout-Gap-FramecarteB, 16px);
    align-self: stretch;
    flex-wrap: wrap;
}

@media(max-width:643px){
    .expertiseDomain{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--Layout-Layout-Gap-FramecarteB, 12px);
        align-self: auto;
        align-content: center;

    }
}

.expertiseDomainItem{
    display: flex;
    min-width: 250px;
    max-width: 300px;
    padding: var(--Layout-Layout-Paddingvertical-CarteA, 40px) var(--Layout-Layout-Paddinghorizontal-CarteA, 32px) var(--Layout-Layout-Paddingvertical-FramecarteA, 40px) var(--Layout-Layout-Paddinghorizontal-CarteA, 32px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Layout-Layout-Gap-CarteA, 32px);
    flex: 1 0 0;
    border-radius: 20px;
    background: #FFF;
    align-self: stretch;
    align-self: stretch;
}

@media(max-width:1190px){
    .expertiseDomainItem{
        min-width: 350px;
    }
}

@media(max-width:1000px){
    .expertiseDomainItem{
        min-width: 300px;
        max-width: 350px;
    }
}

@media(max-width:890px){
    .expertiseDomainItem{
        min-width: 250px;
        max-width: 350px;
    }
}


/*
@media(max-width:644px){
    .expertiseDomainItem{
        display: flex;
        min-width: 400px;
        min-height: 250px;
        max-width: none;
        padding: var(--Layout-Layout-Paddingvertical-CarteA, 20px) var(--Layout-Layout-Paddinghorizontal-CarteA, 16px);
        justify-content: center;
        align-items: flex-end;
        gap: var(--Layout-Layout-Gap-CarteA, 20px);
        flex-direction: row;
    }

   

}

@media(max-width:450px){
    .expertiseDomainItem{
        min-height: 200px;
    }

   @media(max-width:450px){
    .expertiseDomainItem{
        min-width: auto;
        gap:0;
    }

   
}

}*/

.expertise{
    display: flex;
    flex-direction: column;
    gap: var(--Layout-Layout-Gap-CarteA, 32px);
    align-items: center;
    justify-content: center;
}

@media(max-width:500px){
 .expertise{
        display:flex;
        flex-direction: column;
        gap:30px;
    }
}




.expertiseDomainItem:hover .knowMore{
    border-radius: 32px;
    background: var(--Fonc, #072971);
}

.expertiseDomainItem:hover .knowMore p{
   color:white;
}

.xs{
    color:#FFFDFC;
}

.expertiseDomainItem:hover .xs{
    color: #F7B722;
}

.expertiseDomainStern{
    display: flex;
    height: 160px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

h3{
    color: var(--Fonc, #072971);
    text-align: center;

    /* H3_cabinet */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Titles-H3cabinet-Fontsize, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Font-Titles-H3cabinet-Linheight, 36px); /* 150% */
    letter-spacing: var(--Font-Titles-H3cabinet-Letterspacing, 2px);
    gap:10px;
}

.knowMore{
    display: flex;
padding: 8px 16px;
align-items: center;
gap: 16px;
border-radius: 100px;
background: var(--Blanc, #FFFDFC);
}

form .knowMore{
border: 1.5px solid var(--Fonc, #072971);
}



.knowMore p{
    color: var(--Fonc, #072971);

    /* Label_caps */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Body-Labelcaps-Fontsize, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Labelcaps-Linheight, 16px); /* 133.333% */
    letter-spacing: var(--Font-Body-Labelcaps-Letterspacing, 2px);
    text-transform: uppercase;
}

#void1{
    height:400px;
}

/*engagements*/



.h2Container{
    display: inline-flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    justify-content: center;
}


.threeCards{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px var(--Layout-Layout-Gap-FramecarteB, 16px);
    align-self: stretch;
    flex-wrap: wrap;
}

.squareCard {
  position: relative;
  width: 100%;
  height:auto;
  aspect-ratio:1/1;
  min-height: 320px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor:pointer;
  flex: 1 0 0;
}

.squareCard{
    min-width: 310px;
}

@media(max-width:2090px){
 .squareCard{
    min-width: 320px;
}

}



@media(max-width:1200px){
    .squareCard{
        max-width:400px;
    }
}

@media(max-width:720px){
    .squareCard{
        height:240px;
        min-height: auto;
    }
}

.fiveCards .squareCard{
    width:300px;
}



.squareCardFront,
.squareCardBack {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px 20px 0 20px;
  border: 2px solid var(--Fonc, #072971);
  background: var(--Blanc, #FFFDFC);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--Layout-Layout-Gap-CarteA, 32px);
  padding: var(--Layout-Layout-Paddingvertical-CarteA, 40px) var(--Layout-Layout-Paddinghorizontal-CarteB, 16px) var(--Layout-Layout-Paddingvertical-CarteB, 16px) var(--Layout-Layout-Paddinghorizontal-CarteB, 16px);
  box-sizing: border-box;
}

.squareCardFront{
    gap:unset;
}

.squareCardBack {
  transform: rotateY(180deg);
  background: var(--Clair); 
  border:none;
}

.squareCardContent{
    display: flex;
    padding: 0 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
}



.squareCardContentText{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
}

.squareContentBack{
    gap: 15px;
}

.squareCardContent p{
    color: var(--Fonc, #072971);
text-align: center;
font-family: "Cabinet Grotesk Variable";
font-size: var(--Font-Body-Réponse-Fontsize, 20px);
font-weight: 400;
line-height: var(--Font-Body-Réponse-Linheight, 40px); /* 200% */
letter-spacing: var(--Font-Body-Mcabinet-Letterspacing, 0);
}

@media (hover: hover) and (pointer: fine) {
  .flipCard:hover .squareCard {
    transform: rotateY(180deg);
  }
}

 .flipCard.hover-flipped .squareCard {
    transform: rotateY(180deg);
  }

.turn{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.blue{
    color:#072971;
}

/*PRESTATIONS*/


.prestationsIndexLine{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px var(--Layout-Layout-Gap-FramecarteA, 20px);
    align-self: stretch;
    flex-wrap: wrap;
}

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

#secondPrestationsIndexLine .mainPrestaContainer{
    order: 2;
}

@media(max-width:1230px){
    #secondPrestationsIndexLine .mainPrestaContainer{
        order: 1;
    }
}

p{
    color:#072971;
}

.mainPrestaContainer{
    display: flex;
    max-width: 500px;
    flex: 1 1 320px; 
    min-width: 360px;
    align-self: stretch;
    padding: 40px 20px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border-radius: 20px;
    border: 3px solid var(--Chaude, #F7B722);
}

@media(max-width:1230px){
    .mainPrestaContainer{
        width:100%;
        flex-direction: row;
        max-width:none;
        min-width: 300px;
        padding: 40px 20px;
        justify-content: center;
        align-content: center;
        flex: 1 0 0;
        flex-wrap: nowrap;
    }
}

@media(max-width:800px){
    .mainPrestaContainer{
        width: 100%;
        height: 560px;
        flex-direction: column;
        align-items: center;
    }
}

.prestaModulesContainer{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.prestaModules{
    display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
align-self: stretch;
}

.label-cabinet{
    color: var(--Fonc, #072971);
text-align: center;

/* Label_cabinet */
font-family: "Cabinet Grotesk Variable";
font-size: var(--Font-Body-Labelcabinet-Fontsize, 16px);
font-style: normal;
font-weight: 400;
line-height: var(--Font-Body-Labelcabinet-Linheight, 20px); /* 125% */
letter-spacing: var(--Font-Body-Labelcabinet-Letterspacing, 2px);
width:100%;
}

.prestaModulesItems{
    display: flex;
    min-width: 140px;
    padding: 8px 20px;
    align-items: center;
    gap: 8px;
    border-radius: 19.353px;
    border: 1px solid var(--Fonc, #072971);
}

.label-caps{
    color: var(--Fonc, #072971);

    /* Label_caps */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Body-Labelcaps-Fontsize, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Labelcaps-Linheight, 16px); /* 133.333% */
    letter-spacing: var(--Font-Body-Labelcaps-Letterspacing, 2px);
    text-transform: uppercase;
}

.label-baby{
    color: var(--Fonc, #072971);
    text-align: center;

    /* Label_baby */
    font-family: "Baby Girly Script";
    font-size: var(--Font-Body-Labelbaby-Fontsize, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Labelbaby-Linheight, 18px); /* 100% */
    letter-spacing: var(--Font-Body-Labelbaby-Letterspacing, 0);
}

.prestaTitle{
    display:inline;
    text-align: center;
}


.prestaTitleContainer{
    display:flex;
    justify-content: center;
    align-items: center;
    width:50%;
}

@media(max-width:800px){
    .prestaTitleContainer{
        width:auto;
    }
}

.prestationsIndexItemsContainer{
    display: flex;
    flex: 1.62 1 600px;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px var(--Layout-Layout-Gap-FramecarteB, 16px);
    flex-wrap: wrap;
    align-self: stretch;
}

@media(max-width:1230px){
    .prestationsIndexItemsContainer{
        min-width:250px;
        flex:auto;
        align-items: stretch;
    }
}

@media(max-width:900px){
    .prestationsIndexItemsContainer{
        min-width:250px;
    }
}

.smallPresta{
    display: flex;
    min-width: 300px;
    padding: var(--Layout-Layout-Paddingvertical-CarteB, 16px) var(--Layout-Layout-Paddinghorizontal-CarteA, 32px);
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--Layout-Layout-Paddingvertical-CarteB, 16px);
    flex: 1 0 0;
    border-radius: 20px;
    background: var(--Blanc, #FFFDFC);
    align-self: stretch;
    border: 2px solid var(--Blanc);
}

@media(max-width:1450px){
    .smallPresta{
        min-width:250px;
    }
}

@media(max-width:1190px){
    .smallPresta{
        min-width:350px;
    }
}

@media(max-width:900px){
    .smallPresta{
        min-width:300px;
    }
}

@media(max-width:750px){
    .smallPresta{
        min-width:250px;
    }
}


.smallPresta:hover .prestaKnowMore{
    border-radius: 32px;
    background: var(--Fonc, #072971);
}

.smallPresta:hover .prestaKnowMore p{
    color:var(--Blanc);
}

.smallPresta:hover{
    border: 2px solid var(--Fonc, #072971);
}

.xsPlus {
    color:var(--Blanc);
}

.smallPresta:hover .xsPlus{
    color:#F7B722;
}

.prestaKnowMore{
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 16px;
}

.prestaKnowMore p{
    color: var(--Fonc, #072971);
    font-family: "Satoshi Variable";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 160% */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.reverse{
    order:1;
}

/*REALISATIONS*/


.realisations{
    display: flex;
    align-items: center;
    gap: var(--Layout-Layout-Gap-FramecarteB, 16px);
    width:100%;
    flex-wrap: wrap;
    justify-content: center;
}

@media(max-width:1088px){
    .realisations{
    justify-content: center;
    }
}

.realisation{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 16px;
}

.realCard{
    position: relative;
    width:  343.1px;
    height:320.55px;
    aspect-ratio: 1/1;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor:pointer;
}


.realCardFront{
display: flex;

padding: var(--Layout-Layout-Paddingvertical-CarteA, 20px) var(--Layout-Layout-Paddinghorizontal-CarteB, 8px) var(--Layout-Layout-Paddingvertical-CarteB, 16px) var(--Layout-Layout-Paddinghorizontal-CarteB, 8px);
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
gap: var(--Layout-Layout-Gap-CarteA, 20px);
align-self: stretch;

}



.realCardFront img{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 8px;
    align-self: stretch;
    border-radius: 20px 20px 0 20px;
    width:100%;
    height:auto;
    max-height: 100%;
}



.realCardBack{
    display: flex;
    height: 319.667px;
    width: 319.667px;
    min-height: 300px;
    padding: var(--Layout-Layout-Paddingvertical-CarteA, 40px) var(--Layout-Layout-Paddinghorizontal-CarteB, 16px) var(--Layout-Layout-Paddingvertical-CarteB, 16px) var(--Layout-Layout-Paddinghorizontal-CarteB, 16px);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 8px;
    align-self: stretch;
    border-radius: 20px 20px 0 20px;
    border: 2px solid var(--Fonc, #072971);
    background: var(--Blanc, #FFFDFC);
  transform: rotateY(180deg);
}

.realCardBack, .realCardFront{
      backface-visibility: hidden;
}

.realCardFront, .realCardBack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.realCardBackImg{
    display: flex;
    height: 115px;
    align-items: flex-end;
    gap: 24px;
    flex-shrink: 0;
    align-self: stretch;
}

.realCardBackText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.realCardBackEcoindex{
    display: flex;
    align-items: flex-end;
    gap: 16px;
    align-self: stretch;
}


@media(max-width:1088px){
    .impairReal{
        flex:none;
        align-self: center;
    }
}



.realEcoindex{
    display: flex;
    width: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    background: var(--Moyen, #6A7EA7);
}

.realEcoindex p{
    color: var(--Blanc, #FFFDFC);
    text-align: center;
    font-family: Helvetica;
    font-size: 24px;
    font-weight: 700;
    line-height: 40px; /* 166.667% */
}

.realCardBackEcoindex h3{
    color: var(--Noir, #1C1B1A);
}

.flipCard:hover .realCard {
  transform: rotateY(180deg);
}
 .flipCard.hover-flipped .realCard {
    transform: rotateY(180deg);
  }

  /*.flipCard{
    flex: 1 1 280px; 
    
  }*/

  @media(max-width:743px){
    .flipCard{
        display: flex;
        justify-content: center;
        align-items: center;
    }
  }

@media(max-width:1088px){
    .impair .squareCard{
        align-self: center;
    }

    .impair .flipCard{
        display: flex;
    }
}

@media(max-width:743px){
    .impair .squareCard{
        width:auto;
    }
}


.realButtons{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.realButton{
    display: flex;
    padding: 12px 16px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 8px;
}

.realButton:hover{
    border-radius: 8px;
    background: var(--Fonc, #072971);
}

.realButton:hover  .label-caps{
    color:var(--Blanc);
}

.realButton:hover .xsPlus{
    color:#F7B722;
}

.realButton:hover .xs{
    color:#F7B722;
}

.realButton:focus .xsPlus{
    color:var(--Blanc);
}

.realButton:focus .xs{
    color:var(--Blanc);
}


.realButton img{
    width:16px;
    height:16px;
}

.mcab{
    color: var(--Foncé);

    /* Body_Mcab_regular */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Body-Mcabinet-Fontsize, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Mcabinet-Linheight, 32px); /* 160% */
    letter-spacing: var(--Font-Body-Mcabinet-Letterspacing, 0);
}

/*ECOSCORE*/

.ecoscoresContainer{
    display: flex;
    padding: 40px 260px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    align-self: stretch;
   background: rgba(255, 253, 252, 0.60);
backdrop-filter: blur(30px);
}

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

@media(max-width:475px){
    .ecoscoresContainer{
        padding:40px 5%;
}
}

.ecoscoresContainer h2{
    align-self: auto;
    text-align: center;
}

.ecoscores{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

@media(max-width:566px){
    .ecoscores{
        align-items: center;
        justify-content: center;
    }
}

.ecoscore{
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    border: 2px solid var(--Fonc, #072971);
    background: var(--Blanc, #FFFDFC);
}


.ecoscore:hover{
background: var(--Fonc, #072971);
}

.ecoscore:hover p{
    color: var(--Blanc, #FFFDFC);
}

.ecoscore:hover{

}

.ecoscoreLabel{
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    background: var(--Clair, #EDF9FF);
}

.ecoscoreLabel p{
    color: var(--Fonc, #072971);
    text-align: center;
    font-family: Helvetica;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 80% */
}

.ecoscore:hover .ecoscoreLabel{
    background-color: #F7B722;
}

.ecoscore:hover .ecoscoreLabel p{
    color: #072971;
}

.mcab-bold{
    color: var(--Fonc, #072971);

/* Body_Mcab_bold */
font-family: "Cabinet Grotesk Variable";
font-size: var(--Font-Body-Mcabinet-Fontsize, 20px);
font-style: normal;
font-weight: 700;
line-height: var(--Font-Body-Mcabinet-Linheight, 32px); /* 160% */
letter-spacing: var(--Font-Body-Mcabinet-Letterspacing, 0);
}

.creatorPresentations{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Layout-Layout-Gap-FramecarteA, 20px);
    align-self: stretch;
}

@media(max-width:720px){
    .creatorPresentations{
        flex-direction: column;
        align-items: center;
    }
}

.creatorPresentation{
    display: flex;
    min-width: 300px;
    padding: var(--Layout-Layout-Paddingvertical-CarteA, 40px) var(--Layout-Layout-Paddinghorizontal-CarteA, 32px);
    flex-direction: column;
    align-items: center;
    gap: var(--Layout-Layout-Gap-CarteA, 32px);
    flex: 1 0 0;
    border-radius: 20px 20px 0 20px;
    border: 3px solid var(--Constraste, #F7B722);
    background: var(--Blanc, #FFFDFC);
    align-self: stretch;
    justify-content: space-between;
}

.creatorHead{
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
    }

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

.creatorHead img{
    width:109px;
    height:109px;
}

.creatorTitle{
    display: flex;
    min-width: 180px;
    flex-direction: column;
    gap: 16px;
    flex: 1 0 0;
    align-items: center;
        justify-content: center;

}


@media(max-width:959px){
    .creatorTitle{
        align-items: center;
        justify-content: center;
    }
}

.creatorTitle h3{
    display: flex;
    gap:10px;
}

.h3Prim{
font-family: "Baby Girly Script";
font-size: var(--Font-Titles-H3baby-Fontsize, 32px);
font-style: normal;
font-weight: 400;
line-height: var(--Font-Titles-H3baby-Linheight, 36px); /* 112.5% */
letter-spacing: var(--Font-Titles-H3baby-Letterspacing, 0);
}

.h3Sec{

    /* H3_cabinet */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Titles-H3cabinet-Fontsize, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Font-Titles-H3cabinet-Linheight, 36px);
    letter-spacing: var(--Font-Titles-H3cabinet-Letterspacing, 2px);
}

.creatorSubtitle{
    display: flex;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 80px;
    background: var(--Fonc, #072971);
}

.creatorSubtitle p{
    color: var(--Blanc, #FFFDFC);
    text-align: center;

    /* Label_cabinet */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Body-Labelcabinet-Fontsize, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Labelcabinet-Linheight, 20px); /* 125% */
    letter-spacing: var(--Font-Body-Labelcabinet-Letterspacing, 2px);
}

.h3-cabinet-regular{
    color: var(--Fonc, #072971);
    text-align: center;

    /* H3_cabinet_regular */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Titles-H3cabinet-Fontsize, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Titles-H3cabinet-Linheight, 36px); /* 150% */
    letter-spacing: var(--Font-Titles-H3cabinet-Letterspacing, 2px);
}

.h3-baby{
    color: var(--Fonc, #072971);
    text-align: center;

    /* H3_baby */
    font-family: "Baby Girly Script";
    font-size: var(--Font-Titles-H3baby-Fontsize, 32px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Titles-H3baby-Linheight, 36px); /* 112.5% */
    letter-spacing: var(--Font-Titles-H3baby-Letterspacing, 0);
}

.rseCardContent{
   display: flex;
    padding: 0 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
}

.rseCardP1{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 0 0;
    align-self: stretch;
}

.rseCardP2{
    flex: 1 0 0;
    align-self: stretch;
}

.rseCardBack{
    display: flex;
padding: 0 16px;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 0 0;
align-self: stretch;
}

.rseCardBack p{
    color: var(--Fonc, #072971);
text-align: center;

/* Réponse */
font-family: "Cabinet Grotesk Variable";
font-size: var(--Font-Body-Réponse-Fontsize, 20px);
font-style: normal;
font-weight: 400;
line-height: var(--Font-Body-Réponse-Linheight, 40px); /* 200% */
letter-spacing: var(--Font-Body-Mcabinet-Letterspacing, 0);
}

.planContainer{
    display: flex;
    align-items: center;
    align-content: center;
    gap: 100px;

}

@media(max-width:1050px){
    .planContainer{
        flex-direction: column;
       justify-content: center;
        gap: var(--Layout-Layout-Gap-Main, 48px);
    }
}


.legalContactContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
}

@media(max-width:1300px){
    .legalContactContainer{
       display: flex;
        justify-content: space-between;
        align-content: flex-start;
        row-gap: 40px;
        align-self: stretch;
        flex-wrap: wrap;
        flex-direction: row;
        width:100%;
    }
}

@media(max-width:1050px){
    .legalContactContainer{
        gap:20px;
  
    }
}

@media(max-width:700px){
    .legalContactContainer{
        gap:0;
  
    }
}

@media(max-width:630px){
    .legalContactContainer{
       flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        align-self: stretch;
  
    }
}


.legalContactItem{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

@media(max-width:1050px){
    .legalContactItem{
        width:284px;
    }
}

@media(max-width:700px){
    #legalContactItemFirst{
        width:240px;
    }
}

@media(max-width:630px){
    .legalContactItem, #legalContactItemFirst{
        width:100%;
        gap:24px;
    }
}

.legalContactItem a, .legalContactItem p{
    color: var(--Fonc, #072971);
    font-family: "Cabinet Grotesk Variable";
    font-size: 20px;
    font-weight: 300;
}

.withBorder {
    border-top: 2.5px solid #072971;
    padding-top: 40px;
    margin-top: 10px;
}

@media(max-width:1050px){
    .withBorder{
        border-top:none;
        padding-top:0;
        margin-top: auto;
        border-left: 2.5px solid #072971;
        padding-left:60px;
    }
}

@media(max-width:630px){
    .withBorder{
        border-left:none;
        padding-left:0;
        border-top: 2.5px solid #072971;
        padding-top:24px;
    }
}

@media(max-width:1050px){
    #planSiteFirst{
        border-left:none;
        padding-left: 0;
    }
}

@media(max-width:700px){
    #planSiteFirst{
        width:240px;
    }
}

@media(max-width:570px){
    #planSiteFirst{
        width:200px;
    }
}

@media(max-width:540px){
    #planSiteFirst{
        width:160px;
    }
}

@media(max-width:420px){
    #planSiteFirst{
        width:132px;
    }
}


.planSite{
    display: flex;
    width: 284px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    border-left: 2.5px solid #072971;
   padding-left: 60px;
}

@media(max-width:592px){
    .planSite{
        width:240px;
    }
}

@media(max-width:540px){
    .planSite{
        width:220px;
    }
}

@media(max-width:450px){
    .planSite{
        width:157px;
    }
}


@media(max-width:570px){
    .planSite{
        padding-left: 40px;
    }
}

@media(max-width:540px){
    .planSite{
        padding-left: 20px;
    }
}

.planSiteTitle{
    color: var(--Fonc, #072971);
    font-family: "Cabinet Grotesk Variable";
    font-size: 32px;
    font-weight: 300;
}

@media(max-width:450px){
    .planSiteTitle{
        font-size: 24px;
    }
}

.planSites{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 100px;
}

.planSites a:hover{
    text-decoration: underline var(--Foncé);
}

@media(max-width:1300px){
    .planSites{
        justify-content: space-between;
        row-gap: 40px;
    }
}
@media(max-width:1050px){
    .planSites{
        gap:20px;
        border-top: 2.5px solid #072971;
        padding-top:50px;
    }
}

@media(max-width:460px){
    .planSites{
        gap:20px;
        border-top: 2.5px solid #072971;
        padding-top:50px;
    }
}

.planMainItem{
    color: var(--Fonc, #072971);
    font-family: "Cabinet Grotesk Variable";
    font-size: 20px;
    font-weight: 500;
}

@media(max-width:450px){
    .planMainItem{
        font-size: 16px;
    }
}

.planItems{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.planSubItem{
    color: var(--Fonc, #072971);
    font-family: "Cabinet Grotesk Variable";
    font-size: 20px;
    font-weight: 300;
}

@media(max-width:450px){
    .planSubItem{
        font-size: 16px;
    }
}

.txt-baby{
    color: var(--Fonc, #072971);
    text-align: center;
    font-family: "Baby Girly Script";
    font-size: var(--Font-Body-Mbaby-Fontsize, 24px);
    font-weight: 400;
    line-height: var(--Font-Body-Mbaby-Linheight, 36px); /* 150% */
    letter-spacing: var(--Font-Body-Mbaby-Letterspacing, 0);
}


.txt-grotesk{
    color: var(--Fonc, #072971);
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Body-Mcabinet-Fontsize, 20px);
    font-weight: 300;
    line-height: var(--Font-Body-Mcabinet-Linheight, 32px);
    letter-spacing: var(--Font-Body-Mcabinet-Letterspacing, 0);
}

.breadcrumb li{
    margin-left:5px;
}

svg {
  color: #072971;
}


.xs{
    display: inline-block;
    width:20px;
    height:21px;
}

.xsPlus{
     display: inline-block;
    width:20px;
    height:21px;
}

.yellow{
    color:#F7B722;
}

.svgPresta{
    display: inline-block;
    width:17px;
    height:17px;
}

.svgEngagement{
    width: 211.338px;
    height: 133.929px;
    aspect-ratio: 172/109;
}



#backVoid{
    height:359px;
}

#expertiseDomainRse{
    display: flex;
    width: 193px;
    height: 193px;
    padding: 16px 46px 14.98px 28px;
    align-items: center;
    aspect-ratio: 1/1;
}

@media(max-width:500px){
    #expertiseDomainRse{
    display: flex;
    height: 96px;
    justify-content: center;
    padding: 0;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    width:auto;
}

#expertiseDomainRse svg{
    height:96px;
}

}

#expertiseDomainEco{
   display: flex;
    width: 193px;
    height: 193px;
    padding: 52px 23px 50.793px 40px;
    justify-content: flex-end;
    align-items: center;
    aspect-ratio: 1/1;
}

@media(max-width:500px){
    #expertiseDomainEco{
    display: flex;
height: 102.663px;
padding: 19.278px 29.722px 17.329px 36.905px;
justify-content: flex-end;
align-items: center;
flex: 1 0 0;
aspect-ratio: 162.00/102.66;
}

#expertiseDomainEco svg{
    height: 66px;
}

}


#expertiseDomainImage{
  display: flex;
    width: 193px;
    height: 193px;
    padding: 51px 4.431px 34px 6px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

@media(max-width:500px){
    #expertiseDomainImage{
    height: 96px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
}

 #expertiseDomainImage svg{
    height:96px;
 }

}


#expertiseDomainSeo{
    display: flex;
    width: 193px;
    height: 193px;
    padding: 48.509px 55px 43.775px 39px;
    align-items: center;
    aspect-ratio: 1/1;
}

@media(max-width:500px){
    #expertiseDomainSeo{
    display: flex;
height: 80.892px;
padding: 5.271px 33.386px 7.255px 27.365px;
align-items: center;
flex: 1 0 0;
aspect-ratio: 125/79;
}

#expertiseDomainSeo svg{
    height: 80.892px;
}

}


/*FORMULAIRE */
.contactPhrase{
    color: var(--Fonc, #072971);

    /* Question */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Body-Question-Fontsize, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Font-Body-Question-Linheight, 32px); /* 133.333% */
    letter-spacing: var(--Font-Body-Question-Letterspacing, 1px);
}

.contactForm {
   display: flex;
    align-items: center;
    gap: var(--Layout-Layout-Gap-Main, 60px);
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
}



.contactFormContent{
display: flex;
align-items: flex-start;
gap: 30px;
align-self: stretch;
}

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

}

.leftColumn {
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    flex: 1 0 0;
}

@media(max-width:600px){
    .leftColumn {
   width:100%;
}

}
.formGroup {
   display: flex;
    height: 73px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

 label {
    height: 21px;
    flex-shrink: 0;
    align-self: stretch;
        color: var(--Fonc, #072971);


    /* Label_caps */
    font-family: "Cabinet Grotesk Variable";
    font-size: var(--Font-Body-Labelcaps-Fontsize, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Labelcaps-Linheight, 16px); /* 133.333% */
    letter-spacing: var(--Font-Body-Labelcaps-Letterspacing, 2px);
    text-transform: uppercase;
}

 input,
 textarea {
    height: 40px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 12px;
    border: 2px solid var(--Clair, #EDF9FF);
    background: var(--Clair, #EDF9FF);
    padding :5px;
    font-size: 15px;
}
 input:focus,
 textarea:focus{
    border: 2px solid var(--Foncé, #072971);
} 

 input:active,
 textarea:active{
    border: 2px solid var(--Foncé, #072971);
} 

 textarea{
    height:246px;
}

.rightColumn {
    flex: 1;
    display: flex;
    flex-direction: column;
gap: 12px;
flex: 1 0 0;
align-self: stretch;
}


input,
textarea,
select {
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: none !important;
  outline: none;
}

.titleContact{
    text-align: center;
}

.knowMore:hover{
background : var(--Foncé);
}

.knowMore:hover p{
     color:var(--Blanc);
}


.knowMore:hover .xs{
    color:#F7B722;
}

.knowMore{
    cursor:pointer;
}

.successMessage {
    color: #2e7d32;
    margin-bottom: 1em;
}

.errorMessage {
    color: #b00020;
    margin-bottom: 1em;
}

.blurBackground{
    background: rgba(255, 253, 252, 0.60);
backdrop-filter: blur(30px);
}

.contactForm .knowMore{
    flex-direction: row;
}

#presentationContainer{
    display: flex;
    max-width: 900px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.line{
    height: 2.5px ;
    background-color: #072971;
    aria-hidden:true;
    width:66%;
    flex-grow: 1;
}

#presentationContainer p, #presentationContainer h2{
    text-align: center;
}

.svgPrestation{
    display: flex;
    height: 44px;
    width:100px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#prestaImages{
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.prestaImageItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width:100%;
}

.carbonContainer{
display: flex;
    width: 284px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    border-left: 2.5px solid #072971;
   padding-left: 60px;
   height:341px;
}



@media(max-width:592px){
    .carbonContainer{
        width:240px;
    }
}

@media(max-width:540px){
    .carbonContainer{
        width:220px;
    }
}

@media(max-width:450px){
    .carbonContainer{
        width:157px;
    }
}


@media(max-width:570px){
    .carbonContainer{
        padding-left: 40px;
    }
}

@media(max-width:540px){
    .carbonContainer{
        padding-left: 20px;
    }
}