:root {
	--header-border-thick: 0;
	--header-height: 6.5rem;
	--color-background-page: #ededed;
}

header#page-header {
	--header-padding-block: .5em;
	--spread-boxshadow-hover: .125rem;
	--color-boxshadow-hover: hsla(0deg, 0%, 0%, .06);

	border-bottom: 0;
	box-shadow:
		0 0 calc(var(--spread-boxshadow-hover) * 3) var(--spread-boxshadow-hover) var(--color-boxshadow-hover),
		0 0 var(--spread-boxshadow-hover) calc(var(--spread-boxshadow-hover) / 4) var(--color-boxshadow-hover);
}

/* -- version fond gris */
body:is([data-mode="courses"], [data-mode="courses.details"]) {
	background-color: var(--color-background-page);
}
header#page-header {
	--color-boxshadow-hover: hsla(0deg, 0%, 0%, .125);
	background-color: var(--color-background);
}
footer#page-footer {
	margin-top: 1em;
}
body:is([data-mode="courses"], [data-mode="courses.details"]) header#page-header {
	box-shadow: unset;
}
body:is([data-mode="courses.details"]) div#courses-details-container {
	margin-top: 5rem;
	background-color: var(--color-background);
}
body:is([data-mode="courses.details"]) div.breadcrumbs-container {
	background-color: var(--color-background-page);
	padding-block-end: 2rem;
}
body:is([data-mode="courses.details"]) div#courses-details-container > div:not(.breadcrumbs-container, .banner-container) {
	padding-inline: 1rem;
}
body:is([data-mode="courses.details"]) div#courses-details-container.with-banner {
	gap: 0;
}
body:is([data-mode="courses.details"]) :is(div.breadcrumbs-container.no-actions.course-breadcrumbs, .banner-container) {
	margin-block-end: 0;
	padding-block-end: 2rem;
}
/* -- */

@media (min-width: 720px){
	body:is([data-mode="courses"]) div#courseslist-main-container:has(> *:first-child:not(.breadcrumbs-container)) {
		padding-top: 6rem;
	}
}
@media (min-width: 1440px) {
	div#page-header-inner-container {
		--max-vw: 92vw;
	}
}

div#page-header-logo > p {
	background-image: var(--logo-brand-small);
}
@media (min-width: 896px) {
	div#page-header-logo > p {
		background-image: var(--logo-brand);
	}
}
ul#standard-menu li.selected {
	background-color: transparent;
}
ul#standard-menu li a {
	font-weight: var(--fw-semibold);
}
ul#standard-menu li.selected a {
	color: var(--color-brand);
}
ul#standard-menu li:hover a {
	color: var(--color-brand);
}

div#courseslist-main-container {
	margin-top: 5rem;
}

div.breadcrumbs-container.no-actions.course-breadcrumbs {
	grid-auto-flow: row;
	grid-template-areas:
		'current'
		'breadcrumbs';
	margin-block-end: 1rem;
	border-block-end: 0;
}
.course-breadcrumbs .shelve-current {
	grid-area: current;
	font-size: 2em;
	display: grid;
	grid-auto-flow: column;
	gap: 1rem;
	align-items: center;
	justify-content: start;
	padding-block: .5rem;
}
body:is([data-mode="courses"], [data-mode="courses.details"]) a.breadcrumbs {
	gap: 0 .5rem;
}
a.shelve-backlink,
p.shelve-backlink {
	--_size: 1.5em;
	--_thick: .125em;

	display: grid;
	place-items: center;

	height: var(--_size);
	aspect-ratio: 1;
	border-radius: 100%;
	background-color: var(--color-background);
}
.shelve-backlink::after {
	--_tick_size: calc(var(--_size) / 2.6);

	content: '';
	height: var(--_tick_size);
	aspect-ratio: 1;

	border-left: var(--_thick) solid currentColor;
	border-bottom: var(--_thick) solid currentColor;
	transform: translateX(calc(100% - (var(--_tick_size) / 1.3))) rotate(45deg);
}

#courseabout-text :is(ul, ol) {
	padding-block: .5em 1em;
}
#courseabout-text :is(ul, ol) li {
	margin-left: 1em;
}

/* hide attempts in details */
body[data-mode="courses.details"] div#courseattempts-container {
	display: none;
}