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

/* html{
  min-height: 100%;
} */

body {
  /* width: 100%; */
  height: auto;
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  /* background-color: white; */

  /* margin-top: 24px; */



    /* background-color: rgba(20,20,25,1); 
      /* display: flex;
  justify-content: center; */
}




.bodyAccueil{
  background-color:#f2f0e7;
}




#oeuvres1, #h1Gallerie{

 
  display: flex;
  justify-content: center;
  margin-left: 70px;
  font-family: Roboto;
  font-size: 1.5em;
  color:#707070;
  transition: margin-left 0.3s linear;
  margin-top: 6%;
}

#h1Gallerie.visible,#h2Gallerie.visible{

  margin-left: 240px;
}






.apparition1 {
  
  /* margin-top: 30px; */
  animation: fadeInAnimation ease 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}


.apparition2 {
  
  /* margin-top: 30px; */
  animation: fadeInAnimation ease 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}



#peintures{
  margin-top: 10px;
  padding-top: 2%;
  margin-bottom: 3%;
  display: flex;
  justify-content: center;
  margin-left: 50px;
  font-family: Roboto;
  font-weight: 100;
  font-size: 1.2em;
  color:gray;
}

#h2Gallerie{
  /* margin-top:10px; */
  /* padding-top: 1%; */
  /* margin-bottom: 3%; */
  display: flex;
  justify-content: center;
  margin-left: 70px;
  transition: margin-left 0.3s linear;

  font-size: 1.2em;
  color:gray;
  /* margin-top: 1%;
  margin-bottom: 1%; */
  }

  #h2Gallerie h2{
    font-family: Roboto;
    font-weight: 100;}

    #h1Gallerie h1{
      font-family: Roboto;
      font-weight: 300;}



@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}




.gallery {


  /* margin-left: 60px; */
  transition: margin-left 0.3s linear;
  height: auto;
  /* width: 100%; */
  display: flex;
  
  justify-content: center;
  margin-left: 70px;
  text-align: center;


}

.gallery.visible {


  margin-left: 240px;
  height: auto;
  /* width: 100%; */
  display: flex;
 
  justify-content: center;

}

.gallery-wrapper {
 column-count: 3;
 column-gap: 6px;
 /* margin-top: 1%; */
  width: 90%;
  /* max-width: 1200px; */
}


.gallery2 {


  transition: margin-left 0.3s linear;
  margin-left: 70px;
  text-align: center;
  height: auto;
  display: flex;
  justify-content: center;
  padding-top: 0;
  background-color:#f2f0e7;
  /* margin-top: 20%; */
  

  /* border: 2px solid red; */

  

 
  


  
  }


.gallery-wrapper2 {
  margin-top:5%;
  column-count: 3;
  column-gap: 6px;
  width: 90%;



}


.paragrapheIntro{
  margin-top:2%;
  /* margin-left: 270px;
  margin-right: 200px; */

  margin-left: 23%;
  margin-right: 20%;

  margin-bottom: 2%;
  background-color: #f2f0e7;
  
  text-align: left;
  
  font-size: 1.2em;
  font-family: Roboto;
  font-weight: 300;
  color:#707070;




}



.paragrapheIntro h1{
 
  /* font-size: 1.5em; */
  font-family: Roboto;
  font-weight: 700;

}



.titresAccueil{
  margin-top: 1%;
  margin-bottom: 5%;
  text-align: center;
  z-index: 999;


  /* border: 2px solid black; */

 
  

}


.titresAccueil h1{
  margin-left: 70px;


  font-family: Roboto;
  font-weight: 300;
  color:#707070;

}


/* 
.gallery-wrapper div {
  break-inside: avoid-column;
} */




.modal-title {
  margin-top: 10px;   /* Ajoutez un espace au-dessus du titre (ajustez selon vos besoins) */
  color: gray;       /* Couleur du texte */
 font-family: Roboto;
 font-weight: 300;
}




.extrait{
  margin-top: 30%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  width: 90%;
  max-width: 1200px;
}
.extrait > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  transition: 0.25s all;
  background-color: white;
}


.extrait > div > a >img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  /* border-radius: 8px; */
  box-sizing: border-box;
}


.gallery-wrapper > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  transition: 0.25s all;
  background-color: white;


}

.gallery-wrapper2 > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  transition: 0.25s all;
 

}

.gallery-wrapper > div:hover {
  padding: 4px;
  transition: 0.25s all;
  filter: brightness(1.1);
  cursor: pointer;
}

.gallery-wrapper > div > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  border:solid 1px gray;
  object-fit: cover;
  /* border-radius: 8px; */
  box-sizing: border-box;
  transform: translateY(30px);
  transition: transform 0.5s ease-out;
}

.gallery-wrapper2 > div:hover {
  padding: 2px;
  transition: 0.25s all;
  filter: brightness(1.1);
  cursor: pointer;
}


.gallery-wrapper2 > div > a:hover >{
  text-decoration: none;
  
}

.gallery-wrapper2 > div > a > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  border:solid 1px gray;
  object-fit: cover;
  /* border-radius: 8px; */
  box-sizing: border-box;
  transform: translateY(30px);
  transition: transform 0.5s ease-out;
}



.gallery-wrapper .wide {
  grid-column: span 2;
}
.gallery-wrapper .xl-wide {
  grid-column: span 3;
}
.gallery-wrapper .tall {
  grid-row: span 2;
}
.gallery-wrapper .big {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-wrapper .xl-big {
  grid-column: span 3;
  grid-row: span 2;
}

.image-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  
}

.modal-content-container {
text-align: center;
  }

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

.modal-content {
  max-width: 90%;
  max-height: 90vh;
  border: 2px solid white;
  /* border-radius: 16px; */
  object-fit: contain;

}

.testA{
  display: flex;
  justify-content: center;
}


.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color:#707070;
  font-size: 60px;
  cursor: pointer;
}

#left,#right{
  cursor: pointer;
  width: 80px;

}

#left2,#right2{
  cursor: pointer;
  width: 15%;

}








/* css de la Sidebar Début */


.sidebar {
  background:#f8f9f9;
  z-index:15;
  width: 240px;
  display: flex;
  justify-content: center;
  flex-direction: column; /* Alignez les éléments en colonne */
  align-items: flex-start;
  position: fixed;
  left: -240px;
  top: 0px;
  transition: left 0.3s linear;
  height: 100vh; /* Ajustez la hauteur pour remplir la hauteur de la vue */
  border-right: solid 1px #707070;



  
}


.sidebar.visible {
  left: 0px;
  box-shadow: 3px 0 0 rgba(170, 170, 170, 0.5);
  
 
}

.sidebar ul {
  
  padding: 0px;
  margin-left: 50px;

transform: translateY(-95px);

}

.sidebar ul li {
  list-style: none;

}




.sidebar ul li a {

 
  background: #f8f9f9;
  color: #707070;
  /* border-bottom: 1px solid #111; */
  display: block;
  width: 100px;
  padding: 5px;
  text-decoration: none;
  font-family: Roboto;
  font-weight: 300;
  font-size: 1.3em;
  z-index: 999;

}



#gras{
 
  font-weight: 700;



}

.ttt{
top:-50%;
width:100px;
display: none;

}


.ttt.vvv{

  display: block;
  margin-top:-20%;
width:150px;
margin-left: 110px;
}

.hrhr{
 
  display:block;

  margin-left: 50%;

}



.hrhr.lll{
  display:none;
  z-index:0;
}

.iconesMenu{
  display: flex;
  justify-content: flex-start;
  width: 30%;

  /* margin-left: -5px; */
 
 
}

.iconesMenu img{
margin: 0 -14px;
padding: 0;

}



.signatureAccueil{
left:-17px;
  top:2%;
  transform: translateY(-1%);
 
  position: fixed;
  z-index: 999;

  padding:0;
  /* background-color: #88b7b7; */
  width: 108px;
  display: flex;
flex-direction: column;
align-items: center;
row-gap: 10px;


 
}




.signatureAccueil a img{



  padding: 0;
  margin: 0;


}

.menu-wrapper {


  position: fixed;
  top: 95%; /* 50% de la hauteur de l'écran */
  left: 25%;
  transform: translateY(-25%,-90%); /* centrer verticalement */
  /* margin-left: 10px;  */
  z-index: 999; /* pour s'assurer que le menu reste au-dessus du contenu */

  width: 50px;
  height: 50px;
  cursor: pointer;

  transition: all .3s ease-out;
}


.signatureLongueAccueil{

  position: fixed;

top:33%;
left:140px;
transform: translate(-50%, -33%);



}

.signatureLongueAccueil img{

width: 25%;

}

.signatureLongueAccueil.bkkk {
 


display: none;

}


.barre {

  width: 70px;
  height: 100vh;
 position: fixed;
  top: 0px;
  border-right: solid 1px #707070;
  box-shadow: 3px 0 0 rgba(170, 170, 170, 0.2);
  z-index: 1;



  background-color:#f8f9f9;

}


.barre.hhh{

  position: absolute;
}

.menu-btn, .menu-btn:before, .menu-btn:after {

  height: 4px;
  width: 34px;
  background-color:#707070;
  margin: 23px 8px;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}




.menu-btn:before, .menu-btn:after {
 
  content: " ";
  position: absolute;
  margin-top: -10px;
  margin-left: 0;
  transform: rotateZ(0deg);
  transform-origin: 3px 3px;
}
.menu-btn:after {
  margin-top: 10px;
}

.menu-btn-on {
  background-color: transparent;
  margin-left: 12px;
}
.menu-btn-on.menu-btn:before {
  transform: rotateZ(45deg);
 
}
.menu-btn-on.menu-btn:after {
  transform: rotateZ(-45deg);

}



/* test codepen fin */


/* css de la Sidebar Fin */



/* Menu mobilie Début */

/* Styles pour le menu mobile */
.mobile-menu-icon {
  display: none;
  cursor: pointer;

  position: absolute;
 
  right: 12px;
  z-index: 3; 
}


.entete{
  display: flex;
text-align: center;
align-items: center;



}





.ggg{
  position: absolute;
top:-5px;
  left :10px;
  z-index: 3; 
  width: 60%;

 

}






.menu-overlay {

display: none;
justify-content: center;
align-items: center;
position: fixed;
/* top: 0;
left: 0; */


width: 100%;
height: 100%;
background-color:white;

z-index: 9999;


/* 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 gray; */
overflow-x: hidden;
}

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

.menu ul {

  list-style: none;
  padding: 0;
  margin: 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 */
}


.traitSeparatif{

  border-bottom: solid 1px #707070;
}


.menu a {
color: gray;
font-family: Roboto;
font-weight: 300;
  text-decoration: none;
  background: white;
}

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

.menu-icon {

  position: fixed;
  display: block; /* Affichez l'icône "Menu" par défaut */
  transition: opacity 0.3, transform 0.8s;
  
}

.close-icon {

  display: none; /* Masquez l'icône "Fermer le Menu" par défaut */
  transition: opacity 0.5s,transform 0.8s;
  position: fixed;
  top: 0px;
  right: 12px;
}


/* Menu mobile Fin */





/* Accueil début */

.cadreAccueil1{
  background-color: #bfcccc;
  width: 100%;
  height: auto;
 
 
  right: 0;
  padding-top: 0px;
  margin-top: 0px;
  /* margin-bottom: -2%; */


  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}



.cadrePhotoAccueil {
  position:relative;
  margin-top: 30px;

  margin-left: 70px;

  
  text-align: center;
}

.centered-image {

  max-width: 70%; 
  max-height: 100%; 
  border: 4px solid white;
}


  
.actus{
  position: absolute;

  text-align: left;
  margin-left: -10px;
  margin-top: -190px;
  margin-right: auto;
  font-family: Roboto;
  font-weight: 300;
  background-color: #f8dd44;
  border:4px solid white;
  width:60%;
  z-index: 10;
  color:#606060;
  padding: 30px 30px;
}

.actus h1{
  font-family: Roboto;
  font-weight: 300;
  font-size: 1em;


}
.actus h2{
  font-family: Roboto;
  font-weight: 100;
  font-size: 1.5em;

}
.actus h3{
  font-family: Roboto;
  font-weight: 300;
  font-size: 1.5em;


}



.cadreAccueil2{
  background-color: #bfcccc;
  /* border-top: 1px solid #606060;
  border-bottom: 1px solid #606060; */
  width: 100%;
  height: 5%;

 
  top:0%;
  padding-top: 0px;
  margin-top: 0px;

  border: solid 1px #bfcccc;
  
 
  
}

.citation {
 margin-top: 6%;
font-family: Roboto;
/* margin-left: min(250px); */




color:#142146;

}

.citation h1{
font-style: italic;
/* margin-left: min(100px);
margin-right: min(100px); */
/* margin-left:70px; */
font-weight:300;
font-size: 1.8em;

margin-left: 70px;
text-align: center;

}

.citation h2{
  margin-top: 1%;
  font-weight: 300;
  font-size: 1.7em;
 
  margin-left: 70px;



  /* margin-left: 80%; */

}

html {
  box-sizing: border-box;
}


.cadrePresentation {
  margin-top: 5%;

  /* margin-left: calc(20% + 70px); */
   /* 20% + la largeur de votre sidebar */
  margin-right: 20%;
  margin-left: 23%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'a b'
    'a b';
  column-gap: 5px;
  margin-bottom: 3%;
}




.tableauAutoportrait img{
  grid-area: a;
  width: 95%;
  margin-right: 30px;
  border:4px solid white;
}
.p1,.p2  h1{


  font-family: Roboto;
  font-weight: 700;
  color:#223e59;
  
}


.p1,.p2{
  grid-area: b;
  margin-top: 1.5%;
  font-family: Roboto;
  font-weight: 300;
  
  font-size: 1.2em;
  color:#223e59;
}



.textPresentation button{
 background-color: #707070;
 color: white;
 font-family: Roboto;
 font-size: 1.2em;
 font-weight: 300;
 border-radius: 5px;
 padding: 10px 30px;
 border: none;
 /* margin: 8%; */
 margin-top: 8%;
 margin-bottom: 8%;
 cursor: pointer;

}


.bouton1, .bouton2{

  display: flex;
  margin-left: 70px;
  justify-content: center;
  margin-top: 2%;
}

.bouton1 button ,.bouton2 button{

  background-color: #707070;
  color: white;
  font-family: Roboto;
  font-size: 1.2em;
  font-weight: 300;
  border-radius: 5px;
  padding: 10px 30px;
  border: none;
  /* margin: 8%; */
  margin-top: 8%;

  margin-bottom: 8%;
  cursor: pointer;
 
}

/* footer{
  position: absolute;
  bottom: 0;
width: 100%;
z-index: 0;
} */

footer{
  margin-top: auto;
}

.indexFooter {
  /* margin-top: 50px; */
  height: 50px;
  background-color: #c3dbdb;
  display: flex; /* Ajout */
  align-items: center; /* Ajout */
  justify-content: flex-end;

  
}

.retourHautIndex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
}


.afterFooter{
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
  margin-right: 70px;
}

.afterFooter h3{
  font-family: Roboto;
  font-weight: 300;
  color: #606060;
  font-size: 1em;
}

.afterFooter a{
  color: #606060;
  text-decoration: none;
}
.yyyy{

  width:70%
}



/* Accueil fin */


/* A Propos Début */


.cadreAPropos{
 width: 100%;
  display:flex;
  justify-content: space-around;
  background-color:  #bfcccc;


}





.textAPropos{

 
  margin-bottom: 30px;
  margin: 5% 40px 5% 243px;
  transition: margin-left 0.3s linear;

}


.textAPropos.visible, .exposTexte.visible{

margin-left: 480px;
}


.textAPropos h1{

  font-family: Roboto;
  font-weight: 100;
  color:#223e59;
  font-size: 2.1em;

}


.textAPropos h2{

  font-family: Roboto;
  font-weight: 100;
  color:#223e59;
  font-size: 2.1em;
}

.textAPropos p{
  margin-top: 1.5%;
  font-family: Roboto;
  font-weight: 300;
  color:#223e59;
  font-size: 1.4em;
  margin-bottom: 1.5%;
}

.tableauAutoportrait2{
  margin-top: 5%;
  margin-bottom: -10%;
  margin-right: 5%;
  

}

.tableauAutoportrait2 img{
  height: 480px;
  border: solid 4px #606060;
  /* align-self: start; */
 

 

}


.exposTexte{
  margin: 1% 243px;
  transition: margin-left 0.3s linear;
  
}

.exposTexte h2{
  font-family: Roboto;
  font-weight: 300;
  color:#707070;


}

.exposTexte h3{
  font-family: Roboto;
  font-weight: 500;
  color:#707070;
  margin-top: 2%;
}

.exposTexte p{

  font-family: Roboto;
  font-weight: 300;
  color:#707070;
  font-size: 1.2em;

}

.xxx{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.trait2{
  width: 50%; 
  border: 0; 
  height: 1px;
  background-color:#707070;
 
  margin-left: 2%;
 
}





/* A Propos Fin */



/* Contact Début */

/* Formulaire Début */
.contactTitre{
  margin-top:52px;
 text-align: center;
 


  /* transition: margin-left 0.3s linear; */

}

.contactTitre h1{
  color:#707070;
 

  font-family: Roboto;
  font-weight: 300;
  font-size: 2.7em;



}


.contactForm {
 
  display: flex;
  justify-content: center;
  margin-left: 70px; 
  margin-top: 5%; 
}

.rectangle{
  position: absolute;
  bottom: 0;
  width: 100%;
}



form label{

  font-weight: 100;
  font-size: 0.8em;
}


form {

  display: grid;
  grid-gap: 10px;
  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: 1 / span 2;
  grid-row: 2;
}
.inputGroup6 {
    grid-column: 1 / span 2;
    grid-row: 3;
}
.inputGroup7 {
    grid-column: 1;
    grid-row: 5;
    text-align: left;
    
}


.inputGroup__textfield {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color:#f8dd44;

  appearance: none;
  width: 100%;
  font-size: 13px;
  padding: 20px;
  border: 1px solid #707070;
  outline: 0;
  border-radius: 0;
  transition: border 0.3s ease-in-out;
  color: black;
  /* margin-right: 10px; */

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


.buttonContact {
  background-color: #707070;
 color: white;
 font-family: Roboto;
 font-size: 1.2em;
 font-weight: 300;
 border-radius: 5px;
 padding: 10px 30px;
 border: none;
 /* margin: 8%; */
 margin-top: 6%;
 /* margin-bottom: 8%; */
 cursor: pointer;
}

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




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

  font-family: Roboto;
  font-size: 1.5em;
  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: 768px) {
  form {
    display: flex !important;
    flex-wrap: wrap;
    
   
  }

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


/* Formulaire Fin */




/* page Contact Fin */

/* Contact Fin */




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

  .testB{
    display:none;
  }

  .cadreMobile{

    display:none
  }


  .ggg{
    display: none;
  }

  .p2{
    display: none;
  }
}


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


  

  .titresAccueil{
  margin-top: 2%;
   
    margin-left: 0px;
    margin-bottom: 2%;
  
  }


  .bouton1, .bouton2 {
    margin-left: 0px;
   
  }




  
  .titresAccueil h1{
    margin-left: 0px;

    font-family: Roboto;
    font-weight: 300;
  color:#707070;
  }

 

  .signatureAccueil{
    display: none;}

  .barre{
    display: none;
  }

  .menu-wrapper{
    display: none;
  }

  .signatureLongueAccueil{

    display: none;
  }


  .cadrePhotoAccueil {

    margin-top: 25%;
    width: 90%; 
    height: auto; 
    margin-left: 0px;
 
    
  }


  .centered-image {

    max-width: 100%; 
    max-height: 100%; 
    border: 4px solid white;
  }
  

  .cadreMobile{
    margin-top: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #c3dbdb;

  }

  .fly{

    width: 80%;
    margin-top: 1%;
    margin-left: 0px;
  
  
  
  }


 .cadreAccueil1{
   /* display:none; */


    background-color: #bfcccc;
    width: 100%;
    height: 80%;
   
    top: 0;
    right: 0;
    padding-top: 0px;
    margin-top: 0px;
  
  
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
  }

  .flexx{
display: none;
  }


  .actus{

    
  margin-left: auto;
  margin-top: -35%;
  margin-right: auto;
    position: relative;
    font-family: Roboto;
    font-weight: 300;
    background-color: #f8dd44;
    border:4px solid white;
    width: 90%;
    height: 20%;
    margin-bottom: 4%;
   
   color:#606060;
    padding: 10px 10px;
  }

  .actus h1{
    font-size:1.1em;
  
  
  }
  .actus h2{
    font-size:1.1em;
  
  }
  .actus h3{
    font-size:1.1em;
  
  
  }
  

  .cadreAccueil2{
    top:5% ;
    height: 50%;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    background-color: #bfcccc;
  }

  
  .cadrePresentation{
    margin-top: 20%;
    /* margin-left:20%;
    margin-right: 20%; */
    /* display:grid;
   
  
    grid-template-columns: 1fr  ;
    grid-template-areas: 
    'a '
  
    'b';  */

    display: flex;
    flex-direction: column;
    margin-left: 5%;
    margin-right: 5%;



  }
  
    
  

  .tableauAutoportrait img{
    /* grid-area: a; */
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border:4px solid white;
  }

  .p1,.p2  h1{


    font-family: Roboto;
    font-weight: 700;
    color:#223e59;
    
  }
  
  
  .p1,.p2{
    /* grid-area: b; */
    margin-top: 1.5% 0.5%;
    
    font-family: Roboto;
    font-weight: 300;
    color:#223e59;
    font-size: 1.2em;
  }



  .paragrapheIntro{
    margin-top: 6%;
    margin-bottom: 6%;
   
   
    text-align: left;
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    margin-right: 5%;

    font-size: 1.1em!important;
    font-family: Roboto;
    font-weight: 300;
    color:#707070;

  }
  
  
  
  

  .gallery-wrapper {
    column-count: 1;
   margin: 10px;
   margin-top: -8%;
   
     width: 100%;
  
   }

   .afterFooter{
    margin-top: 8px;
    margin-bottom: 5px;
   text-align: center;
   margin-right: auto;
   margin-left: auto;
  
  }

}





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


  

  .titresAccueil{
  margin-top: 2%;
   
    margin-left: 0px;
  
  }


  .bouton1, .bouton2 {
    margin-left: 0px;
   
  }

  .titresAccueil h1{
    margin-left: 0px;

    font-family: Roboto;
    font-weight: 300;
  color:#707070;
  }

 

  .signatureAccueil{
    display: none;}

  .barre{
    display: none;
  }

  .menu-wrapper{
    display: none;
  }

  .signatureLongueAccueil{

    display: none;
  }


  .cadrePhotoAccueil {

    margin-top: 18%;
    width: 100%; 
    height: auto; 
    margin-left: 0px;
 
    
  }
  

  .cadreMobile{
    margin-top: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #c3dbdb;

  }

  .fly{

    width: 80%;
    margin-top: 1%;
    margin-left: 0px;
  
  
  
  }


 .cadreAccueil1{
   /* display:none; */


   background-color: #bfcccc;
   width: 100%;
   height: 80%;
  
   top: 0;
   right: 0;
   padding-top: 0px;
   margin-top: 0px;
 
 
 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
  
  }


  


  .flexx{
display: none;
  }


  .actus{

    
  margin-left: auto;
  margin-top: -20%;
  margin-right: auto;
    position: relative;
    font-family: Roboto;
    font-weight: 300;
    background-color: #f8dd44;
    border:4px solid white;
    width: 90%;
    height: 20%;
    margin-bottom: 4%;
   
   color:#606060;
    padding: 10px 10px;
  }

  .actus h1{
    font-size:1.1em;
  
  
  }
  .actus h2{
    font-size:1.1em;
  
  }
  .actus h3{
    font-size:1.1em;
  
  
  }
  
  

  .cadreAccueil2{
    top:5% ;
    height: 50%;
    background-color: #bfcccc;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
 
  }

  
  .cadrePresentation{
    margin-top: 15%;
    /* margin-left:20%;
    margin-right: 20%; */
    /* display:grid;
   
  
    grid-template-columns: 1fr  ;
    grid-template-areas: 
    'a '
  
    'b';  */

    display: flex;
    flex-direction: column;
    margin-left: 5%;
    margin-right: 5%;



  }
  
    
  

  .tableauAutoportrait img{
    /* grid-area: a; */
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border:4px solid white;
  }

  .p1,.p2  h1{


    font-family: Roboto;
    font-weight: 700;
    color:#223e59;
    
  }
  
  
  .p1,.p2{
    /* grid-area: b; */
    margin-top: 1.5% 0.5%;
    
    font-family: Roboto;
    font-weight: 300;
    color:#223e59;
    font-size: 1.2em;
  }



  .paragrapheIntro{
    margin-top: 6%;
    margin-bottom: 6%;
   
   
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 1.1em;
    font-family: Roboto;
    font-weight: 300;
    color:#707070;

}

.gallery-wrapper {
  column-count: 1;
 margin: 10px;
 margin-top: -5.85%;
 
   width: 100%;

 }


.afterFooter{
  margin-top: 5px;
  margin-bottom: 5px;
 text-align: center;
 margin-right: auto;
 margin-left: auto;

}
}







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

  .cadreAPropos{

    margin-top: 8%;
  
    display:flex;
  
  justify-content:center;
    flex-direction:column-reverse;
    align-items: center;
    background-color: white;

  
    
  }
  
  .textAPropos{
  
    margin-top: 4%;
  
    margin-bottom: 30px;
    margin: 1% 10% ;
  
  }
  
  .textAPropos h1{
  
  margin-top: 2%;
  margin-bottom: 2%;
    font-size: 1.8em;
  }
  
  
  .textAPropos h2{
  
  
    color:#606060;
    font-size: 1.8em;
  }
  
  .textAPropos p{
    margin-top: 1.5%;
  
    font-size: 1em;
    margin-bottom: 5%;
  }
  
  
  .tableauAutoportrait2{
  
    

  margin-top: 5%;
  margin-bottom: 1%;
  margin-left:auto;
  margin-right: calc((50% - (70px)) / 2);
  
  }
  
  .tableauAutoportrait2 img{
    height: 500px;

 

   
   
  
  }
  
  .exposTexte{
  
    margin: 1% 10% ;
    margin-bottom: 20px;
  }
  
  .exposTexte h2{
    font-family: Roboto;
    font-weight: 300;
    color:#707070;
  
  
  }
  
  .exposTexte h3{
    font-family: Roboto;
    font-weight: 500;
    color:#707070;
    margin-top: 2%;
  }
  
  .exposTexte p{
  
    font-family: Roboto;
    font-weight: 300;
    color:#223e59;
    font-size: 0.9em;
  
  }
  

  .cadreAccueil1{
    /* display:none; */
 
 
     background-color: #bfcccc;
     width: 100%;
     height: 800px;
    
     top: 0;
     right: 0;
     padding-top: 0px;
     margin-top: 0px;
     margin-bottom: -7%;
   
   
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   
   }
 
.cadrePhotoAccueil {

  /* margin-top: 15%;

  width: 80%;
 

  height: auto; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  margin-left: 70px; */


}

.centered-image {
  max-width: 100%; /* Assurez-vous que l'image ne dépasse pas la largeur du conteneur */
  max-height: 100%; /* Assurez-vous que l'image ne dépasse pas la hauteur du conteneur */
  border: 4px solid white;
  
}




.imageFlyer{

  border: 4px solid white;
  max-width: 100%; /* Assurez-vous que l'image ne dépasse pas la largeur du conteneur */
  max-height: 100%; /* Assurez-vous que l'image ne dépasse pas la hauteur du conteneur */
  border: 4px solid white;

}



.actus{

    
  margin-left: auto;
  margin-top: -20%;
  margin-right: auto;
    position: relative;
    font-family: Roboto;
    font-weight: 300;
    background-color: #f8dd44;
    border:4px solid white;
    width: 90%;
    height: 20%;
    margin-bottom: 4%;
   
   color:#606060;
    padding: 10px 10px;
  }

  .actus h1{
    font-size:1.1em;
  
  
  }
  .actus h2{
    font-size:1.1em;
  
  }
  .actus h3{
    font-size:1.1em;
  
  
  }



.cadreAccueil2{
/* 
  height: 60%; */

}



  




.gallery2 {


  transition: margin-left 0.3s linear;
  height: auto;
  /* width: 100%; */
  display: flex;
  justify-content: center;
  margin-left: 70px;
 text-align: center;
 /* margin-top: -%; */



  
  }




.gallery-wrapper2 {

 column-count: 3;
 column-gap: 6px;

  width: 90%;

}


.cadrePresentation{
  text-align: center;
 
  margin-left:70px;
  margin-right: auto;
  display:grid;

  grid-template-columns: 1fr  ;
  grid-template-areas: 
  'a '
  'a '
  'b';
  column-gap: 5px;

  
}

.p1{
text-align:left;
  font-size:1.1em;
  margin-left: 10px;
  margin-right: 10px;
}

.p2{
  text-align: left;
  font-size: 1.1em;
  margin-left: 10px;
  margin-right: 10px;
}

.paragrapheIntro{
  font-size:1em;
  text-align:left;
  margin-left: 10px;
  margin-right: 10px;
}


.tableauAutoportrait img{
 
  margin-top: 7%;

  grid-area: a;
  width: 50%;
  margin-right: 30px;
  border:4px solid white;
}

}




@media screen and (min-width: 1024px) and (max-width: 1439px){

 form {
  width:45%
 }

  .contactForm {
    /* width: 100%; */
    display: flex;
    justify-content: center;
    margin-left: 70px; 
    margin-top: -3.5%; 
    margin-top: -3.5%;
  
  
    
  }

  
.cadreAccueil1{
  background-color: #bfcccc;
  width: 100%;
  height: auto;
 
 
  right: 0;
  padding-top: 0px;
  margin-top: 0px;
  /* margin-bottom: -2%; */


  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}



.cadrePhotoAccueil {
  position:relative;
  margin-top: 30px;

  margin-left: 70px;
  
  text-align: center;
}

.centered-image {

  max-width: 100%; 
  max-height: 100%; 
  border: 4px solid white;
}


  
.actus{
  position: absolute;

  text-align: left;
  margin-left: -10px;
  margin-top: -190px;
  margin-right: auto;
  font-family: Roboto;
  font-weight: 300;
  background-color: #f8dd44;
  border:4px solid white;
  width:60%;
  z-index: 10;
  color:#606060;
  padding: 30px 30px;
}

.actus h1{
  font-family: Roboto;
  font-weight: 300;
  font-size: 1em;


}
.actus h2{
  font-family: Roboto;
  font-weight: 100;
  font-size: 1.5em;

}
.actus h3{
  font-family: Roboto;
  font-weight: 300;
  font-size: 1.5em;


}


.cadreAccueil2{
  top:55% ;
  height: 25%;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */

}

.cadrePresentation {
  margin-top: 5%;

  /* margin-left: calc(20% + 70px); */
   /* 20% + la largeur de votre sidebar */
  margin-right: 15%;
  margin-left: 13%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'a b'
    'a b';
  column-gap: 5px;
  margin-bottom: 6%;
}




.tableauAutoportrait img{
  grid-area: a;
  width: 90%;
  margin-right: 30px;
  border:4px solid white;
}
.p1,.p2  h1{


  font-family: Roboto;
  font-weight: 700;
  color:#223e59;
  
}


.p1,.p2{
  grid-area: b;
  margin-top: 1.5%;
  font-family: Roboto;
  font-weight: 300;
  color:#223e59;
  font-size: 1.2em;
}

.paragrapheIntro{
  font-family: Roboto;
  font-weight: 300;
  font-size: 1.2em;
  margin-right: 15%;
  margin-left: 13%;
}


.cadreAPropos{
  width: 100%;
   display:flex;
   justify-content: space-around;
   background-color:  #bfcccc;
 
 
 }
 
 
 
 
 
 .textAPropos{
 
  
   margin-bottom: 30px;
   margin: 5% 40px 5% 100px;
   transition: margin-left 0.3s linear;
 
 }
 .exposTexte{
  margin: 1% 100px;
  transition: margin-left 0.3s linear;
  
}



}






.gallery2 {


  transition: margin-left 0.3s linear;
  height: auto;
  /* width: 100%; */
  display: flex;
  justify-content: center;
  margin-left: 70px;
 text-align: center;
 margin-top: -10%;

  
  }




.gallery-wrapper2 {

 column-count: 3;
 column-gap: 6px;

  width: 90%;

}




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

  form {
    text-align: center;
    margin-left: min(20px)!important;
    margin-right: min(20px)!important;
    display: grid;
    /* grid-gap: 50px; */
    padding-top: 20px;
  
  }

  .contactForm {
    /* width: 100%; */
  
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
   
  
  
    
  }

  .rectangle{
    position: relative;
    width: auto;
    bottom: auto;
  }
    
  }

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

  form {
    width:45%
   }
}

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

  .sidebar ul {

  transform: translateY(-300px);
  
  }

   
.cadreAccueil1{
  background-color: #bfcccc;
  width: 100%;
  height: auto;
 
 
  right: 0;
  padding-top: 0px;
  margin-top: 0px;
  /* margin-bottom: -2%; */


  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}



.cadrePhotoAccueil {
  position:relative;
  margin-top: 30px;

  margin-left: 70px;
  
  text-align: center;
}

.centered-image {

  max-width: 100%; 
  max-height: 100%; 
  border: 4px solid white;
}


  
.actus{
  position: absolute;

  text-align: left;
  margin-left: -10px;
  margin-top: -190px;
  margin-right: auto;
  font-family: Roboto;
  font-weight: 300;
  background-color: #f8dd44;
  border:4px solid white;
  width:60%;
  z-index: 10;
  color:#606060;
  padding: 30px 30px;
}

.actus h1{
  font-family: Roboto;
  font-weight: 300;
  font-size: 1em;


}
.actus h2{
  font-family: Roboto;
  font-weight: 100;
  font-size: 1.5em;

}
.actus h3{
  font-family: Roboto;
  font-weight: 300;
  font-size: 1.5em;


}


  /* .flyer{
  
  
    width: 90%;
    border:4px solid white;
  
  } */
  
  



  .citation h1{

    /* font-size: 2.5em;
     */
    margin-left: 70px;
    text-align: center;
    /* font-size: 2.6em; */
    
    }
    
    .citation h2{
      margin-top: 1%;
      font-weight: 300;
      /* font-size: 2.5em; */
     
      margin-left: 70px;
      text-align: center;
    
    
      /* margin-left: 80%; */
    
    }

    .textPresentation h1{
      grid-area: c;
      
    
      font-family: Roboto;
      font-weight: 700;
      color:#03224c;

      margin-left: 30px;
      /* font-size: 2em; */
      
    }
    
    
    .p1,.p2{
      grid-area: d;
      margin-top: 1.5%;
      font-family: Roboto;
      font-weight: 300;
      color:#03224c;
      /* font-size: 1.9em; */
  
      margin-left: 30px;
    }

    .paragrapheIntro{
      font-family: Roboto;
      font-weight: 300;

    }
    
    
    
    .textPresentation button{
     background-color: #707070;
     color: white;
     font-family: Roboto;
     /* font-size: 1.4em; */
     font-weight: 300;
     border-radius: 5px;
     padding: 15px 35px;
     border: none;
     margin: 8%;
     cursor: pointer;
    
    }


    .tableauAutoportrait img{
      grid-area: a;
      width: 100%;
     
      border:4px solid white;
    }


    .paragrapheIntro{
      margin-top: 6%;
      margin-left: 120px;
      margin-right: 50px;
      /* font-size: 2.1em; */
      font-family: Roboto;
      font-weight: 300;
      color:#707070;
    
    
    
    }

    .titresAccueil h1{
      margin-left: 70px;
    
      font-family: Roboto;
      font-weight: 300;
      color:#707070;
      /* font-size: 2.5em; */
    }
    


}









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


  .signatureAccueil{
    display: none;}

  .barre{
    display: none;
  }

  .menu-wrapper{
    display: none;
  }

  .signatureLongueAccueil{

    display: none;
  }

  
  

  .citation{
   display: none;
  }



  
 



  .p1{

    display: none;
  }

  .p2{
    font-size: 1.1em;
  }



  .gallery {

  margin-left: auto;
    height: auto;
  
    display: flex;
    justify-content: center;
 
  }
  
 


  .gallery2 {

    /* margin-top: 0.2%; */
    margin-left: auto;
      height: auto;
    
      display: flex;
      justify-content: center;
   
    }
    
    .gallery-wrapper2 {
      /* margin-top:4%; */
     column-count: 1;
    /* margin: 10px; */
    
      width: 100%;
   
    }

  #oeuvres{
    margin-left: auto;
    margin-top:15% ;
  }
  


#peintures{
  margin-left: auto;
  margin-top:8% ;
}




.cadreAPropos{

  margin-top: 18%;

  display:flex;

justify-content:center;
  flex-direction:column-reverse;
  align-items: center;
  background-color: white;

  
}

.textAPropos{

  margin-top: 4%;

  margin-bottom: 30px;
  margin: 1% 5% ;

}

.textAPropos h1{

margin-top: 2%;
margin-bottom: 2%;
  font-size: 1.8em;
}


.textAPropos h2{


  color:#606060;
  font-size: 1.8em;
}

.textAPropos p{
  margin-top: 1.5%;

  font-size: 1em;
  margin-bottom: 5%;
}


.tableauAutoportrait2{
  margin-top: 5%;
  margin-bottom: 1%;
  margin-right: 0%;
  

}

.tableauAutoportrait2 img{
  height: 400px;

  /* text-align: center;
  margin:0 auto; */
 

}

.exposTexte{

  margin: 1% 8% ;
  margin-bottom: 20px;
}

.exposTexte h2{
  font-family: Roboto;
  font-weight: 300;
  color:#707070;


}

.exposTexte h3{
  font-family: Roboto;
  font-weight: 500;
  color:#707070;
  margin-top: 2%;
}

.exposTexte p{

  font-family: Roboto;
  font-weight: 300;
  color:#223e59;
  font-size: 0.9em;

}


#left,#right{
  display:none;
}

#left2,#right2{
  
  width: 15%;

}

#oeuvres1, #h1Gallerie{
margin-top: 70px;
  margin-left: 0px;
  font-size: 1.5em;
  color:#707070;
 
}

#h2Gallerie{
  margin-top:-2px;
  /* padding-top: 1%; */
  margin-bottom: 30px;
  justify-content: center;
  margin-left: 0px;

  font-size: 1.2em;
  color:gray;
  
  }

}


/* css de tests */