html {
  font-family: Open Sans, Verdana, Helvetica, sans-serif;
  background-color: rgb(205, 230, 255);
  float: left;
  font-size: 100%; /* Nécessaire sur le html */
/*  width:100%; /* Force la page en pleine largeur */
/*  max-width: 100%;
  overflow-x: hidden;*/
}

A {text-decoration: none;} /* Supprime le soulignement de tous les liens de la page */

/* Taille normale des titres sur un ordinateur */
/* Si on utilise un smartphone, les titres sont réduits */
h1 { font-size: 2em; } @media only screen and (max-width: 450px) { h1 { font-size: 1.8em; } }
h2 { font-size: 1.6em } @media (max-width: 450px) { h2.responsive  { font-size: 1.4em; } }
h3 { font-size: 1.5em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1em; }
h6 { font-size: .80em; }

#fondecran {
 /* Fixe l'image en haut à gauche de la page */
 position: fixed; 
 top: 0; 
 left: 0; 
 /* Préserve le ratio de l'image */
 min-width: 100%;
 min-height: 100%;
}

img.fondecran {
 /* On met en place le fond d'écran */
 min-height: 100%;
 min-width: 1000px;
 /* On indique un redimensionnement proportionnel */
 width: 100%;
 height: auto;
 /* L'image est positionnée en haut à gauche */
 position: fixed;
 top: 0;
 left: 0;
}
@media screen and (max-width: 1000px) { /* Le traitement est ici spécifique à l'image */
   img.fondecran {
   left: 50%;
   margin-left: -500px; /* 50% */
   }
}

body {
  margin: 10px;
  padding: 0px;
  font-size: 1.25em; 
/*  width:100%; /* Force la page en pleine largeur */
  max-width: 100%;
  overflow-x: hidden;*/
}
@media only screen and (max-width: 450px) { body { font-size: 1.4em; } }

/* Style the header */
header {
  background-color: Black;
  height: 60px;
  line-height: 60px; /* égale au height précédent */
  font-size: 1.8em;
  text-align: center;
  color: yellow;
  margin: 0px;
  padding: 0px;
  border: 0px;
  max-width: 100%;
/*  width: 100%;*/
}
@media only screen and (max-width: 450px) { header { font-size: 1.6em; } }
@media only screen and (max-width: 380px) { header { font-size: 1.5em; } }

footer {
  background-color: Black;
  height: 70px;
  line-height: 70px; /* égale au height précédent */
  text-align: center;
  color: yellow;
/*  width: 100%;*/
  max-width: 100%;
  font-size: 1.5em;
}

img {
  max-width: 100%;
/*  display: block;*/
}

p {
/*  color: none;*/
  font-size: 1.25em;
}
@media only screen and (max-width: 450px) { p { font-size: 1.4em; } }
@media only screen and (max-width: 300px) { p { font-size: 1.6em; } }

div {
  color: none;
  font-size: 1.25em;
}
@media only screen and (max-width: 450px) { div { font-size: 1.4em; } }
@media only screen and (max-width: 300px) { div { font-size: 1.6em; } }

/*code {
  font-family: monospace;
  font-size: 1.2em;
  background-color: rgb(250, 250, 250);
  width: 100%;
}
*/
pre, code, div.code {
	
/*  
  font-family: Courier, Courier New, Liberation Mono, DejaVu Sans Mono, monospace;
  JetBrains Mono, Consolas, FiraCode, DejaVu Sans Mono, Inconsolata, Andale Mono, Droid Sans Mono, MonoLisa
*/
  font-family: monospace; 
  font-size: 1.2em;
  font-weight: bold;
  width: auto;
/*  overflow: hidden;*/
/*  white-space: nowrap;  Les lignes multiples n'apparaissent pas*/
}

html>body pre, html>body code, html>body div.code {
  overflow: auto;
  width: 100%;
}

mark {
  background-color: blue;
  color: yellow;
}

surligne{
  background-color: yellow;
}

article {
  float: left;
  padding: 20px;
  width: 100%;
  background-color: #f1f1f1;
*  height: 550px; /* only for demonstration, should be removed */
}

input {
    display: table-cell;
    vertical-align: bottom;
}

#bouton {
   background: url(icones/ImgHome/_vide.jpg) no-repeat top left;
   position:relative;
   width: 160;
   height: 45;
   z-index:1;
}

#contenu {
   position:relative;
   top:0;
   left:0;
   z-index:10;
}

#headalign {
   margin: 5px 5px 0px 0px;
}

#footalign {
	
}

.container {
  display: inline-block;
  position: relative;
  margin: 0 auto;
}

.container .text {
    z-index: 1;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 30%;
    color: darkred;
    width: 85%;
}

table.Mars {
width:100%;
border-width:0px;
border-style:solid;
}

table.Mars td, table.Mars th {
border-width:0px;
border-style:solid;
text-align: left;
font-family: Open Sans;
color: #0000AA;
font-weight : 0.7em;
}

div.invisible {
  font-size: 1vw;
  text-align: center;
  color: rgb(205, 230, 255);
  width: 100%;
}

div.center {
  margin: auto;
  text-align: center;
}

table {
  border-collapse: collapse;
}

table, th, td {
  font-size: 1.0em;
  text-align: left;
}

/* table, th, td {
  font-size: 1.0em;
  border: 0px solid black;
}*/

.contours {
  border: 1px solid black;
}

div.bande {
  margin:auto;
  background-color: rgb(250, 250, 250);
  text-align: center;
  color: yellow;
  padding: 2px;
  width: 100%;
  right: 0;
}

div.cadre {
  margin:auto;
  background-color: Black;
  text-align: center;
  color: yellow;
  padding: 0px;
  height: 60px;
  width: 100%
}

div.gallery {
  float: left;
  margin: 20px;
  border: 0px solid #ccc;
  width: 240px;
}

div.gallery:hover {
  border: 0px solid #777;
}

div.gallery img {
  width: 100%;
  height: 160;
}

div.award {
  margin: 40;
  border: 0px solid #ccc;
  text-align: center;
  width: 240px;
}

div.award:hover {
  border: 0px solid #777;
}

div.award img {
  width: 100%;
  height: 160px;
}

div.desc {
  padding: 4px;
  text-align: center;
  font-size: 1.25em;
}

* {
  box-sizing: border-box;
}

div.3em {
  margin: auto;
  text-align: center;
  font-size: 3.0em; 
}

.img-sensible { max-width:250px; }

.twAudessus { 
  /* Le trame de fond */
  width: 80%; 
  height: 80%;
  position: fixed; 
  z-index: 100000; 
  top: 0; 
  left: 0; 
  display: none; 
  background: rgba(0,0,0,0.7); 
  /*-webkit-transition: opacity 200ms ease-in; 
  -moz-transition: opacity 200ms ease-in; 
  transition: opacity 200ms ease-in; */
}

.twAudessus a {
  /* Le truc pour centrer l’image */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }

.twAudessus img {
  /* Le contour de l’image */
  max-width:480px;
  padding: 10px;
 /* -webkit-border-radius: 10px;
  -moz-border-radius: 10px;*/
  background: #ffffff;
}

.twAudessus:target { 
  /* Affichage de l’image */
  display: table;
   -webkit-transition: width 2s;
    transition: width 2s; 
}

.responsive {
  padding: 0 40px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 1100px) {
  .responsive {
    width: 49.99999%;
    margin: 40px 0;
  }
}

@media only screen and (max-width: 550px) {
  .responsive {
    width: 100%;
  }
}

.mobile {
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 1100px) {
  .mobile {
    width: 49.99999%;
  }
}

@media only screen and (max-width: 550px) {
  .mobile {
    width: 100%;
  }
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

@media screen and (max-width: 1600px){.twAudessus img { max-width:1000px; }} 
@media screen and (max-width: 1024px){.twAudessus img { max-width:700px; }} 
@media screen and (max-width: 800px){.twAudessus img { max-width:500px; }} 
@media screen and (max-width: 600px){.twAudessus img { max-width:400px; }} 
@media screen and (max-width: 500px){.twAudessus img { max-width:250px; }}

@viewport { 
    width: device-width; 
    zoom: 1; 
}

/* .link { color: #0000FF; }  CSS link color (jaune) */
/* .link:hover { color: #00FF00; }  CSS link hover (green) */

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}