body {
        /* background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(images/fond.jpg) no-repeat center center fixed; */
        background: url(images/fond.jpg) no-repeat center center fixed;/* 255, 255, 255, 0.3 */
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
        color : #FFFFFF;
        a:link, a:visited, a:active, a:focus, a{
          color : #FFFFFF;
        }
}
@font-face {
    font-family : Cronde; 
    src: url(polices/Z003_MediumItalic.ttf);
}
.fixed-element-haut {
  position: fixed;
  font-family: Cronde;
  font-size: 3vw;
  text-shadow: 0.2em 0.2em 0.2em black;
  top: 0.5vw;
  left: 0.5vw;
  border: 0;
  padding: 0;
  z-index: 10;
}
/************ style pour affichage en paysage *************/
.titre {
  position: fixed;
  top: 0.5vw;
  left: 6vw;
  right: 6vw;
  width: auto;
  height: auto;
  text-align: center;
  font-family: Cronde;
  font-size: 2.5vw;
  text-shadow: 0.2em 0.2em 0.2em black;        
}
#table-form {
  width:95%;
}
#box {
  position: absolute;
  top: 2rem;
  left: 0;
  width:100vw;
  margin:0px;
  padding-top:2px;
  font-size:10px;
  /*font-family: serif;*/
  z-index: -100;
}
#monform {
  border-radius:2px;
  padding:10px 20px;
  box-shadow:0 0 15px;
  font-size:10px;
  font-weight:bold;
  width:70%;
  margin:30px 25px 50px 100px; /* Haut : 20px, Droite : 250px, Bas : 0px, Gauche : 35px */   
}
#test_nom {
  color:white;
}
label{
  font-size:20px;
}
input{
  width:100%;
  height:15px;
  margin-top:5px;
  margin-bottom: 10px;
  border:1px solid #999;
  border-radius:5px;
  padding:5px;
}
input[type=submit]{
  height:35px;
  background-color:#9f6e4d;
  border:1px solid white;
  font-size:18px;
  color:white;
}
textarea{
  width:100%;
  height:80px;
  margin-top:5px;
  border-radius:3px;
  padding:5px;
  resize:vertical;
  overflow:auto;
}
span{
  color:red
}
.etiquette {
  text-align:right;  
  vertical-align:top;
  width:20%;
  font-size: 10px;
  /*text-shadow: 0.5em 0.5em 0.5em black;*/
}
.button-input {
  height:35px;
}
/****** *******styles pour les messages des traitements ********************************************/
#container {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;	
	overflow:hidden;	
	display: flex;
  flex-direction: column;
}

#outer {
	margin:0px; 
	width:100%;
	height:100%;	
  cursor: wait;
}
#inner1 {
	margin:0px;
	height: 50%;
	width:100%;
	padding:0 0 0 0; /* haut | droit | bas | gauche */
	text-align:center;
	background:white;	
	background-color: rgba(255,255,255,0.2);
}
#inner2 {
	margin:0px;
	height: 50%;
	width:100%;
	padding:0 0 0 0; /* haut | droit | bas | gauche */
	text-align:center;
	background:white;	
	background-color: rgba(255,255,255,0.2);
}
#hpane, #bpane {  
	display:inline-block;		
	height: 100%;
	width:100%;	
	margin:0px;
	overflow:hidden;
	text-align:center;
	background-color: rgba(255,255,255,0.2);
}
table, td {
  height: 100%;
  min-height: 100%;
  margin: 0;
}
.table_msg {
  width:100%;   
}
.tr_msg {
  text-align:center;
}
.td_input {
  text-align:left;
  width:40%;
}
.td_msg {
  text-align:center;
  vertical-align : middle;
  width:auto;
  font-size: 4.2vw;
  color: brown;
  /*text-shadow: 0.3em 0.5em 0.2em black;*/ /* obligatoires : 1) horizontale, 2) verticale. facultatif : 3) rayon de flou et couleur */
}
.td_msg_mail {
  text-align:center;
  vertical-align : middle;
  width:auto;
  font-size: 4.2vw;
  color: brown;
}
.td_msg_mail_erreur {
  text-align:left;
  vertical-align : middle;
  width:auto;
  font-size: 2.2vw;
  color: brown;
}
.td_msg_retour  {
  text-align:center;
  vertical-align : top;
  font-size: 4.2vw;
  text-shadow: 0.3em 0.5em 0.2em black;
  a:link, a:visited, a:active, a:focus, a{
          color : brown;
  }
}
.link_infobulle {
  position: relative;  /*les .link_infobulle deviennent référents*/
  cursor: help;
  border-radius: 50%;
}
/* on génère un élément :after lors du survol et du focus :*/

.link_infobulle:hover:after,
.link_infobulle:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: 1.2vw; 
  left: 200%;
	transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #F0F0F0;
  color: #000;
  border-radius: 4px;
  font-size: 1.2vw;
}
.link_infobulle_haut {
  position: relative;  /*les .link_infobulle deviennent référents*/
  cursor: help;
  border-radius: 50%;
}
/* on génère un élément :after lors du survol et du focus :*/
.link_infobulle_haut:hover:after,
.link_infobulle_haut:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  bottom: 1.4vw; 
  /*left: 70%; */
	transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #F0F0F0;
  color: #000;
  border-radius: 1vw;
  font-size: 1.2vw;
}
#id-retour {
  text-shadow: 0.5em 0.5em 0.5em black;
}
#sect-infos {
   position: fixed;
   font-family: Cronde;
   font-size: 2vw;
   text-shadow: 0.5em 0.5em 0.5em black;
   text-align: center;
   bottom: 1vw;
   width: 100%;
   height: auto;
}
.successMessage{
    background-color: #7acc7d;
    border: #2b5a2d 1px solid;
    padding: 5px 9px;
    color: #262b26;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.4em;
}
/* Style pour le message d'erreur sous le champ input */
.errore {
  color: red;
  font-size: 1.5em;
  margin-top: 4px;
}
.erreurMessage{
    background-color: #e64141;
    border: #da1414 1px solid;
    padding: 5px 10px;
    color: #fdf7f7;
    border-radius: 4px;
    font-size: 1.8em;
}
.info{
    font-size: 1em;
    color: red; 
    letter-spacing: 2px;
    padding-left: 5px;
}
/********************* styles selon l'orientation de la page *************/
@media screen and (orientation: landscape) {
  .container {
    width:100%;      
  }
  #monform {
    float:left;
  }
  .errore {
    font-size: 1.3vw;
  }
}

@media screen and (orientation: portrait) {
  .container {
    width:80%;
  }  
  #box {   
    top: 5%;
    width:90%;
  }
  .titre {
    top: 2%;
    font-size: 5vw;    
  }
  label{
    font-size:12px;
  }
  .etiquette {
    font-size: 12px;
  }
  #monform {
    font-size:75%;
    margin:20px 10% 50px 10%; /* Haut : 20px, Droite : 250px, Bas : 0px, Gauche : 35px */ 
  }
  #sect-infos {
   font-size: 80%;
   bottom: 5%;
  }
  .errore {
    font-size: 1em;
  }
}