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




body {
   
    background-color:white;
    /* overflow-x: hidden; */
}




/* -Commun aux pages hors Accueil Début */

.image-with-text {
  margin-top: 500px;
  position: relative;
  background-image: url('assets/fondHP.png');
  background-size: cover;
  /* background-position: center center; */
  width: 100%;
  height: 300px; /* Ajustez selon vos besoins */
  color: #195268;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.image-with-text h1{
  font-family: barlow;
  font-weight: extra bold;
  letter-spacing: 0.05em;

  font-size: 59pt;
	color: #195268;
}
.image-with-text h2{
  font-family: cutive mono;
  font-weight: lighter;
  font-size: 24pt;
  color: #195268;
}




/* -Commun aux pages hors Accueil Fin */

.parent{
  margin-top: 2%;
    display: flex;
    justify-content:center;

  
   
}

.parent li{
  text-decoration: none;
  list-style-type: none;
  padding: 10px 10px 6px 10px;
  border-top: solid 1px #cf90a6;
  border-bottom: solid 1px #cf90a6;
}


header li {
  
 	
   list-style: none;
   
   text-align: center;
  vertical-align: middle;
}

.buttonNav button{
  font-family: red hat mono;
  font-weight: light;
  font-size: 1em;
  color:white;
  
  background-color:#cf90a6 ;
  border: none;
  outline: none;
  height:100%;
  /* margin-top: 3%; */
  margin-left: 10%;
  margin-right: 10%;
  text-decoration: none;
  padding-left: 2px;
  padding-right: 2px;
  }


  .buttonNav button:hover{
    color:#cf90a6;
    /* font-size: 1.3em; */
  background-color:white ;
  border: none;
  cursor: pointer;


  }

.headera {
  text-decoration: none;	

  font-family: Red Hat Mono;
  font-weight: 300;
	text-transform: uppercase;
	font-size: 1.1em;
	color: #195268
}

.headera:hover{

  color:#cf90a6;
}

.logoAccueilLarge{
  display: block;
  margin-left: auto;
  margin-right: auto;
  

}



header.large {
  height: 500px;
  background-color: white;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  border-bottom: solid 1px #cf90a6;
    
}



#menuSymbols{
  
  border-top: none;
  border-bottom: none;


}

header a{
    text-decoration: none;
}



.content {
    margin-top: 800px; /* Ajoute une marge au contenu pour éviter de masquer le contenu derrière le header fixe */
}

header.small{
    height: 300px;
    background-color:white;
    position: fixed;
    width: 100%;
    top: 0;
    border-bottom: solid 1px #cf90a6;

}



header.large img.logoAccueilLarge {
    height:400px;
  }

header.small img.logoAccueilLarge {
    height:200px; 
  }

  header,
nav,
a,
img,
li,
div {
	/* transition: .1s all;
	-moz-transition: .1s all;
	-webkit-transition: .1s all;
	-o-transition: .1s all; */
}



/* Menu hors Accueil Début */


.logo{

  margin-top: 15px;
  background-color: white;
  
 margin-left: 4px;
	float: left;  
  /* z-index: 2; */
  position: relative;
  
}
 


.parent2{
  display: flex;
  justify-content:center;
  /* margin-top: 220px; */
  z-index: 3;


}

header.large2 .parent2{
  
  margin-top: 220px;



 
}

header.small2 .parent2{
  
  margin-top: 120px;



 
}






.parent2 li{
  text-decoration: none;
  list-style-type: none;

padding: 1%;
border-top: solid 1px #cf90a6;
border-bottom: solid 1px #cf90a6;
}



.headerb {
  text-decoration: none;	

  font-family: Red Hat Mono;
  font-weight: light;
	text-transform: uppercase;
	font-size:1.1em;
	color: #195268
}

header.large2 {
  height: 330px;
  background-color: white;
  border-bottom: solid 1px #cf90a6;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
    
}


header.small2{
  height: 220px;
  background-color:white;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;

}



header.large2 img.logo {
  height: 270px;
}





header.small2 img.logo {
  height:200px; 
}


.logoPortable{

  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

.logoPortable img{

  width:75%;
  margin-top: 10%;


}


@media screen and (min-width: 769px) and (max-width: 1220px){
  header.large2 img.logo {
    height:200px; 
  }
  header.small2 img.logo {
    height:180px; 
  }
}


@media screen and (min-width: 769px) and (max-width: 1158px){

  .headerb{
  
  font-size: 0.7em;
}
}

@media screen and (min-width: 1159px) and (max-width: 1280px){

  .headerb{
  
  font-size: 0.8em;

  
}
}

@media screen and (min-width: 1281px) and (max-width: 1500px){

  .headerb{
  
  font-size: 0.8em;

  
}

}

header,
nav,
a,
img,
li,
div,
.parent2 {
transition: .8s all;
-moz-transition: .8s all;
-webkit-transition: .8s all;
-o-transition: .8s all;
}

/* Menu hors Accueil Fin */

/* Styles pour le menu mobile */
.mobile-menu-icon {
    display: none;
  
 
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3; 
  }
  





.menu-overlay {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;

  z-index: 1;


  /* overflow-x: hidden; */
}

.menu {
  background-color: white;

  padding: 20px;
  text-align: center;
  z-index: 3;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 2s, transform 3s;
  font-family: 'Signika';
  font-size: x-large;
  border: solid 1px #195268;
  /* overflow-x: hidden; */
}

.menu.active {
    opacity: 1;
    transform: scale(1);
}

.menu ul {
    list-style: none;
    padding: 0;
}

.menu li {
    padding: 10px;
    width: 100%; /* Forcer chaque élément de liste à prendre toute la largeur */
    display: block; /* Afficher chaque élément de liste en tant que bloc */
    text-align: center; /* Aligner le texte à gauche */
}


.menu a {
  color: #195268;
  font-family: barlow;
  font-weight: 400;
    text-decoration: none;
}

.menu-icon,
.close-icon {
    position: absolute;
    cursor: pointer;
    z-index: 4;
}

.menu-icon {
    top: 20px;
    right: 20px;
    position: fixed;
    display: block; /* Affichez l'icône "Menu" par défaut */
    transition: opacity 0.3, transform 0.8s;
    
}

.close-icon {
    top: 20px; /* Ajustez la position de l'icône "Fermer le Menu" */
    right: 20px;
    display: none; /* Masquez l'icône "Fermer le Menu" par défaut */
    transition: opacity 0.5s,transform 0.8s;
}

/* Accueil */

/* carousel1 */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

}




.slider-wrapper {

  display: flex;
  justify-content: center;
 
  width: 100%;

  /* margin: 0 auto; */
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  height:300px;
 
  margin-top: 500px;


 
 
}




.over{


  background-image: url('assets/fondHP.png');
  background-size: cover;

}

.slider-wrapper button{
  text-decoration: none;
  border: none;
  background-attachment: none;
}



.slides-container {

  text-align:center;
  
  width: 100%;
  display: flex;

  list-style: none;
  margin: 0;
  padding: 0;
  
  overflow-x: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* TOUCHSCREEN SWIPE */
  scroll-snap-type: x mandatory;



  background-size: cover; /* cover ou 'contain' selon vos besoins */
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
   /* Cette propriété assure que l'image reste fixe */
  /* Autres styles pour la div */
  width: 100%;
  height: 400px; /* Ajustez la hauteur selon vos besoins */
  /* border: 1px solid #ccc; */
 
}



.slides-container li{
  padding-top:110px;


  
}

.slides-container button{
  font-family: Red Hat Mono;
  font-weight: light;
  color: white;
  font-size: 1.15em;
  background-color:#cf90a6 ;
  border: none;
  outline: none;
  height: 40px;
  width: 300px;
 margin-top: 10px;
  /* margin-top:-10px;
  margin-left: 8px; */


}

.slides-container h1{
  font-family: barlow;
  font-weight: extra bold;
  font-size:4em;
    color: #195268;
    letter-spacing: 0.05em;
}

.slides-container h2{
  font-family: cutive mono;
  font-weight: lighter;
  padding-bottom: 10px;
  
  font-size: 3.1em;
  color: #195268;
}

.slides-container h3{
  font-family: red hat mono;
  /* font-weight: lighter; */
  font-size: 1.8em;
  color: #195268;
 
  
}

#buttonCarousel1{
  /* font-family: Red Hat Mono; */
  font-weight: light;
  color: white;

  font-size: 1em;
  background-color: #cf90a6;
 
  margin: 0;
 
  
  box-shadow: none;
}




.slides-container::-webkit-scrollbar { 
  width: 0;
  height: 0;
}

.slide {
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
  /* TOUCHSCREEN SWIPE */
  /* scroll-snap-align: center; */
}

.slide-arrow {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 3rem;
  background-color: none;
  border: none;
  width: 3rem;
  font-size: 3rem;
  padding: 0 0;
  cursor: pointer;
 
  /* opacity: 0.5; */
  /* border-radius: 50%; */
  /* transform: translateX(var(--pos)); */
  /* transition: opacity .5s; */
}

.slide-arrow:focus {
  border: none;
  background-clip: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.slide-arrow:hover, .slide-arrow:focus-visible {
  opacity: 1;
  border: none;
  background-clip: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-position: center center;
}

.slide-arrow-prev::before, .slide-arrow-next::after {
content: var(--arrow);
width: 100%;
position: absolute;
/* transform: translateY(-0.25rem); */
}

.slide-arrow-prev {

  left: 4%;
  padding-left: 0rem;
  --pos: 1rem
}

.slide-arrow-next {

  right: 4%;
  padding-left: 0.25rem;
  --pos: -1rem;
}

.slide img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  user-select: none;
}




@media screen and (max-width: 768px) {



  .over{

    margin-top: -6%;

 
   
  
  }


  .slider-wrapper {
    
    top: 100px;
    margin-top: 0;
    
   
    width: 100%;
   
   
  }
  .slides-container{
    max-height: 280px;

  
  }

  .slides-container li{
    padding-top:40px;
  }
  
  .slides-container h1{
    font-size: 2em;

  }

  .slides-container h2{
    font-size: 2.1em;
  
  }

  .slides-container h3{
    font-size: 0.8em;
  
  }
    
  }


/* fin carousel1 */

.ligneSep {
  display:flex;
  justify-content: center;
  margin: auto;
 
  width: 66%;
  height: 1px; /* Épaisseur de la ligne */
  background-color: #cf90a6; /* Couleur de la ligne */
}

/* gridIndex Début */

.gridIndex{
  width: 100%;


  /* margin-top:-2%; */
  /* margin-left:8% ;
  margin-right:20% ; */
  display: grid;
  /* padding-right: 0; */
  grid-template-areas: 
  'a  c '
  'a  d ';
  grid-template-columns:1fr 1fr 1fr;
  border-bottom: solid 1px #cf90a6;
 
  
}


.mcaPhoto{
  grid-area: a;
  margin-left:40%;

  /* margin-bottom: 10%;
  */

}





.bjr{

  grid-area: c;
  display: flex;
  flex-direction: column;
  /* margin-left: -20%; */
  margin-top: 7%;
  
  border-bottom: solid 2px #195268;



}

.bjr h5{

  font-family: red hat mono;
  color:#195268;
  font-size: 1.1em;
  font-weight: lighter;
 
}

.cv{

  grid-area: d;
  margin-left: 5%;
  /* border-top: solid 1px #195268; */
  /* max-width: 450px; */
  padding-top: 7%;
}

.cv h6{

  font-family: Barlow;
  font-size: 1.1em;
  font-weight: 300;
}



/* gridIndex Fin */

/* Début Ensemble dans l'accueil */

.ensemble{
  /* background: url('assets/SVG/bullesBdRouges.svg') left no-repeat;
  background-size: 20%; */
  display: flex;
  flex-direction: column;
  
  justify-content: center;
  /* align-items: center; */
  /* margin-left: 27%;
  margin-right: 10%; */
  text-align: center;
  

}

/* Accueil figcaption */

/* Mise en forme d'un paragraphe type Début */

.titreParagraphe {

 /* width: 66%;
 margin-left: auto;
 margin-right: auto; */
 
 
 margin: 5% auto;
 padding: 0 10%;
}


.titreParagraphe h4{
  font-family: Red Hat Mono;
  font-size: 1.6em;
  font-weight: lighter;
  color: #195268;
  
}


.titreParagraphe h5{
  
  color: #195268;
  font-family: Barlow ;

 
  font-size: 1.3em;
  font-weight: 300;
  margin-bottom: 7px;
}

.titreParagraphe img{
  vertical-align: middle;
  /* margin-bottom: 3px;  */
  height:45px;
  margin-left: -1%;
}

.titreParagraphe ul{

margin-left: 8%;
}

.sacra{
  margin-top: 5%;
  /* margin-bottom: 1%; */
  text-align: center;
  margin-bottom: 2%;
 
 
}

.sacra h3{
  font-family:Sacramento;
  color:#cf90a6;
  font-size: 2.8em;
  font-weight: 400;

}



@media screen and (max-width: 768px) {



  .slide-arrow {
    display: none;
  }

  .large{
    display: none;
  }


  .titreParagraphe {
    margin-left: 5%;
    margin-right: 5%;
  }

  .titreParagraphe h4{
 

    font-size: 1.2em;
    color: #195268;
    margin-bottom: -3%;
    
  }


  .titreParagraphe img{

    margin-left: -4%;
    
   

  }


  .titreParagraphe h5{


    font-size: 0.9em;
    color: #195268;
  }


  .sacra{
    margin-top: 15%;
    /* margin-bottom: 1%; */
    text-align: center;
    margin-bottom: 20px;
   
   
  }

  .sacra h3{
    font-family:Sacramento;
    color:#cf90a6;
    font-size: 2.2em;
    font-weight: 400;
    line-height: 0.8em;
   
  
  }



  .image-with-text{

    height: 150px; /* Ajustez selon vos besoins */
    margin-top: 100px;
  }

  .image-with-text h1{
    font-family: Barlow;
    font-weight: 400;
    /* letter-spacing: 0.05em; */
    font-size: 30pt;
    color: #195268;
  }
  .image-with-text h2{
    font-family: cutive mono;
    font-weight: lighter;
    font-size: 12pt;
    color: #195268;
  }
  


}

/* Mise en forme d'un paragraphe type Fin */




.question{
 

  margin-top: 5%;
  
  color: #195268;
  
  
}

.question h4{
  font-family: red hat mono;
  font-size: 1.6em;
  font-weight: lighter;
}

.question img{
  vertical-align: middle;
  margin-bottom: 5px; 
  height:45px;
}



/* Fin ensemble dans l'accueil */





/* -Page Art thérapie début */

.rrrrr{
  margin-top: 1%;
  background-image: url('assets/fondIcones.png');
  height:200px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  overflow-x: hidden;

 


}
.rrrrr h4,
.rrrrr img{
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2%;


}

.rrrrr h4{
  font-family: Red Hat Mono;
  font-size: 1.8em;
  font-weight: lighter;
  color: #195268;
}
.rrrrr img{
  height: 55%;
}

.peupleAbove{
  background-image: url('assets/fondHP.png');
  background-size: cover;


}

.peuple{

  height:180px;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 6%;


  

}



@media(max-width: 1410px){

  .rrrrr{
    display: none;
  }

}


#exceptionPointRouge{

  vertical-align: middle;
  margin-bottom: 1.55%; 
  height:45px;
}
#bulleBD{
  margin-bottom: 6%;
  margin-left: -15px;
  height: 80%;

}


/* -Page Art thérapie Fin */

/* Page PRATIQUE Début */

.gridPratique{

  margin-top: 3%;
  width:100%;

  grid-template-areas: 
  'a c'
  'b c'
  ;
  grid-template-columns:1fr 1fr ;
  margin: 5% auto;
 padding: 0 10%;
  display: grid;



}

#bienfaits{
  grid-area: a;
  margin-left: 0;

}

#visagesFaceAFace{
  grid-area: b;
  background-color: #fcdedc;
  margin: 5% auto;
  padding: 0 10%;
}

#visagesFaceAFace img{
  margin-left: 25%;
  width:60%;
}

#scientifique{
  grid-area: c;
}



/* Page PRATIQUE Fin */


/* Page PARCOURS Début */

.mesReferences{
  margin-top: 1%;
  /* margin-left:5% ;
  margin-right: 5%; */
  display: flex;
  justify-content:flex-start;
}

.mesReferences img{

  width:8%;
  height:10%;
  margin-right: 1%;
 
}


.quinzeAns{
  margin-top: 1%;
  /* margin-left:5% ;
  margin-right: 5%; */
  display: flex;
  justify-content:flex-start;
}

.quinzeAns img{
  margin-top: 3%;
  width:12%;
  height:40%;
  margin-left: 5%;

}


 /* TIMELINE test Début  */

 .hexa{
  border: 0px;
  float: left;
  text-align: center;
  height: 35px;
  width: 60px;
  font-size: 22px;
  background: #f0f0f0;
  color: #3c3c3c;
  position: relative;
  margin-top: 15px;
}

.hexa:before{
  content: ""; 
  position: absolute; 
  left: 0; 
  width: 0; 
  height: 0;
  border-bottom: 15px solid #f0f0f0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -15px;
}

.hexa:after{
  content: ""; 
  position: absolute; 
  left: 0; 
  width: 0; 
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 15px solid #f0f0f0;
  bottom: -15px;
}

.timeline {
  position: relative;
  padding: 0;
  width: 100%;
  margin-top: 20px;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background: rgb(213,213,213);
  background: -moz-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -o-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -ms-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: linear-gradient(to bottom, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  /* z-index: 5; */
}

.timeline li {
  padding: 2em 0;
}

.timeline .hexa{
  width: 16px;
  height: 10px;
  position: absolute;
  background: #cf90a6;
  z-index: 5;
  left: 0;
  right: 0;
  margin-left:auto;
  margin-right:auto;
  top: -30px;
  margin-top: 0;
}

.timeline .hexa:before {
  border-bottom: 4px solid #cf90a6;
  border-left-width: 8px;
  border-right-width: 8px;
  top: -4px;
}

.timeline .hexa:after {
  border-left-width: 8px;
  border-right-width: 8px;
  border-top: 4px solid #cf90a6;
  bottom: -4px;
}

.direction-l,
.direction-r {
  float: none;
  width: 100%;
  text-align: center;
}

.flag-wrapper {
  text-align: center;
  position: relative;
}



.time-wrapper {
  display: block;
  position: relative;
  margin: 4px 0 0 0;
  z-index: 14;
  line-height: 1em;
  vertical-align: middle;
  color: #fff;
}

.direction-l .time-wrapper {
  float: none;
}

.direction-r .time-wrapper {
  float: none;
}

.time {
  background: #cf90a6;
  display: inline-block;
  padding: 8px;
  font-family: barlow;
  font-weight: 400;
}

.desc {
  position: relative;
  margin: 1em 0 0 0;
  padding: 1em;
  background: rgb(254,254,254);
  -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
  -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
  box-shadow: 0 0 1px rgba(0,0,0,0.20);
  z-index: 15;

  font-family: Barlow ;

 
  font-size: 16px;
}


.desc h6{

  font-family: Barlow;

 
  font-size: 1em;
  font-weight: 300;
}

.direction-l .desc,
.direction-r .desc {
  position: relative;
  margin: 1em 1em 0 1em;
  padding: 1em;
  z-index: 15;
}

@media(min-width: 768px){


  .timeline {
    width: 660px;
    margin: 0 auto;
    margin-top: 20px;
  }

  .timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
  .timeline .hexa {
    left: -28px;
    right: auto;
    top: 8px;
  }

  .timeline .direction-l .hexa {
    left: auto;
    right: -28px;
  }

  .direction-l {
    position: relative;
    width: 310px;
    float: left;
    text-align: right;
  }

  .illuR{

    float: right;
    width: 25%;
    z-index: 999;
    margin-top:5%;
  }

  .direction-r {
    position: relative;
    width: 310px;
    float: right;
    text-align: left;
  }

  .flag-wrapper {
    display: inline-block;
  }
  



 

  .time-wrapper {
    display: inline;
    vertical-align: middle;
    margin: 0;
  }

  .direction-l .time-wrapper {
    float: left;
  }

  .direction-r .time-wrapper {
    float: right;
  }

  .time {
    padding: 5px 10px;
  }

  .direction-r .desc {
    margin: 1em 0 0 0.75em;
  }
}

@media(min-width: 992px){
  .timeline {
    width: 800px;
    margin: 0 auto;
    margin-top: 20px;
  }

  .direction-l {
    position: relative;
    width: 380px;
    float: left;
    text-align: right;
  }

  .direction-r {
    position: relative;
    width: 380px;
    float: right;
    text-align: left;
  }
}



.interdates{

background-color: white;
  

}

.interdates p{

  font-family: barlow;
  font-weight: 500;
  font-size:1.1em ;
  text-align: center;
  background-color: white;
  z-index: 15;
 


}



/* Timeline test Fin  */








/* Page Parcours Fin */



/* * footer desktop début */ 

@media screen and (min-width: 769px){

  .footerMobile{

   display:none;
  }

  #peuple2{
    display:none;
  }
}

.footerDesktop{
  

  background-position:center;
 background-color:  #195268;
  flex-wrap: wrap;
  /* height: 300px; */
  display: flex;
  justify-content: space-evenly;
  background-size: cover; 
  /* cover ou 'contain' selon vos besoins */
  background-repeat: no-repeat;
 
}


.footerPart1 {
 
  margin-top: 1.5%;
  display: flex;
  flex-direction: column; /* Ajout de cette ligne pour aligner verticalement */
  color: white;
  
}


.footerPart1 li{

  margin-bottom:3px;
  
}


.footerPart1 li p{
  font-family: Barlow;
  font-size: 18pt;
  font-weight: 500;
  margin-bottom:15px ;

  
 
}



.footerPart1 li h2{

font-size: 12pt;
  font-weight: lighter;
  font-family:red hat mono ;


}

.footerPart1 li h3{
  font-family: barlow;
  font-size: 12pt;
  font-weight: 600;
  
  }

.footerPart1 li img{

    vertical-align: middle;
    margin-bottom: 5px; 
    height:45px;
  
}

 #classFooter h2{
    margin-top: 15px;
    margin-bottom: 50px;
   
  font-family: Sacramento;
  font-size: 36px;
  /* font-weight:lighter; */
 
  color:white;

}


.zzz{
  width: 25px;
  padding-bottom: 0;
 
  
}

.zzz2{
  width: 40px;
  
}

.footerPart1 ul {
  list-style-type: none;
  
}


/* footer desktop FIN */


@media screen and (max-width: 768px) {
   

    .content{

        margin-top: 40%;
        transition: opacity 0.3, transform 0.8s;
        position: relative;
        /* overflow: hidden; */
      width: 100%;
        
       
        
    }


    .content p {
        display: none;
    }
    
    .content img {
       width: 150%;
   
       left: 20%; /* Centrer l'image horizontalement */
       transform: translateX(-16%); /* Ajuster la position pour centrer correctement */
    
       
       
       
        
    }
  .logoAccueilMobile{

    text-align: center;
    margin-top: 100px;

  } 

  .logoAccueilMobile img{
 
    /* display: inline-block; */
    margin: 0 auto; /* Cette propriété maintient l'image centrée horizontalement */
    max-width: 100%; /* Pour assurer que l'image ne dépasse pas la largeur du conteneur */
    height: auto;
   
  }

    .slides-container h1{
     
      font-size:3em;
       
    }
    
    .slides-container h2{
    
      font-size: 1.8em;
    
    }
    
    .slides-container h3{
      
      font-size: 1em;
     
      
    }

    .slide-arrow-prev {

      left: 2%;
      padding-left: -0.5rem;
      --pos: 2rem
    }
    
    .slide-arrow-next {
    
      right: 2%;
      padding-left: -0.25rem;
      --pos: -1rem;
    }

    .gridPratique{

      margin-top: 3%;
     
      margin-right: 5%;
      display: grid;
      grid-template-areas: 
      'a '
      'b' 
      'c'
      ;
      grid-template-columns:1fr ;
    
    
    
    }


    .gridIndex{
      width: 100%;
      /* background: url('assets/fondAccueilBandeau.png'); */
      margin-top:8%;
      /* margin-left:8% ; */
      /* margin-right:10% ; */
      display: grid;
      /* padding-right: 0; */
      grid-template-areas: 
      'a a'
      'c c'
      'd d';
      grid-template-columns:1fr 1fr ;
     
      
    }
    .mcaPhoto{
      
      margin-left:30%;
      margin-top: 3%;
     
     
    
    }
    
    .mcaPhoto img{

      width:60%
    }

    .bjr{
      text-align: center;
      margin-right: 1%;
      margin-left: 10%;
    
      

    
    }
    .bjr h5{

   
    
      font-size: 1em;
     
     
    }

    .cv{
      margin-left: 15%;
     
     
      
    }

    .cv h6{

      
      font-size: 1.1em;
   
    }



    .question h4{
     
      font-size: 1.1em;
    
    }

    .question img{
      vertical-align: middle;
      /* margin-bottom: 5px;  */
      height:35px;
      
    }

    .mamethode h3{
    
     
      font-size: 1em;
      margin-bottom: 3px;
     
    }
    
    .mamethode h4{
     
      font-size: 1em;
     
    }
    
    /* Footer mobile début */
/* 
    .footerDesktop{
  

      background-position:center;
     background-color:  #195268;
      flex-wrap: wrap;
     
      display: flex;
      justify-content:flex-start;
      background-size: cover; 
     
      background-repeat: no-repeat;
     
    }
    
    
    .footerPart1 {
     
      margin-top: 1.5%;
      display: flex;
      flex-direction: column; 
      color: white;
      
    }
    
    
    .footerPart1 li{
    
      margin-bottom:3px;
      
    }
    
    
    .footerPart1 li p{
      font-family: Barlow;
      font-size: 1.2em;
      font-weight: 300;
    
      
     
    }
    
    
    
    .footerPart1 li h2{
    font-size: 1em;
      font-weight: lighter;
      font-family:red hat mono ;
    ;
    
    }
    
    .footerPart1 li h3{
      font-size: 0.9em;
      font-weight: lighter;
      
      }
    
    
    
      .footerPart1 li h1{
      font-family: Sacramento;
      font-size: 1.6em;
      font-weight:lighter;
     
      color:white;
    
    }
    
    .zzz{
      width: 25px;
      
    }


    .zzz2{
      width: 40px;
      
    }
    
    .footerPart1 ul {
      list-style-type: none;
      
    }
     */

    /* Footer mobile fin */
    
.footerDesktop{
  display: none;
}

.peuple{
  display: none;
}

.footerMobile{
  
  
  text-align: center;

 
  bottom: 0;
  width: 100%;

}

#peuple2{
  display: block;
}
/* Footer moblie début */

.footerMobileMenu{
  background-color: #195268;
  color: white;
  
  list-style-type: none;
  
  }
  
  
  .footerMobileMenu li{
    /* display: inline-block; */
    padding: 1.5%;
    font-family: barlow;
    font-size: 0.9em;
    font-weight: 500;
  
  
  }
  
  .footerMobileMenu a{
    color:inherit;
    text-decoration: none;
  }
  
  
    .zzz3{
      
      width:20px;
      margin-bottom:-1% ;
      margin-right: 1%;
    }
  
  
  /* Footer mobile Fin */


}




@media screen and (min-width: 769px){

  .logoPortable{

    display: none;
  }



    .content .logoMobile {
        display:none;
    }
    .logoAccueilMobile{
      display: none;
    }
    
}




@media screen and (min-width: 769px) and (max-width: 1158px){

  .headera{
  
  font-size: 0.8em;
}
}

@media screen and (min-width: 1159px) and (max-width: 1280px){

  .headera{
  
  font-size: 1em;
}
}


@media screen and (min-width: 769px) and (max-width: 120px){

  .gridIndex{
    width: 100%;
    /* background: url('assets/fondAccueilBandeau.png'); */
    margin-top:10px;
    /* margin-left:8% ; */
    /* margin-right:10% ; */
    display: grid;
    /* padding-right: 0; */
    grid-template-areas: 
    'a a'
    'c c'
    'd d';
    grid-template-columns:1fr 1fr ;
   
    
  }
  .mcaPhoto{
    
    margin-left:30%;
   
   
  
  }
  
  .mcaPhoto img{

    width:70%
  }

  .bjr{
    text-align: center;
    margin-right: 1%;
    margin-left: 10%;

  
  }
  .bjr h5{

 
  
    font-size: 1em;
   
   
  }

  .cv{
    margin-left: 15%;
   
   
    
  }

  .cv h6{

    
    font-size: 1.1em;
 
  }


}








  #ligneRose1 {
    border: none;
    border-top: 1px solid white;
    margin-top: 37%;

  }

  #ligneRose2 {
    border: none;
    border-top: 1px solid #cf90a6;
    margin-top: 2%; 
  }
  


  


  /* Les Quatre Icones dans la page d'Accueil Début */



.iconesAccueil{

  margin-top: 6%;
  margin-bottom: 6%;
  display: flex;
  justify-content: center;

 


}

.outerRectangle {
  width: 210px;
  height: 255px;
  border: 2px solid  #cf90a6;
  position: relative;
  margin-right: 30px;
  color: #195268;
 
 
}

.outerRectangle h4{

  font-family:red hat mono ;
  font-size: 1.1em;
  font-weight: 700;
  
}

.iconesAccueil .outerRectangle:last-child {
  margin-right: 0;
}

.innerRectangle {
  background-image: url('assets/Watercolour-Text-Effect-Smart-PSD-\(Landscape\)-Page2.jpg');

  border: none;
  width: 206px;
  height: 183px;

 
  position: absolute;
  top: 27.4%;
  
}

.innerRectangle h3{
  color: #195268;
  text-align: center;
  font-family: Barlow;
  font-weight: 400;
  
}

.innerRectangle button{
  font-family: Barlow;
  font-weight: 600;
  font-size: 0.9em;
  color:white;
  
  background-color:#cf90a6 ;
  border: solid 1px #cf90a6;
  outline: none;
  height: 20%;
  width: 90%;
  margin-top: 8%;
  margin-left: 5.6%;
  text-decoration: none;
  }


  .innerRectangle button:hover{
    color:#cf90a6;
    font-size: 1em;
  background-color:white ;
  border: solid 1px #cf90a6;
  cursor: pointer;


  }

  .innerRectangle button a{

    text-decoration: none;
  
  }

#h4outer{
 
  text-align: center;
  margin-top:-7%;
  margin-left: 0;

  
 
}

.palette{
  height: 62%;
  margin-top: -27%;
  margin-left: 23%;
}



@media screen and (max-width: 768px) {

  .iconesAccueil{
    display: none;
  }
}


@media screen and (min-width: 769px) and (max-width: 1024px){
  .outerRectangle {
    width: 168px;
    height: 204px;
    border: 2px solid  #cf90a6;
    position: relative;
    margin-right: 30px;
    
   
  }
  
  .iconesAccueil .outerRectangle:last-child {
    margin-right: 0;
  }
  
  .innerRectangle {
    background-image: url('assets/petitFond.png');
  
    border: none;
    width: 164px;
    height: 146px;
  
   
    position: absolute;
    top: 27.4%;
    
  }

  .innerRectangle button{
    font-weight: light;
    
    
    background-color:#cf90a6 ;
    border: none;
    outline: none;
   
    margin-top: 0%;
    margin-left: 11%;
    }

    .innerRectangle h3{
      color: white;
      text-align: center;
      font-weight: lighter;
      
    }

}

/* Fin de Les Quatre Icones dans la page d'Accueil */



/* Carrousel Testimonials Desktop Début */

.wrapperTestimonials {

 

  margin-top: 4%;
  margin-bottom: 4%;
 
  margin-right: auto;
  margin-left: auto;
  max-width: 1090px;
  overflow: hidden;
  max-height: 800px;
  display: flex;
 
  
  justify-content: center;
 
  align-items: center;
}

.wrapperTestimonials img{
 cursor: pointer;

}

.sliderTestimonials {
 
  
  position: relative;
  display: flex;
  overflow: hidden;
  /* border: solid 2px red; */

}

.itemTestimonials{
  border: solid 1px #cf90a6 ;
  margin-right: 12px;
  margin-top: 5px;
  min-width: 49%;
  min-height:300px;


  flex: 1 0 25%;
  min-height: 200px;
  
  height: auto;
}

.itemTestimonials ul{

  list-style-type: none;
}

.itemTestimonials .title {
  font-weight: bold;
  margin: 1rem;
  
}

.itemTestimonials img {
  height: 14rem;
}




#listeCitationsTestimonials1{
  background-color: #195268;
  color:white
  
  }


  #listeCitationsTestimonials1 h3{
    text-align: center;
    }

#listeCitationsTestimonials2{
  background-color:white;
  color:#195268
  

}

.itemTestimonials li h1{
  font-family: red hat mono;
  font-size: 13.5pt;
 font-weight: 300;

  

}

.itemTestimonials li h2{
  font-family: barlow;
 font-weight: 500;
 text-align: center;

}

.itemTestimonials li h3{
  font-family: barlow;
  font-weight: 400;
 
 
 }



.itemTestimonials li{
margin-top:10px;
 
 
}


.nextTestimonials,
.prevTestimonials {
  font-family: monospace;
  font-size: 5rem;
  background: none;
  border: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #cf90a6;
}
.prevTestimonials{
  transform: rotate(-180deg);
}
.nextTestimonials:hover{
  text-shadow: 2px 2px 2px rgb(200,200,200);
}
.prevTestimonials:hover{
  text-shadow: 2px -2px 2px rgb(200,200,200);
}
  


 
@media screen and (min-width: 769px) and (max-width: 1024px){
  .itemTestimonials {
    flex: 1 0 33%;
  }
}
@media (max-width: 768px) {
  /* .itemTestimonials {
    flex: 1 0 50%;
  } */

  .wrapperTestimonials, .sliderTestimonials, .question{
    display:none ;
  }
}



/* Carrousel Testimonials Desktop FIN */


.centrage{
  text-align: center;
}



/* Page Contact début */

.coordonneescontact{
  margin-top: 60px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  /* align-items: center; */
  justify-content: flex-start;
  

 
}


.coordonneescontact h4{
  font-family: red hat mono;
  font-size: 1em;
  font-weight:300;

}

.grrr{
height: 30px;
margin-right: 5px;
margin-bottom: -6px;
margin-left: -10px;






}

.coordonneescontact li{
  display: inline-block;
  margin-left:13% ;
  margin-bottom: 1%;
 
   

}

.coordonneescontact ul{
  padding: 0;
  display: flex;

  list-style: none;
}

@media screen and (max-width: 768px){

  .coordonneescontact h4{
 
    font-size: 0.9em;
 
  
  }



}


.containerTraitContact {
  
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.traitContact {
  width: 70%;
  height: 1px;
  background-color: #cf90a6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Formulaire Début */

#parcoursPremierTitre{

  margin-top: 30px;
  text-align: center;
  font-family: red hat mono;
  font-size: 18pt;
  font-weight: lighter;
  color: #195268;

}


.contactForm {
  width: calc(100% - 20px);
  max-width: 700px;
  margin: 0 auto;
  margin-top: 15px;
}

/* STYLES FOR FORM */
form {
  width: 100%;
  display: grid;
  grid-gap: 30px;
  padding-top: 20px;
}

.inputGroup {
  width: 100%;
  position: relative;
}

.inputGroup1 {
    grid-column: 1;
    grid-row: 1;
}
.inputGroup2 {
    grid-column: 2;
    grid-row: 1;
}


.inputGroup4 {
  grid-column: 1;
  grid-row: 2;
}
.inputGroup5 {
  grid-column: 2;
  grid-row: 2;
}
.inputGroup6 {
    grid-column: 1 / span 2;
    grid-row: 3;
}
.inputGroup7 {
    grid-column: 2;
    grid-row: 5;
    text-align: right;
}


.inputGroup__textfield {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color:#c8e0df;
  appearance: none;
  width: 100%;
  font-size: 13px;
  padding: 20px;
  border: 1px solid #FFF;
  outline: 0;
  border-radius: 0;
  transition: border 0.3s ease-in-out;

}
.inputGroup__textfield:focus, .inputGroup__textfield:active {
    border: 1px solid #D9D9D9;
}


.buttonContact {
  padding: 20px;
  width: 50%;
  border: 0;
  font-family: barlow;
  font-size: 12pt;
  font-weight: 700;
  background-color: #cf90a6;
  cursor: pointer;
  color: #FFF;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.1);
}

button:hover {
    box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, 0.2);
    color: #cf90a6;
    background-color: white;
}



/* STYLES FOR VALIDATION WARNING */
.hf-warning {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  transform: translate(-15%, -50%) !important;
  background: orangered !important;
  display: inline-block !important;
  padding: 7px 14px !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-family: sans-serif;
  box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.1) !important;
  border: 0 !important;
  border-radius: 2px !important;
}

.hf-warning:after {
    content: "";
    width: 10px;
    height: 10px;
    background: orangered;
    position: absolute;
    z-index: 1;
    bottom: -5px;
    right: 15px;
    transform: rotate(45deg);
}


.checkbox-container {
  grid-column: 1;
  grid-row: 4;
  text-align: left;
  display: flex;
  align-items: center;

  font-family: red hat mono;
  font-size: 12pt;
  font-weight:300;
}

/* Ajoutez du style supplémentaire si nécessaire */
input[type="checkbox"] {
  margin-right: 8px; /* Espacement entre la checkbox et le texte */
}



.carte{
  margin-top: 80px;
  }


@media screen and (max-width: 480px) {
  form {
    display: flex !important;
    flex-wrap: wrap;
  }

  form > div {
    margin-bottom: 30px;
  }
}


/* Formulaire Fin */




/* page Contact Fin */



.constructionActus{

  margin-top: 500px;
  text-align: center;
}


.constructionActus p{
  font-family: barlow;
  font-size: 4em;
  font-weight: 600;
  color:#195268;
}




@media screen and (max-width: 400px) {
  .ligneSep {
    margin-top: 50px;
}

}