@font-face {
    font-family: classica;  
    src: url(polices/classica.ttf);  
    src: url(polices/classica.woff') format('woff'),
    font-weight: normal;  
}

@font-face {
    font-family: celtica;  
    src: url(polices/celtica.ttf);  
    src: url(polices/celtica.woff') format('woff'),
    font-weight: normal;  
}



body { margin: 0; padding: 0; background-color: #eee; font-family: classica; font-size: 1em;}





.wrapper1 { margin: 0 auto; padding: 0; width: 100%; max-width: 1200px; background-color: #000000; background-image: url('bgtop.jpg'); background-attachment: fixed; background-size: cover; }
@media screen and (min-width: 838px) {  .wrapper1 { height: 500px; } }
@media screen and (max-width: 838px) {  .wrapper1 { height: auto;} }

.wrapper2 { margin: 0 auto; padding: 0; width: 100%; max-width: 1200px; background-color: transparent;}
.wrapper3 { margin: 0 auto; padding: 0; width: 100%; max-width: 1200px; background-color: transparent;}
.header { display: block; margin: 0; padding: 0;}

.footer { margin: 0 auto; padding: 0; background-color: #000; color: #fff; font-size: 90%; }
.footer a { color: #eee; font-weight: bold; }
.footer p { color: #fff; text-align: center; }

h1, h2 { font-family: celtica; color: #666666; margin: 0; }
h1 { text-transform: uppercase; font-size: 2.2em; padding: 20px 20px 10px 20px; }
h2 { font-size: 1.4em; padding: 20px 20px 0 20px; }

p { margin: 0; padding: 10px 20px; font-size: 1em; color: #333; text-align: justify; }
a.image { text-decoration: none; }
li { list-style-type: disc; line-height: 1.4em;}
li.arrow {list-style-image: url('li.png'); padding-left: 8px;}

/*slider images */
* { box-sizing: border-box; }
.mySlides { display: none; }
.slideshow-container { max-width: 692px; position: relative; margin: auto; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 26px 16px; margin-top: -27px; color: white; font-weight: bold; font-size: 28px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(0, 0, 0, 0.3); }
.next { right: 0; border-radius: 3px 0 0 3px; } /*bouton next à droite*/
      /* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); color: white; }


.menu { margin: 0 auto; padding: 0; width: 96%; max-width: 1000px; height: 50px; background-color: transparent; text-align: center;}


@media screen and (min-width: 1000px) { 



figure { margin: 10px 10px 10px 20px; padding: 10px; background-color: #eeeeee; border-radius: 20px; width: 100%; max-width: 42%; display: inline-block; }
.audio { display: inline-block; padding: 10px 0 0 0; margin: 0; width: 45%; text-align: center; }
.legend { font-size: 90%; font-style: italic; text-align: center; }

.container { margin: 0 auto; padding: 20px 40px; background-color: #fff;}

}

@media screen and (max-width: 1000px) { 


figure { margin: 10px; padding: 10px; background-color: #eeeeee; border-radius: 20px;}
.audio { display: inline-block; padding: 0 0 20px 0; margin: 0; width: 90%; text-align: center; }
.legend { font-size: 90%; font-style: italic; text-align: center; }

.container { margin: 0 auto; padding: 14px; background-color: #fff;}

}


*/--- menus ---*/

#navigation #en-cours a { background-color: #eee; color: #666; }
ul.menu { margin: 0; padding: 0; list-style-type: none; }

@media screen and (min-width: 1000px) {

.menu { margin: 0 auto; padding: 0; width: 96%; max-width: 1000px; height: 50px; background-color: transparent; text-align: center;}
span.titre { display: none; }
li.menu { display: inline; line-height: 50px; list-style-type: none; margin-right: 6px;}
a.menu {text-transform: uppercase; color:#fff; background-color:#000; border: 2px solid #fff; margin: 0; padding: 12px; border-radius: 8px; text-decoration: none;}
a.menu:hover { background-color:#c7b467; color: #333; }

 }
@media screen and (max-width: 1000px) {

.menu { margin: 0 auto; padding: 0; width: 100%; height: 40px; background-color: transparent; text-align: center;}
li.menu { list-style-type: none; }
span.titre { font-size: 2em; font-weight: bold; color: #000; }
header { position: relative; width: 100%;}
header ul.menu { display: block; visibility: hidden; opacity: 0; display: block; margin: 0 auto; padding: 0; list-style-type: none; width: 90%;}
header:hover ul.menu { visibility: visible; opacity: 1; z-index: 100;}
header li.menu { line-height: 34px; width: 100%;}
a.menu { display: block; text-transform: uppercase; color:#fff; background-color:#000; border: 2px solid #fff; border-bottom: 0; margin: 0; padding: 4px 0 0 0; border-radius: 0; text-decoration: none;}

 }