* {
	box-sizing: border-box;
}

html {
	font-family:
		Avenir, Helvetica, "Open-Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

ol {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 20px;
	width: 600px;
}

li {
	border: 3px solid black;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ── Placement des cases ── */

li:nth-child(6) {
	grid-column: 5;
	grid-row: 2;
}
li:nth-child(7) {
	grid-column: 5;
	grid-row: 3;
}
li:nth-child(8) {
	grid-column: 5;
	grid-row: 4;
}
li:nth-child(9) {
	grid-column: 5;
	grid-row: 5;
}
li:nth-child(10) {
	grid-column: 4;
	grid-row: 5;
}
li:nth-child(11) {
	grid-column: 3;
	grid-row: 5;
}
li:nth-child(12) {
	grid-column: 2;
	grid-row: 5;
}
li:nth-child(13) {
	grid-column: 1;
	grid-row: 5;
}
li:nth-child(14) {
	grid-column: 1;
	grid-row: 4;
}
li:nth-child(15) {
	grid-column: 1;
	grid-row: 3;
}

/* ── Orientation des chiffres ── */

/* Colonne droite */
li:nth-child(6) span,
li:nth-child(7) span,
li:nth-child(8) span {
	transform: rotate(-90deg);
}

/* Colonne gauche */
li:nth-child(14) span,
li:nth-child(15) span,
li:nth-child(16) span {
	transform: rotate(90deg);
}

/* Coins */
li:nth-child(1) span {
	transform: rotate(135deg);
}
li:nth-child(5) span {
	transform: rotate(-135deg);
}
li:nth-child(9) span {
	transform: rotate(-45deg);
}
li:nth-child(13) span {
	transform: rotate(45deg);
}

/* ── Couleurs des cases ── */

li:nth-child(1) {
	background-color: #e74c3c;
}
li:nth-child(2) {
	background-color: #e67e22;
}
li:nth-child(3) {
	background-color: #f1c40f;
}
li:nth-child(4) {
	background-color: #2ecc71;
}
li:nth-child(5) {
	background-color: #3498db;
}

li:nth-child(6) {
	background-color: #e74c3c;
}
li:nth-child(7) {
	background-color: #e67e22;
}
li:nth-child(8) {
	background-color: #f1c40f;
}
li:nth-child(9) {
	background-color: #2ecc71;
}
li:nth-child(10) {
	background-color: #3498db;
}
li:nth-child(11) {
	background-color: #e74c3c;
}
li:nth-child(12) {
	background-color: #e67e22;
}
li:nth-child(13) {
	background-color: #f1c40f;
}
li:nth-child(14) {
	background-color: #2ecc71;
}
li:nth-child(15) {
	background-color: #3498db;
}
li:nth-child(16) {
	background-color: #e74c3c;
}

/* ── Couleurs des chiffres ── */

li span {
	font-size: 3em;
	font-weight: bold;
	color: black;
}

main {
	position: relative;
}

h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	margin: 0;
	font-size: 4rem;
	white-space: nowrap;
	font-weight: bold;
	color: #2c3e50;
}