@charset "UTF-8";
@layer fonts, base, layout, content, demos, utilities, preferences;
@layer fonts {
	@font-face {
		font-display: swap;
		font-family: 'Luckiest Guy';
		font-style: normal;
		font-weight: 400;
		src: url('../devfest.2024/jeu/assets/fonts/LuckiestGuy-Regular.woff2') format('woff2');
	}

	@font-face {
		font-display: swap;
		font-family: 'Zilla Slab';
		font-style: normal;
		font-weight: 400;
		src: url('../devfest.2024/jeu/assets/fonts/ZillaSlab-Regular.woff2') format('woff2');
	}

	@font-face {
		font-display: swap;
		font-family: 'Zilla Slab';
		font-style: italic;
		font-weight: 400;
		src: url('../devfest.2024/jeu/assets/fonts/ZillaSlab-Italic.woff2') format('woff2');
	}

	@font-face {
		font-display: swap;
		font-family: 'Zilla Slab';
		font-style: normal;
		font-weight: 700;
		src: url('../devfest.2024/jeu/assets/fonts/ZillaSlab-Bold.woff2') format('woff2');
	}

	@font-face {
		font-display: swap;
		font-family: 'Zilla Slab';
		font-style: italic;
		font-weight: 700;
		src: url('../devfest.2024/jeu/assets/fonts/ZillaSlab-BoldItalic.woff2') format('woff2');
	}

	@font-face {
		font-display: swap;
		font-family: 'Twemoji Mozilla';
		font-style: normal;
		font-weight: 400;
		src: local('Twemoji Mozilla'), url('../devfest.2024/jeu/assets/fonts/Twemoji.woff2') format('woff2');
	}

@font-palette-values --syntaxHighlighter {
	font-family: 'FontWithASyntaxHighlighter';
	override-colors: 0 var(--foreground),
	4 rebeccapurple,
	5 var(--accent),
	7 var(--muted);
}

	@font-face {
		font-display: swap;
		font-family: 'FontWithASyntaxHighlighter';
		src: url('../devfest.2024/jeu/assets/fonts/FontWithASyntaxHighlighter-Regular.woff2') format('woff2');
	}
}
@layer base {
	html {
		--background: #231745;
		--foreground: #ffd529;
		--accent: lime;
		--muted: #fcd3c9;
		--enter: cubic-bezier(0, .5, .5, 1);

		accent-color: var(--accent);
		box-sizing: border-box;
		caret-color: var(--accent);
		color-scheme: dark;
		font-synthesis: none;
		overflow-y: scroll;
		position: relative;
		scrollbar-color: var(--accent) var(--background);
		text-size-adjust: none;
	}

	html:where([lang]):focus-within {
		scroll-behavior: smooth;
	}

	*,
	*::after,
	*::before {
		box-sizing: inherit;
	}

	a,
	input,
	button,
	select,
	summary,
	textarea,
	[tabindex="0"] {
		outline-offset: 1rem;
		transition: outline-offset .3s var(--enter);
	}

	:focus {
		box-shadow: 0 0 0 .125rem var(--background);
		outline: .125rem solid;
		outline-offset: .125rem;
		isolation: isolate;
	}

	:focus:not(:focus-visible) {
		box-shadow: none;
		outline-color: transparent;
		isolation: auto;
	}

	:focus-visible {
		box-shadow: 0 0 0 .125rem var(--background);
		outline: .125rem solid;
		outline-offset: .125rem;
		isolation: isolate;
	}

	::selection {
		background-color: var(--accent);
		color: var(--background);
		text-shadow: none;
		/* For [contenteditable] */
		-webkit-text-fill-color: var(--background);
	}

	::placeholder {
		color: var(--muted);
	}

	::marker {
		color: var(--accent);
	}

	body {
		background: var(--background);
		color: #fff;
		font: normal 400 1.25rem/1.5 sans-serif;
		font-family: 'Zilla Slab', system-ui, sans-serif;
		margin: 0;
		min-block-size: 100vh;
		overflow-x: hidden;
		position: relative;
		text-rendering: optimizeSpeed;
		-webkit-font-smoothing: subpixel-antialiased;
	}

	img {
		display: block;
		block-size: auto;
		max-inline-size: 100%;
	}

	code,
	pre,
	video,
	svg {
		max-inline-size: 100%;
	}

	svg {
		fill: currentColor;
	}

	main,
	body:hover [tabindex="-1"]:focus {
		outline-color: transparent;
		isolation: auto;
	}

	a:not([class]) {
		color: var(--accent);
		text-decoration-skip-ink: auto;
	}

	a[class],
	button {
		background-color: color-mix(in srgb, var(--background) 80%, #000);
		border: .25rem solid;
		border-radius: .25rem;
		color: var(--accent);
		display: inline-flex;
		font: inherit;
		font-weight: bold;
		padding: .25rem 1rem;
		text-decoration: none;
		touch-action: manipulation;
	}

	a:hover,
	a:focus,
	button:hover,
	button:focus {
		color: var(--foreground);
		cursor: pointer;
	}

	a svg,
	button svg {
		pointer-events: none;
	}

	[hidden],
	[role=alert]:empty {
		display: none;
	}

	h1, h2, h3, h4, h5, h6 {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: 3rem 0 1.5rem;
		text-rendering: optimizelegibility;
		text-wrap: balance;
	}

	:is(h1, h2, h3, h4, h5, h6):first-child {
		margin-block-start: 0;
	}

	div,
	textarea {
		hyphens: auto;
		word-wrap: break-word;
	}

	p, li, dd {
		hyphenate-limit-chars: 6 3 2;
		hyphenate-limit-lines: 2;
		hyphenate-limit-last: always;
		hyphenate-limit-zone: 8%;
		hyphens: auto;
		text-wrap: pretty;
		word-wrap: break-word;
	}

	ul[role=list],
	ol[role=list] {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	ol li::marker {
		color: var(--accent);
		font-family: 'Luckiest Guy', system-ui, sans-serif;
	}

	abbr {
		border-block-end: 1px dotted;
		cursor: help;
		font: normal 400 1em/1.5 'Zilla Slab';
		text-decoration: none;
		text-transform: uppercase;
	}

	b,
	dt,
	strong {
		font-weight: bold;
	}

	dd::before {
		content: "→ ";
	}

	hr {
		border: 0;
		border-block-start: 1px solid;
		margin: 3rem 0;
		opacity: 0.25;
	}

	q,
	blockquote {
		font-style: italic;
	}

	q:lang(fr),
	blockquote:lang(fr) {
		quotes: "« " " »" "“" "”" "‘" "’";
	}

	q:lang(en),
	blockquote:lang(en) {
		quotes: "“" "”" "‘" "’";
	}

	blockquote::before {
		content: open-quote;
	}

	blockquote::after {
		content: close-quote;
	}

	summary {
		cursor: pointer;
	}

	pre, code, var, samp,
	input, textarea {
		font-family: 'FontWithASyntaxHighlighter', monospace;
		font-palette: --syntaxHighlighter;
		font-size: 1.15rem;
	}

	:not(pre) > :is(code, kbd, var) {
		border-radius: .125rem;
		box-sizing: border-box;
		color: var(--accent);
		font-size: smaller;
		font-style: normal;
		font-weight: normal;
		margin-block-start: 0;
		margin-inline: .25ch;
		outline: 1px solid;
		outline-offset: 1px;
		padding: 0 0.25ch;
		white-space: nowrap;
	}

	kbd {
		box-shadow: 0 3px 0 currentColor;
	}

	var {
		border-style: dashed;
	}

	pre,
	style {
		hyphens: none;
		inline-size: min-content;
		line-height: 1.25;
		margin: 0;
		overflow-x: auto;
		padding: 0;
		tab-size: 4;
		text-align: start;
		white-space: pre;
		word-break: normal;
		word-spacing: normal;
		word-wrap: normal;
	}

	pre[class],
	code[class] {
		background-color: transparent;
		color: inherit;
		max-block-size: 100%;
	}

	/* @see https://css-tricks.com/css-scroll-snap-slide-deck/ */
	style {
		block-size: 100%;
	}

	form {
		inline-size: min-content;
	}

	form[method="dialog"] {
		inline-size: 100%;
		text-align: center;
	}

	input,
	button,
	textarea,
	select {
		border-style: solid;
		font: inherit;
		max-inline-size: 100%;
	}

	fieldset {
		border: 0;
		min-inline-size: 0;
	}

	input,
	textarea {
		background-color: color-mix(in srgb, var(--background) 75%, #000);
		border: 1px solid var(--accent);
		border-radius: .25rem;
		font-size: 1.15rem;
		margin-block: .5rem;
		margin-inline-start: calc(4ch * var(--tabs, 1));
		padding: 0 .5rem;
	}

	textarea,
	input:not([maxlength]) {
		inline-size: calc(100% - (4.25ch * var(--tabs, 1)));
	}

	input[type="radio"] {
		background-color: initial;
		border: 0;
		inline-size: auto;
	}

	input:focus-visible,
	textarea:focus-visible {
		outline-color: var(--accent);
	}

	dialog {
		background: var(--background);
		border-color: #000;
		border-radius: .5rem;
		box-shadow: 0 0 10rem #000;
		max-inline-size: clamp(50vw, 100%, 67.5rem);
	}

	dialog::backdrop {
		backdrop-filter: grayscale(50%) blur(.25rem);
	}

	@media screen and (min-width: 60rem) {
		body {
			font-size: 1.5rem;
			overflow: hidden;
		}

		pre,
		style {
			font-size: 1.5rem;
			padding: 1rem;
		}

		code, var, samp,
		input, textarea {
			font-size: 1.25rem;
		}

		form p {
			text-align: end;
		}

		form[method="dialog"] {
			display: flex;
			gap: 2rem;
			justify-content: end;
		}
	}
}
@layer layout {
	header,
	footer {
		padding: 1rem;
	}

	header,
	section footer {
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	footer ul {
		align-items: center;
		display: flex;
		filter: invert(1);
		list-style: none;
		padding: 0;
	}

	footer li {
		margin-inline-end: 0.5rem;
	}

	footer li:last-child img {
		filter: brightness(0) invert(13%) sepia(18%) saturate(3274%) hue-rotate(153deg) brightness(95%) contrast(98%);
	}

	footer li a  {
		background-color: transparent;
		border-color: transparent;
	}

	footer p {
		margin: 0 2rem 0 0;
	}

	main {
		counter-reset: slides;
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		min-block-size: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		scroll-snap-type: y proximity;
	}

	section {
		content-visibility: auto;
		contain-intrinsic-size: 1px 5000px;
		counter-increment: slides;
		block-size: max-content;
		padding: 3rem 1rem;
		position: relative;
		scroll-snap-align: start;
		inline-size: 100vw;
	}

	.timer {
		display: none;
	}

	@keyframes timer {
		from {
			transform: translateY(0%);
		}
		to {
			transform: translateY(calc(-10% * var(--base, 10)));
		}
	}
	@keyframes fill {
		from {
			background-position: 0 0;
			background-size: 100% 100%;
			inline-size: calc(100% / var(--seconds));
		}
	}
	@media (max-width: 60rem) {
		:target {
			scroll-margin-top: 6rem;
		}

		section {
			border-block-end: 2px solid #fafafa;
		}

		section ~ section {
			padding-block-start: 2rem;
		}

		[role=contentinfo] {
			border-block-start: 1px solid rgba(0, 0, 0, 0.1);
		}
	}
	@media screen and (min-width: 60rem) {
		main {
			grid-auto-flow: column;
			height: 100%;
			overflow-x: auto;
			overflow-y: hidden;
			scroll-snap-type: x mandatory;
		}

		section {
			block-size: 100%;
			max-block-size: 100vh;
			padding: 2rem;
			scroll-snap-align: center;
			scroll-snap-stop: always;
		}

		.speaker {
			background: #767676;
			display: grid;
			gap: 2rem;
			grid-template-areas: "view next" "view notes" "view timer";
			grid-template-columns: 75vw 1fr;
			grid-template-rows: min-content 1fr min-content;
			padding: 2rem;
		}

		.speaker::before {
			aspect-ratio: 16/9;
			border-radius: 0.5rem;
			box-shadow: 0 0 1rem 0 #000;
			content: "";
			background: var(--background) var(--next) 0 0/cover;
			display: block;
			grid-area: next;
		}

		.speaker::after {
			color: #fff;
			content: "Notes : \a" attr(data-note);
			display: inline-block;
			font-size: 1.5rem;
			grid-area: notes;
			hyphens: auto;
			inline-size: calc(25vw - 6rem);
			white-space: pre-wrap;
		}

		.speaker main {
			background: var(--background);
			border-radius: 1rem;
			box-shadow: 0 0 1rem 0 #000;
			block-size: calc(100vh - 4rem);
			grid-area: view;
			inline-size: 75vw;
			min-block-size: calc(100vh - 4rem);
			overflow: auto;
		}

		.speaker section {
			block-size: calc(100vh - 4rem);
			inline-size: 75vw;
			overflow: hidden;
		}

		.speaker .timer {
			--seconds: calc(var(--duration) * 60);
			background-color: var(--background);
			border-radius: 0.5rem;
			box-shadow: 0 0 1rem 0 #000;
			display: grid;
			font-size: 1.5rem;
			font-variant-numeric: tabular-nums;
			grid-area: timer;
			grid-template-rows: 2fr 1fr;
			padding: 1rem;
		}

		.speaker .timer::after {
			animation: calc(var(--seconds) * 1s) fill linear;
			background-image: linear-gradient(to right, green, orange, red);
			background-position: 100% 0;
			background-size: calc(var(--seconds) * 100%) 100%;
			border-radius: 0.25rem;
			content: "";
			grid-row: 2;
			inline-size: 100%;
		}

		.speaker .clock {
			display: flex;
			grid-row: 1;
		}

		.speaker .clock span {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			height: 2rem;
			overflow: hidden;
			width: 2ch;
		}

		.speaker .clock span::before, .speaker .clock span::after {
			--base: 10;
			animation-name: timer;
			animation-duration: calc(var(--time) * var(--base));
			animation-timing-function: steps(var(--base), jump-end);
			animation-iteration-count: infinite;
			content: "0 1 2 3 4 5 6 7 8 9";
		}

		.speaker .clock span:first-of-type::before {
			animation-duration: calc(var(--time) * 24 * 10);
		}

		.speaker .clock span ~ span::before {
			--base: 6;
			animation-duration: calc(var(--time) * var(--base) * 10);
			content: "0 1 2 3 4 5";
		}
	}
}
@layer content {
	/**
	 @link https://codepen.io/enbee81/pen/WNdKLBY
	 @link https://codepen.io/gayane-gasparyan/pen/vYmYMeV
	 @link https://codepen.io/argyleink/pen/MWoeoKV
	 */
	h1, h2, .h2 {
		color: var(--accent);
		font-family: 'Luckiest Guy', system-ui, sans-serif;
		font-size: 3rem;
		line-height: 1;
		padding: 1rem 1rem 1rem 0;
		transform:
			perspective(12rem)
			rotateY(12deg)
			rotateX(6deg);
		transform-origin: 0;
	}

	:is(h1, h2, .h2)::first-line {
		color: var(--foreground);
		font-family: 'Zilla Slab', system-ui, sans-serif;
		font-size: 1.5rem;
		line-height: 1.875;
	}

	:is(h1, h2, .h2) abbr {
		font: inherit;
	}

	.splash h1 {
		font-size: 6rem;
		line-height: .8;
		margin: 0;
		padding: 1rem;
		transform:
			perspective(12rem)
			rotateY(12deg)
			rotateX(6deg)
			translateX(10vw)
			scale(1.25);
	}

	.splash h1::first-line {
		font-size: 2.5rem;
	}

	.splash h1 span {
		color: #fff;
		font-size: 32rem;
		line-height: .01;
	}

	@media screen and (min-width: 60rem) {
		h1, h2, .h2 {
			font-size: 4rem;
		}

		h1::first-line,
		h2::first-line,
		.h2::first-line  {
			font-size: 1.75rem;
			line-height: 2;
		}

		.splash h1 {
			font-size: 10rem;
			transform:
				perspective(48rem)
				rotateY(48deg)
				rotateX(24deg)
				translate3d(25%, 10%, 0);
			transform-origin: 50%;
		}

		.splash h1::first-line {
			font-size: 5rem;
		}
	}

	footer p {
		color: var(--muted);
		line-height: 2;
	}

	dialog h2 {
		color: var(--accent);
		font-family: 'Luckiest Guy', system-ui, sans-serif;
		padding-block: 0;
		transform: unset;
	}

	h2 [aria-hidden],
	.h2 [aria-hidden] {
		display: inline-block;
		vertical-align: middle;
	}

	h2 + dl, .h2 + dl {
		align-items: center;
		color: #767676;
		display: flex;
		margin: 0.5rem 0;
	}

	h2 + dl dd, .h2 + dl dd {
		margin: 0 2rem 0 0.5rem;
	}

	h3, .h3,
	summary {
		font: 700 2rem/1.1 'Zilla Slab';
	}

	h4 {
		font: 700 1.75rem/1.1 'Zilla Slab';
	}

	h5, h6 {
		font: 700 1.5rem/1.1 'Zilla Slab';
	}

	small,
	.small {
		font: 400 1.125rem/1 'Zilla Slab';
	}

	.muted {
		color: var(--muted);
	}

	.muted abbr,
	.muted strong {
		color: #fff;
	}

	header a {
		font-family: 'Zilla Slab', sans-serif;
	}

	section [hreflang=en]::after {
		content: " (en anglais)";
	}

	section :is(p, ul, ol, dl) {
		font-size: 1.25rem;
		font-weight: 400;
	}

	section > :first-child,
	section :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
		margin-block-start: 0;
	}

	section > :last-child:not([class]),
	section > :nth-last-child(2):has(+ aside) {
		margin-block-end: 0;
	}

	section::before {
		--integer: calc(var(--slides));
		background-color: var(--background);
		border-radius: .5rem 0 0 0;
		counter-reset: total var(--integer);
		inset-block-end: 0;
		content: counter(slides) " / " counter(total);
		font: 700 1rem/2 'Zilla Slab';
		padding: 0.5rem;
		position: absolute;
		inset-inline-end: 0;
		text-align: center;
		inline-size: 5rem;
		z-index: 2;
	}

	.centered {
		display: grid;
		place-content: center;
	}

	.style {
		align-items: center;
		background-color: #032c36;
		border-radius: 0 0 0 0.5rem;
		display: grid;
		font-size: 1rem;
		overflow-y: hidden;
		resize: horizontal;
	}

	.demo > :first-child + * {
		border: 0;
		margin: 0;
		padding: 0;
	}

	.demo > :first-child > .h2,
	.demo > :first-child > .lead {
		margin: 0;
	}

	.playground {
		overflow: hidden;
		position: relative;
	}

	.lead {
		font-size: 1.5rem;
		font-weight: 700;
	}

	.emoji {
		display: inline-block;
		font-family: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "fantasy";
		block-size: 1em;
		line-height: 1;
		margin-inline-start: 0.25ch;
		inline-size: 1em;
	}

	@media screen and (min-width: 60rem) {
		.demo {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto 1fr;
			padding: 0;
		}

		.demo > :first-child {
			border-block-end: 1px solid rgba(0, 0, 0, 0.1);
			grid-column: span 2;
			margin: 1rem 1rem 0;
			padding-block-end: 1rem;
		}

		.style {
			font-size: 1.35rem;
		}

		section :is(p, ul, ol, dl, blockquote, .lead) {
			font-size: 1.5rem;
		}

		section :is(small, .small) {
			font-size: 1.25rem;
		}
	}
}
@layer demos {
	pre code {
		color: #fafafa;
		font-family: 'FontWithASyntaxHighlighter', monospace;
		font-palette: --syntaxHighlighter;
		outline: 0;
	}

	p code {
		font-family: 'FontWithASyntaxHighlighter', monospace;
		font-palette: --syntaxHighlighter;
	}

	.portrait {
		font-size: 80vw;
		text-align: center;
	}

	.carte {
		background-color: color-mix(in srgb, var(--background) 90%, #fff);
		border-radius: .5rem;
		margin-block-end: 2rem;
		padding: 1rem;
	}

	@media (width > 60rem) {
		.portrait {
			font-family: 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
			font-size: min(40vw, 80vh);
			inline-size: 40vw;
			inset-block-start: 10vh;
			inset-inline-end: 10vh;
			line-height: 80vh;
			overflow: hidden;
			position: absolute;
			text-align: start;
		}
	}
}
@layer utilities {
	.d-flex {
		display: flex;
	}

	.d-block {
		display: block;
	}

	.d-grid,
	[class*=grid] {
		display: grid;
	}

	.float-right {
		float: right;
	}

	.p-1 {
		padding: 1rem;
	}

	.pl-5 {
		padding-inline-start: 5rem;
	}

	.m-0 {
		margin: 0;
	}

	.m-auto {
		margin: auto;
	}

	.mt-1 {
		margin-block-start: 1rem;
	}

	.mt-n4 {
		margin-block-start: -4.5rem;
	}

	.mt-0 {
		margin-top: 0;
	}

	.mb-0 {
		margin-block-end: 0;
	}

	.w-100 {
		inline-size: 100%;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-center {
		justify-content: center;
	}

	.align-center {
		align-items: center;
	}

	.flex-column {
		flex-direction: column;
	}

	.rotate-left {
		transform: rotate(-.005turn);
	}

	.rotate-right {
		transform: rotate(.005turn);
	}

	.sr-only,
	.visually-hidden {
		border: 0;
		clip-path: inset(50%);
		block-size: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		inline-size: 1px;
		white-space: nowrap;
	}

	@media screen and (min-width: 60rem) {
		.grid-2 {
			grid-template-columns: repeat(2, 50%);
		}

		.grid-1-2 {
			grid-template-columns: 1fr 2fr;
		}

		.grid-2-1 {
			grid-template-columns: 2fr 1fr;
		}
	}
}
@layer preferences {
	@media screen and (prefers-reduced-motion: reduce) {
		* {
			animation-duration: 0.01ms;
			animation-iteration-count: 1;
			transition-duration: 0.01ms;
			scroll-behavior: auto;
		}
	}
}