html {
         font-size: calc(1vw); 
      }
      body {
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(images/fond.jpg) no-repeat center center fixed; /* 255, 255, 255, 0.3 */
        -webkit-background-size: cover;
        -moz-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/CRONDERegular.ttf);*/
          font-family : Cronde;
          /*src: url(polices/Au_Bord_de_la_Seine.ttf);*/   
          src: url(polices/Z003_MediumItalic.ttf);
      }      

      .fixed-element-haut {
        position: fixed;
        font-family: Cronde;
        font-size: 4vw;
        text-shadow: 0.2em 0.2em 0.2em black;
        top: 0.5vw;
        left: 0.5vw;
        border: 0;
        padding: 0;
        z-index: 10;
      }
      .arrondie {
        /*-moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;*/
        -moz-border-radius:1.2vw;
        -webkit-border-radius:1.2vw;
        border-radius:1.2vw;
      }
      .construction {
        position: fixed;
        top: 3.5vw;
        left: 0;
        width: auto;
        height: auto;
        text-align: center;
        font-size: 3vw;
        color: red;
        text-shadow: 0.2em 0.2em 0.2em black;        
      }      
      .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;    
      }
      .contenu {
        position: fixed;
        top: 5vw;
        left: 0%;
        height: 75%;
        width: 99%;
        overflow:auto;
        font-size: 1vw;
      }     
      #sect1 {
         position: fixed;
         top: 5vw;
         font-family: Cronde;  
         text-shadow: 0.3em 0.3em 0.3em black;
         left: 6vw;
         right: 6vw;
         width: auto;
         height: auto;
         text-align: center;
         font-size: 3.5vw;
      }
      #sect1legal {
         position: fixed;
         top: 8vw;
         font-family: Cronde;  
         text-shadow: 0.3em 0.3em 0.3em black;
         left: 6vw;
         right: 6vw;
         width: auto;
         height: auto;
         text-align: center;
         font-size: 2vw;
      }      
      #sect2 {
        font-size: 2vw;
      }
      #sect2legal {
        font-size: 2vw;
      }      
      #sect3 {
         position: fixed; 
         font-size: 1vw;
         text-align: left;
         top: 45%; 
         right: 15%;
         padding-left: 2vw;
         padding-right: 2vw;
         text-indent: 2vw;
      }
      
      #sect-infos {
         position: fixed;
         font-size: 2vw;
         font-family: Cronde;
         text-shadow: 0.5em 0.5em 0.5em black;
         text-align: center;
         bottom: 1vw;
         width: 100%;
         height: auto;
      }  
.link_infobulle {
  position: relative;  /*les .link_infobulle deviennent référents*/
  cursor: help;
  border-radius: 50%;
  z-index: 1;
  text-decoration: none;
}
/* 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: 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: 4px;
  font-size: 2.5vw;  
}

.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;
}

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}
tr {
    height: 1.5vw;
    vertical-align: top;
    font-size: 1vw;
}
div {
   -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}
#contain {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;	
	overflow:hidden;
}
#outer {
  top: -10px;
	margin:0px; 
	width:100%;
	height:100%;
}
#inner1 {
  position: fixed;
	margin:0px;
	height: 20%;
	width:100%;
	padding:0 0 0 0; /* haut | droit | bas | gauche */
	text-align:center;
}
#inner2 {
  position: fixed;
	margin:0px;
  top: 35%;
	height: 50%;
	width:100%;
	padding:0 0 0 0; /* haut | droit | bas | gauche */
	text-align:center;
	font-family: Cronde;
}
#inner2legal {
  position: fixed;
	margin:0px;
  top: 70%;
	height: 50%;
	width:100%;
	padding:0 0 0 0; /* haut | droit | bas | gauche */
	text-align:center;
	font-family: Cronde;
}
#hpane, #bpane {  
	display:inline-block;		
	height: 100%;
	width:100%;	
	margin:0px;
	overflow:hidden;
	text-align:center;
	font-family: Cronde;
}
#pane3 {  
  top: 60%;
	display:inline-block;		
	height: 100%;
	width:100%;	
	margin:0px;
	overflow:hidden;
	text-align:center;
	font-family: Cronde;
}
table, td {
  height: auto; /*100%;*/
  min-height: 40px;
  margin: 0;
  text-align: left;
  vertical-align : middle;  
}
.table_msg {
  width:100%;   
}
.tr_msg {
  /*line-height: 100%;
  min-height: 100%;*/
}
.td_msg  {
  text-align:center;
  vertical-align : middle;
}
#table_sect2 {
  width: 100%;
  min-width: 100%;  
  font-size: 2.5vw;
}
#table_sect3 {
  width: 100%;
  min-width: 100%;  
  font-size: 2vw;
}
.sect_2_td1 {
  vertical-align: top;
  width: 5%;
  font-size: 2.5vw;
}
.sect_2_td2 {
  vertical-align: top;
  width: 35%;
  font-size: 2.5vw;
}
.sect_3_td2 {
  vertical-align: top;
  width: 35%;
  font-size: 2.5vw;
}
.td_space {
  width: 10%;
}
.td_reste {
  width: auto;
}
.cours {
  text-decoration: underline;
  text-decoration-color: white;
  text-decoration-thickness: 2px;
  font-size: 3vw;
  line-height: 4.5vw;
}
.souligne {
  text-decoration: underline;
  text-decoration-color: white;
  text-decoration-thickness: 2px;
  font-size: 2.5vw;
}
.lieu {
  font-size: 3vw;
  line-height: 2.2vw;
}
/* pour tester la mise en forme 
table, tr, td {
  border:1px solid black;
} 
*/

        .container {
            display: flex;
            flex-direction: column;
        }
 
        @media screen and (orientation: landscape) {
            .container {
                flex-direction: row;
            }
 
            .column {
                width: 100%;
            }
        }
        
        @media screen and (orientation: portrait) {
            .container {
                flex-direction: column;
                top: 35%;
            }
            .column {
                height: 100%;
                font-size: 5vw;                
            }            
            .fixed-element-haut {
              font-size: 8vw;
            }
            .construction {
              font-size: 6vw;
              top: 8vw;
            }
            .titre {
              top: 10vw;
              font-size: 5vw;
            }           
            #sect1 {
              top: 25vw;
              font-size: 8vw;
            }
            #sect1legal {
              top: 25vw;
              font-size: 4vw;
            }
            #inner1 {
              height: 40%;
            }
            #inner2 {
              top: 35%;
            }
            #inner1legal {
              height: 40%;
            }
            #inner2legal {
              top: 60;
            }
            #sect2 {
              padding-top: 5vw;  
              font-size: 5vw;
            }
            #sect2legal {
              padding-top: 5vw;  
              font-size: 4vw;
            }
            #bpane {
              font-size: 3vw;
            }
            .table, tr, td {
              height: 100%;
              min-height: 100%;
              font-size: 6vw;
            }            
            #sect-infos {
              font-size: 3vw;
              bottom: 3vw;
            }
            .cours {
              font-size: 5vw;
              line-height: 2.5vw;
            }
            .souligne {
              font-size: 5vw;
            }
            .sect_2_td1 {
              font-size: 4.8vw;
            }
            .sect_2_td2 {
              font-size: 4.8vw;
              width: 35%;
              line-height: auto;
            }
            .sect_3_td2 {
              vertical-align: top;
              width: 25%;
              font-size: 4.8vw;
            }
            .lieu {
              font-size: 5vw;
              line-height: 2.2vw;
            }
            .td_space {
              width: 5%;
            }
        }