* {
	font-family: Calibri;
}

body,
#menu,
#centre h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 1px;
	border: 0;
}

h1,
h2 {
	background-color: #ffff80;
	/*padding: 0.5em;*/
}

#menu {
	/*float: left;*/
	position: absolute;
	width: 18%;
	margin: 0em 1em 1em;
	padding: 1em;
	background-color: #22ff37;
}

#menu.h2 {
	float: left;
}

label {
	float: left;
	width: 50%;
	text-align: right;
	padding-right: 5px;
}

label.label_profil {
	font-weight: bold;
}

/*

input,
textarea,
select {
	margin-bottom: 2px;
	border-radius: 10px;
}

input:invalid {
	border-color: red;
}

input,
textarea,
select input:valid {
	border-color: yellow;
}

input:focus:required:invalid {
	background: pink url(ico_validation.png) 379px 3px no-repeat;
}

input:required:valid {
	background-color: #fff;
	background-position: 379px -61px;
}

*/

input,
textarea,
select {
	margin-bottom: 2px;
	border-radius: 10px;
}

input:invalid {
	border-color: red;
}

input,
textarea,
select input:valid {
	border-color: yellow;
}

input:invalid {
	border-color: red;
}

input:required:valid {
	border-color: green;
}

input:required:focus:valid {
	background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen;
	background-size: 25px;
}

input:focus:invalid {
	background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon;
	background-size: 25px;
}

/*==================*/

table,
tr,
td,
th {
	border-collapse: collapse;
	border: 1px solid black;
	overflow: auto;
	text-align: center;
}

table img {
	height: 35px;
}

/* tabaqua
table.tabaqua {
	margin: 5px;
}
*/

table.tabaqua tr:nth-child(even) {
	background: #D0E4F5;
}

table.tabaqua tr.ligne_mois td {
	border-top: 4px solid green;
}

table.tabaqua tr.ligne_today td {
	border-top: 8px solid rgb(183, 30, 124);
}

table.tabaqua th {
	font-size: 16px;
	padding: 4px;
	cursor: pointer;
	background-color: #ddd;
}

table.tabaqua td {
	font-size: 15px;
	padding: 4px;
	height: 35px;
}

table.tabaqua td.bgalerte {
	background-image: url('../images/danger.jpg');
	background-size: cover;

}

table.tabaqua td.gauche {
	text-align: left;
}

table.tabaqua td.vert {
	color: green;
}

table.tabaqua td.rouge {
	color: red;
}

table.tabaqua td.rougeblanc {
	color: red;
	background-color: white;
	font-weight: bold;
}

table.tabaqua td.nb {
	text-align: right;
}

table.tabaqua td.doigt {
	cursor: pointer;
}

table.tabaqua td.ok {
	cursor: url('../images/confirm.png'), auto;
}

table.tabaqua td.alerte {
	cursor: url('../images/alert.png'), auto;
}

table.tabaqua td.stop {
	cursor: url('../images/stop.png'), auto;
}

table.tabaqua img.aqua {
	height: 20px;
}

/* texte liste events */
.textevent {
	color: black;
}

.textcompet {
	color: red;
}



i.fas {
	min-width: 20px;
}

.light {
	color: #999;
}

.active {
	color: #00d;
}

.flottant_droite {
	float: right;
}

span.label_profil {
	font-weight: bold;
	margin-right: 5px;
}

span.label_data {
	background-color: yellow;
	font-style: italic;
	margin-left: 5px;
	/* text-indent: -10px; */
	border: 1px;
}

span.label_data2 {
	background-color: yellow;
	font-style: italic;
	font-size: 2rem;
	margin-left: 5px;
	border: 1px;
}

span.label_data3 {
	background-color: yellow;
	font-style: italic;
	font-size: 1.5rem;
	margin-left: 5px;
	border: 1px;
}

span.label_orange {
	background-color: rgb(233, 154, 237);
	margin-left: 5px;
	border: 1px;
}

span.label_gdata {
	background-color: yellow;
	font-style: italic;
	text-indent: -10px;
	border: 1px;
}

span.label_data_blue {
	background-color: rgb(0, 255, 242);
	font-style: italic;
	margin-left: 5px;
	text-indent: -10px;
	border: 1px;
}

span.label_data_mauve {
	background-color: rgb(239, 106, 241);
	font-style: italic;
	margin-left: 5px;
	text-indent: -10px;
	border: 1px;
}

fieldset {
	border: 3px solid #999;
	border-radius: 3px;
	padding: 1px;

}

fieldset legend.aqua--success {
	color: #fff;
	background-color: #5cb85c;
}

fieldset legend.aqua--warning {
	color: #121111;
	background-color: #eac672;
}

fieldset legend.aqua--stop {
	color: #121111;
	background-color: #ec7070;
}

fieldset ul {
	padding-left: 20px;
}

.radiocpt {
	margin-left: 5px;

}

.msgerreur {
	color: red;
	background-color: yellow;
	display: inline;
}

body {
	background-image: url(../images/texture_sable.jpg);
}

.burger {
	position: fixed;
	cursor: pointer;
	width: 34px;
	height: 34px;
	top: 1px;
	left: 2px;
	margin: 0 0 0 0;
	z-index: 99;
}

.burger:hover {
	border: 2px solid red;
}

.entete {
	position: fixed;
	width: 80px;
	height: 34px;
	top: 1px;
	left: 36px;
	margin: 0 0 0 0;
	z-index: 99;
}

.entetetest {
	position: fixed;
	width: 80px;
	height: 34px;
	top: 1px;
	left: 36px;
	margin: 0 0 0 0;
	z-index: 99;
}

.entetepub {
	height: 160px;
	background-image: url(../images/BanniereSalon2023.jpg);
	position: fixed;
	width: 300px;
	top: 1px;
	left: 160px;
	margin: 0 0 0 0;
}

.opencnx {
	cursor: pointer;
	position: fixed;
	width: 34px;
	height: 34px;
	top: 1px;
	left: 116px;
	margin: 0 0 0 0;
	z-index: 99;
}

.opencnx:hover {
	border: 2px solid green;
}

.btexit {
	cursor: pointer;
	position: fixed;
	width: 34px;
	height: 34px;
	right: 1px;
	top: 1px;
	margin: 0 0 0 0;
	z-index: 99;
}

.btexit:hover {
	border: 2px solid rgb(128, 0, 34);
}

.btfleche {
	cursor: pointer;
	position: fixed;
	width: 34px;
	height: 34px;
	top: 1px;
	margin: 0 0 0 0;
	z-index: 99;
}

.btfleche.droite {
	left: 185px;
}

.btfleche.gauche {
	left: 150px;
}

.btfleche:hover {
	border: 2px solid green;
}


.blocmenu {
	display: block;
	width: 155px;
	left: -155px;
	position: fixed;
	top: 41px;
	z-index: 1;
	transition: left 0.5s ease;
}

.blocmenu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.affichaqua {
	height: 160px;
	background-image: url(../images/fond_global.jpg);
	width: 100%;
	margin: 0 0 0 0;
}

.page {
	display: grid;
	grid-template-columns: 150px 68px 1fr;
	grid-template-rows: 35px minmax(550px, 1fr) 35px;
	grid-template-areas:
		". bton titre"
		". main main"
		". pied pied";
}

.bton {
	grid-area: bton;
}

.titre {
	grid-area: titre;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-weight: normal;
	font-size: 2rem;
	width: 100%;
	padding-left: 10px;
	color: #d0021b;
	display: inline-flex;
	justify-self: start;
}

.titreclub {

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-weight: normal;
	font-size: 1.8rem;
	width: 100%;
	padding-left: 10px;
	color: #163ee1;
	background: #eeeeee;

}

.main {
	grid-area: main;
	align-self: start;
	padding: 15px 5px 5px 5px;
}

.pied {
	grid-area: pied;
	padding: 5px;
	background-color: #80ffff;
}

.menu {
	grid-area: menu;
}

.chat {
	background-image: url(../images/client.jpg);
	cursor: pointer;
	position: fixed;
	width: 34px;
	height: 34px;
	top: 1px;
	left: 116px;
	margin: 0 0 0 0;
	z-index: 99;
}

.chat.clignote {
	animation-duration: .8s;
	animation-name: clignoter;
	animation-iteration-count: infinite;
	transition: none;
}

@keyframes clignoter {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.chat:hover {
	border: 2px solid red;
}

.poub {
	cursor: pointer;
	width: 25px;
	height: 25px;
}

.poub:hover {
	border: 2px solid red;
}

/* force affichage menu en mettant left à 0 au lieu de -160px*/
.blocmenu.active {
	left: 1px;
}

.w500 {
	max-width: 50rem;
}

.w800 {
	max-width: 80rem;
}

.w1000 {
	max-width: 100rem;
}

/* si pas ecran smartphone */
/* desactive la ligne du bas */
@media (max-width: 960px) {

	.pied,
	.bton {
		display: none;
	}

	.titre {
		font-size: 1.6rem;
	}

	.page {
		grid-template-areas:
			".    titre titre"
			"main main main"
			"pied pied pied";
	}

	.avatar {
		display: none;
	}
}


/***********************/
#idavatar {
	margin-top: 2px;
}

nav h3,
nav img {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	font-size: 18px;
	font-family: Times, serif;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	color: #003060;
}

ul {
	padding-left: 4px;
}

.menuaqua li {
	list-style-type: none;
}

.menuaqua li a,
.menuaqua li a:visited {
	background: url(../images/bouton-menu.png);
	background-repeat: no-repeat;
	display: block;
	line-height: 15px;
	margin-left: auto;
	margin-top: 2px;
	margin-bottom: 0px;
	padding: 8px 5px 8px 35px;
	font-family: Times, serif;
	font-size: 1.4rem;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	color: #003060;
}

.menuaqua li.aqua a,
.menuaqua li.aqua a:visited {
	background: url(../images/bouton-menuaqua.png);
	background-repeat: no-repeat;
	display: block;
	line-height: 15px;
	margin-left: auto;
	margin-top: 2px;
	margin-bottom: 0px;
	padding: 8px 5px 8px 35px;
	font-family: Times, serif;
	font-size: 1.4rem;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	color: #003060;
}

.menuaqua li a:hover {
	background-image: url(../images/bouton-menu-actif.png);
	color: #ac0000;
}

.menuaqua li.aqua a:hover {
	background-image: url(../images/bouton-menuaqua-actif.png);
	color: #ac0000;
}

.icon:after {
	content: "";
	width: 1.4em;
	height: 1.4em;
	margin-right: 0.4em;
	float: right;
	background-size: cover;
}

.icon.home:after {
	background-image: url(../images/home.png);
}

.icon.cnx:after {
	background-image: url(../images/cadenas.png);
}

.icon.aqua:after {
	background-image: url(../images/logo.png);
}

.icon.shop:after {
	background-image: url(../images/shop.jpg);
}

.icon.event:after {
	background-image: url(../images/event.jpg);
}

.icon.logout:after {
	background-image: url(../images/logout.png);
}

legend {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-weight: 700;
	color: #00d;
}


.sg-title {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-weight: normal;
	padding-left: 5px;
}

h2.sg-title,
h3.sg-title,
h4.sg-title {
	color: #d0021b;
}

h2.sg-title {
	display: flex;
	position: fixed;
	width: 100%;
	height: 50px;
	top: 0px;
	left: 161px;
	background: #eeeeee;
	flex-direction: row-reverse;
}

h2.sg-title::before,
h2.sg-title::after {
	content: "";
	display: block;
	flex: 1 0 0%;
	border-bottom: 1px solid;
	align-self: center;
}

h2.sg-title::before {
	margin-right: 1rem;
}

h2.sg-title::after {
	margin-left: 1rem;
}

h3.sg-title {
	font-size: 2.2rem;
	position: sticky;
	top: 1px;
	background: #eeeeee;
}

h3.sg-title legend {
	font-size: 2rem;
}

h4.sg-title {
	font-size: 1.8rem;
	display: flex;
	position: sticky;
	top: 161px;
	background: #eeeeee;
}

.container {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-flow: dense;
}

.container img {
	max-width: 100%;
	align-self: stretch;
	justify-self: stretch;
	object-fit: cover;
}

.container video {
	vertical-align: middle;
	max-width: 100%;
}

.container>img {
	max-width: 100%;
	align-self: stretch;
	justify-self: stretch;
	-o-object-fit: cover;
	object-fit: cover;
}

.container>div {
	max-width: 100%;
	align-self: stretch;
	justify-self: stretch;
	-o-object-fit: cover;
	object-fit: cover;
}

.container img {
	max-width: 100%;
	align-self: stretch;
	justify-self: stretch;
	-o-object-fit: cover;
	object-fit: cover;
}

.portrait {
	grid-row: auto/span 2;
}

.fit-left {
	-o-object-position: left;
	object-position: left;
}

.fit-right {
	-o-object-position: right;
	object-position: right;
}

.container img:hover {
	/* L'image est grossie de 15% */
	-webkit-transform: scale(1.15);
	/* Safari et Chrome */
	-moz-transform: scale(1.15);
	/* Firefox */
	-ms-transform: scale(1.15);
	/* Internet Explorer 9 */
	-o-transform: scale(1.15);
	/* Opera */
	transform: scale(1.15);
	background: cyan;
}

.container video:hover {
	/* L'image est grossie de 30% */
	-webkit-transform: scale(1.3);
	/* Safari et Chrome */
	-moz-transform: scale(1.3);
	/* Firefox */
	-ms-transform: scale(1.3);
	/* Internet Explorer 9 */
	-o-transform: scale(1.3);
	/* Opera */
	transform: scale(1.3);
	background: cyan;
}

/* Decoration */
* {
	box-sizing: border-box
}

.container,
.container img {
	padding: 5px;
	color: #fff;
}

.container img {
	margin: 5px;
	background: yellow;
	border: 2px solid #ddd;
	box-shadow: 3px 2px 2px #ddd;
}

.liencontact {
	text-align: center;
}

img.icone {
	border: 2px solid blue;
	margin: 4px;
}

img.icone:hover {
	/* L'image est grossie de 100% */
	-webkit-transform: scale(1.4);
	/* Safari et Chrome */
	-moz-transform: scale(1.4);
	/* Firefox */
	-ms-transform: scale(1.4);
	/* Internet Explorer 9 */
	-o-transform: scale(1.4);
	/* Opera */
	transform: scale(1.4);
	background: cyan;
}

img.iconex:hover {
	/* L'image est grossie de 100% */
	-webkit-transform: scale(1.4);
	/* Safari et Chrome */
	-moz-transform: scale(1.4);
	/* Firefox */
	-ms-transform: scale(1.4);
	/* Internet Explorer 9 */
	-o-transform: scale(1.4);
	/* Opera */
	transform: scale(1.4);
	background: cyan;
	cursor: not-allowed;
}

img.avatar:hover {
	/* L'image est grossie */
	-webkit-transform: scale(2);
	/* Safari et Chrome */
	-moz-transform: scale(2);
	/* Firefox */
	-ms-transform: scale(2);
	/* Internet Explorer 9 */
	-o-transform: scale(2);
	/* Opera */
	transform: scale(2);
	background: cyan;
	cursor: pointer;
}

.tabs-menu-link.is-active {
	background-color: green;
	color: white;
	text-decoration: underline;
}

img.centreimg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.textaccueil {
	margin-top: 2rem;
	color: #800000;
	font-family: Times, serif;
	font-size: 2rem;
}

.textaccueil legend {
	font-weight: bold;
}

/* Classe obligatoire pour les flèches */
.flecheDesc {
	width: 0;
	height: 0;
	float: right;
	margin: 10px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
}

.flecheAsc {
	width: 0;
	height: 0;
	float: right;
	margin: 10px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
}

/* Classe optionnelle pour le style */
.tableau {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.tableau td {
	padding: .1rem
}

.zebre tbody tr:nth-child(odd) {
	background-color: #d6d3ce;
	border-bottom: 1px solid #ccc;
	color: #444;
}

.zebre tbody tr:nth-child(even) {
	background-color: #c6c3bd;
	border-bottom: 1px solid #ccc;
	color: #444;
}

.zebre tbody tr:hover:nth-child(odd) {
	background-color: #999690;
	color: #ffffff;
}

.zebre tbody tr:hover:nth-child(even) {
	background-color: #999690;
	color: #ffffff;
}

.avectri th {
	text-align: center;
	padding: 5px 0 0 5px;
	vertical-align: middle;
	background-color: #999690;
	color: #444;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.avectri th.selection {
	background-color: #5d625c;
	color: #fff;
}

.avectri th.selection .flecheDesc {
	border-bottom-color: white;
}

.avectri th.selection .flecheAsc {
	border-top-color: white;
}

.zebre tbody td:nth-child(3) {
	text-align: center;
}

/*chat ajax*/
#main-wrapper {
	max-width: 600px;
	margin: auto;
}

#message {
	background-color: #f3f2f7;
	padding: 0 10px;
	height: 300px;
	width: 100%;
	box-sizing: border-box;
	border-radius: 5px;
	overflow-y: scroll;
	border: 1px solid #6976ee;
}

#utilisateur {
	list-style: none;
	padding: 0;
	background-color: #f3f2f7;
	height: 100px;
	width: 100%;
	box-sizing: border-box;
	border-radius: 5px;
	overflow-y: scroll;
	margin-bottom: 10px;
	border: 1px solid #cccccc;
}

#send {
	margin-top: 10px;
	width: 100%;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #cccccc;
	box-sizing: border-box;
}

.message {
	border-bottom: 1px solid #cccccc;
	padding: 10px 0;
	font-size: 0.9em;
}


.message img {
	float: left;
	margin-top: -5px;
	margin-right: 5px;
	width: 25px;
	height: 25px;
}

.utilisateur {
	padding: 5px;
	font-size: 0.9em;
}

.utilisateur {
	color: #3e3e3e;
	cursor: default;
}

.utilisateur:hover {
	cursor: pointer;
	background-color: #cccccc !important;
}

.utilisateur:nth-child(2n+2) {
	background-color: #ffffff;
}

.utilisateur .usr {
	width: 100%;
	padding-right: 5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.utilisateur .usr img {
	float: left;
	margin-right: 5px;
}

.utilisateur-action {
	position: absolute;
	box-shadow: 1px 1px 3px #cccccc;
	padding: 5px;
	background-color: #ffffff;
	border-radius: 5px;
}

.utilisateur-action-close {
	position: absolute;
	left: 130px;
	top: 0px;
}

.btcna {
	width: 50%;
	height: 15px;
	border: solid;
	background-color: #7eb9e3;
	color: #d23483;
	border-radius: 5px
}

.button {
	cursor: pointer;
	padding: 10px 15px;
	margin-bottom: 5px;
	margin-top: 10px;
	font-weight: bold;
	border-radius: 5px;
	border: solid;
	background: #ace7b7;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
}

.button:hover {
	background: #dae7ae;
	border-color: rgb(168, 28, 161);
}

.button-blue:hover {
	background: #9a5a11;
}

.clearmsg {
	clear: both;
	word-wrap: break-word;
	background-color: #f3f2f7;
}


.infos {
	font-weight: bold;
	list-style-type: none;
	background: url("../images/minilogo.jpg") no-repeat 7px 5px;
	margin: 0;
	padding: 0px 0px 3px 35px;
	vertical-align: middle;
}