* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
  height: 100%;
  font-family: optima_stdblack;
}
body { 
   opacity: 0.2;
   transition: opacity 2.5s;
}
@font-face {
    font-family: 'optima_stdblack';
    src: url('polices/optimaltstd-black-webfont.woff2') format('woff2'),
         url('polices/optimaltstd-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.page{
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
    height: 100vh;
	min-height: 650px;
    /*background-image: url("accueil/accueilvide.jpg");*/
    background-repeat: no-repeat;

    /* Toujours coller l’image en haut-gauche */
    background-position: top left;

    /* Toujours remplir la page */
    background-size: cover;

    /* Ce mode tronque uniquement la droite et le bas */
    background-attachment: fixed; /* optionnel */
	h1{
		color: #013064;
		font-size: 5.5em;
		text-shadow: 3px 3px 4px white;
		min-width: 820px;
		padding: 0 20px;
		right: 20px;
		position: absolute;
		overflow: hidden;
		width: auto;
		text-align: right;
	}
}

.droite{
	border-radius: 50px;
  min-width: 440px;
  height: 80%;
  padding: 20px;
  background-color: rgba(255,255,255,0.5);
  right: 40px;
  position: absolute;
  top: max(100px + 5%, 10%);
  bottom: max(100px + 5%, 10%);
  width: 50%;
  overflow: hidden;
  min-height: 500px;
  transition: width 0.5s ease, box-shadow 0.5s ease;
	a, a:link, a:visited, a:active{
		  text-decoration: none;
		  color: #013064;
		  cursor: grab;
	}
	a:hover{
		text-shadow: 2px 2px 4px red;
	}
  .top{
	  text-align:left;
	  width: 100%;
	  height:10%;
	  min-height:50px;
	  padding:5px;
	  display: flex;
	  h2{
		  color: #013064;
			text-shadow: 3px 3px 4px white;
		  font-size: 26px;
		  text-align: left;
		  font-weight: bold;
		  font-family: optima_stdblack;
		  padding: 0 10px;
	  }
	  
  }
  .list_menu{
	  
	  h3{
		display: block;
		padding: 20px;
		text-align: right;
		font-size: 3em;
		font-style: italic;
	  }
	  
  }
  .contenu{
	  text-align:center;
	  width: 100%;
	  height: calc(90% - 40px) ;
	  padding:5%;
	  overflow-y: hidden;
	  overflow-x: auto;
	  display: inline-flex;
	    cursor: -webkit-zoom-in;
   cursor: zoom-in;
	  img{
		  height:100%;
		  padding: 0 10px;
	  }
  }
  .texte_contenu{
		text-align: left;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		display: block;
		height: 450px;
		padding-bottom: 100px;
  }
  .nav{
	  text-align:center;
	  width: 100%;
	  height:40px;
	  font-size: x-large;
	  overflow: hidden;
		display: block ruby;
		margin-top: 1px;
	  .bouton{
		  padding: 0 20px;
			color: #013064;
			font-weight: bold;
			vertical-align: middle;
			font-size: 40px;
			cursor: grab;
		}
		.bouton:hover{
			text-shadow: 2px 2px 4px red;
		}
	 }
}
.droite.mini{
	 width: 35%;
	 min-width: 220px;
 }
.droite.big{
	width: calc( 100% - 75px);
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
	.page{
		h1{
			font-size: 2em;
		}
	}
    .droite{
	width: 90%;
	margin: 0 5%;
	top: 70px;
	min-width: 100px;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
	left: 0;
		.top{
			h2{
				font-size: 0.8em;
				padding: 0 2px;
			}
		}
	}
	.droite.big{
		width: 90%;
	}
	.droite.mini{
	 width: 90%;
	 min-width: 220px;
	}
	.droite{.list_menu{h3{
		text-align: center;
		font-size: 2em;
		padding:10px;}}}
 
}