/* Fiches aide-mémoire des patterns : une page de carnet, le schéma annoté au stylo bleu,
   la question au stylo rouge. Mêmes polices et même papier que le site. */

@font-face {
	font-family: "Inclusive Sans";
	src: url("fonts/InclusiveSans-VariableFont_wght.woff2") format("woff2");
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
}
@font-face {
	font-family: "Inclusive Sans";
	src: url("fonts/InclusiveSans-Italic-VariableFont_wght.woff2") format("woff2");
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
}
@font-face {
	font-family: "Roboto Mono";
	src: url("fonts/RobotoMono-VariableFont_wght.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
}
@font-face {
	font-family: "Kalam";
	src: url("fonts/Kalam-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Kalam";
	src: url("fonts/Kalam-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	--paper: #fdfbf7;
	--ink: #1e2530;
	--muted: #56637a;
	--rule: #e7e2d8;
	--box: #fffefc;
	--code-bg: #efebe3;
	--pen: #1f4fd1;
	--red: #c4302b;
	--font-body: "Inclusive Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-hand: "Kalam", "Comic Sans MS", "Chalkboard SE", cursive;
	--font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
	color-scheme: light;
}
/* À l'impression, toujours les couleurs claires, comme le site */
@media screen {
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) {
			--paper: #14171f;
			--ink: #e6e8ee;
			--muted: #a3abbd;
			--rule: #262c3a;
			--box: #1b1f2a;
			--code-bg: #262c3a;
			--pen: #8fb0ff;
			--red: #ff8f85;
			color-scheme: dark;
		}
	}
	:root[data-theme="dark"] {
		--paper: #14171f;
		--ink: #e6e8ee;
		--muted: #a3abbd;
		--rule: #262c3a;
		--box: #1b1f2a;
		--code-bg: #262c3a;
		--pen: #8fb0ff;
		--red: #ff8f85;
		color-scheme: dark;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 16px/1.5 var(--font-body);
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	padding-block: 28px 40px;
}
main {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	gap: 32px;
}
h1, h2, p, dl, dd, ul, figure, table { margin: 0; }
h1 { font: 700 40px/1.1 var(--font-body); text-wrap: balance; }
h2 { font: 700 18px/1.3 var(--font-body); text-wrap: balance; }
a { color: var(--pen); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
code {
	font: 400 0.86em var(--font-mono);
	font-variant-ligatures: none;
	background: var(--code-bg);
	padding: 1px 4px;
	border-radius: 2px;
	overflow-wrap: anywhere;
}

header { display: grid; gap: 10px; max-width: 68ch; }
.kicker { color: var(--muted); font-size: 15px; }
.lede { font-size: 19px; line-height: 1.45; }
.origine { color: var(--muted); font-size: 15px; }
.origine cite { font-style: normal; }

.haut { display: grid; gap: 28px; }
@media (min-width: 820px) {
	.haut { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
.sketch {
	padding: 12px;
	border: 1px solid var(--rule);
	background-color: var(--paper);
	background-image:
		linear-gradient(var(--rule) 1px, transparent 1px),
		linear-gradient(90deg, var(--rule) 1px, transparent 1px);
	background-size: 14px 14px;
	display: grid;
	gap: 12px;
}
.sketch svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }

.roles { display: grid; gap: 14px; min-width: 0; }
.roles dl { display: grid; gap: 12px; }
.roles dt { font-weight: 700; }

.fiches { display: grid; gap: 28px 44px; }
@media (min-width: 720px) {
	.fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fiches section { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fiches ul { padding-left: 1.1em; display: grid; gap: 6px; }

.comparaison { display: grid; gap: 10px; }
.tableau { overflow-x: auto; }
.tableau table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); }
.tableau th { font-weight: 700; }

.avous { display: grid; gap: 6px; color: var(--red); max-width: 68ch; }
.avous h2 { font: 700 24px/1.2 var(--font-hand); }
.avous p { font: 400 20px/1.45 var(--font-hand); }
.avous code { color: var(--ink); }
.avous details { color: var(--ink); font-size: 16px; }
.avous summary { cursor: pointer; color: var(--red); font: 400 17px var(--font-hand); }
.avous details p { font: 400 16px/1.5 var(--font-body); margin-top: 6px; }

footer { color: var(--muted); font-size: 15px; border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 4px; }

/* Schéma */
.sk-box { fill: var(--box); stroke: var(--ink); stroke-width: 1.4; }
.sk-ghost { fill: none; stroke: var(--pen); stroke-width: 1.4; stroke-dasharray: 5 4; }
.sk-ext { fill: var(--box); stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 2 3; }
.sk-line { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.sk-dash { stroke-dasharray: 5 4; }
.sk-tri { fill: var(--box); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.sk-pen { fill: none; stroke: var(--pen); stroke-width: 1.6; stroke-linecap: round; }
.tete-stylo { fill: none; stroke: var(--pen); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tete-trait { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.t-name { font: 700 15px var(--font-body); fill: var(--ink); }
.t-ghost { font: 700 14px var(--font-body); fill: var(--pen); }
.t-stereo { font: 400 11.5px var(--font-body); fill: var(--muted); }
.t-code, .t-code-muted { font: 400 10.5px var(--font-mono); font-variant-ligatures: none; fill: var(--ink); }
.t-code-muted { fill: var(--muted); }
.t-hand { font: 400 15px var(--font-hand); fill: var(--pen); }
.t-hand .b { font-weight: 700; }
.t-red { font: 700 15px var(--font-hand); fill: var(--red); }