/* CSS */
/* (Version) By sync - Boulette (V5.5.4)
	Jeu de Sudoku
*/

:root {
	--scale-factor: 0.9;
	--cell-size-desktop: min(60px, 10vmin);
	--cell-size-mobile: min(46px, 9vmin);
	--gap: 2px;
	--accent: #000000; /*<!-- margin:2px; couleur interne cadre !!! -->*/
	--muted: #6b6b6b;
	--bg: #f8f9fb;
	--cell-bg: #ffffff;
	--kbd-height: 80px;
}

body > .scale-wrap {
	transform: scale(var(--scale-factor));
	transform-origin: top center;
	width: 100%;
	user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
}
* {
	box-sizing: border-box;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html, body {
	height: 100%;
	/* Empêche la sélection de texte */
	 -webkit-user-select: none;
	user-select: none;
	user-source: hidden; -ms-user-select: none;
}
body {
	margin: 0;
	background: linear-gradient(180deg, #f0f6fb, #CCFFCC);
	color: #0b1220;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 24px;
	min-height: 100vh;
	overflow-x: hidden;
}
header {
	max-width: 970px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
h1 {
	font-size: 16px;
	margin: 2px;
}
.controls {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.small {
	background-color: #c8f7c5; /* Vert clair */
	padding: 9px 10px;
	display: inline-block;
	border-radius: 8px;
	font-size: 12px;
	color: #000000;
	font-family: 'Segoe UI', sans-serif;
}
select, button {
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.2); /* translucide */
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(8px); /* effet vitre floutée */
	-webkit-backdrop-filter: blur(8px); /* pour Safari */
	border-radius: 8px;
	padding: 8 10px;
	font-weight: 600;
	color: #000;
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	cursor: pointer;
	transition: all 0.3s ease;
}

button.secondary {
	background: rgba(255, 255, 255, 0.2); /* translucide */
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(8px); /* effet vitre floutée */
	-webkit-backdrop-filter: blur(8px); /* pour Safari */
	border-radius: 8px;
	padding: 8 10px;
	font-weight: 600px;
	color: #000;
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	cursor: pointer;
	transition: all 0.3s ease;
}

button.secondary:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}

.toolbar {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
main {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: flex-start;
	max-width: 838px;
	width: 90%;
}
.board-wrap {
	background: var(--cell-bg);
	padding: 2px; /* ✅ espace entre le cadre et la grille */
	border: 2px solid #C0392B; /* 🔲 cadre noir */
	border-radius: 10px;
	box-shadow: 0 6px 15px rgba(10, 20, 40, 0.06);
	display: flex;
	justify-content: center;
	align-items: center;
}

.board {
	display: grid;
	grid-template-columns: repeat(9, var(--cell-size));
	grid-template-rows: repeat(9, var(--cell-size));
	gap: 1px;	/* espace entre les cases */
	padding: 2px; /* ✅ espace entre la grille et le cadre noir */
	background: #ffffff;
	border-radius: 6px;
}

/* ✅ Cases avec bordure fine, sans superposition du cadre vert */
.cell {
	width: var(--cell-size);
	height: var(--cell-size);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--cell-size) * 0.45);
	background: var(--cell-bg);
	position: relative;
	overflow: hidden;
	border: 1px solid #dfe7ef;
	transition: background 0.15s ease;
}

.cell.given {
	font-weight: 700px;
	color: #0b1220;
	background: linear-gradient(180deg, #ffffff, #f2f6fa);
}

.cell.user {
	color: #224b87;
}

.cell.error {
	background: linear-gradient(180deg, #ffecec, #fff0f0);
	border-color: #ff4d4d;
}

.cell.selected {
	outline: 3px solid rgba(43, 122, 120, 0.18);
	z-index: 10;
}

.cell.same {
	background: #f4fbfa;
}

.cell.hint {
	animation: hintFlash 900ms ease;
}

@keyframes hintFlash {
	0% { background: #fffbdf; }
	100% { background: transparent; }
}
.notes {
	position: absolute;
	inset: 6px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	font-size: calc(var(--cell-size) * 0.18);
	color: var(--muted);
	align-items: center;
	justify-items: center;
}
.notes span { opacity: 0.95; }

.cell[data-col="0"], .cell[data-col="3"], .cell[data-col="6"] { border-left: 4px solid var(--accent); }
.cell[data-row="0"], .cell[data-row="3"], .cell[data-row="6"] { border-top: 4px solid var(--accent); }
.cell[data-col="8"] { border-right: 4px solid var(--accent); }
.cell[data-row="8"] { border-bottom: 4px solid var(--accent); }

aside {
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.side-block {
	background: var(--cell-bg);
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(10, 20, 40, 0.06);
}
footer {
	max-width: 350px;
	width: 50%;
	margin: 0 auto; /* centre horizontalement dans la page */
	display: flex;
	justify-content: center; /* centre le contenu à l'horizontale */
	align-items: center; /* centre verticalement s’il y a de la hauteur */
	font-size: 12px;
	color: var(--muted);
	text-align: center; /* s’assure que le texte à l’intérieur est centré */
}
@media(min-width:701px) {
	:root { --cell-size: var(--cell-size-desktop); }
}
@media(max-width:700px) {
	:root { --cell-size: var(--cell-size-mobile); }
	main { flex-direction: column-reverse; align-items: stretch; }
	.board-wrap { order: 1; }
	aside { order: 1; flex-direction: row; gap: 8px; justify-content: space-between; }
	body { padding-bottom: calc(var(--kbd-height) + 60px); }
}
@media(max-height:700px) {
	:root { --kbd-height: 90px; }
	body { padding-bottom: calc(var(--kbd-height) + 70px); }
}

/* ✅ Clavier déplaçable */
.keypad {
	position: fixed; /* Maintient la capacité de déplacement */
	/* Nouvelle position initiale : centré horizontalement, en bas */
	bottom: 48%; /* 20 ⬅️ Valeur augmentée pour le monter plus haut */
	left: 31%; /* Commence à 50% du bord gauche */
	transform: translateX(-50%); /* Décalage pour le centrage parfait */
	right: auto; /* Supprime l'ancien positionnement 'right' */
	top: auto; /* S'assure qu'il est géré par 'bottom' */
	/* Styles visuels conservés */
	background: rgba(0,204,153,0.93);
	padding: 10px;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 195px; /* largeur band verte */
	z-index: 100;
	touch-action: none;
	cursor: grab;
}
.keypad.dragging { cursor: grabbing; }
.keypad .key {
	width: 36px;
	height: 39px;
	font-size: 16px;
	font-weight: bold;
	border: none;
	background: #e6f1ff;
	color: #0055aa;
	border-radius: 8px;
	cursor: pointer;
}
.key.action {
	background: #fff6e0;
	color: #aa6600;
}
.key.erase {
	background: #ffeaea;
	color: #cc3333;
}
/* CSS pour overlay message */
#end_CASE_Message {
	position: fixed; /* au-dessus de tout */
	top: 50%; /* centre vertical */
	left: 50%; /* centre horizontal */
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.8);
	color: white;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	padding: 20px 40px;
	border-radius: 15px;
	z-index: 9999; /* au-dessus de la grille */
	display: none; /* caché par défaut */
	pointer-events: none; /* clics passent à travers */
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
/* FIN CSS */