/* 
BK-Coding.net
file: style.css
author: Bastien Kilian
*/

@import url("https://fonts.googleapis.com/css2?family=Share+Tech&display=swap");

:root {
	--height5: 5vh;
	--height10: 10vh;
	--height20: 20vh;
	--colorblue: rgba(20, 42, 72, 1);
	--colordarkblue: rgb(13, 27, 46);
	--colorblack: black;
	--transpablanc02: rgba(245, 245, 245, 0.2);
	--transpanoir02: rgba(0, 0, 0, 0.2);
	--transpanoir08: rgba(0, 0, 0, 0.8);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	background-color: var(--colorblue);
	font-family: "Share Tech", sans-serif;
	color: white;
	width: 100%;
	height: 100%;
}

a {
	text-decoration: none;
	color: white;
}

.pad10 {
	padding: 10px;
}

.mar10 {
	margin: 10px;
}

.wid90 {
	width: 90%;
}

.wid90 input {
	width: 90%;
	text-align: center;
}

.bodycontainer {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
}

.infocreation {
	background-color: var(--colordarkblue);
	text-align: center;
	border: dashed orange;
	border-radius: 10px;
	padding: 5%;
	box-shadow: 5px 5px 10px var(--transpablanc02);
	align-self: center;
	justify-self: center;
}

.infocreation img {
	width: var(--height20);
	border-radius: 50%;
}

.toolbar {
	width: 100%;
	background-color: var(--colordarkblue);
	position: fixed;
	display: flex;
	align-items: center;
}

.header {
	height: var(--height10);
	top: 0px;
	border-bottom: dashed orange;
	z-index: 99;
}

.footer {
	height: var(--height5);
	bottom: 0px;
	border-top: dashed orange;
	justify-content: center;
	z-index: 99;
}

.header .logo {
	align-self: start;
}

.logo img {
	height: var(--height10);
	border-radius: 50%;
	margin: 10px;
}

.message {
	margin: auto;
}

.menu {
	margin-right: 5vw;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.menu a {
	margin: 2vh 2vw;
}

.noaff {
	display: inline;
	padding-left: 10px;
}

@media (max-width: 768px){
	.noaff {
		display: none;
	}
}

.bodycontent {
	padding: var(--height10) 5vw var(--height5);
	width: 100%;
	overflow: auto;
}

.category {
	border-radius: 10px;
	margin: 2vh 2vw;
	padding: 2vh 2vw;
	box-shadow: 2px 2px 5px var(--transpablanc02) inset,
		-2px -2px 5px var(--transpanoir02) inset,
		2px 2px 10px var(--transpanoir08);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-content: space-around;
}

.categorychat {
	border-radius: 10px;
	margin: 2vh 2vw;
	padding: 2vh 2vw;
	box-shadow: 2px 2px 5px var(--transpablanc02) inset,
		-2px -2px 5px var(--transpanoir02) inset,
		2px 2px 10px var(--transpanoir08);
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
}

.chat-box {
	width: 90%;
	height: 150px;
	background-color: black;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px;
	overflow-y: auto;
	display: flex;
	flex-direction: column-reverse;
}

.messagechat {
	margin-bottom: 10px;
}

.messagechat em {
	font-size: small;
	color: aqua;
}

#chat-form {
	width: 100%;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	text-align: center;
}

.bouton {
	background-color: var(--colordarkblue);
	min-width: 50px;
	min-height: 50px;
	margin: 2vh 2vw;
	padding: 2vh 2vw;
	border: 1px solid whitesmoke;
	border-radius: 10px;
	box-shadow: 2px 2px 5px var(--transpablanc02) inset,
		-2px -2px 5px var(--transpanoir02) inset,
		2px 2px 10px var(--transpanoir08);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-content: space-around;
	text-align: center;
}

.categoryajout {
	background-color: var(--colordarkblue);
	border-radius: 10px;
	margin: 2vh 2vw;
	padding: 2vh 2vw;
	text-align: center;
}

.categoryajout div {
	display: inline-block;
	margin: 5px 10px;
}

.categorytoolbar {
	background-color: var(--colordarkblue);
	border-radius: 10px;
	margin: 2vh 2vw;
	padding: 2vh 2vw;
	align-content: center;
}

.categorytoolbar legend {
	width: auto;
	margin: auto;
}

.categorytoolbar div {
	text-align: center;
	align-content: center;
}

.toolbarbtn {
	padding: 1vh 1vw;
	font-weight: normal;
	background-color: black;
	color: white;
	border: 1px solid whitesmoke ;
	border-radius: 5px;
}

.toolbarbtn:hover {
	cursor: pointer;
	background-color: orange;
	color: black;
}

.active {
	font-weight: bolder;
	background-color: orange;
	color: black;
	border: 2px solid whitesmoke;
}

.categorytableau {
	border-radius: 10px;
	margin: 2vh 2vw;
	padding: 2vh 2vw;
	text-align: center;
}
.categorytableau legend {
	width: auto;
	margin: auto;
}

.tableaucachet {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0 auto;
}

.tableaucachet thead tr {
	background-color: var(--colordarkblue);
}

.tableaucachet th,
.tableaucachet td {
	padding: 8px;
	text-align: center;
	border: 1px solid #ddd;
}

/* Styles pour les petits écrans */
@media (max-width: 768px) {
	.tableaucachet {
		display: block;
		/* Transforme le tableau en bloc */
		overflow-x: auto;
		/* Ajoute un défilement horizontal */
		margin: 0 auto;
		/* Centre le tableau */
	}

	.tableaucachet thead {
		display: none;
	}

	.tableaucachet tbody {
		display: block;
		width: 100%;
	}

	.tableaucachet tr {
		display: block;
		width: 100%;
		padding: 10px;
	}

	.tableaucachet td {
		display: block;
		position: relative;
		padding-left: 50%;
		text-align: right;
		word-break: break-word;
	}

	.tableaucachet td::before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
		text-align: left;
		font-weight: bold;
	}
}