@font-face {
    font-family: 'robotolight';	
    src: url('fonts/roboto-light-webfont.eot');
    src: url('fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-light-webfont.woff2') format('woff2'),
         url('fonts/roboto-light-webfont.woff') format('woff'),
         url('fonts/roboto-light-webfont.svg#robotolight') format('svg');
	font-display: swap;		 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoregular';	
    src: url('fonts/roboto-regular-webfont.eot');
    src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('fonts/roboto-regular-webfont.woff') format('woff'),
         url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
	font-display: swap;	    
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dancingscriptregular';	
    src: url('fonts/DancingScript-Regular.ttf');
	font-display: swap;		 
    font-weight: normal;
    font-style: normal;
}




html {
	font-family: 'robotoregular', Arial, sans-serif;
    color: #333;
	font-size: 18px;	
	}
	
header {
	display: block;
	margin: 0 auto;
	max-width: 100%;	
	/*background: url(image/bandeau.jpg);*/
	height: auto;

}	

body{
	width: 100%;
	max-width: 1000px;	
	margin: auto;	
	padding: 0;
	background-color: #fff;
	font-size: 1.0rem;	
}



img {
	display: inline;
	margin: 0 auto;
	max-width: 100%;
}
	


h1 {
	font-family: 'robotoregular', sans-serif;	
	font-style:  normal;
	font-size: calc(0.7rem + 0.8vw);	
	color: rgba(100, 100, 100, 1);	
	column-span: all;
	text-align:center;	
	margin: 0px 0px 0px 0px ;	
}

h2 {
	font-family: 'robotoregular', sans-serif;	
	font-style:  normal;
	font-size: calc(1.1rem + 0.5vw);	
	color: rgba(100, 100, 100, 1);	
	column-span: all;
	text-align:center;	
	margin: 0px 0px 0px 0px ;
}

h3 {
	font-family: 'robotolight', sans-serif;
	font-style:  normal;
	font-size: calc(1.1rem + 0.5vw);	
	color: rgba(230, 100, 30, .7);	
	column-span: all;	
}

h3 a{
	font-family: 'robotolight', sans-serif;
	font-style:  normal;
	font-size: calc(1.1rem + 0.5vw);	
	color: rgba(230, 100, 30, .7);	
	column-span: all;
	text-decoration: none;	
}


 h4 {
	font-family: 'robotolight', sans-serif;	 
	font-size: calc(1.1rem + 0.2vw);
	color: rgba(230, 100, 30, .7);
	column-span: all;
	text-align: center;	
}

 h4 a{
	font-family: 'robotoregular', Arial, sans-serif; 
	font-size: calc(1.2rem + 0.2vw);
	font-weight: normal;
	color: rgba(0, 0, 0, .8);
	column-span: all;	
}

h5 {
	font-family: 'dancingscriptregular', cursive;
	text-align: center;
	color: rgba(0, 120, 255, 1);
	font-size: calc(1.0rem + 1.2vw);
	line-height: 50px;
	margin: 0;
}

h6 {
	font-family: 'dancingscriptregular', cursive;
	text-align: center;
	color: rgba(100, 100, 100, 1);
	font-size: calc(1.3rem + 1.1vw);
	line-height: 25px;
	margin: 10px 0px 0px 0px ;
}

.input {
	height : 25px;
	font-size : 1.5em;	
}


section {
	display: flex;
	flex-flow: column;
	}

article {
	padding: 4px;
	flex: 1 ;
	margin: 0px;
	word-break:normal ;
	}
	
article a {text-decoration: none;	}

	
article:nth-of-type(1) {
	display: flex;
	flex-flow: wrap;
	flex: 1 ;
	background-color: rgba(230, 230, 230, .5);
}


article:nth-of-type(2) {
	display: flex;
	flex-flow: wrap;	
	flex: 1 ;
	background-color: #fff;

}

article:nth-of-type(3) {
	display: flex;
	flex-flow: wrap;
	flex: 1 ;
	background-color: rgba(150, 225, 255, .1);
	
}


article:nth-of-type(4) {
	display: flex;
	flex-flow: wrap;	
	flex: 1 ;
	background-color: #fff;

}

article:nth-of-type(5) {
	display: flex;
	flex-flow: wrap;
	flex: 1 ;
	background-color: rgba(230, 230, 230, .5);	
}

										/* BOUTONS*/

button {
	flex: 1 auto;
	margin: 5px;
	font-size: 18px;	
	line-height: 1.5;
	font-family: 'robotoregular', sans-serif;
	background-color: rgba(230, 230, 230, .5);	
}

.styled {
    border: 0;
    line-height: 2.5;
    padding: 0 10px;
    font-size: 0.75rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 0px;
    background-color: rgba(180, 220, 180, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: rgba(120, 120, 120, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.styled a {
    color: rgba(255, 255, 255, 1);
	text-decoration: none;	
}

/* ////////////////////////////////////////////// */


.styled_2 { /*pour le gps*/
    border: 0;
    line-height: 2;
    padding: 0 10px;
    font-size: 1.0rem;
    text-align: center;
    color: #fff;
    /*text-shadow: 1px 1px 1px #000;*/
    border-radius: 30px;
    background-color: rgba(0, 100, 30, .3);
   /* background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));*/
   /* box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);*/
}

.styled_2:hover {
    background-color: rgba(230, 100, 30, 1);
}

/*.styled_2:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}*/

.styled_2 a {
    color: rgba(255, 255, 255, 1);
	text-decoration: none;	
}


.styled_3 { /*pour la carte*/
    border: 0;
    line-height: 2;
    padding: 0 10px;
    font-size: 1.0rem;
    text-align: center;
    color: #fff;
    /*text-shadow: 1px 1px 1px #000;*/
    border-radius: 30px;
    background-color: rgba(230, 100, 30, .6);
   /* background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));*/
   /* box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);*/
}

.styled_3:hover {
    background-color: rgba(230, 100, 30, 1);
}

/*.styled_3:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}*/

.styled_3 a {
    color: rgba(255, 255, 255, 1);
	text-decoration: none;	
}

.styled_4 { /*le descriptif*/
    border: 0;
    line-height: 2;
    padding: 0 10px;
    font-size: 1.0rem;
    text-align: center;
    color: #fff;
    /*text-shadow: 1px 1px 1px #000;*/
    border-radius: 30px;
    background-color: rgba(100, 100, 230, .6);
   /* background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));*/
   /* box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);*/
}

.styled_4:hover {
    background-color: rgba(230, 100, 30, 1);
}

/*.styled_4:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}*/

.styled_4 a {
    color: rgba(255, 255, 255, 1);
	text-decoration: none;	
}


.styled_5 { /*pour en savoir plus*/
    border: 0;
    line-height: 2;
    padding: 0 10px;
    font-size: 1.0rem;
    text-align: center;
    color: #fff;
    /*text-shadow: 1px 1px 1px #000;*/
    border-radius: 30px;
    background-color: rgba(155, 0, 0, .4);
   /* background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));*/
   /* box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);*/
}

.styled_5:hover {
    background-color: rgba(230, 100, 30, 1);
}

/*.styled_5:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}*/

.styled_5 a {
    color: rgba(255, 255, 255, 1);
	text-decoration: none;	
}




button a{
	font-family: 'robotoregular', sans-serif;		
}


table, td, th {
border-collapse: collapse;
/*border: 1px solid #333;*/	
}

td,
th {
    /* border: 1px solid rgb(190, 190, 190);*/
    padding: 5px;
}

 .table1  {
           border: 1px solid rgba(100, 100, 100, .2);
        }
        .table1 th {
           border: 1px solid rgba(100, 100, 100, .2);
           padding: 5px;
        }
        .table1 td {
           border: 1px solid rgba(100, 100, 100, 0.2);
           padding: 5px;
        }
		
 .table2  {
           border: 0px;
        }		

.date {
font: 70% 'robotoregular', Verdana, Helvetica, sans-serif;
font-weight: normal;
font-style:normal;
color: #005;
text-align:right;
background:transparent;
}

.modification {
font: 100% 'robotoregular', Verdana, Helvetica, sans-serif;
font-weight: normal;
font-style:normal;
color: #999;
text-align:right;
background:transparent;
vertical-align:bottom;
}

.deconnection {
font: 100% 'robotoregular', Verdana, Helvetica, sans-serif;
font-weight: normal;
font-style:normal;
color: #f00;
float:right;
margin: 10px 15px 0px 0px ;
background:transparent;
}

.logo {
width: calc(3.0rem + 3vw);	
	float:left;
	vertical-align:top;
	margin: 0px 0px 0px 05px ;
}

.logo2 {
width: calc(2.0rem + 1vw);	
	float:left;
	margin: 8px 0px 0px 25px ;
}

.logo3 {
width: calc(2.0rem + 1vw);	
	float:right;
	margin: 8px 25px 0px 0px ;
}

.logo4 {
width: calc(20.0rem + 6vw);	
	float:left;
	vertical-align:top;
	margin: 0px 0px 0px 05px ;
}

.bulle {
width: calc(3.0rem + 10vw);	
	float:left;
	vertical-align:top;
	margin: 0px 0px 0px 05px ;
}

#page a:link { color:#989440; text-decoration:none;}
#page a:active{ color:red; text-decoration:underline;}
#page a:active:hover{ color:red; text-decoration:underline;}
#page a:visited{ color:#cc9440; text-decoration:none;}

.page {
color:#ff5000;
font-size: 0.9rem;
}


											/* MENU DEROULANT */

/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
    font-family: 'robotoregular', sans-serif;
}

nav{
    width: 100%;
    margin: 0 auto;
    background-color: white;
    position: sticky;
    top: 0px;
}

nav ul{
    list-style-type: none;
}

nav ul li{
    float: left;
    width: 33.3%;
    text-align: center;
    position: relative;
}

nav ul::after{
    content: "";
    display: table;
    clear: both;
}

nav a{
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;
    padding: 0px 0px 15px 0px;
}

nav a:hover{
    color: orange;
   /* border-bottom: 0px solid gold;*/
}

.sous{
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: #eee;
    position: absolute;
	top: 0px;	
    width: 100%;
    z-index: 1000;
    border-bottom: 0px;
	padding: 50px 0px 0px 0px;	
}
nav > ul li:hover .sous{
    display: block;
}
.sous li{
    float: none;
    width: 100%;
    text-align: left;
}
.sous a{
    padding: 10px;
    border-bottom: none;
}
.sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.2);
}
/*.deroulant > a::after{
    content:" ▼";
    font-size: 12px;
}*/

.conteneur{
  margin: 50px 20px;
  height: 1500px;
}

.commentaire{
	color: darkgreen;
}