/* Gestion du thème */
.theme-clair {
	--background-primary: #ffffff;
	--primary-color: #000000;
	--player-square: #ffa700;
	--player-circle: #00e7ff;
	--cell-inactive: #cacaca;
	--cell-inactive-border: #ababab;
	--cell-square-border: #e27603;
	--cell-circle-border: #008b9a;
	--theme-indicative-color: #42b5eb;
	--theme-switch-color: #00d6dd;
}
.theme-sombre {
	--background-primary: #1d1d1d;
	--primary-color: #bdbdbd;
	--player-square: #00b1f5;
	--player-circle: #ffa000;
	--cell-inactive: #474747;
	--cell-inactive-border: #323232;
	--cell-square-border: #00648b;
	--cell-circle-border: #8b5700;
	--theme-indicative-color: #7700d8;
	--theme-switch-color: #a900a3;
}
body {
	margin: 0;
	background-color: var(--background-primary);
	font-family: Lato, Arial, Helvetica, sans-serif;
	color: var(--primary-color);
	transition: all 300ms ease;
	width: 100vw;
	height: 100vh;
}
header {
	backdrop-filter: blur(15px);
	position: sticky;
	top: 0;
	z-index: 9999;
	padding: 0px 18px 9px 18px;
}
a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.flexboxes {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-bottom: solid var(--primary-color) 1px;
}
.cell {
	margin: auto;
	height: 28%;
	width: 28%;
	cursor: pointer;
	transition: all 200ms ease;
}
.cell:hover {
	scale: 90%;
	transition: all 200ms ease;
	opacity: 50%;
}
.cell-inactive {
	background-color: var(--cell-inactive);
	border-radius: 25%;
}
.cell-active {
	transform: rotate(90deg);
}
.cell-square {
	background-color: var(--player-square);
	border-radius: 10%;
}
.cell-circle {
	background-color: var(--player-circle);
	border-radius: 70%;
}
.cell-losing {
	filter: opacity(.5);
}
.cell-winning {
	filter: brightness(1.5);
}
#switchThemeIcon {
	display: flex;
	align-items: center;
	font-size: 30px;
	border-radius: 100%;
	color: var(--theme-indicative-color);
	transition: all ease-in 200ms;
}
#switchThemeIcon:hover {
	color: var(--theme-switch-color);
	scale: 1.05;
	cursor: pointer;
}
#switchThemeText {
	font-size: 26px;
	padding-left: 6px;
}
#jeu {
	margin: 0 auto;
	/* width: fit-content; */
	text-align: center;
	--cote: 80vw;
	width: var(--cote);
	height: var(--cote);
	max-width: 350px;
	max-height: 350px;
}
#plateau {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center	;
	justify-content: space-around;
	flex-wrap: wrap;
}
#reinitialiser {
	background-image: linear-gradient(135deg,var(--player-square) 0,var(--player-circle) 100%);
	cursor: pointer;
	border-radius: 5px;
	color: var(--background-primary);
	font-size: larger;
	padding: 3px;
}
#currentPlayer {
	font-size: 120%;
	font-weight: bold;
	color: var(--player-square);
	cursor: pointer;
}
#currentPlayer:hover {
	text-decoration: underline overline;
}
#currentPlayerContainer {
	margin: 0 auto;
	padding: 5px;
	cursor: pointer;
}
#basdepage {
	border-top: solid 1px var(--primary-color);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	height: 3lh;
}
.currentPlayerContainer {
	width: 340px;
	background-color: transparent;
	transition: all 300ms ease;
}
.currentPlayerContainerHover {
	width: 140px;
	background-color: #ffff0059;
	border-radius: 25px;
	transition: all 300ms ease;
}