/* Page */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 100%; /* Évite un bug d'IE 6-7. */  
}


/* valable pour tous les écrans */
body {
  background-color: #ffffff;
  color: #000000;  
  font-family: 'Courier New', Courier, monospace;
  /*font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;*/
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-decoration: none;
}

/* valable pour tous les écrans inférieurs à 1200px en largeur*/
@media screen and (max-width:1200px){
body {
  font-size: 24px;
  line-height: 36px;
}
}



/* Titres */
h4 { 
  margin: 1em 0 0.5em 0;
  font-weight: normal;
  font-style: normal;
}

h3 {
  margin: 0 0 0 0;
  font-size: 1.5em;
  font-weight: normal;
}

hr {
  height: 1px;
  margin: 0;
  padding: 0;
  color: black;
  background-color: black;
  border: 0;
}

/* Listes */
ul {
  list-style-type: square;
  list-style-position: inside;
  padding:0;
  margin:0;
}

li {
  padding:0;
  margin:0;
}


/* Liens */
a:link    { color:#000000; background-color:#ffffff; outline: none; text-decoration:none; font-weight: bold;} 
a:visited { color:#000000; background-color:#ffffff; outline: none; text-decoration:none; }
a:hover   { color:#ffffff; background-color:#000000; outline: none; text-decoration:none; }
a:focus   { color:#000000; background-color:#ffffff; outline: none; text-decoration:none; }
a:active  { color:#000000; background-color:#ffffff; outline: none; text-decoration:none; }

/* Pas de bordure autour des images dans les liens */
a img { 
  border: 0;
  background-color: #ffffff;
}

.quitter {
    width: 18px;
    padding-right: 5%;
    float: right;
    
}

/* -------------------------------------------------------------------*/
/*   TITRE                                                            */
/* -------------------------------------------------------------------*/

#titre {
  width: 90%;
  margin: 0em auto 0em auto;
  padding: 5.7em 0em 0em 0em;
  text-align: center;
}

/* -------------------------------------------------------------------*/
/*   NAVIGATION                                                       */
/* -------------------------------------------------------------------*/

#navigation {
  width: 90%;
  margin: 0em auto 0em auto;
  padding: 2em 0em 2em 0em;
  text-align: right;
}

#navigation-menu {
  width: 90%;
  margin: 0em auto 0em auto;
  padding: 2em 0em 2em 0em;
  text-align: center;
  list-style-type: none;
  font-family: 'Courier New', Courier, monospace;
}

#navigation-menu li {
  display: inline-block;
}

/* -------------------------------------------------------------------*/
/*   Pour la galerie de photos et de vidéos                           */
/* -------------------------------------------------------------------*/

.cadre {
    max-width: 1024px;
    width: 60%;
    height: auto;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 36px;
    margin-bottom: 36px;    
}

/* -------------------------------------------------------------------*/
/*   Pour les images                                                  */
/* -------------------------------------------------------------------*/

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* -------------------------------------------------------------------*/
/*   Pour les vidéos                                                  */
/* -------------------------------------------------------------------*/

video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.player {
    border-radius: 0px;
}

/* -------------------------------------------------------------------*/
/*   Pour les audios                                                  */
/* -------------------------------------------------------------------*/

audio {
  max-width: 100%;
  width: 1024px;
}

/* -------------------------------------------------------------------*/
/*   index.htm                                                        */
/* -------------------------------------------------------------------*/

#vignettes
{
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
}


#vignettes li
{
  width: 193px; 
  height: 193px;
  border-width: 0px;
  background-position: center;
  margin: 3px;
  margin-bottom: 6px;
  margin-top: 0px;
  list-style-type: none; 
  text-align: left;
  line-height:14px;
  font-size: 12px;
}

@media screen and (max-width:1200px){
#vignettes li
{
  line-height: 10px;
  font-size: 8px;
}
}

/*--------------------------------------------------------------------*/



/* -------------------------------------------------------------------*/
/*   PIED DE PAGE                                                     */
/* -------------------------------------------------------------------*/

#footer {
  margin: 0em;
  padding: 2em;
}

#footer p {
  margin: 0em;
  padding: 0em;
}

.contenu-1024 {
  max-width: 1024px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}

.contenu-800 {
  max-width: 800px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}

.contenu-768 {
  max-width: 768px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}

.contenu-640 {
  max-width: 640px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}

.contenu-512 {
  max-width: 512px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}

.contenu-510 {
  max-width: 510px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}

.contenu-500 {
  max-width: 500px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}

.contenu-400 {
  max-width: 400px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}

.contenu-382 {
  max-width: 382px;
  width: 90%;
  margin: 0em auto 0em auto;
  text-align: justify;
}