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

html,
body {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}

body {
    overflow-y: auto;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 6px;
    padding: 0 1px;
}

::-webkit-scrollbar-track {
    background: #0b0b0b;
}

::-webkit-scrollbar-thumb {
    background-color: white;
    width: 4px;
}

.centerNav {
    width: 100svw;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 3.51svh;
    z-index: 999;
        right: 0.1svw;
}

.containerNav {
    width: 85.10svw;
    height: 7.96svh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.33);
    border: solid 1px #D3D3D3;
    border-radius: 100svw;
    backdrop-filter: blur(5.6px);
    -webkit-backdrop-filter: blur(5.6px);
    transition: all 0.5s;
    padding: 0 1svh 0 2svw;
}
.cls-3{
    transition: all 0.5s;
}

#Calque_2 {
    width: 2.96svw;
    cursor: pointer;
}

.nav {
    display: flex;
}

.btnNav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 3svh;
    margin-right: 2svw;
}

.btnNavservices {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 3svh;
    margin-right: 2svw;
}

.btnNav p {
    font-family: montserrat;
    color: #232323;
    font-size: 1svw;
    cursor: pointer;
    font-weight: 400;
    transition: all 0.5s;
}

.btnNavservices p {
    font-family: montserrat;
    color: #232323;
    font-size: 1svw;
    cursor: pointer;
    font-weight: 400;
}

.lastBtnNav {
    margin: 0;
}

.underLigne {
    position: absolute;
    bottom: 0;
    height: 0.1svh;
    background-color: #232323;
    width: 0;
    transition: all 0.5s;
}

.underLigneServices {
    position: absolute;
    bottom: 0;
    height: 0.1svh;
    background-color: #232323;
    width: 0;
    transition: all 0.5s;
}

.underLigneOn {
    position: absolute;
    bottom: 0;
    height: 0.1svh;
    background-color: #232323;
    width: 100%;
    transition: all 0.5s;
}

.btnNav:hover .underLigne {
    width: 100%;
}

.btnNavservices:hover .underLigne {
    width: 0;
}

.btnServices {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.servicesBtn {
    margin-right: 0.5svw;
    transition: all 0.5s;
}

.ArrowNav {
    width: 0.7svw;
    transition: all 0.5s;
}
.pathArrowNav{
    transition: all 0.5s;
}

.btnContact {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #232323;
    height: 5.96svh;
    border-radius: 100svw;
    cursor: pointer;
    padding-right: 0.5svh;
    padding-left: 1svw;
    transition: all 0.5s;
}

.contact {
    color: white;
    font-family: montserrat;
    font-size: 0.9svw;
    margin-right: 1svw;
    transition:  all 0.5s;
}

.roundContact {
    width: 4.96svh;
    height: 4.96svh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100svw;
    transition: all 0.5s;
}

.roundContact svg {
    width: 0.8svw;
    rotate: -90deg;
    transition: all 0.5s;
}

.btnContact:hover .roundContact svg {
    rotate: 270deg;
}
.pathArrowContactSVG{
    transition: all 0.5s;
}

.services {
    position: absolute;
    left: 0;
    bottom: -32.2svh;
    background-color: #232323;
    width: 51.6svw;
    height: 28.2svh;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 1svh;
}

.servicesUn {
    width: 24.235svw;
    height: 11.1svh;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: all 0.5s;
}
.servicesUn {
    width: 24.235svw;
    height: 11.1svh;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: all 0.5s;
}

.servicesOn{
    background-color: #121212;
}

.servicesUn:hover {
    background-color: #121212;
}

.servicesUn img {
    width: 3svw;
    margin-right: 2svw;
}

.containerInfoServices h3 {
    color: white;
    font-family: montserrat;
    font-size: 1svw;
}

.containerInfoServices p {
    color: white;
    font-family: montserrat;
    font-size: 0.8svw;
}

.servicesDeux {
    width: 24.235svw;
    height: 11.1svh;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: all 0.5s;
}

.servicesDeux:hover {
    background-color: #121212;
}

.servicesDeux img {
    width: 3svw;
    margin-right: 2svw;
}

.servicesTrois {
    width: 24.235svw;
    height: 11.1svh;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: all 0.5s;
}

.servicesTrois:hover {
    background-color: #121212;
}

.servicesTrois img {
    width: 3svw;
    margin-right: 2svw;
}

.servicesQuatre {
    width: 24.235svw;
    height: 11.1svh;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: all 0.5s;
}

.servicesQuatre:hover {
    background-color: #121212;
}

.servicesQuatre img {
    width: 3svw;
    margin-right: 2svw;
}
.menuburger{
    width: 100svw;
    height: 10svw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2svw;
    background-color: #232323;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    display: none;
}
.logoBurger{
    width: 23svw;
}
.iconMenuBurger{
    width: 5svw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.iconMenuBurgerClose{
    position: absolute;
    opacity: 1;
    width: 100%;
    transition: all 0.5s;
}
.iconMenuBurgerOpens{
    position: absolute;
    opacity:0;
    width: 100%;
    transition: all 0.5s;
}
/* //////////////////////HERO SECTION///////// */
.heroSection {
    width: 100svw;
    background-image: url(../img/backTopHome.webp);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: end;
    position: relative;
    overflow: hidden;
}

.roundRougeLeft {
    width: 11.77svw;
    height: 11.77svw;
    position: absolute;
    border: dashed 0.2svw #D62F59;
    border-radius: 100svw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10svh;
    left: -5svw;
    z-index: 0;
}

.roundRougeLeft div {
    width: 9.68svw;
    height: 9.68svw;
    background-color: #D62F59;
    border-radius: 100svw;
}

.roundJauneMid {
    width: 4.47svw;
    height: 4.47svw;
    position: absolute;
    border: dashed 0.2svw #FFBC00;
    border-radius: 100svw;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 34svw;
    bottom: 10svh;
    z-index: 0;
}

.roundJauneMid div {
    width: 2.60svw;
    height: 2.60svw;
    background-color: #FFBC00;
    border-radius: 100svw;
}

.roundBleuDroite {
    width: 21.51svw;
    height: 21.51svw;
    position: absolute;
    border: dashed 0.2svw #05B8E2;
    border-radius: 100svw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 13svh;
    right: -15svw;
    z-index: 0;
}

.roundBleuDroite div {
    width: 16.40svw;
    height: 16.40svw;
    background-color: #05B8E2;
    border-radius: 100svw;
}
.roundRougeTop {
    width: 11.77svw;
    height: 11.77svw;
    position: absolute;
    border: dashed 0.2svw #D62F59;
    border-radius: 100svw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -19svh;
    right: 35svw;
    z-index: 0;
}

.roundRougeTop div {
    width: 9.68svw;
    height: 9.68svw;
    background-color: #D62F59;
    border-radius: 100svw;
}

.roundJauneLeft {
    width: 9.47svw;
    height: 9.47svw;
    position: absolute;
    border: dashed 0.2svw #FFBC00;
    border-radius: 100svw;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -5svw;
    top: -8svh;
    z-index: 0;
}

.roundJauneLeft div {
    width: 7.60svw;
    height: 7.60svw;
    background-color: #FFBC00;
    border-radius: 100svw;
}

.roundBleuBot {
    width: 11.47svw;
    height: 11.47svw;
    position: absolute;
    border: dashed 0.2svw #05B8E2;
    border-radius: 100svw;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: -7svh;
    right: -6svw;
    z-index: 0;
}

.roundBleuBot div {
    width: 9.40svw;
    height: 9.40svw;
    background-color: #05B8E2;
    border-radius: 100svw;
}
.roundRougeTop,
.roundJauneLeft,
.roundBleuBot {
  transition: transform 0.1s linear;
  will-change: transform;
}
.roundRougeLeft,
.roundJauneMid,
.roundBleuDroite {
  transition: transform 0.1s linear;
  will-change: transform;
}


.roundRougeHeroHome {
    width: 6.82svw;
    height: 6.82svw;
    position: absolute;
    background-color: #D62F59;
    border-radius: 100svw;
    top: -4svh;
    right: 27svw;
    z-index: 0;
}

.roundbleuHeroHome {
    width: 6.82svw;
    height: 6.82svw;
    position: absolute;
    background-color: #05B8E2;
    border-radius: 100svw;
    bottom: -8svh;
    left: 10svw;
    z-index: 0;
}

.roundjauneHeroHome {
    width: 5.31svw;
    height: 5.31svw;
    position: absolute;
    background-color: #FFBC00;
    border-radius: 100svw;
    top: -4svh;
    left: 20svw;
    z-index: 0;
}
.roundRougeReaHome {
    width: 4.82svw;
    height: 4.82svw;
    position: absolute;
    background-color: #D62F59;
    border-radius: 100svw;
    bottom: -8svh;
    left: 5svw;
    z-index: 0;
}

.roundbleuReaHome {
    width: 1.82svw;
    height: 1.82svw;
    position: absolute;
    background-color: #05B8E2;
    border-radius: 100svw;
    bottom: 18svh;
    left: 41svw;
    z-index: 0;
}

.roundjauneReaHome {
    width: 3.82svw;
    height: 3.82svw;
    position: absolute;
    background-color: #FFBC00;
    border-radius: 100svw;
    top: 5svh;
    right: 6svw;
    z-index: 0;
}
.roundjaune2ReaHome {
    width: 1.5svw;
    height: 1.5svw;
    position: absolute;
    background-color: #FFBC00;
    border-radius: 100svw;
    bottom: 2svh;
    right: 40svw;
    z-index: 0;
}

.containerHero {
    width: 85.10svw;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding: 13svh 0 0 0;
}

.leftHero {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jwmaAgency {
    display: flex;
    align-items: center;
    margin-bottom: 1svh;
}

.jwmaAgency .rondJWMA {
    width: 0.3svw;
    height: 0.3svw;
    border-radius: 100svw;
    background-color: #05B8E2;
    margin-right: 0.5svw;
}

.jwmaAgency p {
    color: #232323;
    font-family: montserrat;
    font-size: 0.8svw;
    font-weight: 500;
    text-transform: uppercase;
}

.leftHero h1 {
    font-family: montserrat;
    font-size: 3.3svw;
    color: #232323;
    line-height: 3svw;
    margin-bottom: 2svh;
    margin-left: -0.2svw;
    text-transform: uppercase;
}

.leftHero h1 span {
    font-weight: 900;
}

.traitHero {
    display: flex;
    margin-bottom: 2svh;
}

.traitHero div {
    width: 5svw;
    height: 0.3svh;
}

.bleuHero {
    background-color: #05B8E2;
}

.rougeHero {
    background-color: #D62F59;
}

.jauneero {
    background-color: #FFBC00;
}

.parapHero {
    font-family: montserrat;
    font-size: 1svw;
    color: #232323;
    margin-bottom: 2svh;
}
.containerimgHero{
    width: 44svw;
  display: flex;
  align-items: end;
  justify-content: center;
  overflow: hidden;
}
.containerimgHero img {
    max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.btnsavoirPlus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232323;
    height: 5.96svh;
    border-radius: 100svw;
    cursor: pointer;
    padding-right: 0.6svh;
    padding-left: 2svw;
    width: 18svw;
}

.savoirPlus {
    color: white;
    font-family: montserrat;
    font-size: 0.9svw;
    margin-right: 0.5svw;
}

.roundSavoirPlus {
    width: 4.96svh;
    height: 4.96svh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100svw;
}

.roundSavoirPlus img {
    width: 0.8svw;
    rotate: 0deg;
    transition: all 0.5s;
}

.btnsavoirPlus:hover .roundSavoirPlus img {
    rotate: 360deg;
}
.btnsavoirPlusIdentite {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232323;
    height: 5.96svh;
    border-radius: 100svw;
    cursor: pointer;
    padding-right: 0.4svh;
    padding-left: 2svw;
    width: 16svw;
}

.savoirPlusIdentite {
    color: white;
    font-family: montserrat;
    font-size: 0.9svw;
    margin-right: 0.5svw;
}

.roundSavoirPlusIdentite {
    width: 4.96svh;
    height: 4.96svh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100svw;
}

.roundSavoirPlusIdentite img {
    width: 0.8svw;
    rotate: -90deg;
    transition: all 0.5s;
}

.btnsavoirPlusIdentite:hover .roundSavoirPlusIdentite img {
    rotate: 270deg;
}
.btnContactAgence {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232323;
    height: 5.96svh;
    border-radius: 100svw;
    cursor: pointer;
    padding-right: 0.4svh;
    padding-left: 2svw;
    width: 19svw;
}

.ContactAgence {
    color: white;
    font-family: montserrat;
    font-size: 0.9svw;
    margin-right: 0.5svw;
}

.roundContactAgence {
    width: 4.96svh;
    height: 4.96svh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100svw;
}

.roundContactAgence img {
    width: 0.8svw;
    rotate: 0deg;
    transition: all 0.5s;
}

.btnContactAgence:hover .roundContactAgence img {
    rotate: 360deg;
}



/* //////////////////////ABOUT///////////////////////////// */

.containerAbout{
    width: 100svw;
    display: flex;
    justify-content: center;
    padding: 7svh 0;
    transition: all 0.5s;
}
.about{
    width: 85.10svw;
    display: flex;
    justify-content: space-between;
}
.aboutImage {
    width: 41svw;
    height: auto;
    object-fit: contain;
    max-height: 100%;
}

.leftAbout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.jwmaAbout {
    display: flex;
    align-items: center;
    margin-bottom: 1svh;
}

.jwmaAbout .rondJWMAAbout {
    width: 0.3svw;
    height: 0.3svw;
    border-radius: 100svw;
    background-color: #D62F59;
    margin-right: 0.5svw;
}
.jwmaAbout .rondJWMAAboutDeuxIdent {
    width: 0.3svw;
    height: 0.3svw;
    border-radius: 100svw;
    background-color: #FFBC00;
    margin-right: 0.5svw;
}

.jwmaAbout p {
    color: #232323;
    font-family: montserrat;
    font-size: 0.8svw;
    font-weight: 500;
    text-transform: uppercase;
}

.leftAbout h1 {
    font-family: montserrat;
    font-size: 3.3svw;
    color: #232323;
    line-height: 3.4svw;
    margin-bottom: 2svh;
    margin-left: -0.2svw;
    text-transform: uppercase;
}

.leftAbout h1 span {
    font-weight: 800;
}

.traitAbout {
    display: flex;
    margin-bottom: 2svh;
}

.traitAbout div {
    width: 5svw;
    height: 0.3svh;
}

.bleuAbout {
    background-color: #05B8E2;
}

.rougeAbout {
    background-color: #D62F59;
}

.jauneAbout {
    background-color: #FFBC00;
}

.parapTarifs {
    font-family: montserrat;
    font-size: 1.15svw;
    color: #232323;
    margin-bottom: 2svh;
}
.parapAbout {
    font-family: montserrat;
    font-size: 1.15svw;
    color: #232323;
}
.parapAbout span{
    font-weight: 600;
}

/* /////////////////////////REAHOME////////////////////// */

.containerReaHome{
    width: 100svw;
    display: flex;
    justify-content: center;
    background-image: url(../img/backReaHome.webp);
    background-position: center;
    background-size: cover;
    padding: 7svh;
    position: relative;
    overflow: hidden;
}
.reaHome{
    width: 85.10svw;
    display: flex;
    flex-direction: column;
    z-index: 2;
    position: relative;
}
.containerInfosReaHome{
display: flex;
justify-content: space-between;
}

.leftReaHome {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jwmaReaHome {
    display: flex;
    align-items: center;
    margin-bottom: 1svh;
}

.jwmaReaHome .rondReaHome {
    width: 0.3svw;
    height: 0.3svw;
    border-radius: 100svw;
    background-color: #FFBC00;
    margin-right: 0.5svw;
}

.jwmaReaHome p {
    color: #232323;
    font-family: montserrat;
    font-size: 0.8svw;
    font-weight: 500;
    text-transform: uppercase;
}

.leftReaHome h1 {
    font-family: montserrat;
    font-size: 3.3svw;
    color: #232323;
    line-height: 3svw;
    margin-bottom: 2svh;
    margin-left: -0.2svw;
    text-transform: uppercase;
}

.leftReaHome h1 span {
    font-weight: 800;
}

.traitReaHome {
    display: flex;
    margin-bottom: 2svh;
}

.traitReaHome div {
    width: 5svw;
    height: 0.3svh;
}

.bleuReaHome {
    background-color: #05B8E2;
}

.rougeReaHome {
    background-color: #D62F59;
}

.jauneReaHome {
    background-color: #FFBC00;
}

.parapReaHome {
    font-family: montserrat;
    font-size: 1svw;
    color: #232323;
    margin-bottom: 2svh;
}
.containerimgHero{
    width: 44svw;
  display: flex;
  align-items: end;
  justify-content: center;
  overflow: hidden;
}
.containerimgHero img {
    max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.btnReaHome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232323;
    height: 5.96svh;
    border-radius: 100svw;
    cursor: pointer;
    padding-right: 0.6svh;
    padding-left: 2svw;
    width: 22svw;
}
.btnReaTarifs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232323;
    height: 5.96svh;
    border-radius: 100svw;
    cursor: pointer;
    padding-right: 0.6svh;
    padding-left: 2svw;
    width: 19svw;
}
.btnReaTarifs:hover .roundTextBtnReaHome img {
    rotate: 270deg;
}

.textBtnReaHome {
    color: white;
    font-family: montserrat;
    font-size: 0.9svw;
    margin-right: 0.5svw;
}

.roundTextBtnReaHome {
    width: 4.96svh;
    height: 4.96svh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100svw;
}

.roundTextBtnReaHome img {
    width: 0.8svw;
    rotate: -90deg;
    transition: all 0.5s;
}

.btnReaHome:hover .roundTextBtnReaHome img {
    rotate: 270deg;
}
.containerSliderReaHome{
    display: flex;
    overflow: hidden;
    width: 48svw;
}
.containerSlider{
    display: flex;
    transition: all 0.5s;
}
.sliderReaHomeDesign{
    width: 23.5svw;
    margin-right: 1svw;
    background-color: rgba(47, 47, 47, 0.16);
    border-radius: 1svw;
    border: solid #A4A4A4 1px;
    height:20svw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.sliderReaHone{
    width:21svw;
    height: 18svw;
    overflow: hidden;
    border-radius: 0.5svw;
     position: relative;
}
.sliderReaHone img{
    width:100%;
   
}
.arrowReaHome{
    width: 85.10svw;
    display: flex;
    justify-content: end;
    margin-top: 2svh;
}
.arrowLeft{
    width: 1.97svw;
    height: 1.97svw;
    background-color: rgba(60, 60, 60, 0.5);
    border-radius: 0.3svw;
    border: solid #575757 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 1svw;
}
.arrowRight{
    width: 1.97svw;
    height: 1.97svw;
    background-color: rgba(60, 60, 60, 0.5);
    border-radius: 0.3svw;
    border: solid #575757 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.arrowRight img{
    width: 0.7svw;
    rotate: 180deg;

}
.arrowLeft img{
    width: 0.7svw;

}
.hoverRea1{
    width: 21svw;
    height: 18svw;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(10, 10, 10, 0.90);
    opacity: 0;
    transition: all 0.5s;
}
.hoverRea1 img{
 width: 15svw;
}
.hoverRea1 .logoTraiteur{
 width: 11svw;
}
.hoverRea1 p{
 color: white;
 position: absolute;
 bottom: 1svh;
 font-size: 0.8svw;
}

.rondSolutions{
    background-color: #05B8E2;
    width: 0.3svw;
    height: 0.3svw;
    border-radius: 100svw;
    margin-right: 0.5svw;
}

.containerSolution{
    width: 100svw;
    display: flex;
    justify-content: center;
    padding-top: 7svh;
}
.solution{
    width: 85.10svw;
    display: flex;
    justify-content: space-between;
}
.leftSolution{
    display: flex;
    width: 47.34svw;
    justify-content: space-between;
}
.solutionUn{
    background-color: #DFDFDF;
    border-radius: 0.5svw;
    border: solid 1px #BCBCBC ;
    width: 15.26svw;
    height: 40svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1svh;
}
.solutionUn img{
height: 5svw;
margin-bottom: 3svh;
}
.solutionUn h3{
color: #232323;
font-family: montserrat;
font-size: 1svw;
margin-bottom: 2svh;
}
.solutionUn p{
color: #232323;
font-family: montserrat;
font-size: 0.9svw;
text-align: center;
}
.paraSolutions{
    margin: 0;
}

.containerSeparate{
    width: 100svw;
    display: flex;
    justify-content: center;
    padding: 5svh 0;
}
.separate{
    width: 73.5svw;
    background-color: #C5C5C5;
    height: 1px;
}

.containerFAQ{
    width: 100svw;
    display: flex;
    justify-content: center;
    padding-bottom: 7svh;
}
.FAQ{
    width: 85.10svw;
    display: flex;
    flex-direction: column;
}
.rondFAQ{
    background-color: #D62F59;
}
.FAQ  h1 {
    font-family: montserrat;
    font-size: 2svw;
    color: #232323;
    line-height: 3svw;
    margin-left: -0.2svw;
    text-transform: uppercase;
    margin-top: -1svh;
}

 h1 span {
    font-weight: 800;
}
.containerQuestion{
    width: 85.10svw;
    display: flex;
    justify-content: space-between;
    margin-top: 2svh;
}
.questionDroite{
    width: 41.5svw;
}
.questionGauche{
    width: 41.5svw;
}
.question1{
    display: flex;
    justify-content: space-between;
    background-color: #EAEAEA;
    border-radius: 0.6svw;
    height: 7svh;
    padding: 0 2svw;
    align-items: center;
    margin-bottom: 1svh;
    cursor: pointer;
}
.question1 p{
color: #232323;
font-family: montserrat;
font-size: 0.9svw;
font-weight: 500;
}
.question1 img{
width: 1svw;
}
.reponseFAQ{
    width: 41.5svw;
    background-color: #232323;
    height: 16svh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3svw;
    border-radius: 0.6svw;
    margin-bottom: 1svh;
}
.reponseFAQ p{
    color: white;
font-family: montserrat;
font-size: 0.85svw;
line-height: 3svh;
}

#reponse1, #reponse2, #reponse3, #reponse4, #reponse5, #reponse6{
    display: none;
}



.containerFooter{
    width: 100svw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7svh 0;
    background-color: #232323;
}
.footer{
    width: 85.10svw;
    display: flex;
    justify-content: space-between;
    margin-bottom: 7svh;
}
.footerUn{
    width: 20svw;
}
.footerUn img{
width: 16.875svw;
margin-bottom: 5svh;
}
.footerPhone{
    display: flex;
    align-items: center;
    margin-bottom: 2svh;
}
.footerPhone svg{
    fill: white;
    width: 1.3svw;
    margin-right: 1svw;
}
.footerPhone p{
color: white;
font-family: montserrat;
font-size: 1.3svw;
font-weight: 300;

}
.footerMail{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.footerMail svg{
    fill: white;
    width: 1.3svw;
    margin-right: 1svw;
}
.footerMail p{
color: white;
font-family: montserrat;
font-size: 1.3svw;
text-decoration: none;
font-weight: 300;
cursor: pointer;
}

.footerDeux h4{
color: white;
font-family: montserrat;
font-size: 1.5svw;
 margin-bottom: 0.5svh;
}
.barreFooter{
    display: flex;
}
.barreBleuFooter{
    background-color: #05B8E2;
    width: 2svw;
    height: 0.3svh;
    margin-bottom: 4svh;
}
.barreRougeFooter{
    background-color: #D62F59;
    width: 2svw;
    height: 0.3svh;
}
.barreJauneFooter{
    background-color: #FFBC00;
    width: 2svw;
    height: 0.3svh;
}
.footerDeux{
    width: 13svw;
}
.footerAccueil{
    display: flex;
    align-items: center;
    margin-bottom: 1.5svh;
    cursor: pointer;
    transition: all 0.5s;
}
.footerAccueil div{
    width: 0;
    height: 0;
    background-color: white;
    border-radius: 100svw;
    margin-right:0.0;
    transition: all 0.5s;
}
.footerAccueil p{
    color: #8F8F8F;
    font-family: montserrat;
    font-size: 1.1svw;
    font-weight: 300;
    transition: all 0.5s;
}
.footerAccueil:hover div{
    width: 0.3svw;
    height: 0.3svw;
    background-color: white;
    border-radius: 100svw;
    margin-right:0.5svw;
   
}
.footerAccueil:hover p{
color: white;
   
}
.onFooter{
    display: flex;
    align-items: center;
    margin-bottom: 1.5svh;
    cursor: pointer;
}
.onFooter div{
    width: 0.3svw;
    height: 0.3svw;
    background-color: white;
    border-radius: 100svw;
    margin-right:0.5svw;
}
.onFooter p{
    color: white;
    font-family: montserrat;
    font-size: 1.1svw;
    font-weight: 300;
}
.reseauxFooter{
    display: flex;
}
.fbFooter{
    width: 2.5svw;
    height: 2.5svw;
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
    margin-right: 0.4svw;
}
.fbFooter:hover{
    background-color: white;
}
.fbFooter svg{
fill: white;
width: 0.6svw;
transition: all 0.5s;
}
.fbFooter:hover svg{
fill: #282933;
}
.instaFooter{
    width: 2.5svw;
    height: 2.5svw;
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
    margin-right: 0.4svw;
}
.instaFooter:hover{
    background-color: white;
}
.instaFooter svg{
fill: white;
width: 0.9svw;
transition: all 0.5s;
}
.instaFooter:hover svg{
fill: #282933;
}
.tiktokFooter{
    width: 2.5svw;
    height: 2.5svw;
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
    margin-right: 0.4svw;
}
.tiktokFooter:hover{
    background-color: white;
}
.tiktokFooter svg{
fill: white;
width: 0.9svw;
transition: all 0.5s;
}
.tiktokFooter:hover svg{
fill: #282933;
}
.snapFooter{
    width: 2.5svw;
    height: 2.5svw;
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
}
.snapFooter:hover{
    background-color: white;
}
.snapFooter svg{
fill: white;
width: 1svw;
transition: all 0.5s;
}
.snapFooter:hover svg{
fill: #282933;
}
.barreMentions{
    width: 85.10svw;
    height: 1px;
    background-color: #474747;
    margin-bottom: 7svh;
}
.containerMentions{
    width: 85.10svw;
    display: flex;
    justify-content: space-between;
}
.containerMentions p{
    color: #8F8F8F;
    font-family: montserrat;
    font-size: 0.8svw;
}
#MentionsLegales{
    cursor: pointer;
    transition: all 0.5s;
}
#MentionsLegales:hover{
    color: white;
}


.containerbarreIdent{
    width: 100svw;
    display: flex;
    justify-content: center;
    margin-bottom: 7svh;
}
.barreIdent{
    width: 85.10svw;
    height: 1px;
    background-color:#C5C5C5 ;
}
.AboutIdenDeux{
    padding: 0 0 7svh 0;
}


/* ////////////CONTACT////////////////// */

.containerFormn{
    width: 100svw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7svh 0 10svh 0;
}
.jwmaContact {
    display: flex;
    align-items: center;
    margin-bottom: 0.5svh;
}

.jwmaContact .rondJWMAAbout {
    width: 0.3svw;
    height: 0.3svw;
    border-radius: 100svw;
    background-color: #D62F59;
    margin-right: 0.5svw;
}
.jwmaContact .rondJWMAAboutDeuxIdent {
    width: 0.3svw;
    height: 0.3svw;
    border-radius: 100svw;
    background-color: #FFBC00;
    margin-right: 0.5svw;
}

.jwmaContact p {
    color: #232323;
    font-family: montserrat;
    font-size: 0.8svw;
    font-weight: 500;
    text-transform: uppercase;
}

.containerTitleContact h1 {
    font-family: montserrat;
    font-size: 2.5svw;
    color: #232323;
    line-height: 3svw;
    margin-bottom: 1svh;
    text-transform: uppercase;
}

.containerTitleContact h1 span {
    font-weight: 800;
}

.traitContact {
    display: flex;
    margin-bottom: 4svh;
    justify-content: center;
}

.traitContact div {
    width: 5svw;
    height: 0.3svh;
}

.bleuAbout {
    background-color: #05B8E2;
}

.rougeAbout {
    background-color: #D62F59;
}

.jauneAbout {
    background-color: #FFBC00;
}

.form-container{
    width: 85.10svw;
    padding: 7svh 7svh;
    background-color: #D8D8D8;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
#name{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4svh;
}
#infosEntreprise{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4svh;
}
#infosUser{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4svh;
}
#containerMessage{
    width: 100%;
}
#nom{
    width: 49%;
    height: 8svh;
    border-radius: 5px;
    border: solid 1px #AAAAAA;
    font-family: montserrat;
    font-size: 1svw;
    padding-left: 1.5svw;
}
#prenom{
    width: 49%;
    height: 8svh;
    border-radius: 5px;
    border: solid 1px #AAAAAA;
    font-family: montserrat;
    font-size: 1svw;
    padding-left: 1.5svw;
}
#entreprise{
    width: 49%;
    height: 8svh;
    border-radius: 5px;
    border: solid 1px #AAAAAA;
    font-family: montserrat;
    font-size: 1svw;
    padding-left: 1.5svw;
}
#siteWeb{
    width: 49%;
    height: 8svh;
    border-radius: 5px;
    border: solid 1px #AAAAAA;
    font-family: montserrat;
    font-size: 1svw;
    padding-left: 1.5svw;
}
#telephone{
    width: 49%;
    height: 8svh;
    border-radius: 5px;
    border: solid 1px #AAAAAA;
    font-family: montserrat;
    font-size: 1svw;
    padding-left: 1.5svw;
}
#email{
    width: 49%;
    height: 8svh;
    border-radius: 5px;
    border: solid 1px #AAAAAA;
    font-family: montserrat;
    font-size: 1svw;
    padding-left: 1.5svw;
}
#message{
    width: 100%;
    height: 40svh;
    border-radius: 5px;
    border: solid 1px #AAAAAA;
    font-family: montserrat;
    font-size: 1svw;
    padding-left: 1.5svw;
    padding-top: 1.5svw;
    margin-bottom: 2svh;
}
.form-legal{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 2svh;
}
#consentement{
    width: 1svw;
    height: 1svw;
    margin-right: 0.4svw;
}
.form-legal label{
    font-family: montserrat;
    color: #6C6C6C;
    font-size: 0.9svw;
}
.form-legal label a{
    color: #D62F59;
}
#containerSubmit{
    width: 100%;
}
.submit-button {
  background-color: #232323; /* actif */
  color: white;
  width: 15svw;
  height: 7svh;
  border: none;
  border-radius: 100svw;
  cursor: pointer;
  transition: 0.5s ease;
  font-family: montserrat;
  font-size: 0.8svw;
}

.submit-button:disabled {
  background-color: #9D9D9D; /* couleur grisée quand désactivé */
  color: white;
  cursor: not-allowed;
  opacity: 1;
}
.formback1{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: -1svh;
    background-color: #05B8E2;
    border-radius: 15px;
    z-index: -1;
}
.formback2{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: -2svh;
    background-color: #D62F59;
    border-radius: 15px;
    z-index: -2;
}
.formback3{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: -3svh;
    background-color: #FFBC00;
    border-radius: 15px;
    z-index: -3;
}


/* ////////////REALISATIONS////////////////// */

.containerRealisations{
    width: 85.10svw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.realisations{
    display: flex;
    flex-direction: column;
    margin-bottom: 3svw;
    overflow: hidden;
}
#ReaDev1{
    cursor: pointer;
}
.lastRea{
    margin-bottom: 0;
}
.imgrea{
    width: 26.3svw;
    height:38svh ;
    border: solid 1px #A8A1A1;
    border-radius: 1svw 1svw 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D4D4D4;
    position: relative;
    overflow: hidden;
}
.containerHoverReaDev1{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    background-color: rgba(10, 10, 10, 0.95);
    opacity: 0;
    transition: all 0.3s;
}
#ReaDev1:hover .containerHoverReaDev1{
    opacity: 1;
}
.hoverReadev1{
    width: 15svw;
    height: 6svh;
    border-radius: 0.5svw;
    background-color: #434343;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4svh;
}
.hoverReadev1 p{
    
    font-family: montserrat;
    font-size: 1svw;
    color: white;
}
.imgrea img{
    width: 80%;
    margin-top: 2svh;
}
.botrealisations{
    width: 26.3svw;
    height: 7svh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3B3B3B;
    border-radius: 0 0 1svw 1svw;
}
.botrealisations p{
    font-family: montserrat;
    font-size: 1svw;
    color: white;
}
#imgFlyersA5Rea{
    width: 91%;
}


/* ////////////TARIFS////////////////// */
.containerTarisSection{
    width: 100svw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7svh 0 7svh 0;
}
#decouvrirTarifs{
    width: 15svw;
}
.containerTarifs{
    width: 85.10svw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2svh;
}
#PackCommerce{
    display: none;
}
.containerTypeSite{
    width: 100svw;
    display: flex;
    justify-content: center;
    margin-bottom: 3svh;
}
.typeTarifs{
    width: 50svw;
    display: flex;
    justify-content: center;
}
.siteVitrine{
    width: 25svw;
    height: 10svh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #cfcfcf;
    cursor: pointer;
    transition: all 0.5s;
}
.siteVitrine:hover{
    background-color: #05B8E2;
}
.siteVitrine p{
    font-size: 1.2svw;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.siteCommerce{
    width: 25svw;
    height: 10svh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #cfcfcf;
    cursor: pointer;
    transition: all 0.5s;
}
.siteCommerce:hover{
    background-color: #D62F59;
}
.siteVitrine.activeHover {
  background-color: #05B8E2 !important;
}
.siteCommerce.activeHover {
  background-color: #D62F59 !important;
}
.siteCommerce p{
    font-size: 1.2svw;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tarifs1{
   width: 24.84svw; 
   height: 65svh;
   background: linear-gradient(to bottom, #717171, #232323);
   border-radius: 1svw;
   border: solid 2px #ACACAC;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
#tarifs3{
    background: linear-gradient(to bottom, #242424, #000000);
}
.tarifs1 .nomPack{
color: #D3D3D3;
font-family: montserrat;
font-size: 1.2svw;
font-weight: 300;
margin-bottom: 2.5svh;
}
.tarifs1 .prix{
color: #D3D3D3;
font-family: montserrat;
font-size: 4.5svw;
font-weight: 700;
margin-bottom: 1svh;
}
.tarifs1 .prix span{
    color: #D3D3D3;
    font-family: montserrat;
    font-size: 1.5svw;
    font-weight: 700;
}
.tarifs1 .descriptionPack{
color: #D3D3D3;
font-family: montserrat;
font-size: 0.8svw;
font-weight: 300;
margin-bottom: 2.5svh;
text-align: center;
}
.tarifs1 .separatePack{
width: 65%;
height: 1px;
background-color: #9F9F9F;
margin-bottom: 2.5svh;
}
.tarifs1 .presta{
display: flex;
align-items: center;
margin-bottom: 2svh;
}
.tarifs1 .presta div{
width: 0.6svw;
height: 0.6svw;
background-color: #D3D3D3;
margin-right: 0.5svw;
border-radius: 100svw;
}
.tarifs1 .presta p{
font-family: montserrat;
font-size: 1svw;
color: #D3D3D3;
font-weight: 300;
}
.tarifs2{
   width: 28.69svw; 
   height: 75svh;
   background: linear-gradient(to bottom, #464646, #171717);
   border-radius: 1svw;
   border: solid 2px #A9A9A9;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
}
.populaire{
    background-color: #A9A9A9;
    display: flex;
    width: 10svw;
    height: 5svh;
    position: absolute;
    border-radius: 0 0 0 1svw;
    top: -0.2svh;
    right: -0.2svw;
    justify-content: center;
    align-items: center;
}
.populaire p{
color: white;
font-family: montserrat;
font-size: 0.8svw;
margin-right: 0.5svw;
}
.populaire div{
width: 0.4svw;
height: 0.4svw;
background-color: white;
border-radius: 100svw;

}
.tarifs2 .nomPack{
color: #D3D3D3;
font-family: montserrat;
font-size: 1.2svw;
font-weight: 300;
margin-bottom: 2.5svh;
}
.tarifs2 .prix{
color: #D3D3D3;
font-family: montserrat;
font-size: 5.2svw;
font-weight: 700;
margin-bottom: 1svh;
}
.tarifs2 .prix span{
    color: #D3D3D3;
    font-family: montserrat;
    font-size: 1.8svw;
    font-weight: 700;
}
.tarifs2 .descriptionPack{
color: #D3D3D3;
font-family: montserrat;
font-size: 0.8svw;
font-weight: 300;
margin-bottom: 3.5svh;
text-align: center;
}
.tarifs2 .separatePack{
width: 65%;
height: 1px;
background-color: #9F9F9F;
margin-bottom: 3.5svh;
}
.tarifs2 .presta{
display: flex;
align-items: center;
margin-bottom: 2svh;
}
.tarifs2 .presta div{
width: 0.6svw;
height: 0.6svw;
background-color: #D3D3D3;
margin-right: 0.5svw;
border-radius: 100svw;
}
.tarifs2 .presta p{
font-family: montserrat;
font-size: 1svw;
color: #D3D3D3;
font-weight: 300;
}
.separationPack{
    width: 1px;
    height: 48svh;
    background-color:#ADADAD ;
}
.containerBarreTarifs{
    width: 100svw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 7svh;
}
.barreTarifs{
    width: 75svw;
    height: 1px;
    background-color: #C5C5C5;
    margin-bottom: 2svh;
}




.valideMessage{
    padding: 3svh 2svw;
    background-color: #42ad24;
    border: solid 2px #287812;
    border-radius: 0.3svw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1000;
    bottom: 2svh;
    right: -25svw;
    transition: all 0.5s;
}
.valideMessage p{
    color: white;
    font-family: montserrat;
    font-size: 1svw;
}
.errorMessage{
    padding: 3svh 2svw;
    background-color: #a42525;
    border: solid 2px #db0606;
    border-radius: 0.3svw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1000;
    bottom: 2svh;
    right: -30svw;
    transition: all 0.5s;
}
.errorMessage p{
    color: white;
    font-family: montserrat;
    font-size: 1svw;
}

.containerBurger{
    position: fixed;
    top: 10svw;
    width: 100svw;
    height: calc(100svh - 10svw);
    background-color: #181818;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: all 0.5s;
    right: -100svw;
}
.accueilBurger{
    margin-bottom: 2svh;
}
.accueilBurger {
    width: 13.2svw;
}
.servicesBurger {
    width: 27.2svw;
}
.tarifsBurger {
    width: 17.2svw;
}
.realiBurger { 
    width: 29.2svw;
}
.contactBurger {
    width: 28.2svw;
}
.accueilBurger p{
    color: white;
    font-family: montserrat;
    font-size: 3.6svw;
    margin-bottom: 0.5svh;
}
.barreBurgerOn{
    width: 100%;
    background-color: white;
    height: 1px;
}
#ServicesBurger{
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.ServicesBurger p{
    margin-right:2svw ;
}
.ServicesBurger svg{
    width: 2.5svw;
    transition: all 0.5s;
}
.ServicesBurger svg path{
    fill: white;
}
#allservicesBurger{
    width: 29svw;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
#servicesBurgerList{
    margin-bottom: 0;
    width: 50svw;
        margin-left: 5svw;
        height: 0svh;
        overflow: hidden;
        transition: all 0.5s;
}
.services1Burger{
    display: flex;
    align-items: center;
    margin-bottom: 2svh;
}
.services1Burger div{
    width: 0.8svw;
    height: 0.8svw;
    background-color: #5C5C5C;
    margin-right: 1.5svw;
    border-radius: 100svw;
}
.services1Burger p{
    font-size: 3.6svw;
    color: #5C5C5C;
    font-family: montserrat;
}
.reseauxBurger{
    display: flex;
    position: absolute;
    right: 6svw;
    bottom: 8svw;
}
.fbBurger{
    width: 8svw;
    height: 8svw;
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
    margin-right: 0.4svw;
}
.fbBurger:hover{
    background-color: white;
}
.fbBurger svg{
fill: white;
width: 1.6svw;
transition: all 0.5s;
}
.fbBurger:hover svg{
fill: #282933;
}
.instaBurger{
    width: 8svw;
    height: 8svw;
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
    margin-right: 0.4svw;
}
.instaBurger:hover{
    background-color: white;
}
.instaBurger svg{
fill: white;
width: 2.5svw;
transition: all 0.5s;
}
.instaBurger:hover svg{
fill: #282933;
}
.tiktokBurger{
    width: 8svw;
    height: 8svw;
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
    margin-right: 0.4svw;
}
.tiktokBurger:hover{
    background-color: white;
}
.tiktokBurger svg{
fill: white;
width: 2.4svw;
transition: all 0.5s;
}
.tiktokBurger:hover svg{
fill: #282933;
}
.snapBurger{
    width: 8svw;
    height: 8svw;
    background-color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
}
.snapBurger:hover{
    background-color: white;
}
.snapBurger svg{
fill: white;
width: 2.5svw;
transition: all 0.5s;
}
.snapBurger:hover svg{
fill: #282933;
}
#onBurgerServices{
    background-color: #e1e1e1;
}
#textOnBurgerServices{
    color: #e1e1e1;
}