body {
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
}
#mainContainer{
  width: 90%;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.blankDiv{
  width: 100%;
  position: absolute;
  white-space: nowrap;
  height: 100px;
}
#header{ /*La partie info, nav dans l'autre version*/
  text-align: left;
	font-family: Tahoma;
	font-weight: normal;
	line-height: 20px;
  list-style-type: none;
  white-space: nowrap;
  height: 100%;
}

/*Le conteneur des vignettes*/
#img-container {
  display: flex;
  flex-wrap:wrap;
  width:100%;
  height:auto;
  flex-direction: row;
  padding-left: 5%;
}

#img-container-mobile {
  display: flex;
  flex-wrap:wrap;
  width:100%;
  height:auto;
  flex-direction: row;
  padding-left: 0;
}

.dessinsTitle{
  font-size: 1em;
}

.flex{
  display: flex;
  flex: 1;
  margin-bottom: 1em;
}

.flex{
  display: flex;
  flex: 1;
}

.flexMobile{
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 200px;
}

.center{
  text-align: center;
  flex:1;
}
#Dessins{
  height: 10px;
  flex-direction: row;
}
#bio{
  height:auto;
  font-weight: bold;
  flex-direction: row;
}

.list-submenu-image {
  cursor: pointer;
  height: 20em;
	box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
}

.list-submenu-title{
  margin-top: 20px;
}

.list-submenu-image-mobile {
  cursor: pointer;
  width: 60%;
	box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
}

.list-submenu-title-mobile{
  margin-top: 20px;
  margin-bottom: 75px;
  font-size : 3em;
}

/*Les vignettes*/
.list-image {
  cursor: pointer;
  transition: 0.3s;
  max-width: auto;
	height: 7em;
	margin: 4px;
	box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
}
.logo-courrier {
  cursor: pointer;
  transition: 0.3s;
  max-width: auto;
  height: 1.1em;
  width: 1.1em;
  background-size: 1.1em;
  background-repeat: no-repeat;
  background-image: url(./Images/Logos/logo\ courrier.jpg);
  margin-top: 7px;
}
.logo-courrier-mobile {
  cursor: pointer;
  transition: 0.3s;
  max-width: auto;
  height: 1em;
  width: 1em;
  background-size: 1em;
  background-repeat: no-repeat;
  background-image: url(./Images/Logos/logo\ courrier.jpg);
  margin-right: 0;
  margin-left: auto;
}

.logo-courrier:hover {
  background-image: url(./Images/Logos/logo\ courrier2.jpg);
}

.logo-instagram {
  cursor: pointer;
  transition: 0.3s;
  max-width: auto;
  height: 1em;
  width: 1em;
  background-size: 1em;
  background-repeat: no-repeat;
  margin-top: 7px;
  background-image: url(./Images/Logos/logo\ instagram.jpg);
}

.logo-instagram-mobile {
  cursor: pointer;
  transition: 0.3s;
  max-width: auto;
  height: 1em;
  width: 1em;
  background-size: 1em;
  background-repeat: no-repeat;
  background-image: url(./Images/Logos/logo\ instagram.jpg);
  margin-right: 0;
  margin-left: auto;
}

.logo-instagram:hover{
  background-image: url(./Images/Logos/logo\ instagram2.jpg);
}

.eye{
  background-size: 1.3em;
  width: 1.5em;
  height: 0.8em;
  margin-left: -1.5em;
  background-image: url(./Images/Logos/eye.jpg);
  background-repeat: no-repeat;
  
}
.eyeLink{
  cursor: pointer;
  color: #0000FF;
}

.eyeLink:hover{
  color: #0000FF;
}

.videoLink{
  cursor: pointer;
}

.videoLink:hover{
  color: #0000FF;
}

.menuList{
  margin-top: 0px;
  margin-bottom: 0px
}

.menuList a:hover{
  color:#0000FF;
}

.selectedMenuEntry{
  color:#0000FF;
}

.rootMenuEntry{
  margin : 0;
  font-size: 0.9em;
}

.subMenuEntry{
  font-size: 1em;
  margin-left: 2em;
}

.rootMenuIndex {
  font-size: 1.2em;
  font-weight: normal;
  margin-bottom: 1em;
 }
 .bioMenuIndex {
  margin-top: 20px;
  font-size: 0.9em;
 }
 #bio div{
  display: flex;
  margin-left: 20em;
  font-size: 0.8em;
 }

 li, dd, a {
  text-decoration: none;
  
  color: #000000;
}
.Peintures {
  color:#0000FF;
}
.Dessins {
  color:#0000FF;
}
.Travaux {
  color:#0000FF;
}
.Bio {
  color:#0000FF;
}
a:hover {
  color:#0000FF;
}
.logo-instagram {
  color:#0000FF;
}
.Dessins {
  color:#0000FF;
}
#myImg:hover {opacity: 0.7;
}
#bio p {
font-family: Tahoma;
font-weight: normal;
line-height: 0.6em;
padding-top: 0%;
font-size: 0.8em;
display:flex;
margin-left: 20em;
text-align: left;
}

#bioMobile{
  margin-top:180px;
}

#bioMobile p {
  font-family: Tahoma;
  line-height:  1em;
  padding-top: 0%;
  font-size: 1.5em;
  display:flex;
  text-align: left;
  }

.p2 {
  font-weight: bold;
  padding-top: 0%;
  }

#bio .p2 {
  font-weight: bold;
  padding-top: 0%;
  }

.p3 {
  font-weight: bold;
  padding-top: 0%;
}

#bio .p3 {
  font-weight: bold;
  padding-top: 0%;
}

.p4 {
  font-weight: bold;
  padding-top: 0%;
}

#bio .p4 {
  font-weight: bold;
  padding-top: 0%;
}

/*Le conteneur de la fenetre pop-up*/
.modal {
  /*display: none;  Par défaut à none, car l'image pop-up est cachée*/
  display: flex;
  /*grid-template-columns: 10% 5% 70% 5% 10%;
  grid-template-rows: 20% 55% 5% 20%;
  */
  /*grid-template-columns: 10% 5% 70% 5% 10%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  position: fixed; L'image reste au centre*/
  z-index: 1; /*Elle est au dessus de toute la page*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(229, 231, 233);
  position: fixed;
}

.hidden{
  display: none;
}

.video{
  width: 70%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}
/*
.modalImageBlock{
  height : auto;
  justify-content: center;
  white-space: nowrap;
  width: fit-content;
  margin: auto;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
.modal-content {
  max-width: 500px;
  height: 90%;
}
*/
.modalImageBlock{
  height: 80%;
  position: absolute;
  white-space: nowrap;
  transform-origin: 50% 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}

.modalImageBlockMobile{
  width: 90%;
  position: absolute;
  white-space: nowrap;
  transform-origin: 50% 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}

.mobileTitle{
  line-height:27pt;
  font-size: 40pt;
  font-family: Tahoma;
	font-weight: normal
}

#zoomBlock{
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  height: 100%;
  font-size: 0.8em;
}

#zoomBlockMobile{
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  height: 100%;
  font-size: 2em;
  width: fit-content;
}

.mobileGalleryContainer{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  /*overflow-x: hidden;*/
}
/* Paramètres de l'image pop-up*/
.modal-content {
  height: 100%;
}

.modal-contentMobile {
  width: 100%;
  /*max-height: 70vh;*/
}
.modal-contentMobile-vertical{
  height: 67vh;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* Le boutton croix */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: black;
  font-size: 20px;
  font-weight: normal;
  transition: 0.3s;
}

.closeMobile {
  position: fixed;
  top: 15px;
  right: 35px;
  color: black;
  font-size: 4em;
  font-weight: normal;
  transition: 0.3s;
  z-index: 5;
}
/*Pour qu'on ne puisse pas selectionner/surligner les boutons du pop-up*/
.close,.arrow{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.close:hover,
.close:focus,
.arrow:hover, .arrow:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.arrow{
  display : grid;
  color: black;
  font-size: 20px;
  font-weight: normal;
  transition: 0.3s;
}

#l-arrow {
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
  position: absolute;
}
#r-arrow {
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
  position: absolute;
}

#footer {padding:3%;}

.mobileMenuContainer{
  height: 100%;
  display: flex;
}

.mobileBarsContainer{
  margin-top: 40pt;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: end;
  height: 80%;
}

.mobileBars{
  height: 100%;
  margin-top: 20%;
  display: flex;
  flex-direction: column;
  align-items: end;
}

.mobileBarsContainer ul{
  list-style-type: none;
  margin : 0;
  padding: 0;
  text-align: right;
  z-index: 10;
}

.mobileBarsContainer li{
  font-size: 3em;
  padding: 1em;
  border: 1px solid black;
  background-color: white;
}

#mobileMenuList{
  position: absolute;
  top: 5%;
  right: 1em;
  background-color: white;
  z-index: 10;;
  list-style-type: none;
  padding: 0;;
  text-align: right;
  border-bottom: 2px solid black;
}

.mobileMenuLEntry{
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  padding: 1em;
  font-size: 3em;
}

#clickOutsideOverlay{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9;
}
/*Pour que l'image fasse tout l'écran si l'écran est petit*/
/*
@media only screen and (max-width: 1350px){
  #header {
    padding-left: 5%;
  }
  #img-container {
    width: 62%;
    padding-left: 25%;
}

  .modal-content {
    width: 60%;
    grid-area: 2 / 3 / 4 / 5;
    margin: auto;
  }

  .modal-content {
    width: 90%;
    grid-area: 2 / 2 / 4 / 5;
  }
  #r-arrow {
    grid-area: 3/5/3/6;
    margin: auto;
}
  #l-arrow {
    grid-area: 3/1/3/2;
    margin: auto;
}
}

@media only screen and (max-width: 700px){
#img-container {
    width: 62%;
    padding-left: 25%;
}
.list-image {
    max-width: 46%;
  }}

@media only screen and (max-width: 450px){
#img-container {
    width: 50%;
    padding-left: 30%;
}
.list-image {
    max-width: 100%;
  }}
*/