:root {
	--course-tint: #c47a1a;
	--course-link: #c46a00;
	--course-selection: rgba(196, 106, 0, 0.28);
	--course-code-bg: rgba(196, 106, 0, 0.14);
	--code-surface: #f7f1e8;
}

html.theme-html {
	--course-tint: #c47a1a;
	--course-link: #c46a00;
	--course-selection: rgba(196, 106, 0, 0.28);
	--course-code-bg: rgba(196, 106, 0, 0.14);
}

html.theme-css {
	--course-tint: #2f5bff;
	--course-link: #2a4fe0;
	--course-selection: rgba(42, 79, 224, 0.22);
	--course-code-bg: rgba(42, 79, 224, 0.12);
}

html.theme-js {
	--course-tint: #c6a400;
	--course-link: #8a6a00;
	--course-selection: rgba(198, 164, 0, 0.28);
	--course-code-bg: rgba(198, 164, 0, 0.16);
}

html.theme-php {
	--course-tint: #274568;
	--course-link: #1d6cb5;
	--course-selection: rgba(29, 108, 181, 0.22);
	--course-code-bg: rgba(29, 108, 181, 0.12);
}

html.theme-git {
	--course-tint: #d1432c;
	--course-link: #d1432c;
	--course-selection: rgba(209, 67, 44, 0.2);
	--course-code-bg: rgba(209, 67, 44, 0.1);
}

html[data-theme="dark"] {
	--code-surface: #1c1c1c;
}

html[data-theme="dark"].theme-html { --course-link: #f0a04a; }
html[data-theme="dark"].theme-css { --course-link: #8aa2ff; }
html[data-theme="dark"].theme-js { --course-link: #f0d34a; }
html[data-theme="dark"].theme-php { --course-link: #8eb6de; }
html[data-theme="dark"].theme-git { --course-link: #ff8b78; }

::selection {
	background: var(--course-selection);
}

body.flex {
	padding-top: 64px;
	background: var(--bg);
	color: var(--ink);
}

.home,
.retour {
	display: none;
}

.course-bar {
	position: fixed;
	inset: 0 0 auto 0;
	height: 64px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 1rem 0 1.25rem;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--line);
}

.course-bar__home {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: -0.03em;
	border: 0;
}

.course-bar__title {
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.course-bar__actions {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.toc-button {
	border: 1px solid var(--line);
	background: var(--surface);
	border-radius: 999px;
	padding: 0.45rem 0.8rem;
	cursor: pointer;
}

aside {
	height: clamp(180px, 34vh, 320px);
	background: var(--course-tint);
	box-shadow: inset 0 -4px 0 var(--course-link);
}

aside > div {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: relative;
}

html.theme-html aside > div {
	background-image: url("../assets/medias/images/jpgs/html-default.jpg");
}

html.theme-css aside > div {
	background-image: url("../assets/medias/images/jpgs/css-default.jpg");
}

html.theme-js aside > div {
	background-image: url("../assets/medias/images/jpgs/js-default.jpg");
}

html.theme-php aside > div {
	background-image: url("../assets/medias/images/jpgs/php-default.jpg");
}

html.theme-git aside > div {
	background-image: url("../assets/medias/images/jpgs/git-default.jpg");
}

aside > div::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: linear-gradient(to top, var(--bg), transparent);
	pointer-events: none;
}

main.main {
	height: auto;
	overflow: visible;
}

main > section {
	width: min(740px, calc(100% - 2rem));
	margin-inline: auto;
	padding: 2.2rem 0 4.5rem;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
	scroll-margin-top: 88px;
}

h1 {
	margin: 0 0 0.4rem;
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -0.04em;
	font-weight: 700;
}

h2 {
	margin: 2.6rem 0 0.8rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--course-link);
}

h3,
h4,
h5,
h6 {
	margin: 1.8rem 0 0.6rem;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.3;
	color: var(--ink);
	text-transform: none;
}

h4 { font-size: 1.05rem; }
h5, h6 { font-size: 1rem; color: var(--muted); }

h1 { counter-reset: h2 h3 h4 h5; }
h2 { counter-reset: h3 h4 h5; }
h3 { counter-reset: h4 h5; }
h4 { counter-reset: h5; }

h3::before,
h4::before,
h5::before,
h6::before {
	color: var(--course-link);
}

h3::before {
	counter-increment: h3;
	content: counter(h3) ". ";
}

h4::before {
	counter-increment: h4;
	content: counter(h3) "." counter(h4) ". ";
}

h5::before {
	counter-increment: h5;
	content: counter(h3) "." counter(h4) "." counter(h5) ". ";
}

h6::before {
	counter-increment: h6;
	content: counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

main p {
	margin: 0.75rem 0;
}

main ul,
main ol {
	margin: 0.75rem 0;
	padding-inline-start: 1.3rem;
}

main li + li {
	margin-top: 0.25rem;
}

a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--course-link);
	transition: color 0.15s ease;
}

a:hover,
a:focus-visible {
	color: var(--course-link);
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.4rem 0;
}

:not(pre) > code {
	font-family: "Pitch Sans", ui-monospace, Consolas, monospace;
	font-size: 0.86em;
	background: var(--course-code-bg);
	color: var(--course-link);
	padding: 0.12em 0.38em;
	border-radius: 0.35rem;
}

pre {
	margin: 1.2rem 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--code-surface);
	overflow: auto;
}

pre code,
code.hljs {
	font-family: "Pitch Sans", ui-monospace, Consolas, monospace;
	font-size: 0.84rem;
	line-height: 1.55;
	background: transparent;
	color: var(--ink);
	margin: 0;
	padding: 1rem 1.1rem;
}

.hljs-ln {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}

.hljs-ln td {
	border: 0 !important;
	background: transparent;
	vertical-align: top;
	padding: 0;
}

.hljs-ln-n {
	color: var(--muted);
	user-select: none;
}

.hljs-comment { color: #697070; }
.hljs-string,
.hljs-number,
.hljs-literal { color: #8a4b12; }
.hljs-keyword,
.hljs-title,
.hljs-section,
.hljs-name { font-weight: 700; }
.hljs-meta { color: #1f7199; }

html[data-theme="dark"] .hljs-comment { color: #9aa; }
html[data-theme="dark"] .hljs-string,
html[data-theme="dark"] .hljs-number,
html[data-theme="dark"] .hljs-literal { color: #f0b429; }
html[data-theme="dark"] .hljs-meta { color: #8ec8e8; }
html[data-theme="dark"] .hljs,
html[data-theme="dark"] .hljs-punctuation,
html[data-theme="dark"] .hljs-tag,
html[data-theme="dark"] .hljs-tag .hljs-name,
html[data-theme="dark"] .hljs-tag .hljs-attr {
	color: var(--ink);
	background: transparent;
}

main img,
main video {
	display: block;
	width: 100%;
	height: auto;
	margin: 1rem 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
}

table:not(.hljs-ln) {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2rem 0;
	font-size: 0.95rem;
}

table:not(.hljs-ln) th,
table:not(.hljs-ln) td {
	border: 1px solid var(--line);
	padding: 0.45rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

table:not(.hljs-ln) th {
	background: color-mix(in srgb, var(--course-link) 12%, var(--surface));
}

.specialTableContainer {
	overflow-x: auto;
}

.example {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fffdfb;
	color: #1c1915;
}

html[data-theme="dark"] .example,
html[data-theme="dark"] .example a {
	color: #1c1915;
	border-bottom-color: var(--course-link);
}

.example-main,
.example-header,
.example-footer,
.example-nav,
.example-article,
.example-section {
	background-color: var(--course-code-bg);
}

.example-h1 {
	display: block;
	font-size: 2rem;
	margin: 0.67em 0;
	font-weight: bold;
}

.type {
	margin-top: 2rem;
	list-style-type: none;
	padding: 0;
	color: #777;
	font-size: 0.9rem;
}

.example .p { color: blue; }
.example .exemple { font-size: 12px; }
.example #carre {
	background-color: #333;
	width: 35px;
	height: 35px;
}
.example a[target="_blank"] { color: red; }
.example .paragraph { color: green; }
.example .container > .directp { font-weight: bold; }
.example .container .immediate + p { margin-top: 10px; }
.example .container .general ~ p { color: #777; }
.example .firstline::first-line { font-weight: bold; }
.example .link:hover { color: orange; }
.example .container-b { width: 100%; margin: 0 auto; }
.example .container-b .block-item {
	width: 100%;
	margin-bottom: 20px;
	background-color: #f0f0f0;
}
.example .inline-container .inline-item {
	display: inline;
	margin-right: 10px;
	background-color: #e0e0e0;
}
.example .inline-container .inline-block-item {
	display: inline-block;
	width: 30%;
	margin-right: 10px;
	background-color: #e0e0e0;
}
.example .flex-container {
	display: flex;
	justify-content: space-between;
}
.example .flex-item { flex: 1; background-color: #c0c0c0; }
.example .grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
}
.example .grid-item { background-color: #90a0b0; }
.example .body { font-family: "Helvetica Neue", Arial, sans-serif; }
.example .color h1 {
	color: var(--course-tint);
	background-color: #ecf0f1;
}
.example .gradient {
	background: linear-gradient(to right, #3498db, #2ecc71);
	width: 100%;
	height: 55px;
}
.example .advancedText {
	font-size: 16px;
	font-weight: 400;
	line-height: 3;
}
.example button {
	transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}
.example button:hover { color: #fff; font-size: 18px; }

@keyframes rotateAnimation {
	to { transform: rotate(360deg); }
}

.example .spin {
	width: 35px;
	height: 35px;
	background-color: var(--course-tint);
	animation: rotateAnimation 2s linear infinite;
}
.example .scale {
	transition: transform 0.3s ease-in-out;
	transform-origin: 0 50%;
}
.example .scale:hover { transform: scale(1.2); }
.example .responsiveImage { max-width: 350px; }
.example .button {
	display: inline-block;
	padding: 10px 20px;
	font-size: 16px;
	text-align: center;
	background-color: #3498db;
	color: #fff;
	text-decoration: none;
	border-bottom: 0;
}
.example .button__text { font-weight: bold; }
.example .button--large { font-size: 20px; padding: 15px 30px; }

main footer {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.95rem;
}

.toc {
	display: none;
}

.toc.is-open {
	display: block;
	position: fixed;
	z-index: 35;
	inset: 64px 0 0 0;
	background: var(--bg);
	overflow: auto;
	padding: 1.25rem 1.35rem 3rem;
}

.toc__label {
	margin: 0 0 0.8rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.toc a {
	display: block;
	border: 0;
	border-left: 2px solid var(--line);
	color: var(--muted);
	text-decoration: none;
	padding: 0.38rem 0 0.38rem 0.8rem;
	font-size: 0.95rem;
}

.toc a[data-level="3"] {
	padding-left: 1.45rem;
	font-size: 0.88rem;
}

.toc a.is-active,
.toc a:hover {
	color: var(--ink);
	border-left-color: var(--course-link);
}

body.toc-open {
	overflow: hidden;
}

@media (min-width: 1080px) {
	body.flex.has-toc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 270px;
		column-gap: 0.5rem;
	}

	body.flex.has-toc aside,
	body.flex.has-toc main.main {
		grid-column: 1;
	}

	.toc-button {
		display: none;
	}

	.toc,
	.toc.is-open {
		display: block;
		position: sticky;
		inset: auto;
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		top: 84px;
		max-height: calc(100vh - 104px);
		overflow: auto;
		background: transparent;
		padding: 1.25rem 1.25rem 2rem 0.25rem;
	}

	body.toc-open {
		overflow: auto;
	}
}

@media (max-width: 720px) {
	h1 { font-size: 1.85rem; }
	main > section { width: min(740px, calc(100% - 1.5rem)); }
	.example .mediaqueries { font-size: 10px; }
	.example .inline-container .inline-block-item { width: auto; }
}

@media print {
	.course-bar,
	.toc,
	aside {
		display: none !important;
	}

	body.flex {
		display: block;
		padding: 0;
		background: #fff;
		color: #000;
	}

	main > section {
		width: auto;
	}
}