@charset "utf-8";
* {
  box-sizing: border-box;
}

/*@-moz-document url-prefix() {
    #explique {font-size-adjust: 0.4;}
}*/

html {
	height:100%; display: flex;
}

body {
	height:100%;
	
	width:100%;
  	font-family:Verdana, sans-serif;
  	overflow-x: hidden;
}
			
#container {
	 height:53%;			   
	 margin-top:20px;
	 position:relative;
} 
			 			 
/* Bannière*/

#leHaut {
	 display: flex;
	 height: 280px;
  	 background-color: white;
  	 border: 2px solid red;
  	 padding: 10px;
  	 margin-bottom: inherit;
}

.gauche {
	background-color:black;
    width:40%;    
  	text-align:center;
  	padding-top:5%; 
  	 	
}

.gauche h1 {
 	color: white;
 	font-size:2.5vw;
 	
}

 .gauche h2 {
 	color: red;
 	max-font-size:2vw;
}

.droite {
    width:60%;
    background-image: url("lettresCrayon751B.jpg");
    background-repeat: no-repeat;
    background-position: center center;  
}

/* Fin Bannière*/

/* Titre du menu*/
#invite{
	background-color:red;	
	border: 1px solid black;
	color:black;
	
	
	font-size: 1rem;
	padding-top: 8px;
	margin-bottom: 12px;
	margin-left: 10%;
	margin-top: -8px;
	width: 80%;
	height:40px;
}

#invite span {
	
	/*ne fonctionne pas, à supprimer:
	font-family: Monaco; */
  font-size: 1.3rem;
}
/* Fin Titre du menu*/

/* Menu cliquable*/								
  
 .menu {
 	font-family: Arial;
	display: flex;
	flex-direction: column;
	margin: 25px;
	text-align: center;
    float:left;
    width:20%;
    height:auto;
}

.menu a {
	font-family: Arial, sans-serif;
		font-size: 1em;
	  background:linear-gradient(to bottom, #6C6B76 5%, #E6E0E0 100%);
	  background-color:#6C6B76;
	  border-radius: 20px;
	  border: 2px solid gray;
	  padding-top: 10px;
	  margin-top:10px;
	  display:block;
	  width:100%;
	  height:45px;
	  color:black;
	  font-weight: bold;
	  text-decoration: none;
}

.menu a:hover {
	  background:linear-gradient(to bottom, #E6E0E0 5%, #6C6B76 100%);
	  background-color:#E6E0E0;
      color: red;  
      font-weight: bold;    
}

.menu a:active {
	position:relative;
	top: 3px;		
}

/* Fin Menu cliquable*/


/* Titre du champ d'affichage*/
#enTeteChampDroits {
    float:left;    
    width:30%;
    height:auto;
   
    margin-left: 5px;
   
}
			
#enTete {
	border: 1px solid grey;
	background-color:#545657;
	color: white;
  	width:100%;
  	height:50px;
  	padding-top: 12px;
  	text-align: center;
  	font-size: 100%;  
}
/* Fin de Titre du champ d'affichage*/

/* Champ d'affichage du poème*/


  
#leChamp {
	font-family: sans-serif;
	font-size: 1em;/* aucun effet dans Firefox*/
	resize:none;
	overflow: hidden;
    color: #e31326;
    line-height: 16pt;
	vertical-align: middle;/* aucun effet*/
	border: 2px solid #aa0000;
	background-color: #ffffff;
	width:100%;
	height:280px;
	padding-left: 40px;	/* aucun effet vérifier*/
	/* ne fonctionnne pas: à supprimer
	padding-top: -4px; */
}

/* Fin du champ d'affichage*/

/*Bouton pour afficher le poème d'Éluard, sa visibilité est gérée par Javascript*/


#boutonPoeme {
     float:left;
 	 background-image: url('oiseauDecoup.jpg');
 	 background-repeat: no-repeat;
 	 background-position: center bottom;
 	 text-align: center;
     width:25%;
     margin-top: 12px;
     height: auto;
     margin-left: 12px;
	    
}
			
#bouton { 
	visibility:hidden;
  	background:linear-gradient(to bottom, #ededed 5%, #666066 100%);
	background-color:#ededed;
	border-radius:11px;
	border:1px dotted gray;
	display:inline-block;
	cursor:pointer;
	color:#f0edf0;
	font-family:Verdana;
	font-size:16px;
	padding:8px 24px;	
	text-decoration:none;
	text-shadow:0px 1px 0px #adaaad;
	   
}

#bouton:hover { 
	background:linear-gradient(to bottom, #666066 5%, #ededed 100%);
	background-color:#666066;
  	 	  
}
#bouton:active {
	position:relative;
	top:1px;
}

    
		
#lesMoutons {
		
		margin: 10px auto 0 10px;
		font-family: Optima, sans-serif;	   
		background-color:#e5e5e5;
	    width: 100%;
	    height:310px;
		line-height: 20px;		
	    border-radius:15px;
	    padding:5px 0 0 20px;
	    text-align: left;
	    margin-left: 7px;
}
			   	
	
	#explique {
	float:right;
	/*position:absolute;*/
	left: 83%;
	border: 1.5px solid darkgray; 
	border-radius: 10px;
	margin-top: 12px;
	margin-right: 20px;
	width: 16%;
	height:auto;
	padding: 10px 5px 0 5px;
	overflow: auto;
	font-size: .8em;
	font-size-adjust: .53;
	color: darkslateblue;
	
}

#myBtn {
    color: brown;
	border:none;
	font-style: italic;
	cursor: pointer;
	font-size: 1em;
    margin-top: 5px;
  }
	   
	#lePied {
		display:block;
		color:darkslateblue;
		position:fixed;
		top:85%;
		background-color:#F5F5E6;
		border:1.5px solid darkgray;
		text-align:center;
		padding-top:1.5%;
		margin-left:2px;
		margin-right:2px;
		margin-bottom:inherit;
		width:100%;	
	    height:20%;
	    font-family: sans-serif;
	    font-size-adjust:.55;
	    line-height:20px;
	   }
	   
	   
#lePied p {
		
	   }
	   
	   	
	/* Fenêtre pop-up d'explication*/
/* The Modal (background) */	
 .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  
 
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	overflow:auto;
  background-color: #fefefe;
 margin-left: 45%;
  padding: 8px;
  border: 2px solid black;
  border-radius: 10px; 
 color: darkslateblue;
  width: 40%;
  height: 80%;
  font-size-adjust: .43;
  font-size: 1rem;
  font-family: sans-serif, Candara;
	
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}   
/* fin de Fenêtre pop-up d'explication*/
	   

/*  Pour Media screen*/ /* Only ou pas à vérifier /* Only ou pas à vérifier */
/* Only ou pas à vérifier */

/* Pour IPHONE */
/*ancien:  @media screen and (max-width: 700px)*/

/*6 juin: @media only screen and (max-width: 700px) */

@media only screen and (max-width: 700px)
	   {
	   	
	   	
 #leHaut {
  	  width: 100%;
  	  height:140px;
  	  padding: 3px;
  	  
  }
 .gauche {
  	padding-top:15px;
  	
  	
  	   	  
  }
  .gauche h1 {
  	font-size:4vw;
  	
  }
  
  .gauche h2 {
  	font-size:4vw;
  	
  }

  
  #main {
    flex-direction: row;
  }
  
  #invite {
	  padding: 3px;
	  font-family: "Arial Narrow", sans-serif;
      font-size: .9em;
				 
  }
			 
   #invite span {
		font-family: "Arial", serif;
		font-weight: bold; 
		font-size:1rem;
				 
	}
  
  .menu {
  	  width: 30%;
  	  margin-left:2px;
  	  
  }
  
   .menu a {
       
       font-weight: normal;
       font-family: "Arial Narrow", sans-serif;
       font-size:.8em;     
}

 #enTeteChampDroits {
  	  width: 63%;
  	  margin-left:-12px; 	  
  }
  
  #enTete {
	
  	height:50px;
  	padding-top: 6px;
  	text-align: center;
   
}

#leChamp {
    overflow-x: auto;
  	font-family: Open Sans, sans-serif;
    font-weight:bold;
  	font-size: 14px;
    margin-top: -16px;
    line-height: 18px;
 }

#boutonPoeme, #lesMoutons {
  	background-image: none;
    display:none;
  }
  	 
#explique {
  		position:relative;
  		float:left;
  		left:5%;
  		top: 1%;  		
        width:95%;
        height:auto;
        padding: 20px 0 10px 15px;
  }
  
#lePied {
  	  /*top: 5%;
  	  position:relative;
  	  float:left;*/
  	  top:125%;
	height:13%;
  	padding: 5px;
  	margin-bottom: 10px;
  	 line-height: 14px;
  	 text-align: center;
  	 
  	 font-family: sans-serif;
  font-size-adjust: .38;
  line-height: 12px;

  }
  

    
}

/* Pour iPad mettre explique en bas, garder le div bouton poème, ajouter vue en hauteur? 
iPad [portrait + landscape]*/
 
@media only screen and (min-width: 702px)
and (max-width: 1024px)

{
#explique {
  		position:relative;
  		float:left;
  		left:5%;
  		top: 1%;  		
        width:95%;
        height:auto;
        padding: 20px 0 10px 15px;
    }
    
    #leHaut {
  	  width: 100%;
  	  height:160px;
  	  padding: 3px;
  	  
  }
 .gauche {
  	padding-top:15px;
  	   	  
  }
  
   #main {
    flex-direction: row;
  }
  
   #invite {
	  padding-left: 0;
      padding-right: 0;
	  font-family: "Arial Narrow", sans-serif;
      font-size: .9em;
				 
  }
			 
   #invite span {
		font-family: "Arial", serif;
		font-weight: bold; 
		font-size:2rem;
				 
	}
  
  .menu {
  	  width: 20%;
  	  margin-left:2px;
  	  
  }
  
   .menu a {
       
       font-weight: normal;
       font-family: "Arial Narrow", sans-serif;
       font-size:.8em;     
}

 #enTeteChampDroits {
  	  width: 37%;  
  	 margin-left: 1px;
  	    	  
  }
 

#leChamp{
  	  overflow: auto;
  	 font-family: Arial, sans-serif;
  	  font-size: 15px;
  	  line-height:15px;
  	  font-weight: bold;
  }

#boutonPoeme  {
     width:35%;     
     margin-left: 22px;  
	    
  } 

#lesMoutons {
		
	padding-left: 7px;	     
	font-family: Candara, sans-serif;
  font-size:12px;
	    

    }
    #lePied {
  	  top: 800px;
  	  position:absolute;
  	  float:left;
  	  height: 15%;
  	  line-height: 14px;
  	  text-align: center;	 
      font-family: sans-serif;
      font-size-adjust: .45;
    }
    
}