/*
Attention :
***********
Couleurs ==> passer en hsl(360, 50%, 50 %) couleur, teinte, saturation
Quand on utilise une classe, il ne faut pas préciser la balise de la classe.
FireFox gère Background et BorderRadius qu'au niveau des th et td (pas thead et tr).
On peut faire 2 shadow l'un sur l'autre pour renforcer l'effet.
Pour une nouvelle mise en page, utiliser la propriété * { box-sizing: border-box; }
Ne pas faire de "border-collapse: collapse" car ça interdit le border-radius des tableaux ==> faire border-spacing: 0 - http://openclassrooms.com/courses/stylisez-votre-site-avec-css3/repoussons-les-limites-des-bordures
Vertical-Align ne marche que si : conteneur a un line-height (voire idem à sa hauteur) et contenus sont des inline ou inline-block (vertical-align: middle; dans le contenu) !!! http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html
	sinon, pour centrer un élément dans un absolute: element{ position: relative; top: 50%; transform: translateY(-50%); } et pour éviter les flous pour les 1/2px, on applique parent{ position: absolute; top: 0; bottom: 0; transform-style: preserve-3d; } au parent
https://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html
.parent { display: flex; flex-direction: column; justify-content: center; }
Pour avoir un curseur flêche sur un élément : onmouseover="this.style.cursor='pointer'"
!important => permet de prioriser une propriété
*/

/*** Palette de Couleurs ***/
#bloc_page	{ background: radial-gradient(farthest-corner ellipse at bottom right,	rgba(229,162,130,1), rgba(255,203,179,1)	); }
header		{ background: radial-gradient(farthest-corner ellipse at bottom left,	rgba(234,141,98,1), rgba(229,114,61,1)		); }
nav			{ background: linear-gradient(to bottom, 								rgba(234,141,98,1), rgba(280,180,144,1)		); }
footer div 	{ background-color: rgba(200,200,200,0.95); }
section table thead th				{ background: rgba(186,113,78,1); }
section table tr:nth-child(even) td	{ background: rgba(255,203,179,1); }
section table tr:hover td			{ transition: all 0.3s ease-in-out; background: gray; }
/*section table tr td	{ border: 1px solid rgba(255,203,179,1); }*/

/*** Structure de page ***/
html, body, #bloc_page
{
    position: absolute;
	min-width: 800px;
    padding: 0;
    margin: 0;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    /*overflow: hidden;*/
}
body
{
    font-family: 'Quicksand', 'Josefin Sans', 'Raleway', 'Nunito', 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', 'Open Sans', 'Arial', 'sans-serif';
    text-align: left;
	color: black;
	background-color: white;
}
#bloc_page
{
    background-color: rgba(230,230,230,1);
}
@media screen and (max-device-width: 800px) { html, body, #bloc_page { width: auto; min-width: 800px; height: auto; overflow: auto; } } /* min-height: 800px; */


/*** Styles prédéfinis ***/
a, :link, :visited { color: black; text-decoration: none; }
a { display: inline-block; position: relative; }
h1 { padding: 0; margin: 0; }
h4 { padding: 0; margin: 0; }
table { border-spacing: 0; /*border-collapse: collapse;*/ } 
th { text-align: left; }
ul { padding: 0px 0px 0px 24px; margin: 0; font-size: 0.9em; }
img { display: inline-block; border-radius: 2px; box-shadow:  1px 1px 1px black; } /* img { border-radius: 4px; box-shadow: 4px 4px 4px black; } */
input, textarea { font-size: 12px; line-height: 120%; margin: 0 0; padding: 3px 0 2px 0; } /* optgroup, select,*/
input[type="submit"] { font-weight: bold; color: black; color: inherit; font: inherit; margin: 0; padding: 0px 5px; }
form { padding: 0; margin: 0; }


/*** Tout-Type ***/
@keyframes Flash { from{color:white; } to{color:black;} }
.flash { animation: Flash 1.5s ease-in-out infinite alternate; }
@keyframes Clignotement { from{color:maroon;} to{color:white;} }
header div table tr td .imminent, .imminent { animation: Clignotement 0.8s ease-in-out infinite alternate; }
.normal { font-size: 16px !important }
.petit { font-size: 0.8em }
.trespetit { font-size: 0.6em; margin: 0; }
.grand { font-size: 1.5em }

/*** En-tête ***/
header
{
    display: block;
	text-align: center;
	padding: 2px 8px;
	margin: 0;
	position: relative;
	height:80px;
	line-height:80px; /* pour le vertical-align */
	min-width: 800px;
	border-radius: none;
	text-shadow: 1px 1px 4px black;
	white-space: nowrap;
	overflow: hidden;
}
header  * { line-height: normal; } /* pour compenser le line-height nécessaire pour le vertical-align */

header div { display: inline-block; text-align: left; vertical-align: middle; }
header div h1 { margin: 0px 0px;  }
header div p { margin: 0px 6px; font-size: 0.8em; }
header .gauche, header .droite  { display: inline-block; position: absolute; top: 0; bottom: 0; z-index: 1; font-size: 0.7em; line-height: 80px; font-weight: bold; text-align: left; transform-style: preserve-3d; } /*line-height: 124px; car 100 + 2*12 de padding */
header .gauche { left: 18px; opacity: 0.9; } 
header .droite { right: 18px; }
/* header .gauche img, header .droite img { position: relative; top: 50%; transform: translateY(-50%); } */
header .gauche img, header .droite img { display: inline-block; vertical-align: middle; }
header .gauche form, header .droite table { position: relative; top: 6px; }
header .gauche #Like { position: absolute; bottom: 0px; }
header .gauche #Like div { position: relative; display: inline-block; vertical-align: middle; margin: 0; padding: 0; }
header .gauche #Like div img { height: 22px; border: none; box-shadow: none; text-shadow: none; }
header .centre { vertical-align: middle; text-align: center; }
header .centre  p { position: relative; top: -15px; }
header .liste { width: 146px; color:grey; }
header #valide { font-weight: bold; color: green; }
header .mdp { height: 12px; width: 140px; }
/* Images */
header div .logo { height: 75px; border-radius: 0; box-shadow: 0 0 0; }
header div #imageG, header div #imageD, header div #imageC  { position: relative; height: 80px; border-radius: 0; box-shadow: 0 0 0; }
header div #imageG { margin-left: 10px; margin-right: 50px; }
header div #imageD { margin-left: 50px; margin-right: 10px; }
/* Dates */
header div table tr td p { padding: 0; margin: 0; font-size: 1.2EM;}
header div table tr td .fete { color: rgba(100,100,100,1); }
header div table tr td .autredate { color: maroon; }
/* Lecteur audio */
header audio { display: block; position: absolute; bottom: 6px; }
/* Connexion */
@keyframes Connexion { from{color:maroon; font-size: 1.25em; line-height: 6px;} to{color:white; font-size: 0.8em; line-height: 6px;} }
.connexion { animation: Connexion 0.8s ease-in-out infinite alternate; }


/*** Messages d'Alerte et Avertissement ***/
.avertissement { color: maroon; }
@keyframes AnimationConnexion { from{opacity: 1;} to{opacity: 0;} }
#MessageRouge, #MessageOrange, #MessageVert, #MessageAccueil
{
    display: block;
    max-width : 40%;
    text-align: center;
	padding: 12px 18px;
	margin: 18px auto;
    position: relative;
    right: 0;
    left: 0;
    z-index: 100;
	box-shadow: 6px 6px 6px black;
	border-radius: 4px;
	text-shadow: 1px 1px 4px black;
	opacity: 0;
	animation-iteration-count: 1;
}
#MessageRouge	{ background-color: red;	animation: AnimationConnexion 15s cubic-bezier(1,0,0.9,0) 0s; }
#MessageOrange	{ background-color: orange; animation: AnimationConnexion 10s cubic-bezier(1,0,0.9,0) 0s; }
#MessageVert 	{ background-color: green;	animation: AnimationConnexion 7s cubic-bezier(1,0,0.9,0) 0s; }
#MessageAccueil	{ max-width : 80%; background-color: transparent; box-shadow: none; text-align: center; font-size: 50px; font-weight: bold; color: white; text-shadow: 5px 5px 5px black; animation: AnimationConnexion 10s cubic-bezier(1,0,0.9,0) 0s; }



/*** Barre de Navigation ***/
nav
{
    display: inline-block;
	width: 140px;
	padding: 12px 12px;
	margin: 0px;
	position: absolute;
	top: 84px;
	bottom: 0;
	z-index: 2;
	overflow-y: auto;
	border-radius: none;
	text-shadow: 1px 1px 4px black;
}
@media screen and (max-device-width: 800px) { nav { bottom: auto; overflow: visible; } }

nav table { width: 120px;}
nav table tr th, nav table tr td { border: none; vertical-align: middle; }

/* Classes gérées dans le menu de Navigation :
Tableau : selection-tableau / tableau
Texte : selection-texte / texte
Cellule-Maison : selection-cellule-maison / cellule-maison
Cellule-Nom : selection-cellule-nom / cellule-nom
Image-Maison : selection-image-maison / image-maison
Image-Nom : selection-image-nom / image-nom
*/

/* Habillage si pas de photo */
p.sansphoto { display: inline-block; vertical-align: middle; width: auto; margin: 0; padding: 6px; background-color: rgba(255,255,255,0.3); border-radius: 2px; box-shadow: 1px 1px 1px rgba( 255, 255, 255, 0.5) inset, -3px -3px 3px rgba( 255, 255, 255, 0.5) inset;}

/* Maisons */
nav table tr th  { padding: 6px 0px 0px 0px; font-size: 1em; font-weight: bold; } /* border-top : 1px solid grey; */
nav table tr th img { max-height: 80px; max-width: 125px; transition: all 1s ease-in-out; }
nav table tr th img:hover { max-height: 100px; max-width: 150px; transition: all 1s ease-in-out; }
nav table tr .selection-cellule-maison { padding: 6px 0px 0px 25px; color: maroon; text-shadow: 5px 5px 5px maroon; }
nav table tr th .selection-image-maison { box-shadow: 5px 5px 5px maroon; }
nav table tr th .selection-texte-maison { color: maroon; }

/* Noms */
	/* Par défaut invisible */
nav table tr td  { font-size: 0; transition: all 1s ease-in-out; }
nav table tr td img { height: 0; transition: all 1s ease-in-out; }
nav table tr .cellule-nom { padding: 0 0 0 10px; margin: 0; font-weight: bold; font-style: italic; }
nav table tr .cellule-nom p.sansphoto { padding: 0; }
	/* Apparition au Survol tableau	(suppression alinea) */
nav table:hover tr td { padding: 0px 0px 0px 10px; font-size: 0.8em; transition: all 1s ease-in-out; }
nav table:hover tr td img { height: 60px; transition: all 1s ease-in-out; }
nav table:hover tr td p.sansphoto { padding: 4px; }
	/* Apparition après selection Maison */
nav .selection-tableau tr td { font-size: 0.8em; transition: all 1s ease-in-out; }
nav .selection-tableau tr td img  { height: 60px; transition: all 1s ease-in-out; }
nav .selection-tableau tr td p.sansphoto { padding: 4px; }
	/* Décalage au survol du Nom */
nav table:hover tr td:hover, nav .selection-tableau tr td:hover { padding: 0px 0px 0px 30px; font-size: 1em; font-weight: bold; text-shadow: 3px 3px 6px maroon; transition: all 1s ease-in-out; }
	/* Quand Nom sélectionné */
nav table tr .selection-cellule-nom { padding: 0px 0px 0px 30px; font-size: 1em; font-weight: bold; text-shadow: 3px 3px 3px maroon; }
nav table tr td .selection-image-nom { box-shadow: 5px 5px 5px maroon; }
nav table tr td .selection-texte-nom { color: maroon; font-size: 1em; font-weight: bold; font-style: italic; }
nav table tr td .IDkonnecT { box-shadow: none; }

@keyframes idp { from{color:orange;} to{color:white;} }
.idp { animation: idp 1s ease-in-out infinite alternate; }
.idp { position: absolute; bottom: 5px; left: 5px; font-size : 0.8em; font-weight: bold; margin: 0; padding: 0; }

nav div { margin:0; padding: 0; text-align: center; }
nav #imageN { margin-left: -20px; max-width: 140px; border-radius: 0; box-shadow: none; }

/*** Section Centrale ***/
section
{
    display: inline-block;
	padding: 12px 18px;
	position: absolute;
	vertical-align: top;
	left: 165px;
	right: 0;
	top: 84px;
	bottom: 80px;
	margin: 6px;
	border-radius: 4px;
	overflow: auto;
}
.pleine_page { bottom: 0; }
@media screen and (max-device-width: 800px) { section { position: relative; height: auto; top: 0; overflow: visible; } }

#NomListe	{ display: inline-block; text-align: left; }
#Anciennete	{ position: absolute; display: inline-block; right: 0; text-align: right; }

#EnTeteSaisie		{ display: inline-block; font-size: 1.25em; font-weight: bold; color: maroon; padding: 6px; }
#EnTeteAffichage	{ display: inline-block; font-size: 1.25em; font-weight: bold; color: maroon; padding: 6px; background-color : rgba(255, 255, 255, 0.3); }
section:not(#SectionForum) img:not(.barre) { height: 75px; transition: all 0.3s ease-in-out; }
section:not(#SectionForum) img:not(.barre):hover { height: 250px; transition: all 0.5s ease-in-out; }
.barre { border-radius: 0; box-shadow: none; }

/* Tableau */
section table
{
	vertical-align: middle;
	background: none;
	/*border-collapse: collapse;*/
	border-spacing: 0;
	overflow: hidden;
}
/* Tableau : lignes verticales */
section table thead th { padding: 3px; }
section table thead th, section table tr td { border-right: 1px solid gray; padding: 6px; }
section table thead th:last-child, section table tr td:last-child { border-right: 0; }
/* Tableau : arrondis */
section table thead th:first-child { border-radius: 3px 0 0 3px; }
section table thead th:last-child { border-radius: 0 3px 3px 0; }
section table thead th:only-child { border-radius: 3px; }
section table tr:nth-child(1) td:first-child { border-radius: 3px 0 0 0; }
section table tr:nth-child(1) td:last-child { border-radius: 0 3px 0 0; }
section table tr:nth-child(1) td:only-child { border-radius: 3px 3px 0 0; }
section table tr:last-child td:first-child { border-radius: 0 0 0 3px; }
section table tr:last-child td:last-child { border-radius: 0 0 3px 0; }
section table tr:last-child td:only-child { border-radius: 0 0 3px 3px; }
section table tr:only-child td:first-child { border-radius: 3px 0 0 3px; }
section table tr:only-child td:last-child { border-radius: 0 3px 3px 0; }
section table tr:only-child td:only-child { border-radius: 3px 3px 3px 3px; }
/* Tableau : exception d'héritage pour le input-submit-supprimer */
section table thead th input[type="submit"] { border-radius: 0; }
/* Tableau : largeurs de colonne et style de texte */
section table tr .reserve { background: orange; text-align: center; }
section table tr:nth-child(even) .reserve { background: orange; text-align: center; }
section table tr:hover .reserve { background: orange; text-align: center; }
section table tr .indispo { background: maroon; text-align: center; }
section table tr:nth-child(even) .indispo { background: maroon; text-align: center; }
section table tr:hover .indispo { background: maroon; text-align: center; }
section table tr .reste { background: green; text-align: center; }
section table tr:nth-child(even) .reste { background: green; text-align: center; }
section table tr:hover .reste { background: green; text-align: center; }
/* Lignes orange/rouge pour Invitations */
section table .orange td { background: orange; }
section table .orange:nth-child(even) td  { background: orange; border: 1px solid gray; }
section table .orange:hover td { background: gray;}
section table .rouge td { background: red; }
section table .rouge:nth-child(even) td  { background: red; border: 1px solid gray; }
section table .rouge:hover td { background: gray;}

/* Tableau : largeurs de colonne et style de texte */
section table .adulte, section table .QRcode{ text-align: center; }
section table .idee { width: 250px; }
section table .prix { min-width: 40px; text-align: right; }
section table .inputprix { width: 60px; font-weight: bold; font-size: 1em; }
section table .commentaire { width: 200px; font-size: 0.8em; }
section table .dispo, section table .indispo, section table .reste { width: 100px; text-align: center; }
section table .case { width: 60px; text-align: center; }
section table .caselong { width: 120px; text-align: center; }
section table .case input, section table .caselong input { display : inline; font-size: 1.5em; transform: scale(1.5, 1.5); zoom: 1.5; }
section table .participation { width: 120px; text-align: center; }
section table .inputparticipation { width: 60px; font-weight: bold; font-size: 1.2em; color: red; }
section table .inputcommentaire { width: 180px; height: 2em; font-size: 0.8em; }
section table .listeidee { width: 200px; font-size: 0.75em; padding: 3px; margin: 0; }
section table .listeidee  p { padding: 3px; margin: 0px; }
section table .membres { font-size: 0.75em; padding: 3px; margin: 0; }
section table .membres  p { padding: 3px; margin: 0px; }
section table .centre { text-align: center; }
section table .reponses { width: 400px; font-size: 0.7em; }
section table .commentaire a { display: inline-block; }
section table .petitgris { background-color: LightGrey; font-size: 0.7em; }
section table .colonnefigee { max-width: 160px; height: 10px; }
section #formulaire-auto .colonnefigee img { height: 50px; }

.soustitre	{ margin: 0; padding:0; font-size: 0.6em; font-style: italic; color: grey; }
.question	{ margin: 0; padding:0; font-size: 0.8em; font-style: italic; color: maroon; }
.questionIdee			{ font-weight: bold; color: blue; }
.messageA				{ font-weight: bold; color: green; }
.messageParticipants	{ font-weight: bold; color: maroon; }
.faiblePadding { padding: 2px; }

#ListePapier
{
	display: inline-block; position: absolute;
	z-index: 1; opacity: 0.975;
	margin:0; padding: 0; top:0; bottom: 0; left: 0; right: 0;
	background-color : grey; background-attachment: scroll; background-repeat: no-repeat; background-position: center; background-size: contain; background-clip: border-box;
	box-shadow: none; border-radius: 4px; text-shadow: none;
	transition: all 1s ease-out 0s;
}
section #ListePapier.masque /*, section #ListePapier:not(.masque):focus*/
{	
	pointer-events: none;
	opacity: 0.025;
	transition: all 5s ease-out 0s;
}

/*** Pied de Page ***/
footer
{
    display: block;
	position : absolute;
	bottom: 0;
	left: 180px;
	right: 0px;
	z-index: 10;
}
@media screen and (max-device-width: 800px) { footer { display: inline-block; position: relative; width: auto; top: auto; bottom: auto; } }

footer div
{
	display: block;
	height: 24px;
	margin : 6px;
	padding : 6px;
	position: relative;
	overflow: hidden;
	background-color: rgba(200,200,200,0.95); /* background-color: rgba(150,200,255,1); */
	box-shadow: 3px 3px 8px black;
	border-radius: 4px;
	text-shadow: 1px 1px 4px black;
	transition: all 3.0s ease-in-out 1s;
}
@media screen and (max-device-width: 800px) { footer  div { height: 100px; } }

footer div:focus { height: 100px; transition: all 1.0s ease-in-out; }
footer div.afficher { height: 100px; transition: all 1.0s ease-in-out; }

footer table
{
	/* table-layout: fixed; */
	white-space: nowrap;
}
footer p
{
    display: inline-block;
    margin : 0;
    padding : 0;
}
footer th
{
	font-size: 1em;
    font-weight: bold;
    font-style: normal;
	vertical-align: middle;
}

.court { width: 100px; }
.long { width: 200px; }
footer input  { width: 100px; }
footer input[type="submit"]  { width: auto; }
footer input[type="radio"]  { width: 10px; }
footer input[type="checkbox"]  { width: 10px; }
footer input[type="file"]  { width: 300px; }
footer .prix { width: 50px; }
footer .commentaire { font-size: 0.7em; font-weight: normal; font-style: italic; }
footer .droite { text-align: right; }
footer .alinea { width: 30px; }
footer .case input { display : inline; font-size: 1.5em; transform: scale(1.5, 1.5); zoom: 1.5; }
footer img { border-radius: 0; box-shadow: none; }
footer .temporaire { color: orange; font-weight: bold; font-style: italic; }
footer .inactif { color: maroon; font-weight: bold; font-style: italic; }


/* GoogleMaps */
.googlemaps { position: relative; display: inline-block; height: 500px; width: 800px; margin: 0; padding: 0; border : 2px solid grey; }
#map_canvas { height: 100%; } /* Height:100% impératif !!! */
#map_canvas img { border-radius: 0; box-shadow: none; }
@media screen and (max-device-width: 800px) { .googlemaps { height: 500px; width: 600px;} }


/* Inscription */
#SectionInscription { bottom: 0px; }


/* Forum */
#SectionForum { bottom: 0px; }
tr .billetLong		{ width: 850px; }
form .billetLong 		{ height: 5em; width: 60em; }
tr .billetCourt 		{ width: 650px; }
form .billetCourt	{ height: 5em; width: 45em; }
@media screen and (max-device-width: 1400px)
	{
	tr .billetLong		{ width: 850px; }
	form .billetLong 		{ height: 5em; width: 60em; }
	tr .billetCourt 		{ width: 350px; }
	form .billetCourt	{ height: 5em; width: 25em; }
	}

.forum th, .forum td { padding: 3px; }
.forum th { text-align: center; }
.forum th a { text-align: center; vertical-align: middle; margin: 4px 2px 0px 2px; }
.forum th input { padding: 3px; font-size: 14px; }
.forum th textarea { text-align: left; font-size: 14px; }
.forum th .image, .forum th .image-auteur { height: 50px; font-size: 16px; }
.forum th .texte, .forum th .texte-auteur  { font-size: 16px; }
.forum th { text-align: left; }
.forum .liste { line-height: 1.75em; text-align: left; }
.forum th [type="submit"] { line-height: 1.2em; }
.forum thead th .barre, .forum thead th .barre:hover { height: auto; }
.forum tr { line-height: 1em; } /* pour le vertical-align*/
.forum tr img { height: 30px; font-size: 16px; border-radius: 2px; box-shadow: none; transition: all 0.3s ease-in-out; }
.forum tr img:hover, .forum .image-auteur:hover  { height: 100px; transition: all 0.5s ease-in-out; }
.forum tr .photo { display: inline-block; padding: 0px 6px; height: 100px; font-size: 16px; border-radius: 2px; box-shadow: none; transition: all 1s ease-in-out; }
.forum tr .photo:hover { height: 300px; transition: all 2.5s ease-in-out; }
.forum td [type="submit"] { font-size: 10px; }
.forum  a,.billets { display: inline-block; vertical-align: middle; line-height: normal;}
.forum .texte { font-size: 13px; }
.forum .texte-auteur { font-size: 14px; font-weight: bold; }
.forum .webmaster { font-size: 14px; font-weight: bold; color: maroon; }
footer .forum:hover { height: 24px; transition: none; }


/* Hotte */
#SectionHotte { bottom: 0; }
#SectionHotte table tr { vertical-align: top; }
#SectionHotte table td:first-child { vertical-align: middle; }
#SectionHotte:not(#SectionForum) table td img { height: 75px; }
#SectionHotte:not(#SectionForum) table table td img { height: 40px; font-size: 16px; border-radius: 2px; box-shadow: none; transition: all 0.3s ease-in-out; }
#SectionHotte:not(#SectionForum) table table td img:hover  { height: 80px; transition: all 1s ease-in-out; }
#SectionHotte table tr td table tr { vertical-align: middle; }
#SectionHotte table tr td table a { font-weight: bold; font-size: 0.5em; max-width: 100px; }
#SectionHotte table tr td .Legende { display: inline-block; vertical-align: middle; margin: 0; padding:0; font-size: 0.5em; font-style: italic; }
#SectionHotte table tr td .NonAchete { background: orange; }
#SectionHotte table tr td .Achete { background: green; }
#SectionHotte table tr td div:hover { background: LightGray; }
@media screen and (max-device-width: 800px) { #SectionHotte { position: absolute; top: 140px; left: 0; right: 0; bottom: auto; overflow: visible; } }


/* Invitations */
#SectionInvitation
{
	position: absolute;
	left: 0; right: 0; bottom: 0; 
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-clip: border-box;
	color: black;
	text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
}
#SectionInvitation input { color: black; }
#SectionInvitation .pub { display: inline-block; position: relative; padding: 6px; margin: 12px; font-style: italic; background-color : rgba(255, 255, 255, 0.3); }
#SectionInvitation .pub #logo { height: 50px !important; opacity: 1; border-radius: 0; box-shadow:  none; }

@media screen and (max-device-width: 800px) { #SectionInvitation { position: absolute; top: 140px; left: 0; right: 0; bottom: auto; overflow: visible; } }

.tableausimple, .tableausimple tr:nth-child(even), .tableausimple tr:nth-child(odd), .tableausimple tr:nth-child(even) td, .tableausimple tr:nth-child(odd) td
{
	vertical-align: top;
	border: none;
	/*border-collapse: collapse;*/
	border-spacing: 0;
	background: none;
	border-radius: 0;
	margin : 0;
	padding : 0 6px 0 0;
	font-size : inherit;
}
.QRcode, .QRcode img{ display: block; margin: 4px auto 4px auto; text-align: center; }
.etiquette {	display : inline-block; min-width: 150px; border-radius: 2px; box-shadow: 2px 2px 2px black; background-color: rgba(255, 255, 255, 0.2); margin: 4px 4px 8px 4px; padding: 4px;
			text-align : center; font-size: 0.9em; font-weight: bold; color: black; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
			background-attachment: scroll; background-repeat: no-repeat; background-position: center; background-size: cover; background-clip: border-box; }
fieldset { display: inline-block; color: blue; border-radius : 3px; }
legend { font-weight: bold; }


/* ListeExterne */
#SectionListeExterne { bottom: 0; left: 0; }
@media screen and (max-device-width: 800px) { #SectionListeExterne { width: 100%; } }
#SectionListeExterne .pub { display: inline-block; position: relative; padding: 6px; margin: 12px; color: maroon; font-style: italic; background-color : rgba(255, 255, 255, 0.3); }
#SectionListeExterne .pub #logo { height: 50px !important; opacity: 1; border-radius: 0; box-shadow:  none; }


/* Calendrier */
#SectionCalendrier { bottom: 0; }
.calendrier tr td { font-size: 12px; }
.calendrier tr th, .calendrier tr .cellule { min-width: 80px; margin: 0; padding: 0px 3px; border-right: 2px solid black; }
.calendrier tr th { height: 36px; }
.calendrier tr th:last-child, .calendrier tr .cellule:last-child { border-right: none; }
.calendrier tr .jour { padding: 0px 0px 0px 3px; border-right: none; }
.calendrier tr .njour { padding: 0px 3px 0px 0px; text-align: right; border-left : none; }
.calendrier tr .samedi  { border-top: 1px solid gray; }
.calendrier tr .dimanche  { border-bottom: 1px solid black; }
.calendrier tr .samedi:not(.cellule)  { font-weight: bold; }
.calendrier tr .dimanche:not(.cellule)  { font-weight: bold; }
.calendrier tr .cellule .anniversaire { color: maroon; }
@keyframes Clignotement2 { from{color:maroon;} to{color:white;} }
.calendrier tr .aujourdhui, .calendrier tr .aujourdhui .anniversaire { font-weight: bold; animation: Clignotement2 0.8s ease-in-out infinite alternate; }


/* Boutique IDkonnecT */
#Boutique { width: 1200px; height: 800px; }
.Boutique { bottom: 0; }
.Boutique h1 { margin: 0; padding: 0; font-size: 1em; font-weight: bold; }
.Boutique h2 { margin: 0px 0px 0px 0px; padding: 0; font-size: 0.9em; }
.Boutique h3 { margin: 0; padding: 0; font-size: 0.7em; }
.Boutique h4 { margin: 3px 0px 0px 0px; padding: 0; color: green; font-size: 0.65em; }
.Boutique p { margin: 0; padding: 0; font-size: 0.6em; }
.Boutique table td { vertical-align: top; padding: 6px 6px; }
.Boutique table input[type="number"] { font-size: 1.1em; font-weight: normal; width: 2em; height: 1em; color: grey; background-color: grey; }
/* not pour contre-carrer les autres not */
.Boutique:not(#SectionForum) .GrandePhoto:not(.barre), .Boutique:not(#SectionForum) .ColonnePetitesPhotos:not(.barre) { display: inline-block; vertical-align: top; }
.Boutique:not(#SectionForum) .GrandePhoto:not(.barre)		{ height: 100px; transition: all 0s; }
.Boutique:not(#SectionForum) .GrandePhoto:not(.barre):hover	{ transform: rotate(-1deg); transition: all 1s ease; }
.Boutique:not(#SectionForum) .GrandePhoto:not(.barre):focus	{ position: fixed; z-index: 1000; height: 600px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition: all 1s ease-in-out; }
.Boutique:not(#SectionForum) .GrandePhoto:not(.barre):focus+span { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: black; z-index: 500; opacity: 0.8; }
.Boutique:not(#SectionForum) .PetitePhoto:not(.barre)		{ height: 25px;	margin: 2px; transition: all 0s; }
.Boutique:not(#SectionForum) .PetitePhoto:not(.barre):hover	{ transform: rotate(-1deg); transition: all 1s ease; }
.Boutique:not(#SectionForum) .PetitePhoto:not(.barre):focus	{ position: fixed; z-index: 1000; height: 400px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition: all 1s ease-in-out; }
.Boutique:not(#SectionForum) .PetitePhoto:not(.barre):focus+span { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: black; z-index: 500; opacity: 0.8; }
.IDkonnecT { bottom: 0; }
/*.IDkonnecT table input { width: 100px; }*/
.IDkonnecT table .heure { min-width: 40px; text-align: center; }
.IDkonnecT table .inputheure { width: 60px; font-weight: bold; font-size: 1em; }
.IDkonnecT table .commentairelong { width: 400px; font-size: 0.6em; }
.IDkonnecT .liste { width: 120px; font-size: 0.8em; }
.IDkonnecT #ListeJours tr td { border: 1px solid white; }
.IDkonnecT #ListeJours tr .Samedi { background-color: LightGray; }
.IDkonnecT #ListeJours tr .Dimanche { background-color: Gray; }
.IDkonnecT #ListeJours tr .Selection { background-color: yellow; }
.IDkonnecT:not(#SectionForum) .RaccourciAlarme:not(.barre), .IDkonnecT:not(#SectionForum) .RaccourciAlarme:not(.barre):hover { height: 50px; }
.IDkonnecT form, .IDkonnecT input, .IDkonnecT submit { display : inline-block; }
.IDkonnecT .tableausimple { font-size: 0.8EM; }
.IDkonnecT .tableausimple tr,.IDkonnecT .tableausimple tr td  { vertical-align : middle; }
.IDkonnecT .tableausimple .commentaire  { font-size: 0.8EM; }
.IDkonnecT .tableausimple [type="checkbox"]:not(:checked) + label:before, section .tableausimple [type="checkbox"]:checked + label:before { width: 12px; height: 12px; }
.IDkonnecT table .tableausimple input { width: 20px; height: 8px; }
.IDkonnecT table .celluleserree { padding: 1px 2px 1px 2px; }
.IDkonnecT table .inputcourt { width: 30px; }
.IDkonnecT table .inputlong { height: 10px; width: 120px; }
.IDkonnecT table .tableausimple .inputcourt { width: 30px; }
.IDkonnecT table .tableausimple .inputlong { width: 120px; }


/*** Boutons ***/
.bouton
{
    display: block;
	font-family: "Arial", "sans-serif";
	font-size : 16px;
    font-weight: bold;
	height : auto;
    width: 120px;
    margin: 4px auto 4px auto;
    padding: 4px;
    text-align: center;
    color: #000;
    background: #444;
    background: linear-gradient(rgb(160, 160, 160), rgb(90, 90, 90));
	border: non;
    border-radius: 3px;
    text-shadow: 0px 1px 0px white;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.4);
}
.bouton:hover
{
    color: #222;
    background: #555;
    background: linear-gradient( #777, #333);
	transition: all 0.3s ease-in-out;
}
.bouton:active
{
    color: #000;
    background: #444;
    box-shadow: 1px 1px 5px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}
section table tr td .bouton { min-width: 150px; }
footer .bouton { width: auto; }
.fonction { background: linear-gradient(rgb(150, 75, 0), rgb(200, 100, 0)); }
.fonction:hover { background: linear-gradient(rgb(150, 75, 0), rgb(100, 50, 0)); }
.boutonIDkonnecT { background: linear-gradient(rgb(100, 100, 150), rgb(50, 50, 150)); }
.boutonIDkonnecT:hover { background: linear-gradient(rgb(0, 0, 150), rgb(0, 0, 100)); }
.boutonParametres { background: linear-gradient(rgb(100, 150, 100), rgb(0, 150, 0)); }
.boutonParametres:hover { background: linear-gradient(rgb(0, 150, 0), rgb(0, 100, 0)); }

@media screen and (max-device-width: 800px) { nav table tr th .bouton , section table tr td .bouton { padding: 20px 4px 20px 4px; font-size : 16px; color: white; } }


/*** Case à cocher ***/
/* http://www.creativejuiz.fr/blog/tutoriels/personnaliser-aspect-boutons-radio-checkbox-css */
/* Cache la case à cocher */
section [type="checkbox"]:not(:checked), section [type="checkbox"]:checked { position: absolute; left: -9999px; }
/* Péparation du label */
section [type="checkbox"]:not(:checked) + label, section [type="checkbox"]:checked + label { position: relative; padding-left: 25px; cursor: pointer; }
/* Aspect des checkboxes :before sert à créer l'objet case à cocher */
section [type="checkbox"]:not(:checked) + label:before, section [type="checkbox"]:checked + label:before
{
	content: '';
	position: absolute;
	vertical-align: middle;
	left:0;
	width: 18px; height: 18px;
	border: 1px solid #aaa;
	background: #f8f8f8;
	border-radius: 3px;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.3)
}
/* Aspect de la coche :after sert à créer l'objet coche */
section [type="checkbox"]:not(:checked) + label:after, section [type="checkbox"]:checked + label:after
{
	content: '✔';
	position: absolute;
	/*vertical-align: middle;*/
	left: 0px;
	bottom: -4px;
	font-size: 26px;
    font-weight: bold;
	color: red; /*#09ad7e;*/
	transition: all 0.3s;
}
/* Aspect si "cochée"/"pas cochée" */
section [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); }
section [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); }
/* Aspect désactivée */
section [type="checkbox"]:disabled:not(:checked) + label:before, [type="checkbox"]:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #ddd; }
/* Styles de la coche (si cochée/désactivée) */
section [type="checkbox"]:disabled:checked + label:after { color: #999; }
/* Style du label quand désactivé */
section [type="checkbox"]:disabled + label { color: #aaa; }
/* Aspect au focus de l'élément */  
section [type="checkbox"]:checked:focus + label:before, [type="checkbox"]:not(:checked):focus + label:before { border: 1px dotted blue; }



/* Autre */
section [name*="Supprimer"]:not(:checked) + label:before, section [name*="Supprimer"]:checked + label:before	{ border: 1px solid red; background: orange; }
section [name*="Supprimer"]:not(:checked) + label:after, section [name*="Supprimer"]:checked + label:after		{ color: red; }

section [name*="Reserver"]:not(:checked) + label:before, section [name*="Reserver"]:checked + label:before		{ border: 1px solid blue; background: white; }
section [name*="Reserver"]:not(:checked) + label:after, section [name*="Reserver"]:checked + label:after		{ color: green; }