@charset "UTF-8";
	@font-face {
		font-family: myFirstFont;
		src: url(LuloCleanOneBold.otf);
	}
	
/*
	@viewport {
		orientation: portrait;
	}
*/
	
/*
	@media (orientation: portrait) {
		body {
			flex-direction: row;
  		}
	}
*/

	@media screen and (orientation: landscape) {
		#infoPlusBas {
			width: 100%;
			height: 60px;position:fixed; background-color: #fcfcf4;
			margin: 0 auto;
			z-index: 10000000000000;
			bottom: 0;
 		}
 	}
	
	html {
		width: 100%;
		height: 100%;
		background-color: #c4a494;
		margin: 0;
		padding: 0;
	}
	body {
		width: 100%;
		height: 100%;
		background-color: #c4a494;
		margin: 0;
		padding: 0;
	}
	header {
		width: 100%;
		height: 92px;
		background-color: #ac5454;
/* 		padding: 10px; */
	}
	header div {
/* 		padding: 10px; */
	}

	header img {
		width: 149px;
		height: auto;
/* 		margin: 1px 0 0 1px; */
		padding: -1px 0 0 0;
		
	}
	.circle {
		height: 151px;
		width: 151px;
		background-color: #fff;
		border-radius: 50%;
		padding: 1px 0 0 -1px;
	}
	div p a {
		 color: white;
	}
/*
	#siteweb_produit a:hover {
		background-color: #ac5454;
	}
*/

	.firstDiv {
		margin-top: -40px;
		padding: 30px 0 90px 0!important;
	}
	
	.firstDiv {
		font-family: "helvetica";
		color: white;
		font-size: 18px;
		padding: 0 20px 0 20px;
	}
	
	.firstDiv_list {
/* 		margin-top: 30px; */
		padding: 60px 0 80px 0!important;
	}
	h1 {
		padding: 0 20px 0 20px;
		font-family: myFirstFont;
		color: white;
		font-size: 25px;
	}
	p {
		font-family: "helvetica";
		color: white;
		font-size: 18px;
		padding: 0 20px 0 20px;
	}
	img {
		max-width: 100%;
		height: auto;

	}
	.firstDiv img {
		margin: 5px 0 10px 0;
		border-bottom : 2px solid white;
		border-top    : 2px solid white;
	}
	video {
		max-width: 100%;
		height: auto;
		margin: 5px 0 10px 0;
		border-bottom : 2px solid white;
		border-top    : 2px solid white;
	}
	
	.item {
		padding: 0 20px 0 20px;
		font-family: "arial";
		font-size: 25px;
		font-weight: bold;
		color: white;
	}

	
	ul, li {
		list-style-type: none;		
	}
	
	ul li {
		padding: 15px;
		margin: -1px 20px -1px 20px;
		border: 1px solid #ffffff;
		font-size: 20px;
		color: white;
		font-family: "arial";
	}
	
/*
	ul li:first-child {
		border-radius: 10px 10px 0 0;
	}
	ul li:last-child {
		border-radius: 0 0 10px 10px;
	}	
*/
	.first_child {
		border-radius: 10px 10px 0 0;
	}
	.last_child {
		border-radius: 0 0 10px 10px;
	}
	.corner_li {
		border-radius: 10px;
	}
	
	ul li:hover, ul li:active {
		background-color: #ac5454;
	}

	
	a {
		text-decoration: none;
	}
	
	ul, menu, dir {
		display: block;
		list-style-type: none;
		margin-block-start: 1em;
		margin-block-end: 1em;
		padding-inline-start: 0px;
	}
	ul li span {
		float: right;
	}

/* ICI C'EST LES FLECHE DE NAVIGATION EN HAUT ET EN BAS */

/* CLASS DES FLECHES DU HAUT */
/*
	.navigationFleche {
		width: 100%;
		height: 70px;
		margin: 0 auto;
	}
*/

	header #RETOUR {
		width: auto;
		height: 92px;
		float: left;
		padding: 20px 0 20px 20px;
		display: block;
	}

	header #RETOUR img {
		width: 40px;
		height: auto;
		padding: 10px 0 0 0;
	}
	
	
/* OUVERTURE */
	
	.ouverture {
		margin-top: 100px;
		margin-bottom: 60px;
	}
	
	.ferme {
		font-size: 20px;
		text-transform: none!important;
		color: #ac5454!important;
	}
	
	.ouvert {
		font-size: 20px;
		text-transform: none!important;
		color: #0e8e01!important;
	}
	
	.midisoir {
		padding-right: 20px;
		font-size: 20px;
		text-transform: none!important;
		color: #fcfcf4!important;
	}
	

/* CLASS DES FLECHES DU BAS */
	.navigationFleche {
		width: 100%;
		height: 70px;
		margin: 0 auto;
		display: inline-flex;
	}
	
	
	.navigationFleche nav.navFleche {
		width: 100%;
		height: 70px;
		position: block;
		margin: 0 auto;
		z-index: 10000000000000;
		bottom: 0;
	}

	.navigationFleche a.first {
		float: left;
		display: block;
		text-align: center;
		padding: 10px 20px;
		text-decoration: none;
	}
	
	.navigationFleche a.last {
		float: right;
		display: block;
		text-align: center;
		padding: 10px 20px;
		text-decoration: none;
	}
	
	.navigationFleche a.center {
		display: block
		text-align: center;
		margin: auto;
		padding: 10px 20px;
		text-decoration: none;
	}
	
	.navigationFleche a img {
		width: 40px;
		height: 40px;
		border-bottom : 0px!important;
		border-top    : 0px!important;
	}
	
	.navigationFleche a img.svgRotate {
		transform: rotate(180deg);
	}

/* FOOTER */

	
	footer {
		width: 100%;
		margin: 0 auto;
	}
	nav.footernav {
		width: 100%;
		height: 70px;position:fixed; background-color: #fcfcf4;
		margin: 0 auto;
		z-index: 10000000000000;
		bottom: 0;
	}
	
	footer nav a img {
		width: 40px;
		height: 40px;
	}
	footer nav a img.svgRotate {
		transform: rotate(180deg);
	}


	
	footer nav a.first {

		float: left;
		display: block;
		text-align: center;
		padding: 10px 20px;
		text-decoration: none;
	}
	footer nav a.last {

		float: right;
		display: block;
		text-align: center;
		padding: 10px 20px;
		text-decoration: none;
	}
	

/* 	CSS QRCODE  */

	.Conteneur span {
		color: white;
		text-transform : uppercase;
		font-family: Arial, Helvetica, sans-serif;
	}
	.span_traduction {
		font-size: 11px!important;
	}
	
	#infoPlusBas {
		width: auto;
		height: 1000px;
	}
/*
	.circle {
		height: 70px;
		width: 70px;
		background-color: #fff;
		border-radius: 50%;
	}
	.circle img {
		width: 68px;
		height: auto;
		margin: 1px 0 0 1px;
	}
*/

				.Conteneur span {
					color: white;
					text-transform : uppercase;
					font-family: Arial, Helvetica, sans-serif;
				}
				.span_traduction {
					font-size: 11px!important;
				}
				
				#conteneur_info_app {
					width: 100%;
					height: 200px;
					display: block;
					border-bottom: white 1px solid;
				}
				
				#conteneur_info_app p {
					padding: 0px 0 0 0;
					color: white;
					text-transform : uppercase;
					font-family: Arial, Helvetica, sans-serif;
				}
				
				#conteneur_info_app img {

					
					
				}
				
				.footernav span {
					font-size: 10px!important;
					color: #AF9588;
					text-transform : uppercase;
					font-family: Arial, Helvetica, sans-serif;
				}
				
				.footernav img {
					padding: 5px 0 0 0;
				}


	
	@media (min-width: 600px) {
		html {
			width: 100%;
			height: 100%;
			background-color: #c4a494;
			margin: 0;
			padding: 0;
		}
		body {
			width: 580px;
			height: 100%;
			background-color: #c4a494;
			margin: 0 auto;
			padding: 0;

		}
		nav.footernav {
/* 			width: 580px; */
			width: 580px;
			height: 60px;position:
			fixed; background-color: #fcfcf4;
			margin: 0 auto;
			z-index: 10000000000000;
			bottom: 0;
			padding-bottom: 15px;
		}
		


		
	}
/* 	ICI c'est la page SWITCH */