/*-------------------------------------------------------insertion font*/
@font-face 
	{
	font-family: "chalk";
	src: url("font/LittleBird.ttf");
	}
/* ------------------------------------------------------------basic elements */

html {
	margin: 0;
	padding: 0;
	height: 100%;
	}

body { 
	font-family: 'Patrick Hand', cursive;
	line-height: 1.88889;
	font-size: 100%;
	color: #555753; 
	}
input[type="submit"], input[type="button"]{
	border-radius: 3px 3px 3px 3px;
	font-family: "Source Sans Pro", sans-serif;
	font-family: 'Patrick Hand', cursive;
	
}
input[type="number"]{
	 style ="width: 50%
}
input[id="BB"]{
	width: 400px;
	height: 100px;
	font-size: x-large;
	background-color: #44ceaa ;
	font-weight: bolder;
	margin-left: auto;
	margin-right: auto;
}
form[class="centered"]{
	display: flex;
	align-items: center;
}
/*----------------------------------------------------------Page de connection*/
.page_connexion{
}
.tableau_connexion{
	font-family: 'Patrick Hand', cursive;
	border-radius: 0px 0px 10px 10px;
	margin:auto;
	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  	transform: translateY(-100%); /* tiré de la moitié de sa propre hauteur */
	border: 1px solid black;
	border-top: none;
	padding: 10px;
	background-color: #303030;
	font-weight: bold;
	color: #C9A0DC;
	box-shadow: 3px 6px 12px #303030;
}
.tableau_connexion caption{
	border-radius: 10px 10px 0px 0px;
	background-color: #303030;
	border: 1px solid black;
	border-bottom: none;
	padding-top: 10px;
	box-shadow: 3px 6px 12px #303030;
}
.tableau_connexion td, .tableau_connexion label{
}
/*.tableau_connexion input[type=submit]{
	border-radius: 3px 3px 3px 3px;
}*/
/*-------------------------------------------------éléments de texte classiques*/
.underlined{
	text-decoration: underline; 
}
.bigtitle{
	text-decoration: underline;
	font-style: italic;
	font-weight: bold;
}
.italique{
	font-style: italic;
}
.small_ita{
	font-size: 70%;
	font-style: italic;
}
.justify_right{
	text-align: right;
}
.justify_center{
	text-align: center;
}
.justify_left{
	text-align: left;
}
.caption_center{
	text-decoration: underline;
	text-align: center;
}
.case_titre{
	padding-top: 05px;
}
/*-------------------------------------------------éléments de tableau classiques*/
.tableau_simple{
	border-collapse: collapse;
}
/*-------------------------------------------------------------------Les liens */
.lien:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #B7A5DF;
	}
.lien:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #B7A5DF; 
	}
.lien:hover, .lien:focus, .lien:active { 
	text-decoration: underline; 
	color: #9685BA;
	}


/*------------------------------------------------Éléments de la page*/
.img_fixed{
	position: fixed;
	left:190px;
	z-index: -2;
	opacity: 0.5;
	height: 100%;
	width: 100%;
}
.img_fixed img{
	min-width: 100%;
	min-height:100%;
}
.corps {
	margin-top: 50px;
	margin-bottom: 50px;
	position: absolute;
	left: 300px;
	top: 50px;
	padding: auto;
	z-index: 0;
	font-family: "Source Sans Pro", sans-serif;
	line-height: 1.88889;
	font-size: 100%;
	color: #555753;
	padding-bottom: 50px;
}

/*Trois sections du cadre*/
#menu {
/*	position: fixed;*/
	font-size: 110%;
	text-align: center;
	width: 180px;
	height: 100%;
	padding: 10px;
	margin-top: 70px;
	border: 1px;
	position: fixed;
	top: 0;
	left: 0; 
	right: 0;
	background-color: #000000; 
	color: white;
	z-index: 1;
}
.img_small{
	width: 100%;
}
.img_small img{
	width: 85%;
}
/*--------------------------------petit carré légende*/
a.carre{
	width:110px; 
	height:20px;  
	text-decoration:none; 
	color:white;
	text-align:center; 
	font-weight:bold; 
	background-color:#000080;
	padding:5px}
 
.carre{
	padding:5px;}

/*--------------------------------tentative de menu déroulant vertical*/
.navigation{
	width: 175px;
}
.navigation dl{
	height: 40px;
	margin: 0;
	padding: 0;
	display: block;
}
.navigation dt{
	display: block;
	height: 40 px;
	line-height: 40px;
}
.navigation dt:hover, .navigation li:hover{
	background-color: gray;
}
.navigation dt:hover a, .navigation li:hover a{
	color: black;
}
.navigation dd{
	display: block;
	width: 200px;
	background-color: black;
	float: left;
	margin: 0;
	padding: 0;
}
.navigation dd ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.navigation dl dd{
	display: none;
}
.navigation dl:hover dd{
	display: block;
	position: absolute;
	left: 185px;
	transform: translateY(-40px);
	z-index: 100; 
}
.contacts{
	font-size:80%;
}
#tete {
	font-size: 110%;
	height: 70px;
	padding: 0;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	z-index: 2;
	background-color: #000000; 
	color: white;
	font-weight: bold;
}
.sousmenu {
	position: fixed;
	height: 40px;
	top: 60px;
	left: 0;
	width: 1440px;
	background-color: black;
}
/*----------------------------------- mise en page de l'en tête*/
.bienvenue{
	height: 30px;
	display: flex;
	justify-content:center;
}
.nav_tete{
	height: 40px;
	width: 100%;
/*	margin: auto;*/
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.nav_tete dl{
	height: 40px;
	margin: 0;
	padding: 0;
	display: block;
	text-align: center;
}
.nav_tete dt{
	display: block;
	float: left;
	width: 150px;
	height: 40px;
	line-height: 40px;
}
.nav_tete dt:hover{
	background-color: gray;
}
.nav_tete dt:hover a{
	color: black;
}

#pied{
	position: fixed;
	bottom: 0;
	left: 0; 
	right: 0;
	text-align: center;
	height: 30px;
	line-height: 30px;
	background-color: #000000; 
	color: white;
	z-index: 2;
}
/*---------------------------------------------------page en construction*/
.encours {
	width:500px;
	text-align: center;
	margin:auto;
	padding: auto;
	margin-top: 30vh; /* poussé de la moitié de hauteur de viewport */
  	transform: translateY(-100%); /* tiré de 100% de sa propre hauteur */
}
/*-------------------------------------------------------Menu du Codex */
.menu_codex ul{
	padding: 0px;
	margin: 0px;
	list-style-type:none;
	background-color: #33333;
}

.menu_codex li{
	display:inline-block;
	margin: 0px;
	padding: 0px;
	width: 200px;
	height: 40px;
	border-right: 1px solid #CCCCCC;
	text-align:center;
	line-height: 40px;
} 

.menu_codex li a{
	text-decoration: none;
	color: #FFFFF;
}
/*------------------------------------------------------page réservation*/
.page_deuxcolonnes{
/*    height: 100%;*/
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
    /*justify-content: space-between;*/
} 
.colonne_droite{
	order: 2;
	max-width: 49% ;
	min-width: 500px;
	margin-right: 0px;
	margin-left: 20px;
}
.colonne_gauche{
	order: 1;
	max-width: 49% ;
	min-width: 500px;
	margin-right: 0px;
	display: flex;
	flex-direction: column;
}
.formulaire_resa{
	border-style: solid;
 	position: relative;
	padding: 20px;
	font-family: 'Patrick Hand', cursive;
	text-align: center;
	max-height: 50%;
	flex:2;
	margin-bottom: 80px;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 3px 6px 12px #303030;
	background: rgba(255,255,255, 0.8);
}
/*cellule séparatrice du formulaire*/
.seconde_partie{
	height: 10px;
	border-bottom: solid silver 1px;
}
.aide{
	text-align: left;
	font-size: 80%;
}
.icone_help{
}

.resume_resa{
	font-family: 'Kalam', cursive;
	border-collapse: collapse;
	max-width: 1000px;
	margin-right: 20px;
	margin-bottom: 50px;
	margin-top: 20px;
	order: 2;
}
.almanach{
	order: 1;
	margin-bottom: 20px;
	min-width: 550px;
}
.tableau_noir{
	order: 4;
	padding-left: 50px;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	padding-top: 10px;
	background-image : url(img/blackboard.jpg);
	background-size: 220%;
	background-repeat:no-repeat;
	border-collapse: collapse;
	transform: matrix(1, 0.05, 0, 1, 0, 0);
}
.tarifs{
	margin-bottom: 50px;
}
.tableau_noir th{
	text-decoration: underline;
	justify-content: center;
	color: white;
	font-family: "chalk";
	font-size: x-large;
}
.tableau_noir span{
	font-size: small;
}
.tableau_noir td{
	padding:0;
	color: white;
	font-family: "chalk";
	font-size: 110%;
}
.separateur{
	height: 50px;
}
/*infobulles d'aide*/
.span_help {
	position: relative;  /* les .infobulle deviennent référents */
	cursor: help;
	font-size: 90%;
	line-height: 100%;
	font-family: 'Kalam', cursive;
	color: black;
	text-align: justify;
}
/* on génère un élément :after lors du survol et du focus :*/
.span_help:hover::after,
.span_help:focus::after {
	width: 200px;
	content: attr(span_label);  /* on affiche aria-label */
	position: absolute;
	z-index: 10; /* pour s'afficher au dessus des éléments en position relative */
	background-color: #fff5f2;
	border: solid red 1px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 3px 6px 12px #303030;
	padding: 10px;
}
/*-----------------------------------------------page mon compte*/
.infos_persos{
	font-family: 'Patrick Hand', cursive;
	width: 600px;
	margin-right: 80px;
	text-align: justify;
}
.pwd_block{
	padding: 20px;
	width: 450px;
	border: 1px solid black;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 3px 6px 12px #303030;
	margin-bottom: 100px;
}
/*------------------------------------------------page gestion*/
.ensemble_gauche{
	order: 1;
	margin-right: 40px;
	margin-bottom: 80px;
}
.event_officiel{
	margin: auto;
	margin-bottom: 20px;
	border: 1px solid black;
	font-family: 'Patrick Hand', cursive;
	padding: 10px;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 3px 6px 12px #303030;
}
.event_officiel a{
}
.formulaire_edition {
	border: 1px solid black;
	padding: 15px;
	font-family: 'Patrick Hand', cursive;
	text-align: center;
	max-width: 700px;
	padding-top: 0;
	order: 2;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 3px 6px 12px #303030;
}
/*------------------------------------------------menu gestion*/
#onglets{
    font : bold 11px Batang, arial, serif;
    list-style-type : none;
    padding-bottom : 24px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    border-bottom : 1px solid #9EA0A1;
    margin-left : 0;
}
#onglets li{
    float : left;
    height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: #F4F9FD;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #9EA0A1;
}
#onglets li.active{
    border-bottom: 1px solid #fff;
    background-color: #fff;
}
#onglets a{
    display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;
}
#onglets a:hover{
    background : #fff;
}
#onglets a.red{
	color: red;
}
/*-----------------------------------------------tableau de gestion*/
.gestion {
	border-width:1px; 
	border-style:solid; 
	border-color:black;
	text-align: center;
	border-collapse:collapse;
	font-family: 'Kalam', cursive;
	margin-bottom: 20px;
	width: 100%;
}
.gestion td {
}
.gestion th{
	font-size: 90%;
 	border-width: 1px;
 	border-style: solid; 
 	border-color: black;
}
 .type_adhesion{
 	width: 300px;
 }
.titre_tableau{
	font-family: cursive;
	text-decoration: underline;
	font-weight: bold;
}
/*--------------------------------------------------Page d'accueil*/
.carnet_du_jour{
 	position: relative;
	padding: 20px;
	font-family: 'Patrick Hand', cursive;
	text-align: center;
	max-height: 50%;
	flex:2;
	/*margin-bottom: 80px;
	border-radius: 10px 10px 10px 10px;
	border-style: solid;*/
	box-shadow: 3px 6px 12px #303030;
	background: rgba(255,255,255, 0.7);
	width: 92%;
}
.big{
	font-family: 'Patrick Hand', cursive;
	font-size: 150%;
}
.less_big{
	font-family: 'Patrick Hand', cursive;
	font-size:120%;
}
.smaller{
	font-family: 'Patrick Hand', cursive;
	font-size: 90%;
	font-style: italic;
}
.formulaire_cote {
	margin-top: 50px;
	height: 350px;
	border: 1px solid black;
	padding: 20px;
	font-family: 'Patrick Hand', cursive;
	text-align: center;
/*	max-width: 100%;*/
	padding-top: 0;
	order: 2;
	margin-right: 80px;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 3px 6px 12px #303030;
	background: rgba(255,255,255, 0.7);
	margin-left: 50px;
}
.formulaire_cote textarea {
	width: 100%;
	height: 200px;
	border-radius: 3px 3px 3px 3px;
}
/*-------------------------------------------------------------news*/
.section_news, .table_docs{
	background: rgba(255,255,255, 0.7);
	box-shadow: 3px 6px 12px #303030;
	margin-bottom: 25px;
	margin-top: 50px;
	padding: 5px;
}
.news{
	min-width: 500px;
	max-width: 600px;
}
.news td{
	order:1;
	text-align: justify;
}
.titre_news{
	font-family: 'Patrick Hand', cursive;
	font-size:110%;
}
.msg_news{
	font-family: 'Indie Flower', cursive;
	border-bottom: solid black 1px;
}
.sign_news{
	font-family: 'Patrick Hand', cursive;
	font-size:70%;
	font-style: italic;
}
.news td.sign_news{
	text-align: right;
}
/*--------------------------------------------------Tableau télécharger docs*/
.table_docs {
	border-collapse: collapse;
	font-family: 'Kalam', cursive;
	width:800px;
}
.table_docs td {
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-top: 2px;
	border: 1px solid black;
}
.table_docs form{
	text-align: center;
}
.table_docs a{
	text-decoration: none;
}
.table_docs a:hover{
	background: silver;
	text-decoration: underline;
	color: black;
}
.affiche_docs{
	margin-bottom: 50px;
}
/*------------------------------------------------------------Forum*/
.page_forum{
	/*background: darkgrey;*/
	width: 100%;
}
.f_list_theme{
}
.f_list_theme td.f_theme{
	border-radius: 10px 10px 10px 10px;
	border: 1px solid silver;
	background: #0dba86;
	text-align: center;
	width: 500px;
	padding-right: 15px;
	padding-top: 10px;
}
.f_list_theme a{
	text-decoration: none;
	color: orange;
	text-shadow: black 1px 1px 1px, black -1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px; 
	font-size: larger;
	font-family: 'Permanent Marker', cursive;
	line-height: 125%;
}
.f_list_theme a:hover{
	color: red;
	font-size: x-large;
	line-height: 80%;
}
.f_list_theme p{
	text-align: right;
	color: white;
	line-height: 80%;
}
.f_subtitle{
	font-style: italic;
}
.f_separator{
	height: 10px;
}
.f_list{
	width:100%;
}
.big_theme{
	font-size: xx-large;
	font-family: 'Permanent Marker', cursive;
	width:500px;
}
.cell_return{
	text-align: right;
	width: 230px;
}
.pin_topic{
	border-radius: 10px 10px 10px 10px;
	border: 1px solid silver;
	width:500px;
	padding-left: 20px;
	font-family: 'Kalam', cursive;
	font-size: large;
	color: red;
	text-decoration: none;
}
.notpin_topic{
	border-radius: 10px 10px 10px 10px;
	border: 1px solid silver;
	width:500px;
	padding-left: 20px;
	font-family: 'Kalam', cursive;
	font-size: large;
	color: purple;
}
.f_list a{
	text-decoration: none;
}
.pin_topic a{
	color: red;
}
.notpin_topic a{
	color: purple;
}
.f_list a:hover{
	font-size: 102%;
	text-shadow: 2px 2px 2px salmon;
}
.last{
	font-size: small;
	font-style: italic;
	width: 230px;
	text-align: justify;
}
.titre_topic{
	font-family: 'Kalam', cursive;
	font-size: large;
}
.f_message{
	border-radius: 10px 10px 0px 0px;
	border: 1px solid silver;
	padding: 5px;
	text-align: justify;
}
.f_signature{
	border-radius: 0px 0px 10px 10px;
	border: 1px solid silver;
	text-align: right;
	font-style: italic;
	font-size: 80%;
}
.formulaire_idees textarea{
	width: 400px;
	height: 200px;
}
/*-----------------------------------------------style des cellules*/
/*à réorganiser : faire cinq : top bottom left right, puis cell avec padding */
.cell_left{
	border-left: 1px solid black;
 	border-bottom: 1px solid black;
 	border-top: 1px solid black;
 	padding-right: 5px;
 	padding-left: 5px;
	font-size: 90%;
}
.cell_right{
	border-right: 1px solid black;
 	border-bottom: 1px solid black;
 	border-top: 1px solid black;
 	padding-right: 3px;
 	padding-left: 3px;
	font-size: 90%;
}
.cell_none{
 	border-bottom: 1px solid black;
 	border-top: 1px solid black;
 	padding-right: 5px;
 	padding-left: 5px;
	font-size: 90%;
}
.unique_case{
	border: 1px solid black;
 	padding-right: 5px;
 	padding-left: 5px;
	font-size: 90%;
}
.top_none{
	border-top: none;
}
/*------------------------------------------------------------------calendar*/
.calendar {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .6em;
	}
.legende{	
	margin: 2;
	padding: 2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .6em;
}
/*style des bandeaux de mois*/
.calendar caption {
	margin: 0;
	padding: .3em 0;
	background: #05B484;
	border-radius: 7px 7px 0px 0px; /*arrondit les angles*/
	}
/*cellule des jours de la semaine*/
.calendar th {
	border-bottom: 1px solid #ccc;
	font-weight: normal;
	background: #fff;
	}
.calendar td  {
	border: 1px solid #fff;
	padding: .1em .3em ;
	width: 1em;
	text-align: center;
	}
.calendar a {
	color: #000;
	text-decoration: none;
	}
/*style des highlights*/
.calendar td.today, .legende td.today {
	background: #d8fbf3;
	border-radius: 5px 5px 5px 5px;
	}
.calendar td.selected, .legende td.selected {
	border: 1px dotted #ff7800;
	border-radius: 5px 5px 5px 5px;
	}
/*couleur des events*/
.calendar td.red_light, .legende td.red_light {
	background: #FEE050;
	border-radius: 5px 5px 5px 5px;
}
.calendar td.red_medium, .legende td.red_medium {
	background: #FEB05F;
	border-radius: 5px 5px 5px 5px;
}
.calendar td.red_dark, .legende td.red_dark {
	background: #FE1017;
	border-radius: 5px 5px 5px 5px;
}
.calendar td.privatised, .legende td.privatised {
	background: #6495ed;
	border-radius: 5px 5px 5px 5px;
	/*color: white;*/
	}
.calendar td.official, .legende td.official {
	background: #90ee90;
	border-radius: 5px 5px 5px 5px;
}
/*jours passés*/
.calendar td.passed, .calendar td.passed:hover, .legende td.passed {
	background-color: gray;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 4px);
	border: none;
	border-radius: 5px 5px 5px 5px;
	cursor : default;
}
/*couleur des cases du week-end*/
.samedi, .dimanche {
	background: #f0f0f0;
	border-radius: 5px 5px 5px 5px;
}
/* passer la souris sur une case*/	
.calendar td:hover, .calendar td.today:hover, 
.calendar td.selected:hover, .calendar td.privatised:hover, .calendar td.official:hover {
	background: #cff;
	border: 1px solid #09f;
	border-radius: 5px 5px 5px 5px;
	cursor: default;
	}
/*mise en forme des liens (si lien il y a)*/
.calendar td:hover a, .calendar td.today:hover a, 
.calendar td.selected:hover a, .calendar td.privatised:hover a, .calendar td.official:hover a{
	cursor: pointer;
	text-decoration: underline;
}
.legende caption{
	text-decoration: underline;
}
.legende td.official, .legende td.privatised, .legende td.red_dark, .legende td.red_medium, .legende td.red_light{
	border: 1px solid #fff;
	min-width: 8px;
	text-align: center;
}
.legende td.legende_element, .legende td.underlined{
	padding-right: 5px;
}
/*pad : dernières cases vides*/
table.calendar td.pad {
	color: #999;
	background: #fff;
	}
table.calendar td.pad:hover {
	background: #fff;
	border: 0;
	cursor: default;
	text-decoration: none;
	}
.calendar td.passed:hover{
	text-decoration: none;
}
/*disposition des douze blocs*/
#year {
	padding: 0;
	width: 100%;
	max-width: 1000px;
	list-style: none;
	padding-bottom: 10px;
	margin-right: 100px;
	flex-wrap: wrap;
	}
#year:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
/* disposition d'un bloc mois*/
#year li{
	float: left;
	padding: 0 .5em .5em 0;
	height: 150px;
	margin-bottom: 50px;
	text-align: center;
	}
#year table{
	width:160px;
}