@charset "utf-8";

*
{
	box-sizing: border-box;
}

html, body
{
	width: 100%;
	height: 100%;
	margin:0px;
	padding:0px;
}

html
{
	/*overflow-y: scroll;*/
	/*scrollbar-width: thin;*/
}

a, div, li
{
	outline:none;
}

input::-moz-focus-inner
{
    border:0;
}

img
{
	margin:0px;
	padding:0px;
	border:none;
}

.discover
{
	display: none;
}

.ablack
{
	text-decoration: none;
	color: black;
}

.page
{
	width: 100%;
	min-height: 100%;
	background-color:#EEE;


	display:flex;
	/*justify-content:center;
	align-items:center;*/
	flex-direction:column;
}

/*.qqq*/

.left
{

}


.left img
{
	max-width: 100%;
	height: auto;
}

.middle
{


}

.right
{
	text-align: center;
	/*background-color: #CCC*/

	border-top: 5px solid #DDD;
	border-bottom: 5px solid #DDD;
}

details 
{
	padding: 20px 0;

}



.logo
{

	text-align: center;
	padding: 10px 0;
}

.contenu_base
{
	margin: 30px;
	text-align: justify;
}

.contenu_base_2
{}

.coloror
{
	color: #A46512;
	color: #DF8D00;

	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}


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

	.page
	{
		flex-direction:row;

		
	}

	.qqq
	{
		align-self: flex-start;
		width: 25%;
		top:0;
		left:0;
	    bottom:0;
		position:fixed;
	    overflow-y:auto;
		overflow-x:hidden;
		scrollbar-width: thin;
	}

	.left
	{



	}

	.middle
	{
		width: 75%;
		margin-left: 25%;
	}

	.right
	{
		padding: 20px;

		border-bottom: none;

		font-size:13px;
		font-size:0.8125rem;

		text-align: left;

	}



	#info > summary {
		list-style: none;
	}

	#info > summary::-webkit-details-marker {
		display: none;
	}

	}




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

	.page
	{
		
		flex-direction:row;

		
	}

	.left
	{
		align-self: flex-start;
		width: 20%;

		top:0;
		left:0;
	    bottom:0;
		position:fixed;
	    overflow-y:auto;
		overflow-x:hidden;
		scrollbar-width: thin;

	}

	.middle
	{
		width: 60%;
		margin: 0 auto;


		box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.1) inset;

	}

	.right
	{
		padding: 20px;

		align-self: flex-start;
		width: 20%;

		top:0;
		right:0;
	    bottom:0;
		position:fixed;
	    overflow-y:auto;
		overflow-x:hidden;
		scrollbar-width: thin;

		border-top:none;
		font-size:16px;
		font-size:1rem;
	}
}











/* ------------------------------------------------------------------------------ */
/* -------------------------- MESSAGE FLASH ----------------------- */

.supflash 
{
	display: none;
}

#supflash-0:checked ~ .alert-0
{
	display: none;
}

#supflash-1:checked ~ .alert-1
{
	display: none;
}

#supflash-2:checked ~ .alert-2
{
	display: none;
}

.lblsupflash
{
	display: block;
	cursor: pointer;
}

.sg1, .sg2
{
	margin: auto;
}

.sg1
{
	width: 100%;
	padding-right: 20px;
}

.sg2
{
	font-size: 23px;
	width: 29px;
	border-radius: 50px;
}


.alert-message {

	text-align:center;
	word-wrap: break-word;

	display: flex;
	justify-content: space-around;

	padding: 0.50rem 1rem;
  	margin-bottom: 0.75rem;
  	border-radius: 0.1rem;

  	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
}

.alert-success
{
	color: #155724;
  	background-color: #d4edda;
}

.alert-info
{
	color: #0c5460;
  	background-color: #d1ecf1;
}

.alert-warning
{
	color: #856404;
  	background-color: #fff3cd;
}


.alert-danger
{
	color: #721c24;
  	background-color: #f8d7da;
}

.alert-link
{
	font-weight: 600;
}

.alert-success .alert-link 
{
  color: #155724;
}

.alert-info .alert-link 
{
  color: #0c5460;
}

.alert-warning .alert-link 
{
  color: #856404;
}

.alert-danger .alert-link 
{
  color: #721c24;
}







/* -------------------------------------------------------------- */
/* ----------------------------- HEADER ------------------------- */

.header img
{
	/*width: 100%;
	height: 0;
	padding-top: 342px;
	background-image:url(../images/titre/logo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;*/



	/*background-image:url(../images/titre/Logo_OSI-PME.jpg);*/
	/*max-width: 90%;
	height: auto;*/
}


/* -------------------------------------------------------------------------------------------------------- *\
 * -------------------------------------------------------------------------------------------------------- *
                                                        MENU
 * -------------------------------------------------------------------------------------------------------- *
\* -------------------------------------------------------------------------------------------------------- */

.menu { }

.menu_onglets
{ 
	width: auto;
	padding: 0.5%;
	/*font-weight:bold;*/
	font-size:19px;
	font-size: 1.1875rem;
	position:relative;
	

	list-style-type: none;
	
	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;	
}

.menu_onglet
{
	min-height:50px;
	min-height: 3.125rem;
	text-align:center;
	vertical-align:middle;

	position:relative;
}


.menu_onglet:hover, .menu_onglet_actif:hover, 
.menu_onglet:focus, .menu_onglet_actif:focus, 
.menu_onglet:active, .menu_onglet_actif:active
{
	background-color: #A46512;
}

.menu_onglet_actif
{
	/*background-color: #A46512;*/
	background-color: #A46512;
}

.menu_onglet_actif .menu_onglets_lien
{
	color: #FFF;
}

.menu_onglets_lien
{
	text-decoration:none;
	color:#A46512;
	min-height:50px;
	min-height: 3.125rem;
	line-height:50px;
	line-height: 3.125rem;
	display:block;
	/*word-break: break-word;*/

}

.menu_onglets_lien:hover, 
.menu_onglets_lien:focus,
.menu_onglets_lien:active
{
	color: #FFF;
}

/*a:hover {
  color: gold;
}*/


@media only screen and (min-width: 800px) and (max-width: 1024px){

	.menu_onglets
	{
		font-size: 1rem;
	}
}



/* -------------------------------------------------------- */
/* ------------------------ FOOTER ------------------------ */

.footer
{
	text-align:center;
	width:100%;

	margin:0 auto;
	font-size:13px;
	font-size:0.8125rem;
	position:relative;


	clear:both;
	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	
	
}

.footer a
{
	color:black;
}



/*----------------------------------------------------------------------------*/
/*-------------------------------- Contact --------------------------------*/

.text-center
{
	text-align: center;
}

.text-justify
{
	text-align: justify;
}

.formu
{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	/*background-color: red;*/

}

input[type=text],
input[type=email],
input[type=password],
input[type=submit]
{
	text-align:center;
	width:100%;
	height:3rem;
	border-radius:2px;
	outline:0;
}

input[type=text],
input[type=email],
input[type=password]
{
	border:1px solid rgba(0,0,0,.3);
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus
{
	border:1px solid rgba(0,0,0,.7);
}

input[type=text]:valid,
input[type=email]:valid,
input[type=password]:valid
{
	background-color: rgba(0,255,0,.1);
	box-shadow:inset 0 0 3px 0px #0F0;
}

input[type=submit]
{
	font-weight:600;
	font-size:14px;
	font-family:sans-serif;
	background:#e6e6e6;
	color:#333;
}

input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover
{
	background:#f0f0f0;
	color:#000;
}

textarea.message
{
	width:100%;
	height: 200px;
	border-radius:2px;
	outline:0;
	border:1px solid rgba(0,0,0,.3);

	padding: 10px;
	resize : vertical;
}

textarea.message:focus
{
	border:1px solid rgba(0,0,0,.7);
}


.lbl-pwd
{
	position: absolute;
    z-index: 2;
    top: -8px;
    top: -0.5rem;
    left: 20px;
    left: 1.25rem;
    background-color: white;
    padding: 0px 10px;
    padding: 0px 0.625rem;
    color: #555;
    font-size: 14px;
    font-size: 0.875rem;
    border-radius: 50px
}


.dhj
{
	width: 100%;
	position: relative;
	margin-bottom:20px;
}

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

	.dhj
	{
		width: 75%;
	}

}




/*----------------------------------------------------------------------------*/
/*------------------------------ Mention légales -----------------------------*/

.contenu_mention
{
	min-height:490px;
	padding-left:40px;
	padding-right:40px;
	text-align:justify;
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-family:"Courier New", Courier, monospace;
}

.contenu_mention a
{
	color:black;
}

.contenu_mention p
{
	font-size:14px;
}

.contenu_mention li img
{
	margin-bottom:-3px;
}












.fot:not(:checked),
.fot:checked {
	position: absolute;
	left: -9999px;
}
.fot:not(:checked) + label,
.fot:checked + label {
	position: relative;
	padding-left: 60px;
	padding-top: 4px;
	cursor: pointer;
}
.fot:not(:checked) + label:before,
.fot:checked + label:before,
.fot:not(:checked) + label:after,
.fot:checked + label:after {
	content: '';
	position: absolute;
}
.fot:not(:checked) + label:before,
.fot:checked + label:before {
	left:0; top: 4px;
	width: 38px; height: 14px;
	background: #DDDDDD;
	border-radius: 15px;
	transition: background-color .2s;
	border:1px solid #CCC;
}
.fot:not(:checked) + label:after,
.fot:checked + label:after {
	width: 24px; height: 24px;
	transition: all .2s;
	border-radius: 50%;
	background: #BBB;
	top: 0px; left: 16px;
	box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.4);
}

/* on checked */
.fot:checked + label:after {
	background: #44FF44;
	top: 0px; left: 0px;
}











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

/* slider */

div#slider
{
	display: none;
}


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

	div#slider
	{
		display: block;
	}


	div#slider figure {
	  position: relative;
	  margin: 0;
	  padding: 0;
	  font-size: 0;
	}


	div#slider figure img
	{ 
		width: 100%; 
		height: auto; 
		height: 400px; 
		border-radius: 2px;

	}

	.bbbbb
	{
		z-index: 9999;
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 24px;
		background-color: rgba(255, 255, 255 ,.7);
		width: 60%;
		margin: 20px;
		padding: 20px;
		border-radius: 5px;
		text-align: center;
	}



	#Z1
	{
		-webkit-animation: 20s sli1 infinite;
		animation: 20s sli1 infinite;
	}

	#Z2
	{
		-webkit-animation: 20s sli2 infinite;
		animation: 20s sli2 infinite;
		margin-top: -100%;
	}

	#Z3
	{
		-webkit-animation: 20s sli3 infinite;
		animation: 20s sli3 infinite;
		margin-top: -100%;	
	}

	#Z4
	{
		-webkit-animation: 20s sli4 infinite;
		animation: 20s sli4 infinite;
		margin-top: -100%;	
	}

	#Z5
	{
		-webkit-animation: 20s sli5 infinite;
		animation: 20s sli5 infinite;
		margin-top: -100%;	
	}


	#Y1
	{
		-webkit-animation: 20s kli1 infinite;
		animation: 20s kli1 infinite;
	}

	#Y2
	{
		-webkit-animation: 20s kli2 infinite;
		animation: 20s kli2 infinite;
	}

	#Y3
	{
		-webkit-animation: 20s kli3 infinite;
		animation: 20s kli3 infinite;	
	}

	#Y4
	{
		-webkit-animation: 20s kli4 infinite;
		animation: 20s kli4 infinite;	
	}

	#Y5
	{
		-webkit-animation: 20s kli5 infinite;
		animation: 20s kli5 infinite;	
	}




	/*@-webkit-keyframes sli1 {
	  0% { opacity: 1; }
	  25% { opacity: 1; }
	  30% { opacity: 0; }
	  60% { opacity: 0; }
	  65% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 1; }
	}*/



	@keyframes sli1 {
	  0% { opacity: 1; }
	  15% { opacity: 1; }
	  20% { opacity: 0; }
	  35% { opacity: 0; }
	  40% { opacity: 0; }
	  55% { opacity: 0; }
	  60% { opacity: 0; }
	  75% { opacity: 0; }
	  80% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 1; }
	}


	@keyframes sli2 {
	  0% { opacity: 0; }
	  15% { opacity: 0; }
	  20% { opacity: 1; }
	  35% { opacity: 1; }
	  40% { opacity: 0; }
	  55% { opacity: 0; }
	  60% { opacity: 0; }
	  75% { opacity: 0; }
	  80% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 0; }
	}


	@keyframes sli3 {
	  0% { opacity: 0; }
	  15% { opacity: 0; }
	  20% { opacity: 0; }
	  35% { opacity: 0; }
	  40% { opacity: 1; }
	  55% { opacity: 1; }
	  60% { opacity: 0; }
	  75% { opacity: 0; }
	  80% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 0; }
	}


	@keyframes sli4 {
	  0% { opacity: 0; }
	  15% { opacity: 0; }
	  20% { opacity: 0; }
	  35% { opacity: 0; }
	  40% { opacity: 0; }
	  55% { opacity: 0; }
	  60% { opacity: 1; }
	  75% { opacity: 1; }
	  80% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 0; }
	}


	@keyframes sli5 {
	  0% { opacity: 0; }
	  15% { opacity: 0; }
	  20% { opacity: 0; }
	  35% { opacity: 0; }
	  40% { opacity: 0; }
	  55% { opacity: 0; }
	  60% { opacity: 0; }
	  75% { opacity: 0; }
	  80% { opacity: 1; }
	  95% { opacity: 1; }
	  100% { opacity: 0; }
	}





	@keyframes kli1 {
	  0% { opacity: 1; }
	  15% { opacity: 1; }
	  20% { opacity: 0; }
	  35% { opacity: 0; }
	  40% { opacity: 0; }
	  55% { opacity: 0; }
	  60% { opacity: 0; }
	  75% { opacity: 0; }
	  80% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 1; }
	}


	@keyframes kli2 {
	  0% { opacity: 0; }
	  15% { opacity: 0; }
	  20% { opacity: 1; }
	  35% { opacity: 1; }
	  40% { opacity: 0; }
	  55% { opacity: 0; }
	  60% { opacity: 0; }
	  75% { opacity: 0; }
	  80% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 0; }
	}


	@keyframes kli3 {
	  0% { opacity: 0; }
	  15% { opacity: 0; }
	  20% { opacity: 0; }
	  35% { opacity: 0; }
	  40% { opacity: 1; }
	  55% { opacity: 1; }
	  60% { opacity: 0; }
	  75% { opacity: 0; }
	  80% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 0; }
	}


	@keyframes kli4 {
	  0% { opacity: 0; }
	  15% { opacity: 0; }
	  20% { opacity: 0; }
	  35% { opacity: 0; }
	  40% { opacity: 0; }
	  55% { opacity: 0; }
	  60% { opacity: 1; }
	  75% { opacity: 1; }
	  80% { opacity: 0; }
	  95% { opacity: 0; }
	  100% { opacity: 0; }
	}


	@keyframes kli5 {
	  0% { opacity: 0; }
	  15% { opacity: 0; }
	  20% { opacity: 0; }
	  35% { opacity: 0; }
	  40% { opacity: 0; }
	  55% { opacity: 0; }
	  60% { opacity: 0; }
	  75% { opacity: 0; }
	  80% { opacity: 1; }
	  95% { opacity: 1; }
	  100% { opacity: 0; }
	}

}