﻿

body{
    width: auto;
	left: 0;
    top: 0;
    margin: 0px;
    padding: 0px;
	/*font-family: "Comic Sans MS", arial;*/
	font-size: 16px;
}

header.topbar > div {
    background-color: #DDD;
    position: fixed;
	padding-top: 10px;
	font-weight: bold;

    width: 100%;
    height: 80px;
    opacity: 0.85;
    z-index: 10;
    top: 0;
    left: 0;
}
div.sticky {
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

#entete_o{ overflow:hidden; }
#entete_FFRS_o{
    margin: 0px;
	float: left;
	width: 200px;
}
#entete_IDF_o{
	float: right;
	width: 100px;
}
#entete{ 
	overflow: hidden; 
	position: relative;
}
#entete_FFRS{
    position: absolute;
	top: 0;
    left: 5px;
	/* height: auto; */
}
#entete_IDF{
	position: absolute;
	top: 0;
    right: 3px;
}
#entete_texte{
	/*margin: 0 200px;*/
	text-align: center;
	font-size: 24px;
	line-height: 20px;
	font-weight: bold;
	padding-top: 10px;
	height: 46px; /* ; inherit*/
}

#Sel_Event{
	background-color: #CCC;
    margin-top: 116px;
	position: fixed;
	width: 100%;
	top: 0;
    opacity: 0.95;
    z-index: 1;
	padding: 3px 8px;
}
#Sel_Event span{
	hyphens : none;
}

#contenu{
    /*margin: 5px;*/
    margin-top: 140px;
}

#list_deroul{
            /*width: 200px;*/
            overflow: auto;
            /*font-size: 2em; 
			margin-top: 20px; 
            border: 5px groove red;
			*/
			z-index: 5;
            margin: auto;
			padding:  1px 10px ;
            text-align: center;
}
#list_deroul p{
                color: white;
                text-shadow: 0px 0px 5px black;
}
#list_deroul #les_h6{
            border: 5px groove red;
            max-height: 250px;
            overflow: auto;
}

/* ============  TABLE ===========  */
.table100 {
            width: 100%;
			max-width: 100%;
			margin: auto;
            vertical-align: middle;
			text-wrap: wrap;
			border: 1px solid ;
}
.table_libre {
            min-width: 40%;
			max-width: 100%;
			margin: auto;
            vertical-align: middle;
			text-wrap: wrap;
			border: 1px solid ;
}		
th     { background-color : #52BCCC; 
	  background: linear-gradient(to bottom,  #2388CC,  #55E6D7);
	  color: #FFF;
	  height: 30px; 
	  /*border-bottom: 1px solid #111;*/
	}


tr:nth-child(even) { 	background: #f0f0f0 ; }
tr:nth-child(odd)  { background-color : #CED4E5; }

tr:hover {background-color: #55E6D7; }
	
tfoot {
 background-color : #DED4E5; 
 
 }
 
.inlin_block {  display: inline-block; width: 100%; position: relative;}
.block {  display: block; position: relative;}

.t_cen { text-align:center; }
.t_left { text-align:left; padding-left: 5px;}
.t_right { text-align:right; padding-right: 5px;}
.t_bol { font-weight: bold; }

.t_dnwtotop { writing-mode: vertical-rl; text-orientation: upright; }
.tt_larg {	column-span: all; }
.no_OF {	overflow:hidden;
		text-overflow: ellipsis;
		white-space: normal;
 }

.ABR { display: none; }
.URGE { background-color: #FFF !important;
	height: 30px;
	color: red; 
}
 .VALID{ background-color: #FFF !important;
	height: 30px;
	color: black; 
}
/* ============  MENU ===========  */

#menu {
	background: #64CCC2;
	background: linear-gradient(to bottom,  #2388CC,  #55E6D7);
	color: #FFF;
	top: 0px;
	height: 30px;
	padding-left: 18px;
	border-radius: 0px;
}
#menu ul, #menu li {
	margin: 0 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
}
#menu a {
	display: block;
	line-height: 30px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16px;
	/* text-transform: capitalize; */
}
#menu a.dropdown-arrow:after {
	content: "\2207";   /* ""\2207"    \2193" "\2228"  e9dc   */
	margin-left: 5px;
}
#menu li a:hover {
	color: #000000;
	background: #2388CC;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 30px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 30px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261"; /* LE BURGER */
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #2388CC;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 16px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #55E6D7;
	color: #171717;
}
@media screen and (max-width: 700px){
	#menu {position:relative}
	#menu ul {background: #2388CC;position:absolute;top:100%;right:0;left:0;z-index:3;width:70%;height:auto;display:none}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:white}
	#menu input:checked + label:before {content:"\2261"}
	#menu input:checked ~ ul {display:block}
	
	header.topbar > div { height: 37px;}
	#entete_texte{	padding-top: 0;	line-height: 16px; height: auto }
	#entete_IDF, #entete_FFRS {visibility: hidden}
	#Sel_Event{ margin-top: 77px;}
	#contenu    { margin-top: 120px;}
	
	.LIC,.NEE,.CAT { display:none; }
	.ABR { display:revert; }
	
	
}


@media (max-width: 640px) {
	* {	box-sizing: border-box;	}

	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
	body {
		width: auto;
		margin: 0;
		padding: 0;
		font-size: 15px;
	}

	/* 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 */
	img {
		height: auto;
	}
	
	/* gestion des mots longs */
	textarea,	table,
	td,			th,
	code,		pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,		pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}

	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */
	.u-mobile {		display: block;          
					display: revert !important; /* affichage des éléments */        }        
	.u-no-mobile {	display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé 
	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}*/
	
	header.topbar > div { height: 37px;}
	#entete_texte{	padding-top: 0;	line-height: 16px; height: auto }
	#entete_IDF, #entete_FFRS {visibility: hidden}
	#Sel_Event{ margin-top: 77px;}
	#contenu    { margin-top: 120px;}
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
  
  	header.topbar > div { height: 37px;}
	#entete_texte{	padding-top: 0;	line-height: 16px; height: auto }
	#entete_IDF, #entete_FFRS {visibility: hidden}
	#Sel_Event{ margin-top: 77px;}
	#contenu    { margin-top: 120px;}
}
