*, html {
	margin:		0;
	padding:	0;
	box-sizing:	border-box;
}
:root {
	--verre:	rgba(251, 251, 250, 0.84);
	--encre:	#1d1d1f;
	--doux:		#6e6e73;
	--trait:	rgba(0, 0, 0, 0.08);
	--piste:	#dcdce0;
	--accent:	#2f5be0;
	--survol:	rgba(0, 0, 0, 0.05);
	--ombre:	0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.10);
}
body {
	overflow:	hidden;
	background:	#e4e4e7;	/* the table around the sheet, as drawn on the canvas */
	font:		13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color:		var(--encre);
	-webkit-font-smoothing: antialiased;
}
canvas {
	display:	block;
	/* fingers and pen are handled by the page: no browser scroll, zoom, selection or magnifier */
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
button {
	font:		inherit;
	color:		inherit;
	border:		0;
	background:	none;
	cursor:		pointer;
}
[hidden] { display: none !important; }
/* drawing canvases (dessin.js): over the grid, under the interface; the pointer goes through */
.calque {
	position:	fixed;
	left:		0;
	top:		0;
	z-index:	1;
	pointer-events: none;
}
/* JavaScript errors, shown on the page (index.html) */
.erreurs {
	position:	fixed;
	left:		16px;
	bottom:		16px;
	z-index:	10;
	max-width:	calc(100vw - 32px);
	padding:	8px 10px;
	border-radius: 8px;
	background:	#b00020;
	color:		#fff;
	font:		12px/1.4 ui-monospace, Menlo, monospace;
	white-space: pre-wrap;
}
body.sans-ui .barre, body.sans-ui .panneau { display: none; }

/* ---------- floating surfaces */
.barre, .panneau {
	position:	fixed;
	z-index:	5;	/* above the canvas, even while a CSS transform moves it (two-finger gesture) */
	background:	var(--verre);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
	border:		1px solid var(--trait);
	box-shadow:	var(--ombre);
	user-select: none;
	-webkit-user-select: none;
}
svg {
	width:		18px;
	height:		18px;
	fill:		none;
	stroke:		currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- toolbar */
.barre {
	top:		16px;
	left:		16px;
	display:	flex;
	align-items: center;
	gap:		4px;
	padding:	5px;
	border-radius: 12px;
}
.marque {
	display:	flex;
	align-items: center;
	gap:		8px;
	padding:	0 8px 0 6px;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.sep {
	width:		1px;
	height:		20px;
	margin:		0 4px;
	background:	var(--trait);
}
.etiquette {
	color:		var(--doux);
	padding:	0 4px 0 2px;
}
.seg {
	display:	flex;
	padding:	2px;
	border-radius: 8px;
	background:	rgba(0, 0, 0, 0.06);
}
.seg button {
	width:		30px;
	height:		26px;
	border-radius: 6px;
	color:		var(--doux);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	transition:	background 0.15s, color 0.15s;
}
.seg button:hover { color: var(--encre); }
.seg button.actif {
	background:	#fff;
	color:		var(--encre);
	box-shadow:	0 1px 2px rgba(0, 0, 0, 0.14);
}
.icone {
	display:	grid;
	place-items: center;
	width:		32px;
	height:		32px;
	border-radius: 8px;
	color:		var(--doux);
	transition:	background 0.15s, color 0.15s;
}
.icone:hover { background: var(--survol); color: var(--encre); }
.icone.actif { color: var(--accent); background: rgba(47, 91, 224, 0.10); }
.icone.petit { width: 28px; height: 28px; }
button:focus-visible, input:focus-visible {
	outline:	2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- panel */
.panneau {
	top:		16px;
	right:		16px;
	width:		288px;
	max-height:	calc(100vh - 32px);
	display:	flex;
	flex-direction: column;
	border-radius: 14px;
	overflow:	hidden;
	transition:	transform 0.25s ease, opacity 0.25s ease;
}
.panneau.ferme {
	transform:	translateX(calc(100% + 24px));
	opacity:	0;
	pointer-events: none;
}
.tete {
	display:	flex;
	align-items: center;
	justify-content: space-between;
	padding:	10px 8px 6px 16px;
	font-weight: 600;
	font-size:	14px;
}
.corps {
	flex:		1;
	overflow-y:	auto;
	padding:	0 8px 6px;
	scrollbar-width: thin;
}
.section + .section { border-top: 1px solid var(--trait); }
summary {
	list-style:	none;
	display:	flex;
	align-items: center;
	justify-content: space-between;
	padding:	11px 8px;
	font-size:	11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color:		var(--doux);
	cursor:		pointer;
	border-radius: 6px;
}
summary:hover { color: var(--encre); }
summary::-webkit-details-marker { display: none; }
summary::after {
	content:	"";
	width:		6px;
	height:		6px;
	margin-right: 4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform:	rotate(-45deg);
	transition:	transform 0.2s;
}
details[open] > summary::after { transform: rotate(45deg); }
.contenu {
	display:	flex;
	flex-direction: column;
	gap:		12px;
	padding:	0 8px 14px;
}
.ligne label {
	display:	flex;
	justify-content: space-between;
	margin-bottom: 5px;
}
.ligne output {
	color:		var(--doux);
	font-variant-numeric: tabular-nums;
}
.note {
	margin-top:	4px;
	font-size:	11px;
	color:		var(--doux);
	font-variant-numeric: tabular-nums;
}

/* ---------- sliders: thin track, filled up to the thumb (--p) */
input[type=range] {
	-webkit-appearance: none;
	appearance:	none;
	display:	block;
	width:		100%;
	height:		16px;
	background:	transparent;
	cursor:		pointer;
}
input[type=range]::-webkit-slider-runnable-track {
	height:		3px;
	border-radius: 3px;
	background:	linear-gradient(var(--accent), var(--accent)) 0 / var(--p, 50%) 100% no-repeat, var(--piste);
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:		14px;
	height:		14px;
	margin-top:	-5.5px;
	border-radius: 50%;
	background:	#fff;
	border:		1px solid rgba(0, 0, 0, 0.14);
	box-shadow:	0 1px 3px rgba(0, 0, 0, 0.22);
	transition:	transform 0.1s;
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--piste); }
input[type=range]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--accent); }
input[type=range]::-moz-range-thumb {
	width:		14px;
	height:		14px;
	border-radius: 50%;
	background:	#fff;
	border:		1px solid rgba(0, 0, 0, 0.14);
	box-shadow:	0 1px 3px rgba(0, 0, 0, 0.22);
}

/* ---------- colours */
/* one column per visible swatch (the C swatch only shows in 3 points) */
.contenu.couleurs {
	flex-direction: row;
	gap:		4px;
}
.couleur {
	flex:		1;
	display:	flex;
	flex-direction: column;
	align-items: center;
	gap:		5px;
	font-size:	11px;
	color:		var(--doux);
	cursor:		pointer;
}
/* swatch that opens the colour picker (couleur.js) */
.champ-couleur {
	flex:		0 0 auto;
	display:	grid;
	place-items: center;
	width:		30px;
	height:		30px;
	border:		1px solid var(--trait);
	border-radius: 50%;
	background:	#fff;
}
.champ-couleur::after {
	content:	"";
	width:		22px;
	height:		22px;
	border-radius: 50%;
	background:	var(--c);
	box-shadow:	inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* the picker: saturation × value square over the hue, hue bar, old / new, hex */
.selecteur-couleur {
	position:	fixed;
	z-index:	9;
	width:		236px;
	padding:	10px;
	border-radius: 12px;
	background:	#fbfbfa;
	border:		1px solid var(--trait);
	box-shadow:	var(--ombre);
	user-select: none;
	-webkit-user-select: none;
}
.selecteur-couleur .sv, .selecteur-couleur .teinte {
	position:	relative;
	touch-action: none;
	cursor:		crosshair;
}
.selecteur-couleur .sv {
	height:		150px;
	border-radius: 8px;
	background:
		linear-gradient(to bottom, transparent, #000),
		linear-gradient(to right, #fff, transparent),
		var(--teinte);
}
.selecteur-couleur .teinte {
	height:		16px;
	margin-top:	10px;
	border-radius: 8px;
	background:	linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.selecteur-couleur .point {
	position:	absolute;
	width:		16px;
	height:		16px;
	margin:		-8px 0 0 -8px;
	border:		2px solid #fff;
	border-radius: 50%;
	box-shadow:	0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
.selecteur-couleur .teinte .point { top: 50%; }
.selecteur-couleur .bas {
	display:	flex;
	align-items: center;
	gap:		6px;
	margin-top:	10px;
}
.selecteur-couleur .avant, .selecteur-couleur .apres {
	flex:		0 0 28px;
	height:		28px;
	background:	var(--c);
	box-shadow:	inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.selecteur-couleur .avant { border-radius: 7px 0 0 7px; }
.selecteur-couleur .apres { border-radius: 0 7px 7px 0; margin-left: -6px; }
.selecteur-couleur input {
	flex:		1;
	min-width:	0;
	height:		28px;
	padding:	0 8px;
	font:		12px ui-monospace, Menlo, monospace;
	color:		inherit;
	background:	#fff;
	border:		1px solid var(--trait);
	border-radius: 7px;
}
.selecteur-couleur .ok {
	height:		28px;
	padding:	0 12px;
	border-radius: 7px;
	background:	var(--encre);
	color:		#fff;
	font-weight: 500;
}

/* ---------- row of choices (paper) */
.ligne.choix {
	display:	flex;
	align-items: center;
	gap:		6px;
}
.ligne.choix > span { flex: 1; }
.ligne.choix .seg button {
	display:	grid;
	place-items: center;
}

/* ---------- switch */
.ligne.interrupteur {
	display:	flex;
	align-items: center;
	justify-content: space-between;
}
.switch {
	position:	relative;
	width:		32px;
	height:		19px;
	border-radius: 10px;
	background:	var(--piste);
	transition:	background 0.2s;
}
.switch::after {
	content:	"";
	position:	absolute;
	top:		2px;
	left:		2px;
	width:		15px;
	height:		15px;
	border-radius: 50%;
	background:	#fff;
	box-shadow:	0 1px 2px rgba(0, 0, 0, 0.25);
	transition:	transform 0.2s;
}
.switch.actif { background: var(--accent); }
.switch.actif::after { transform: translateX(13px); }

/* ---------- presets */
.contenu select {
	width:		100%;
	height:		30px;
	padding:	0 8px;
	font:		inherit;
	color:		inherit;
	background:	#fff;
	border:		1px solid var(--trait);
	border-radius: 7px;
}
.contenu select { cursor: pointer; }
.contenu .note { margin-top: -6px; }
.boutons {
	display:	flex;
	gap:		6px;
}
.boutons button {
	flex:		1;
	height:		28px;
	border-radius: 7px;
	background:	rgba(0, 0, 0, 0.06);
	font-weight: 500;
	transition:	background 0.15s;
}
.boutons button:hover:not(:disabled) { background: rgba(0, 0, 0, 0.10); }
.boutons button:disabled { opacity: 0.4; cursor: default; }
.boutons.discrets { margin-top: -6px; }
.boutons.discrets button {
	height:		22px;
	background:	none;
	color:		var(--doux);
	font-size:	12px;
	font-weight: 400;
}
.boutons.discrets button:hover:not(:disabled) { background: var(--survol); color: var(--encre); }

/* ---------- footer: export */
.pied {
	display:	flex;
	flex-direction: column;
	gap:		10px;
	padding:	12px 16px 12px;
	border-top:	1px solid var(--trait);
}
.principal {
	display:	flex;
	align-items: center;
	justify-content: center;
	gap:		8px;
	height:		36px;
	border-radius: 9px;
	background:	var(--encre);
	color:		#fff;
	font-weight: 600;
	transition:	background 0.15s;
}
.principal:hover { background: #000; }
.aide {
	font-size:	11px;
	color:		var(--doux);
	text-align:	center;
}

/* ---------- layers (calques.js): top layer first, the construction at the bottom */
.liste-calques {
	display:	flex;
	flex-direction: column;
	gap:		2px;
	padding:	3px;
	border:		1px solid var(--trait);
	border-radius: 8px;
	background:	#fff;
}
.ligne-calque {
	display:	flex;
	align-items: center;
	gap:		2px;
	min-height:	34px;
	padding:	0 6px 0 2px;
	border-radius: 6px;
}
.ligne-calque.actif { background: rgba(47, 91, 224, 0.10); }
.ligne-calque.construction {
	margin-top:	2px;
	border-top:	1px solid var(--trait);
	border-radius: 0 0 6px 6px;
	color:		var(--doux);
}
.ligne-calque.fond { color: var(--doux); }
.ligne-calque .champ-couleur {
	width:		26px;
	height:		26px;
	margin:		0 1px;
}
.ligne-calque .champ-couleur::after { width: 18px; height: 18px; }
.nom-calque {
	flex:		1;
	min-width:	0;
	padding:	6px 4px;
	text-align:	left;
	overflow:	hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ligne-calque.actif .nom-calque { font-weight: 600; }
.ligne-calque .compte {
	color:		var(--doux);
	font-size:	11px;
	font-variant-numeric: tabular-nums;
}
.ligne-calque .icone.eteint { color: #b4b4b9; }
.ligne-calque .icone.verrou { color: var(--accent); }
.boutons button.petit { flex: 0 0 34px; }

/* ---------- locked controls (construction locked) */
.ligne.inactif { opacity: 0.4; }
input[type=range]:disabled { cursor: default; }
.seg button:disabled, .contenu select:disabled { opacity: 0.4; cursor: default; }

/* ---------- short message (panneau.js, annoncer) */
.annonce {
	position:	fixed;
	bottom:		24px;
	left:		50%;
	z-index:	8;
	padding:	8px 14px;
	border-radius: 18px;
	background:	rgba(29, 29, 31, 0.88);
	color:		#fff;
	font-size:	13px;
	transform:	translate(-50%, 6px);
	opacity:	0;
	pointer-events: none;
	transition:	opacity 0.2s, transform 0.2s;
}
.annonce.visible {
	opacity:	1;
	transform:	translate(-50%, 0);
}
.ligne-calque input.opacite {
	flex:		0 0 64px;
	width:		64px;
	margin-left: 4px;
}

/* ---------- drawing bar (palette.js): under the toolbar, in draw mode only */
.barre-dessin {
	top:		72px;
	left:		16px;
	display:	flex;
	align-items: center;
	gap:		4px;
	padding:	5px;
	border-radius: 12px;
}
.pastille {
	width:		26px;
	height:		26px;
	border-radius: 50%;
	display:	grid;
	place-items: center;
}
.pastille::after {
	content:	"";
	width:		18px;
	height:		18px;
	border-radius: 50%;
	background:	var(--c);
	box-shadow:	inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.pastille.actif { box-shadow: 0 0 0 2px var(--accent); }
.barre-dessin .taille {
	display:	flex;
	align-items: center;
	gap:		6px;
	padding:	0 4px;
}
.barre-dessin .apercu {
	flex:		0 0 auto;
	border-radius: 50%;
	outline:	1px dashed rgba(0, 0, 0, 0.18);
	outline-offset: 2px;
}
.barre-dessin .taille input { width: 110px; }
.barre-dessin output {
	min-width:	44px;
	color:		var(--doux);
	font-variant-numeric: tabular-nums;
}
.icone:disabled { opacity: 0.35; cursor: default; background: none; }
.barre-dessin .apercu.gomme { outline-style: solid; outline-color: #8a8a8f; outline-offset: 0; }

/* ---------- palette of 25 colours (palette.js), under the drawing bar */
.palette-etendue {
	flex-direction: column;		/* a bar lays its content in a row */
	align-items: stretch;
	top:		128px;
	left:		16px;
	padding:	10px;
	border-radius: 12px;
}
.grille-couleurs {
	display:	grid;
	grid-template-columns: repeat(5, 30px);
	gap:		4px;
}
.grille-couleurs .pastille { width: 30px; height: 30px; }
.grille-couleurs .pastille::after { width: 22px; height: 22px; }
.palette-etendue .bas {
	display:	flex;
	align-items: center;
	justify-content: space-between;
	gap:		8px;
	margin-top:	10px;
}
.palette-etendue .bas label {
	display:	flex;
	align-items: center;
	gap:		8px;
	color:		var(--doux);
	cursor:		pointer;
}
.palette-etendue .bas > button {
	height:		28px;
	padding:	0 14px;
	border-radius: 7px;
	background:	var(--encre);
	color:		#fff;
	font-weight: 500;
}

/* icon in front of the title of a section (panneau.js, ICONES_SECTIONS) */
summary .titre {
	display:	flex;
	align-items: center;
	gap:		9px;
}
summary .titre svg {
	flex:		0 0 auto;
	width:		17px;
	height:		17px;
	color:		var(--doux);
}
summary:hover .titre svg { color: var(--encre); }

/* ---------- question dialog (panneau.js, demander): in place of the boxes of the system */
.dialogue {
	margin:		auto;
	width:		min(380px, calc(100vw - 32px));
	padding:	22px 22px 18px;
	border:		1px solid var(--trait);
	border-radius: 16px;
	background:	#fbfbfa;
	color:		var(--encre);
	box-shadow:	0 20px 60px rgba(0, 0, 0, 0.22);
	font:		inherit;
}
.dialogue::backdrop {
	background:	rgba(29, 29, 31, 0.28);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.dialogue[open] { animation: apparition 0.16s ease-out; }
@keyframes apparition {
	from { opacity: 0; transform: translateY(6px) scale(0.98); }
}
.dialogue h2 {
	font-size:	16px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.dialogue p {
	margin-top:	8px;
	color:		var(--doux);
	line-height: 1.45;
}
.dialogue .champ {
	width:		100%;
	height:		34px;
	margin-top:	14px;
	padding:	0 10px;
	font:		inherit;
	color:		inherit;
	background:	#fff;
	border:		1px solid var(--trait);
	border-radius: 8px;
}
.dialogue .actions {
	display:	flex;
	justify-content: flex-end;
	gap:		8px;
	margin-top:	20px;
}
.dialogue .actions button {
	min-width:	84px;
	height:		34px;
	padding:	0 16px;
	border-radius: 9px;
	background:	rgba(0, 0, 0, 0.06);
	font-weight: 500;
}
.dialogue .actions button:hover { background: rgba(0, 0, 0, 0.10); }
.dialogue .actions button.principal { background: var(--encre); color: #fff; }
.dialogue .actions button.principal.danger { background: #c62828; }