/* VARIABLES DE CONCEPTION
 * Modifier ces variables pour re-thématiser l'application
----------------------------------------------------------- */
:root {
	--color-page: #fcf8f8;
	--color-accent: #ff583b;
	--color-accent-hover: oklch(from var(--color-accent) calc(l * 1.05) c h);
	--color-muted: oklch(from var(--color-accent) 0.9 0.01 h);
	--color-text: oklch(from var(--color-accent) 0.25 0.025 h);
	--color-text-muted: oklch(from var(--color-accent) 0.5 0.05 h);
	--color-sidebar-bg: oklch(from var(--color-page) calc(l * 1.25) c h);

	/* Typography */
	--font-family-text: system-ui, sans-serif;
	--font-family-heading: system-ui, sans-serif;
	--font-size-medium: 16px;
	--font-size-small: 14px;
	--line-height: 1.5;

	--border-size: 2px;
	--border-radius: 5px;

	--spacing-small: 6px;
	--spacing-medium: 10px;
	--spacing-large: 15px;

	--transition-duration: 0.2s;

	--sidebar-width: 300px;
	--toggle-size: 45px;
}

/* RÉINITIALISATION ET BASE
 * ---------------------------------------------- */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--color-page);
	padding: 0;
	overflow: hidden;
	color: var(--color-text);
	font-size: var(--font-size-medium);
	line-height: var(--line-height);
	font-family: var(--font-family-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading);
}

input[type="checkbox"] {
	width: 1.5em;
	height: 1.5em;
	accent-color: var(--color-accent);
}

/* CANVAS DE LA GRILLE
 * ---------------------------------------------- */
#grid-canvas {
	position: fixed;
	z-index: 0;
	inset: 0;
	width: 100vw;
	height: 100vh;
}

/* CANVAS DE LA LETTRE
 * ---------------------------------------------- */
#letter-canvas {
	position: fixed;
	z-index: 1;
	inset: 0;
	width: 100vw;
	height: 100vh;
}

/* BOUTON DE BASCULE DU PANNEAU
 * ---------------------------------------------- */
#toggle-sidebar {
	display: flex;
	position: fixed;
	top: var(--spacing-large);
	right: var(--spacing-large);
	justify-content: center;
	align-items: center;
	z-index: 100;
	transition: all var(--transition-duration);
	cursor: pointer;
	border: var(--border-size) solid var(--color-accent);
	border-radius: 50%;
	background: var(--color-page);
	width: var(--toggle-size);
	height: var(--toggle-size);
	color: var(--color-accent);
	font-size: 25px;
	line-height: 0;
}

#toggle-sidebar:hover {
	background: var(--color-accent);
	color: var(--color-page);
}

/* PANNEAU LATÉRAL
 * ---------------------------------------------- */
#sidebar {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	transform: translateX(100%);
	z-index: 99;
	transition: transform var(--transition-duration);
	border-left: var(--border-size) solid var(--color-muted);
	background: var(--color-sidebar-bg);
	padding: var(--spacing-large);
	width: var(--sidebar-width);
	overflow-y: auto;
}

#sidebar.open {
	transform: translateX(0);
}

#sidebar hr {
	margin: var(--spacing-large) 0;
	border: none;
	border-top: var(--border-size) solid var(--color-muted);
}

/* SECTIONS DU PANNEAU
 * ---------------------------------------------- */
.sidebar-section {
	margin-bottom: var(--spacing-large);
}

.sidebar-section:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

.sidebar-section h3 {
	margin-top: 0;
	margin-bottom: var(--spacing-small);
	text-transform: uppercase;
}

/* ÉLÉMENTS DE FORMULAIRE
 * ---------------------------------------------- */
.sidebar-section label {
	display: block;
	cursor: pointer;
	margin-top: var(--spacing-large);
	margin-bottom: var(--spacing-small);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.sidebar-section label:first-of-type {
	margin-top: 0;
}

.sidebar-section input[type="number"],
.sidebar-section select {
	transition: border-color var(--transition-duration);
	outline: none;
	border: var(--border-size) solid var(--color-muted);
	border-radius: var(--border-radius);
	background: var(--color-page);
	padding: var(--spacing-small) var(--spacing-medium);
	width: 100%;
	color: var(--color-text);
	font-size: var(--font-size-medium);
	font-family: var(--font-family-text);
}

.sidebar-section input[type="number"]:focus,
.sidebar-section select:focus {
	border-color: var(--color-accent);
}

/* BOUTON DE RÉINITIALISATION
 * ---------------------------------------------- */
.btn-reset {
	transition: background 0.2s;
	cursor: pointer;
	border: none;
	border-radius: var(--border-radius);
	background: var(--color-accent);
	padding: var(--spacing-medium) var(--spacing-large);
	width: 100%;
	color: var(--color-page);
	font-size: var(--font-size-medium);
	font-family: var(--font-family-text);
}

.btn-reset:hover {
	background: var(--color-accent-hover);
}

/* MASQUAGE DE L'INTERFACE PAR INACTIVITÉ
 * La classe « ui-hidden » est posée sur le <body> par JS
 * après UI_CONFIG.inactivityTimeout ms sans activité.
 * Le bouton et le panneau s'estompent en douceur ; le
 * panneau ouvert ignore la règle grâce au sélecteur :not.
 * ---------------------------------------------- */
body.ui-hidden {
	cursor: none;
}

body.ui-hidden #toggle-sidebar {
	opacity: 0;
	transition: opacity calc(var(--transition-duration) * 3);
	pointer-events: none;
}

body.ui-hidden #sidebar:not(.open) {
	opacity: 0;
	transition:
		opacity calc(var(--transition-duration) * 3),
		transform var(--transition-duration);
	pointer-events: none;
}

#toggle-sidebar,
#sidebar {
	transition:
		opacity calc(var(--transition-duration) * 3),
		transform var(--transition-duration);
}

/* RESPONSIVE
 * ---------------------------------------------- */
@media (max-width: 480px) {
	:root {
		--sidebar-width: 85vw;
	}
}