body
{
background:url(fond.jpg);
background-position:center center ;
background-repeat:no-repeat;
background-color:#555331;
background-color:#8C8773;
background-attachment:fixed;
min-width:1224px;
font-family:arial;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.menu
{
clear:both;
}

.menu li a
{
margin-top:80px;
font-family: Arial,sans-serif;
font-size: 0.9em;
text-align: center;
color: #fff;
border-radius: 12px;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6); 
background:         linear-gradient( #A8ACA0 0%, #A8ACA0 10%, #888D7E 20%, #3C422C 100%);
background-color: #4D523E;
}

.menu li a:hover{
color: #fff;

background:         linear-gradient( #BEC5AF 0%, #BEC5AF 10%, #A3AC8D 20%, #687449 100%);
background-color: #838E68;
}

.menu li a.selected
{

background:         linear-gradient( #D5DFBD 0%, #D5DFBD 10%, #C1CFA0 20%, #94A766 100%);
background-color: #94A766;
}

ul.menu
{
padding:0;
margin:0;
list-style-type:none;
margin:auto;
width:950px;
}

ul.menu li
{
float:left;
}

ul.menu li a
{
margin-left:6px;
margin-right:7px;
margin-bottom:4px;
font-family: Arial,sans-serif;
font-size: 0.9em;
display:block;
float:left;   
text-align:center;
padding: 10px 18px;
text-decoration:none;
color:white;
}
  
@font-face
{
font-family: "Niconne";
font-style: normal;
font-weight: 400;
src: local("Niconne.ttf"), local("Niconne-Regular"), url('Niconne-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/opensans/v29/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/opensans/v29/mem6YaGs126MiZpBA-UFUKWyV-hs.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('https://fonts.gstatic.com/s/opensans/v29/mem5YaGs126MiZpBA-UN_r8OUuhs.woff2') format('woff2');
}

.titre1
{
font-family:Niconne, "Monotype Corsiva";
font-size:60px;
color:white;
position:relative;
left:140px;
top:15px;
text-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.2);
}

.titre2
{
font-family:Niconne, "Monotype Corsiva";
font-size:35px;
color:white;
position:relative;
left:290px;
top:15px;
text-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.2);
}

.corps
{
width:1024px;
margin:auto;
}

.contenu1,
.contenu2,
.contenu3,
.contenu4,
.contenu5,
.contenu6,
.contenu7
{
width:950px;
height: 500px;
margin:auto;
margin-top:125px;
background-color: #DEE8C7;
background-image:none;
opacity: 0.9;
}

.contenu7 {
  height: 800px;
}

.contenu1
{
background:url('libre.jpg');
background-repeat:no-repeat;
}

.titre
{
font-family:Niconne, "Monotype Corsiva";
color:#544300;
position:relative;
font-size:40px;
padding-left:10px;
}

.illust
{
float: right;
position:relative;
}

.illust img
{
border: 2px solid #DDDDDD;
margin:10px;
}

.CC11,
.CC12,
.CC13,
.CC15
{
font-family:Niconne, "Monotype Corsiva";
font-size:60px;
color:#544300;
position:relative;
}

.CC11
{
left:230px;
top:40px;  
width:450px;  
}

.CC12
{
left:415px;
top:40px;
font-size:40px;
width:450px;
}

.CC13
{
font-size: 40px;
left: 300px;
top: 85px;
}

.CC14
{
color: #544300;
font-family: Arial,sans-serif;
font-size: 14px;
left: 265px;
position: relative;
text-align: justify;
top: 226px;
width: 670px;
}

.CC15 {
    font-size: 20px;
    left: 800px;
    top: 240px;
    width: 450px;
}

.ast {
    display: inline;
    font-size: 20px;
    left: 2px;
    position: relative;
    top: -6px;
}

.CC22, #retourAction
{
width:50%;
float:left;
margin-right: 60px;
margin-left: 30px;
}

.CC31
{
margin-bottom: 15px;
}

.CC32
{
font-family: Arial,sans-serif;
color:#544300;
font-size:14px;
padding:10px;
position:relative;
text-align:justify;
line-height: 22px;
}

.CC32 li
{
margin-bottom:2px;
}

.CC42
{
color: #544300;
font-family: Arial,sans-serif;
font-size: 14px;
margin-left: 25px;
margin-right: 280px;
margin-top: 40px;
text-align: justify;
width: auto;
}

.CC52
{
color: #544300;
font-family: Arial,sans-serif;
font-size: 14px;
margin-left: 25px;
margin-right: 25px;
margin-top: 40px;
text-align: justify;
width: auto;

}

.CC52 li
{
margin-bottom: 2px;
}

.CC62 {
color: #544300;
font-family: Arial,sans-serif;
font-size: 14px;
margin-left: 25px;
margin-right: 25px;
margin-top: 40px;
text-align: justify;
width: auto;
}

cite
{
display: block;
margin-bottom: 10px;
padding-left: 15px;
}

.bas
{
font-family: Arial,sans-serif;
color:white;
background-color:#6D7D47;
opacity:0.75;
font-size:14px;
width:950px;
margin:auto;
margin-top:10px;
height:40px;
line-height:40px;
text-align:center;
}

.libInput
{
color: #4C4C4C;
font: 16px/1.4em "Open Sans","sans-serif";
}

input, textarea
{
background-color: #FFFFFF;
border: 1px solid #999797;
border-radius: 0 0 0 0;
color: #4C4C4C;
font: 16px/1.4em "Open Sans","sans-serif";
margin: 0 0 5px;
padding: 5px;
width: 100%;
}

#btVld
{
background-color: #4C4C4C;
border: medium none;
border-radius: 0 0 0 0;
color: #FFFFFF;
cursor: pointer;
float: right;
font: 16px/1.4em "Open Sans","sans-serif";
margin: 0 0 0 10px;
padding: 5px;
}

.err
{
border:solid 2px red;
}

#retourAction
{
    color: #544300;
    font-family: "Open Sans", "Arial";
    font-size: 14px;
}

.galerie
{
	max-height: 750px ;
	overflow-y:scroll;
}

.legend1,
.legend2,
.legend3,
.legend4
{
font-family:Niconne, "Monotype Corsiva";
font-size:35px;
color:white;
position:relative;
text-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.2);
}

.galerie img
{
	width:800px;
	text-align:right;
	margin-left:75px;
	margin-right:75px;
}

.titreG {
font-family: Niconne, "Monotype Corsiva";	
font-size: 30px;
position: -webkit-sticky; 
position: sticky;
top: 0;
background-color: #DEE8C7; 
color: #544300; 
z-index: 1; 
margin: 0;
padding: 10px;
}

.contenu7 + .bas {
  position:relative;
  top: -50px;
}

#btO,
#btF
{
	display:none;
}

input:disabled, textarea:disabled {
  border: solid 1px #eef2e3;
  background-color: #eef2e3;
}

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

body
{
background:none;
background-position:right bottom;
background-repeat:no-repeat;
background-color:#595742;
width:100vw;
font-family:arial;
background-size: unset;
min-width: 100vw;
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}

.menu li a
{
font-family: Arial,sans-serif;
text-align: center;
color: #fff;
border-radius: 2vw;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6); 
background:         linear-gradient( #A8ACA0 0%, #A8ACA0 10%, #888D7E 20%, #3C422C 100%);
background-color: #4D523E;
}

.menu li a:hover{
color: #fff;
background:         linear-gradient( #BEC5AF 0%, #BEC5AF 10%, #A3AC8D 20%, #687449 100%);
background-color: #838E68;
}

.menu li a.selected
{
background:         linear-gradient( #D5DFBD 0%, #D5DFBD 10%, #C1CFA0 20%, #94A766 100%);
background-color: #94A766;
}

ul.menu
{
padding: 0;
margin: 0;
list-style-type: none;
margin: auto;
width: auto;
max-height: 5vh;
overflow: scroll;
margin-top:4vh;
position:fixed;
top: 7vh;
width: 100vw;
background-color: #595742;
z-index:98;
}

ul.menuX
{
max-height: 42vh;	
}

ul.menu li
{
float:inherit;
margin-bottom: 1vh;
}

ul.menu li a
{
margin-left:2vw;
margin-right:8vw;	
margin-top:0;	
margin-bottom:0.5vh;
font-family: Arial,sans-serif;
font-size: 3.5vw;
display:block;
float:inherit;   
text-align:center;
padding: 0.5vh;
text-decoration:none;
color:white;
height:4vh;
line-height:4vh;
}
  
.titre1
{
font-family:Niconne, "Monotype Corsiva";
font-size:11vw;
color:white;
left:auto;
top:1vh;
text-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.2);
width: 100vw;
text-align: center;
position:inherit;
}

.titre2
{
font-family:Niconne, "Monotype Corsiva";
font-size:5vw;
color:white;
position:inherit;
text-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.2);
text-align: center;
}

.corps
{
width:100%;
margin:0;
overflow: hidden;
    height: 100vh;
}

.contenu1,
.contenu2,
.contenu3,
.contenu4,
.contenu5,
.contenu6,
.contenu7
{
width: 100vw;
    max-height: 73.1vh;
    margin: auto;
    margin-top: 7.5vh;
    background-image: none;
    opacity: 0.9;
    background: url(fond.jpg);
    background-color: rgba(0, 0, 0, 0);
    background-size: auto;
    background-blend-mode: soft-light;
    background-size: cover;
    background-color: #c6df99;
    overflow: scroll;
    padding-bottom: 6vh;
}

.contenu1
{
height: 73.1vh;
}

.contenu7 {
height: 73.1vh;
  padding-bottom: 8vh;
      overflow: hidden;
}

.titre
{
font-family:Niconne, "Monotype Corsiva";
color:#544300;
position:relative;
font-size:40px;
padding-left:2vw;
margin-right: 2vw;
}

.illust
{
float: right;
position:relative;
}

.illust img
{
border: 2px solid #DDDDDD;
margin:10px;
width: 35vw;
}

.CC11,
.CC12,
.CC13,
.CC15
{
font-family:Niconne, "Monotype Corsiva";
font-size:60px;
color:#544300;
position:inherit;
}

.CC11
{
width:auto;
font-size: 14vw;
text-align: center;
}

.CC12
{
width:auto;
font-size: 6vw;
text-align: center;
}

.CC13
{
width:auto;
font-size: 6vw;
text-align: center;
}

.CC14
{
color: #544300;
    font-family: Arial,sans-serif;
    font-size: 4vw;
    left: 0;
    position: inherit;
    text-align: justify;
    padding: 4vw;
    line-height: 4vh;
    margin-top: 3vh;
    width: auto;
}

.CC15 {
width:auto;
font-size: 4vw;
text-align: right;
padding-right:2vw;
}

.ast {
    display: inline;
    font-size: 3vw;
    left: 0;
    position: inherit;
    top: 0;
}

.CC22, #retourAction
{
    width: 95vw;
    float: inherit;
    margin-right: 2vw;
    margin-left: 2vw;
 }

.CC31
{
margin-bottom: 15px;
}

.CC32
{
font-family: Arial,sans-serif;
color:#544300;
font-size:14px;
padding:10px;
position:relative;
text-align:justify;
line-height: 22px;
}

.CC32 li
{
margin-bottom:2px;
}

.CC42
{
color: #544300;
font-family: Arial,sans-serif;
font-size: 3.5vw;
margin-left: 2vw;
margin-right: 5vw;
margin-top: 8px;
text-align: justify;
width: auto;
}

.CC52
{
color: #544300;
font-family: Arial,sans-serif;
font-size: 3.5vw;
margin-left: 2vw;
margin-right: 5vw;
margin-top: 8px;
text-align: justify;
width: auto;
}

.CC52 li
{
margin-bottom: 2px;
}

.CC62 {
color: #544300;
font-family: Arial,sans-serif;
font-size: 3.5vw;
margin-left: 2vw;
margin-right: 5vw;
margin-top: 8px;
text-align: justify;
width: auto;
}

cite
{
display: block;
margin-bottom: 10px;
padding-left: 15px;
}

.bas
{
    font-family: Arial,sans-serif;
    color: white;
    background-color: #6D7D47;
    opacity: 0.75;
    font-size: 3.5vw;
    width: auto;
    margin: 0;
    height: 5vh;
    line-height: 5vh;
    text-align: center;
    position: fixed;
    bottom:0;
    width: 100vw;
    white-space: nowrap;
    overflow: scroll;
    padding: 1vw;
 }

.libInput
{
color: #4C4C4C;
font: 16px/1.4em "Open Sans","sans-serif";
}

input, textarea
{
background-color: #FFFFFF;
border: 1px solid #999797;
border-radius: 0 0 0 0;
color: #4C4C4C;
font: 16px/1.4em "Open Sans","sans-serif";
margin: 0 0 5px;
padding: 5px;
width: 100%;
}

#btVld
{
background-color: #4C4C4C;
border: medium none;
border-radius: 0 0 0 0;
color: #FFFFFF;
cursor: pointer;
float: right;
font: 16px/1.4em "Open Sans","sans-serif";
margin: 0 0 0 10px;
padding: 5px;
}

.err
{
border:solid 1px red;
}

#retourAction
{
color: #ae3e12;
    font-family: "Open Sans", "Arial";
    font-size: 4vw;
    font-weight: bold;
}

.galerie
{
	max-height: 80vh ;
	overflow-y:scroll;
}

.legend1,
.legend2,
.legend3,
.legend4
{
font-family:Niconne, "Monotype Corsiva";
font-size:35px;
color:white;
position:relative;
text-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.2);
}

.galerie img 
{
width: 100vw;
text-align: right;
margin-left: 0;
margin-right: 0;
}

.galerie img:last-of-type
{
	margin-bottom:16vh;
}

.titreG {
font-family: Niconne, "Monotype Corsiva";	
font-size: 30px;
position: -webkit-sticky; 
position: sticky;
top: 0;
background-color: #DEE8C7; 
color: #544300; 
z-index: 1; 
margin: 0;
padding: 10px;
}

.contenu7 + .bas {
  position:fixed;
  top: inherit;
  bottom:0;
}

#btO,
#btF
 {
  width: 6vw;
  height: 6vw;
  background-color: #595742;
  position: fixed;
  right: 1vw;
  border: none;
  top: 12vh;
  display:block;
  z-index:99;
  background-image:url(menuF.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;  
}

#btF
{
display:none;
background-image:url(menuO.png);	
}

iframe {
  width: 96vw;
  margin-left: 2vw;
}

}

@supports (-webkit-touch-callout: none) 
{

ul.menu
{
top: 7vh;
}

}