@charset "utf-8";
/*  
# = id
. = class
*Colors*
*sable clair: #F7F0B3 - rgba(247,240,179, 1) / #e4b876 / #dcb88e / # e8cc9c
*bleu foncé: #080830 - rgba(8,8,48, 1)
*bleu moyen: #183152 - rgba(24,49,82, 1)
*bleu ciel vif: #027ea6 -rgba(2,126,166, 1)
*bleu clair: #E1E6FA - rgba(225,230,250, 1)
*
*/
* { margin:0; padding:0; }
article, aside, header, footer, nav {
      display: block;
    }
/* ===================================================  Styles généraux ========================================== */
body{
	font-family: verdana;
	font-size:100%;
	background:#E1E6FA;
	border-top: 7px solid #080830;
	border-bottom: 7px solid #080830;
	border-left: 17px solid #080830;
	border-right: 17px solid #080830;
	-webkit-font-smoothing: antialiased;
	}
a {
	text-decoration: none;
	color:#027ea6;
	}
p {color:#080830;}
h1{
	width: 80%;
	font-size:2em;	
	background:#080830;
	padding:0 0 100px 20px;
	color:#E1E6FA !important;
	text-shadow:1px 1px 1px #E1E6FA;
	margin:0;
	text-shadow: 0.05em 0.05em 0.05em rgba(247,240,179,.6);
	Line-Height: 1em;
	}
h1#h1accueil{
  width: 100%;
	padding:0 10px 20px 20px;
	}
h1 a{
	text-decoration: none;
	color:#E1E6FA !important;
	}
h2 { /*titre sur page d'accueil*/
	font-size:1.6em;
	background:#027ea6;
	color:#F7F0B3;
	margin:0;
	padding:4px 4px 4px 20px;
	overflow:hidden;
	text-shadow: 0.1em 0.1em 0.05em rgba(8,8,48,.6);
	border-bottom: 1px solid #080830;
	}
h3{ /*titre sur pages suivantes*/
	width:auto;
	min-width:80%;
	font-size:1.4em;
	background:#027ea6;
	color:#F7F0B3;
	margin:0px 8px 0 4px;
	padding:8px 8px 8px 8px;
	overflow:hidden;
	text-shadow: 0.1em 0.1em 0.05em rgba(8,8,48,.6);
	border: 1px solid #080830;
	border-radius: 0.4em; 
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
	float: both;
	}
h4 {/*sommaire*/
	font-size:1.4em;
	margin: 0;
	text-align: left;
	}
h5{	 /*titre sur pages d'articles*/ font-size:1.1em;	}
h6{	 /*titre sur paragraphe d'articles*/font-size:1em;	}
hr{/*ligne de séparation menu/titre h2 sur page d'accueil*/
	color:#080830;
	overflow:hidden;
	width:100%;
	clear:both;
	}
.centrer{
	text-align: center;
	}
#col0 {/*sommaire*/
	width:80%;
	margin-left: 10%;
	float:left;
	text-align: left;
	}
#col1 {/*sommaire*/
	width:30%;
	float:left;
	margin-left: 0;
	text-align: center;
	}
#col2 {/*sommaire*/
	width:30%;
	float:left;
	margin-left: 0;
	text-align: center;
	}
#col3 {/*sommaire*/
	width:30%;;
	float:left;
	margin-left:0;
	text-align: center;
	}
#col2_1 {/*sommaire*/
	width:50%;
	float:left;
	margin-left: 0;
	text-align: center;
	}
#col2_2 {/*sommaire*/
	width:50%;
	float:left;
	margin-left: 0;
	text-align: center;
	}
#c1OO {/*sommaire*/
	color: red;
	width:100%;
	min-width:900px;
	display:block;
	margin-left: 0;
	text-align: center;
	background:yellow;
	}
.noindent {/*texte sans indentation*/text-indent:0; /* décalage la première ligne du texte*/}
/* ========================================================styles pour l'en tete==================================*/
header {
	background:#080830;
	margin-bottom: -2em;
	padding-top: 0;
	overflow:hidden;
	width:100%;
	display:block;
    }
#logo  {
	width: 21%;
	height: auto;
	float:left;
	}
#logo img {
	max-width: 100%;
  width: auto;
  height: auto;
  min-height:100px;
	}
#logogif {
	position:absolute; 
	width: 13%;
	height: 2em;
	margin-left: 84%; 
	margin-top: 0px; 
	margin-right: 20px;
	padding-top: 0px;
	margin-bottom: 40px;
	}
#logogif img {
	width: 100%;
	height: auto;
    }
#slideshow {
	width: 75%;
	margin-left: auto; 
	margin-top: 0; 
	margin-right: 0; 
	margin-bottom: 20px; 
	overflow: hidden;
	}
nav{	
	background: #E1E6FA;/*bleu clair derriere la barre des menus*/
	font-weight: bold;
	/*white-space:nowrap;*/
	text-align: center; /* centrer le texte */ 
	}
nav a:link {
	color: #E1E6FA;
	text-decoration: none; /*  soulignement des liens */
	}
nav a:hover {
    text-decoration: none;/* underline= souligné / blink = clignotement*/
    color:#F7F0B3;
	}
nav a:visited {
    color: white;
	}
nav ul, nav li { 
	list-style:none; 
	padding:0; /*important pour ne pas avoir de barre de deffilement en bas*/
	margin:0; /*important pour ne pas avoir de barre de deffilement en bas*/
	display:inline;
	}
	nav ul li a{ 
	display:block; 
	padding:8px 0; /*espace dans les boutons: H x L*/
	margin:0; 
	white-space:nowrap; 
	}
#journal , aside {
	float:left;
	min-height:400px;
	overflow:hidden;
	width:100%;
	display:block;
	}
#journal span{
    padding: 1em;
	}
aside {
	background:#E1E6FA;
	padding: 0;
	overflow: hidden;
	}	
.boutonsmenuvertical {
    margin: 1em ;
    padding: 0.4em;
    color:#F7F0B3;
    background:#080830;
	border-radius: 0.4em; 
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
	-webkit-box-shadow: 1px 1px 1px 2px rgba(8,8,48,.7);
	-moz-box-shadow: 1px 1px 1px 2px rgbargba(8,8,48,.7);
	box-shadow:  1px 1px 1px 2px rgba(8,8,48,.7);
	text-decoration: none;
	}
article {
	overflow: hidden;
	padding: 20px;
	list-style:none;
	Line-Height: 200%;
	font-stretch: expanded;
	text-align: justify;
	text-indent:2em; /* décalage la première ligne du texte*/
	}
article .bolder{
	font-weight: bolder;
	}
article li{
	list-style:none;
	}
.top{
	float:right;
	text-align: right;
	font-size:0.7em;
	color:#080830;
	}
#comite img{
	/*margin: 15px 100px 20px 100px;*/
	width:600px;
	Height: 600px;
  }
#equipe img{
	/*margin: 15px 100px 20px 100px;*/
	width:80%;
	Height: 80%;
  }
footer {
width:96%;
	font-size:0.7em;
	display:block; 
	background:#E1E6FA;
	background-image: -webkit-linear-gradient(#E1E6FA, #183152);
	background-image: -moz-linear-gradient(#E1E6FA, #183152);
	background-image: -ms-linear-gradient(#E1E6FA, #183152);
	background-image: -o-linear-gradient(#E1E6FA, #183152);
	background-image: linear-gradient(#E1E6FA, #183152);
	margin-bottom:0;
	color:#080830;
	padding:2% 2% 1% 2%;
	text-shadow: 0.1em 0.1em 0.05em rgba(225,230,250,.6);
	clear:both;
	/*border-radius: 0 0 0.4em 0.4em;*/ 
	}
nav a, .nav-open, .nav-close { /* menu sommaire */
	display: block;
	}
.nav-open, .nav-close {display: none /* menu sommaire */} 
 #flottille { /* texte pourles flotilles */
width:100%;
	float:left;
	} 
#flottille p{ /* texte ourles flotilles */
width:60%;
	float:left;
	}
#flottille img{ /* images des flotilles */
	width:30%;
	height:auto;
		float:left;
		margin:0 30px;
	}
#films{ /* style de la page */
	width:100%;
	text-align: center;
	}
#films p{ /* textes de videos */
	font-weight: bolder;
	width:90%;
	padding:0 5%;
	text-align: center;
	}
#films iframe{ /* affichage des videos */
	width:70%;
	height:350px;
	margin: 0 15%;
	padding:0 auto;
	text-align: center;
	}
#awoo{
	overflow: auto;
	}
#reglement p{ /* textes de la page reglement */
	color: 000;
	text-align: justify;
	}
#reglement ol li{ /* listes de la page reglement */
	color: 000;
	list-style: decimal;
		margin:0 5%;
	}
/*#reglement ol li:before {
content:counter(number) " ";
counter-increment:number;
counter-reset: number;
}*/
#reglement ul li{ /* style de la page */
	color: 000;
	list-style: disc;
		margin:0 5%;
	/*text-indent:2em; /* décalage la première ligne du texte*/
	}
.list_carousel {
				background-color: #027ea6;
				margin: 0 auto;
				width: 300px;
			}
.list_carousel img {
				width: 140px;
				height: 140px;
			}
.list_carousel ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: block;
			}
.list_carousel li {
				text-align: center;
				background-color: #027ea6;
				border: 5px solid #027ea6;

				display: block;
				float: left;
			}
.list_carousel.responsive {
				width: auto;
				margin-left: 0;
			}
.clearfix {
				float: none;
				clear: both;
			}
#logo404{	width: 30%;
				margin: 2% 35%;
				}
#logo404 img{	width: 100%;
				height: auto;
				}
#webcam {	width: 95%;
				height: auto;
				margin: 0;
				padding: 0;
								}
#webcam img{	width: 100%;
				height: auto;
				margin: 0;
				padding: 0;
								}
.text404 { /* textes de la page 404 */
	text-align: center;
		font-weight: bold;
			font-size:100%;
	}
	/*=============STYLES DU FORMULAIRE DE CONTACT====================*/
#contact{ /* style de la page */
  width:90%;
  overflow:hidden;
  Line-Height: 200%;
	font-stretch: expanded;
	text-align: center;
	margin:5px 5%;
	box-sizing: border-box;
	}
fieldset {
   border: 2px dotted #027ea6;
  }
fieldset :invalid{
   border: 2px dotted #027ea6;
  }
fieldset :valid{
   border: 2px dotted green;
  }
legend{ /*  titres du formulaire */
	font-weight: bolder;
	margin:0 2em;
	text-indent:1em;
	}
	textarea {
padding: 11px 25px;
}
input{
margin:3px;
}
.textinput {
padding: 5px 9px;
margin:5px 9px;
 width:40%;
}
#adresse{ /* style de la page */
  width:80%;
  	}
#message{ /* style de la page */
  width:80%;
  	}
[required] {
   border: 2px dotted red;
   	/*background:#E1E6FA;*/
}
:required {
   border: 2px dotted #027ea6;
   	/*background:#E1E6FA;*/
}
/*:valid {
	box-shadow: 0 0 2px 1px green;
}
:invalid {
	box-shadow: 0 0 2px 1px #027ea6;
}*/
.req-field{
   color: red;
   border: none;
}
/* ==========================================================================
   Media Queries
   ========================================================================== */
  @media only screen and (min-width: 1024px) {

/* ===============
    Ecran de PC
   =============== */
header#headeracceuil{
  background-image: -webkit-linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	background-image: -moz-linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	background-image: -ms-linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	background-image: -o-linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	background-image: linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
   }
/*Menu horizontal */
nav{	
	background-image: -webkit-linear-gradient(#183152, #E1E6FA);
	background-image: -moz-linear-gradient(#183152, #E1E6FA);
	background-image: -ms-linear-gradient(#183152, #E1E6FA);
	background-image: -o-linear-gradient(#183152, #E1E6FA);
	background-image: linear-gradient(#183152, #E1E6FA);
	margin:0px auto 30px auto;
	padding:30px 10px 30px 5px;
	font-size:1em; 
	border-radius: 0.4em 0.4em 0 0; 	
	}
/*barre de menu*/
nav ul, nav li { 
	border-radius: 0.4em; 
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
	}
nav ul li{ float:left; position:relative; }
/*menus et sous-menus = boutons du menu */
nav ul li a{ 
	display:block; 
	padding:8px 0px 8px 0px; /*espace dans les boutons: H x L*/
	margin:5px; 
	font-size:1em; 
	white-space:nowrap; 
	border-radius:10px; 
	background:#080830;/*bleu foncé*/
	border: 1px solid #027ea6;
	-webkit-box-shadow: 2px 2px 2px 3px rgba(2,126,166,.3);
	-moz-box-shadow: 2px 2px 2px 3px rgbargba(2,126,166,.3);
	box-shadow:  2px 2px 2px 3px rgba(2,126,166,.3);
	width:125px;
	}
/*enssemble des sous-menus*/
nav ul ul{ 
	position:absolute; 
	top:-99999px; 
	left:0;
	opacity: 0;
	-webkit-transition: opacity .9s ease-in-out;
	-moz-transition: opacity .9s ease-in-out;
	-o-transition: opacity .9s ease-in-out;
	z-index:497; 
	padding: 2px; 
	margin: auto;
	}

	/*enssemble des sous-menus*/
nav ul ul ul { 
	position:absolute; 
	top:-99999px; 
	left:100%; 
	opacity: 0; 
	transition: opacity .9s ease-in-out;
	-webkit-transition: opacity .9s ease-in-out;
	-moz-transition: opacity .9s ease-in-out;
	-o-transition: opacity .9s ease-in-out;
	/*border-radius:6px;
	border:1px solid #444;
	padding: 0; margin: 0; */ 
	}
	/*sous-menus*/
nav ul li:hover>ul{ 
	opacity: 1; 
	position:absolute; 
	top:99%; 
	left:0;
	}
nav ul ul li:hover>ul{ 
	position:absolute; 
	top:0; 
	left:100%; 
	opacity: 1; 
	z-index:497; 
	background:#E1E6FA;
	margin:10px; }
nav ul ul a:hover{/* change la couleur des boutons au survol*/
 background:#027ea6; 
 margin:10px;	
 border: 1px solid #080830;}
nav ul ul a{ 
	background:#183152;
	width:125px;
	}
/* Disposition pour les colones */
article {
 background-image:url(../images/fond_clair.jpg);
	}
#journal {
 	width:69%;
	background-image:url(../images/fond_clair.jpg);
	}
	
aside {
	border-bottom: 4px solid #027ea6;
	border-left: 4px solid #027ea6;
	border-right: 4px solid #027ea6;
	border-radius: 0 0 0.4em 0.4em;
	-moz-border-radius: 0 0 0.4em 0.4em;
	-webkit-border-radius: 0 0 0.4em 0.4em;
	-webkit-box-shadow: inset 2px 2px 2px 2px rgba(2,126,166,.3);
	-moz-box-shadow: inset 2px 2px 2px 2px rgba(2,126,166,.3);
	box-shadow: inset 2px 2px 2px 2px rgba(2,126,166,.3);
	min-height:300px;
	width:30%;
	clear:none;
	}  

}/*Fin du menu pour pc */   @media only screen and (min-width: 600px) and (max-width:1023px) {

/* ====================
    Tablettes
   ==================== */
   body{
	border-top: 3px solid #080830;
	border-bottom: 7px solid #080830;
	border-left: 5px solid #080830;
	border-right: 5px solid #080830;
	-webkit-font-smoothing: antialiased;
	}
header#headeracceuil{
	background:#080830;
  background-image: -webkit-linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	background-image: -moz-linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	background-image: -ms-linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	background-image: -o-linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	background-image: linear-gradient(#080830, #027ea6 50%, #000000 50%,#183152);
	overflow:hidden;
	width:100%;
	display:block;
    }
h1#h1accueil{
  width: 100%;
	padding:0 20px 20px 20px;
	}
h1 {
	width: 80%;
	padding-bottom: 100px;
	}
/*Menu horizontal */
nav{	background: #e1E6FA;
	width:570px;/*la largeur du menu pour centrer*/
	margin:35px auto 1em auto;
	padding:5px 0 0 0 ;
	}
/*barre de menu*/
nav ul, nav li { 
	padding:0 0 0 1px;
	width:94px;
	}
nav ul li{ float:left; position:relative;}
nav ul{ margin:5px auto 0 auto; }
/*menus et sous-menus = boutons du menu */
nav ul li a.first{
	border-radius:5px 5px 0 0; 
	border-top: 1px solid #183152;
	border-left: 1px solid #183152;
	border-right: 1px solid #183152;
	}
nav ul li:last-child a.first{
	border-radius:5px 5px 0 0; 
	}
  nav ul li a.first:hover{
	background:#080830;
	}
nav ul li a{
	clear:both; 
	top: 10px;
	display:block; 
	padding:4px 2px; /*espace dans les boutons: H x L*/
	margin:0 0 0 1px; 
	font-size:12px;
	/*font-weight:900; */
	font-weight: bold;
	font-stretch: narrower;
	line-height:2em;
	white-space:nowrap; 
	background:#027ea6;
	}

/*enssemble des sous-menus*/
nav ul ul li{ 
	background:#E1E6FA; margin:0;
	}
nav ul ul a{ 
	background:#183152;
	width:89px;
	margin:0; 
	border: 0 0 0 0 solid #027ea6; 
	}
nav ul ul a:hover{ background:#027ea6;}
nav ul ul li{ background: #E1E6FA; margin:0; }
	 nav ul ul li:first-child a{border-radius:0; }
	 nav ul ul li:last-child a{ 
	width:89px;
	margin:0 0 2px 0; 
	border-radius:0 0 5px 5px; 
	}
/*autre specifications*/
#journal, aside {
	background-image:url(../images/fond_clair.jpg);
	}
#journal {
	width:68%;
	}
aside {
	width:30%;
	border-bottom: 4px solid #027ea6;
	border-left: 4px solid #027ea6;
	border-right: 4px solid #027ea6;
	border-radius: 0 0 0.4em 0.4em;
	-moz-border-radius: 0 0 0.4em 0.4em;
	-webkit-border-radius: 0 0 0.4em 0.4em;
	-webkit-box-shadow: inset 2px 2px 2px 2px rgba(2,126,166,.3);
	-moz-box-shadow: inset 2px 2px 2px 2px rgba(2,126,166,.3);
	box-shadow: inset 2px 2px 2px 2px rgba(2,126,166,.3);
	min-height:300px;
	width:30%;
	clear:none;
	}
article {
	background:#E1E6FA;
	background-image:url(../images/fond_clair.jpg);
	}
.list_carousel {	width: 150px;	}

#films iframe{ /* affichage des videos */
	width:90%;
	height:300px;
	margin: 0 0 0 2%;
	padding:0;
	text-align: center;
	}
 }    @media only screen and (max-width: 599px) {

/* ====================
    Smartphones
   ==================== */
body{
	font-family: verdana;
	font-size:100%;
	border: 0;
	-webkit-font-smoothing: antialiased;
	}
h1 {	font-size:1em;
	width: 100%;
}
h3{ margin-top: 10px; }
#logo  {
	width: 40%;
	height: auto;
  margin:0 30%;
}
#logogif {
	position:relative; 
  width: 40%;
  height: auto;
  margin: 0 25%; 
  }
  #logogif img {
  width: 100%;
  height: auto;
    }
#slideshow {margin-left: 0;	float:left; width:100%;}
/* styling menu button */
.nav-open, .nav-close {
	background: #183152;
	height: 25px;
	padding-left:10px;
	margin-top: 0px;
	}
nav ul {		
	-webkit-transition: max-height .9s;
	-moz-transition: max-height .9s;
	-ms-transition: max-height .9s;
	-o-transition: max-height .9s;
	transition: max-height .9s;
	-webkit-transform: translateZ(0); /* activating hardware acceleration */
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	}
.nav-open:before {content: "▼ ";}
.nav-close:before {content: "▲ ";}
	
#sommaire:not(:target) nav ul {
		max-height: 0;
		overflow: hidden;
	}
#sommaire:not(:target) .nav-open, #sommaire:target .nav-close {display: block;}
#sommaire:not(:target) .nav-close, #sommaire:target .nav-open {display: none;}
nav a, .nav-open, .nav-close {
	display: block;
	padding: 10px 0 10px 0;
	color: #fff;
	text-decoration: none;
	}
/*barre de menu*/
nav{
	position:relative;
	margin:0em auto 1em auto;
	width:100%;
	display:block;
	overflow:hidden;
	clear:left;
	}
nav ul, nav li { 
	width:100%;
	display:block;
	background:#080830;
	}
/*menus et sous-menus = boutons du menu */
nav ul li a{ 
	display:block; 
	padding:8px 12px; /*espace dans les boutons: H x L*/
	margin:0; 
	font-size:18px; 
	white-space:nowrap; 
	background:#027ea6;
	}
nav ul ul a{ background:#183152;}
nav ul ul a:hover{ background:#027ea6;}
nav ul li a.first{
	border-radius:5px 5px 0 0; 
	border-top: 1px solid #183152;
	border-left: 1px solid #183152;
	border-right: 1px solid #183152;
 }
nav ul li:last-child a.first{
	border-radius:5px 5px 0 0; 
 }
nav ul li a.first:hover{
	background:#080830;
 }
nav ul ul li:first-child a{
	border-radius:0; 
 }
nav ul ul li:last-child a{ 
	margin:0 0 8px 0; 
	border-radius:0 0 5px 5px; 
}
#col0 {/*sommaire*/
	width:100%;
	margin-left: 10%;
	float:left;
	text-align: left;
	}
#col1 {/*sommaire*/
	width:100%;
	float:left;
	margin-left: 10%;
	text-align: center;
	}
#col2 {/*sommaire*/
	width:100%;
	float:left;
	margin-left: 10%;
	text-align: center;
	}
	article {
	text-indent:1em; /* décalage la première ligne du texte*/
	}
	#flottille p{ /* texte ourles flotilles */
width:100%;
	float:left;
	}
#flottille img{ /* images des flotilles */
	width:100%;
	height:auto;
		float:left;
		margin:0 10px;
	}
	#films iframe{ /* affichage des videos */
	width:95%;
	height:250px;
	margin: 0 0 0 0;
	padding:0;
	text-align: center;
	}
	#contact{ /* style de la page */
  width:98%;
  	margin:5px;
  }
  	textarea {
padding: 5px;
}
  #adresse{ /* style de la page */
  width:95%;
  	}
#message{ /* style de la page */
  width:95%;
  	}
 footer {
	width:auto;
	padding:2em 2em 0.5em 2em;
	}
 /* ====================
    Autres valeurs pour Smartphones ( alsacréation)
   ==================== */
  /* passer tous les éléments de largeur fixe en largeur automatique */
 body, element1, element2 {
	width: auto;
	margin: 0;
	padding: 0;
 }
 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
	max-width: 100%;
 }
/* conserver le ratio des images et empécher les débordements de boites dus aux border ou padding */
 img {
	height: auto; width: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
 }
 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
	word-wrap: break-word; /* passage à la ligne forcé */
	-webkit-hyphens: auto; /* césure propre */
	-moz-hyphens: auto;
	hyphens: auto;
 }
 code, pre, samp {
	white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments a chosse fixe */
 }
 /* Passer a une seule colonne (a appliquer aux éléments multi-colonnes) */
 element1, element2 {
	float: none;
	width: auto;
 }
 /* masquer les éléments superflus */
 .hide_mobile {
	display: none !important;
 }
 /* Un message personnalisé */
body:before {
   content: "Version mobile du site";
   display: block;
   color: #183152;
   background:#F7F0B3;
   text-align: center;
   font-style: italic;
 }
    }/*Fin du menu pour Smartphones*/