html {
    --couleur: #766e6e;
    overflow-y: hidden;      /* suppression des ascenseurs */
    overflow-x: hidden;      /* suppression des ascenseurs */
}

body {
    background-color: #d4d4d4;
}

h1,
h3,
p,
#centrebas,
#centredroit {
    margin: 0;
    font-family: 'Imprima', sans-serif;
    color: var(--couleur);
}

h1 {
    font-size: 1.2vw;
}

#linetexte p {
    text-align: justify;
}

/*  *************** Bouton + Titre Site ************** */

button{
    border : 0;
    background-color : #d4d4d4;
    position : fixed;
    top : 0%;
    width : 10vw;
    height : 12vh;
   
}

#titrehome h1 {
    margin-left: 18%;
    position: fixed;
    top: 1%;
}

#titrehome {
 
   /* height: 8vh; */
    width: 100vw;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#titreline {
    width: 90vw;
    margin-left : 10vw;
}


#boutonburgerferme {
    display : none;
}


#imghomeh, #gauchecentre img{
    position: relative;
    z-index: 2;  
}

/*  *************** Fin Bouton + Titre Site ****** */







/* ***********************  LANDSCAPE************************* */

@media screen and (orientation : landscape) {
			

#titrehome{
        display : none;
    }   

    
    h1 {
	font-size: 2.5vw;
}

    
#menucache,
#boutons,
#titrehome{
    display: none;
}

    
#imghomev{
        margin-left : 5%;
    }
    
#titresite{
  margin-top : 2vh;      
    }
	
#centrebas,
#centredroit,
#legendimage p {
    font-size: 0.6em;
}

#ecrantotal {
    width: 100%;
    display: flex;
    flex-direction: column;
}
    
#gauche {
    width: 45%;
    margin-left: 4%;
    margin-right: 6%;
    display: flex;
   flex-direction: column;
}

#gauchehaut1 {
    height: 8vh;
}
#gauchehaut2 {
    height: 8vh;  
}

#gauchecentre {
    width: 100%;
    height: auto;
}

#droite {
    width: 40%;
    margin-right: 4%;
    display: flex;
    flex-direction: column;
}

#vignettes {
    width: 100%;
    height: auto; 
    display : flex;
    flex-direction: row;
    flex-wrap : wrap;
    justify-content : space-between;
}
    
#affiche1 img {
    border-radius: 5px;
    width: 20.5%;
    margin-right: 3%; 
}

#droitehaut1,
#droitehaut2 {
    height: 8vh;
}
    
#droitehaut2 {
    margin-left :60%;
}

#droitecentre {
    width: 100%;
    height: 70vh;
}
 
 /* ****************** Home Page *********************  */
    
#containerhome {
    height: 60vh;
    width: 50vw;
    margin: auto;
    margin-top: 10vh;
    display: flex;
}

#imghomev img {
    height: 60vh;
}

#homegauche {
    width: 50vw;
    display: flex;
    flex-direction: row;
}

#imghomeh img{
    height: 33vh;
}
    
#iconeshome {
    margin-top: 2.5vw;
    display: flex;
}
    
#titrehome h1 {
    font-size: 3.0vw;
    padding-bottom: 2%;
}
    

#menu {
	display: block;
	height: auto;
	position: fixed;
	top: 15%;
	background-color: #d4d4d4;
	width: 35%;
	right: -120%;
	z-index: 9999;
}
	
.titre {
	margin-left: 15%;
	border-bottom: 2px solid brown;
	height: 3vh;
	background-color: #f2efef;
	padding-left : 10%;
	padding-bottom : 3%;
}

.menu a {
	color: black;
	text-decoration: none;
	font-family: 'Imprima', sans-serif;
	height: 7vh;
	line-height: 8vh;
	margin-top : 3%;
}

.menu a img {
	height: 5vh;
	padding-left : 12%;
	margin-right : 5%;
	padding-top : 2%;
}


#titre {
	height: 7vh;
} 

#image {
	border-radius: 5px;
	width: 100%;
} 
	
#legendimage {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3%;
    width: 100%;
}

#souslesvignettes {
    display: flex;
    margin-top: 1.6vh;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#basdroitg img,
#basdroitd img {
    width: 1em;
}

}


@media screen and (orientation : landscape) and (max-width : 788px) {

#homepage {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
    
#iconeshome {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
    
#iconeshome img {
    width: 6vw;
    height: auto;
}
    
#gauche {
    width: 60%;
    margin-left: 3%;
    margin-top: 5%;
}

#gauchehaut {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 5%;
}

#gauchehaut1 {
    width: 80%;
}

#gauchehaut2 {
    width: 15%;
}

h1 {
    font-size: 3.5vw;
}

#droite {
    width: 40%;
    margin-right: 2%;
    margin-top: 2.5%;
}

#affiche1 img {
    border-radius: 5px;
    width: 20%;
    margin-right: 3%;
    margin-bottom: 3%;
}

}
    
@media screen and (orientation : landscape) and (min-width : 789px) {
	
   
#menucache,
#titrehome{
        display : none;
}
       
#haut{
    width: 90vw;
    margin-left: 4vw;
    height: 15vh;
    display: flex;
    justify-content: space-between;
}
    
    #centre{
      display: flex;    
    }
    
#titreline{ 
    width : 50%;
    padding-top : 2.5vh;
   /* margin-left: 20vw; */
}
    
#icones1,
#icones2 {
    visibility: visible;
    width : 20%;
    margin-top : 5vh;

}
    
#titreline h1{
    font-size : 3.5vw;
    }
        
#iconeshome {
    width: 100%;
    display: flex;
    justify-content: space-between;
    visibility: visible;
}
    
#iconeshome img {
    width : 75%;
    height : auto;
    margin-right: 1.8vw;
}

.boutonsubmit {
    font-size: 1.8vh;
    color: var(--couleur);
}

.menu_btn {
    display: none;
}

#titricone {
    visibility: hidden;
}

#icones1 img, #icones2 img {
    margin-left: 10%;
    width: 2vw;
}

#image {
    display : flex;
    border-radius: 1%;
    margin-top: 0%;
    height: 100%;
    margin: auto;
}

#legendimage {
    margin-top : 1.5vh;
}

#basdroitg {
    justify-self: start;
}

#basdroitd {
    justify-self: start;
}

#centredroit,
#legendimage p,
#centrebas {
    font-size: 1.1em;
}

#basdroitg img,
#basdroitd img {
    width: 1.3em;
}
    
#pagelinecentre {
    width: 75%;
    display: flex;
    justify-content: space-between;
    margin-left: 6vw;
    margin-top: 0vh;
}

#photoline {
    width: 40%;
}

#linetexte {
    width: 50%;
}
    
		
}

/* ***********************  Fin Lanscape ************************* */


/* ***********************  PORTRAIT ************************* */


@media screen and (orientation:portrait) {
    
    
h1 {
	font-size: 6.2vw;
}

h3 {
	font-size: 4vw;
}
	
#iconeshome {
    display: none;
}

#imghomeh {
    margin-top: 15.5%;
    z-index: 1;
}
    
#gauche {
    width: 100%;
}
    
#gauchecentre {
    margin-top: 12%;
    width : 100%;
    display : flex;
    justify-content: space-around;
}
  
#imghomeh img,
#gauchecentre img {
    width: 92%;
}
#titrehome h1 {
	font-size: 6.2vw;
}

#image {
    border-radius: 5px;
    width: 96%;
    justify-self: center;
    margin : auto;
}

#legendimage {
    margin : 3%;
}
	
#basdroitg, #basdroitd {
	justify-self: start;
}

#centrebas {
	justify-self: end;
}

#centredroit {
	justify-self: start;
}

	
#basdroitg img,
#basdroitd img {
	width: 1em;
}
    	
.titre {
	margin-left: 15%;
	border-bottom: 2px solid brown;
	font-size: 3vw;
	height: 6vh;
	background-color: lightgrey;
	padding-left : 10%;
	padding-bottom : 2%;
}
    
/* ********  Page Line ******************* */ 

    
#pagelinecentre {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 6vw;
    margin-top: 0vh;
}

#linetexte {
    width: 100%;
    margin-top : 0;
   
}
       
#linecentrehaut p, .paragraphe {
 font-size : 10.5px;       
}

#linecentrehaut{
 display : flex; 
    width : 98%;
    justify-content: space-between;
    
}

#linecentrehaut img {
    width: 35%;
    margin-right : 3%;
 margin-bottom : 3%;
    float : left;
}
    
#paragraphe1{
    width :100%;

    }


  
#imghomev {
     display: none;
 }

 #icones1,
 #icones2 {
     display: none;
 }

 #menucache,
 #boutons {
     display: flex;
 } 
    
/*  *************** Menu caché ****************** */

#menucache {
    display: flex;
    position: absolute;
    z-index: 0;
    top: 14.5vh;
    width: 84%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-left: 5%;
}

.menu {
    background-color: #eee;
    padding : 2%;
    margin : 1.5%;
    height: 8vh;
    border: 2px solid black;
    border-radius: 10px;
}
    
.menu a {
	color: black;
	text-decoration: none;
	font-family: 'Imprima', sans-serif;
	height: 3vh;
} 
    
.menu a img {
	height: 4vh;
	padding-left : 25%;
    margin : auto;
	padding-top : 2%;
}
    
.menu p {
    font-size: 4.5vw;
    margin: 0.5vh;
} 

#titreline {
    margin-left: 20vw;
    position: fixed;
    top: 4%;
}
     
    
/*  **************  Fin Menu caché ************ */
 
#haut{
 margin-bottom : 12vh;       
}    
    
#vignettes {
    width: 100%;
    margin-left: 5%;
}
    
#affiche1 img {
    border-radius: 5px;
    width: 12%;
    margin-right: 2%; 
} 
    
#souslesvignettes {
    display: flex;
    margin-top: 1.6vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
}
    
       
}

@media screen and (orientation : portrait) and (min-width : 600px) {

#imghomeh img, #gauchecentre img {
width : 84%;
}
    

    
}


@media screen and (orientation : portrait) and (min-width : 767px) {
		
h3 {
    font-size: 3.5vw;
    margin-bottom: 5%;
}

p {
    font-size: 2.5vw;
}

#icones1,
#icones2 {
    visibility: visible;
}

#basdroitg img,
#basdroitd img {
    width: 1.3em;
}

#menu {
    width: 27%;
}

.menu a {
    font-size: 2.5vw;
}

.menu a img {
    height: 2.5vh;
}
    
	
}