h1, h2, h3, h4, h5, h6 {
	font-family: var(--title-font-family), sans-serif;
	margin: 0;
	color: var(--title-color);
	font-weight: 500;
}

h1 {
	font-size: 1.8rem;
	margin-block: 0 1rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.4rem;
}

h4 {
	font-size: 1.3rem;
}

h5 {
	font-size: 1.2rem;
}

h6 {
	font-size: 1.1rem;
}

p,
ul,
ol {
	margin: .5em 0;
	font-weight: lighter;
}

p {
	font-size: var(--p-font-size);
	line-height: 1.4;
}

.msg.error {
	padding-inline: 1rem;
	text-align: center;
}

a {
	color: var(--link-color);
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: var(--link-hover-color);
}

:target {
	background-color: rgb(255 238 0 / 10%) !important;
	transition: background-color 1s ease;
}

img {
	max-width: 100%;
	height: auto;
}

.sessionCode {
	font-size: .85em;
    font-weight: 500;
    font-size: var(--secondaryText-font-size);
    color: var(--tab-color);
}
.userAsLearner .sessionCode {
    display: none;
}

.sessionCode::before {
	content: " (";
}

.sessionCode::after {
	content: ")";
}

.subPgTi {
	font-weight: 500;
	color: var(--title-color);
	padding: .1rem;
	border-radius: .5rem;
}

.lnk.subPgTi > .ti {
	text-decoration: underline;
	text-decoration-color: var(--link-bdcolor);
	text-decoration-style: dotted;
	text-underline-offset: 4px;
	line-height: 1.2;
}

.lnk.subPgTi:hover {
	background-color: var(--link-bgcolor);
}

.lnk.subPgTi:hover > .ti {
	color: var(--navProgram-hover-color);
	text-decoration-color: transparent;
}

.icon {
	flex: 0 0 auto;
	display: flex;
	background-repeat: no-repeat;
	background-size: contain;
	background-origin: content-box;
	background-position: center;
	padding: 0.2rem;
}

.icon.large {
	width: 2rem;
	height: 2rem;
	border-radius: .5rem;
	margin-inline-end: 0.6rem;
}

.icon.small {
	width: 1.4rem;
	height: 1.4rem;
	border-radius: .3rem;
	margin-block: 0.2rem;
	margin-inline: 0.3rem 0.4rem;
}

.dt,
.dur,
.period {
	font-weight: 500;
	font-size: var(--secondaryText-font-size);
	color: var(--dt-color);
	font-family: var(--label-font-family);
	white-space: nowrap;
}

.subPgTi > .icon,
.sub > .icon {
	display: inline-flex;
	vertical-align: middle;
}

.subPgTi > .dt,
.subPgTi > .dur {
	padding-right: 0.2rem;
}

.dates  p-dt {
    color: var(--dt-color);
}

.dates .day {
    font-weight: 700;
}

.sepRangeTime,
.sepRangeDay {
    margin-inline: .2rem;
    font-size: 0;
}
.sepRangeTime span {
    display: none;
}
.sepRangeTime::before,
.sepRangeDay::before {
    font-family: "fontelloParcours";
    content: "\E823";
    font-size: var(--secondaryText-font-size);
    color: color-mix(in oklab, var(--dt-color), transparent 50%);
    display: inline-block;
}

/*SEQ et THEM*/
.sequence {
	background-color: var(--seq-bgcolor);
}

.thematic {
	background-color: var(--them-bgcolor);
}

.icon.seq.large {
	box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
	width: 2rem;
	height: 2rem;
}

.icon.them.large {
	padding: 0;
	width: 1rem;
	height: 1rem;
	border-radius: .5rem;
	margin-inline-start: .7rem;
	display: inline-flex;
}

.sub.sequence,
.sub.thematic {
	margin-inline: 0;
	margin-block: 1rem;
}

.icon.them.small {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 0.35rem;
	margin: .5rem .25rem 0 .25rem;
}

.sub > .icon.them {
	margin-bottom: -1.3rem;
	margin-inline-start: -0.8rem;
}

/*SEA*/
.icon.sea.small {
	fill: var(--sea-icon-color);
}

.rends {
	display: flex;
}

.rendList {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-content: flex-start;
	gap: .2rem;
	padding-top: 0.5rem;
}

.sub article {
	margin-block: 0.3rem;
}

.sub article h2.title {
	font-size: 1.3rem;
}

.slotHead > .dt,
.slotHead > .dur {
	color: var(--dt-color);
	font-size: var(--secondaryText-font-size);
	font-weight: 500;
}

.dur {
	display: flex;
	align-items: center;
	gap: 2px;
}

.dur::before {
	font-family: "fontelloParcours";
	content: "\E845";
	display: inline-block;
}

/*ACT*/
.sub.actInSea {
	margin-inline-start: 2.5rem;
}

.actTi {
	display: flex;
	margin-block: 0;
}

.actTi > .ti {
	flex: 1;
}

.sub > .icon.act {
	margin-inline-start: -2.4rem;
	margin-top: -.25rem;
	margin-bottom: -1.75rem;
}

.dt.limit::before {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(img/icon/rendTodo.svg);
}

p-rendbutton,
p-markbutton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid var(--link-bdcolor);
	background-color: var(--back-bgcolor);
	border-radius: 0.3rem;
	padding: .3rem .5rem .3rem .3rem;
	cursor: pointer;
	align-self: flex-start;
	user-select: none;
}

a.pdfView {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    color: var(--button-color);
    width: fit-content;
}
a.pdfView::before {
    font-family: "fontelloParcours";
    display: inline-block;
    content: "\E835";
}
a.pdfView:hover {
    color: var(--button-hover-color);
}

.subPgHead {
	text-indent: -2.5rem;
	padding-inline-start: 2.5rem;
}

.subPgHead > p-rendbutton,
.subPgHead > p-markbutton,
.subPgHead > p-injectinprog,
.subPgHead > .dates,
.subPgTi > .dates {
	float: inline-end;
	margin-inline-start: 1rem;
	margin-top: .2rem;
	text-indent: 0;
}

p-rendbutton:hover,
p-markbutton:hover {
	filter: brightness(0.95);
}

p-rendbutton > .dt {
	margin-inline-start: 0;
}

p-rendbutton > .dt.limit {
	display: flex;
	gap: 0.2rem;
	align-items: center;
	color: var(--dt-rend-color);
}

p-rendbutton > .ti {
	font-style: italic;
	font-size: var(--secondaryText-font-size);
}

.dt.limit.locked {
	color: var(--dt-rend-locked-color);
}

.dt.limit.locked::before {
	background-image: url(img/icon/rendLocked.svg);
}

.dt.limit.validated {
    color: var(--dt-rend-validated-color);
}

.dt.limit.validated::before {
	background-image: url(img/icon/rendDone.svg);
}

p-markbutton {
	flex-direction: row;
	align-items: center;
	gap:0.2rem;
}

p-markbutton.private {
	background-color: unset;
}

p-markbutton::before {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

p-markbutton[aria-checked=true]::before {
	background-image: url(img/icon/mark-done.svg);
}

p-markbutton[aria-checked=false]::before {
	background-image: url(img/icon/mark-todo.svg);
}

p-markbutton[mode=synth]::before {
	content: "⧉";
	font-size: 80%;
}

.markLbl {
	font-size: var(--secondaryText-font-size);
	color: var(--dt-color);
	font-family: var(--label-font-family);
	font-weight: 500;
}
p-markbutton[aria-checked=true] .markLbl {
    color: var(--dt-rend-validated-color);
}

/*MORE PAGE / LINKS */
.moreInfo {
	margin-block: 0.5rem;
}

a.moreLnk,
a.morePg {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	font-size: var(--secondaryText-font-size);
}

a.moreLnk::after {
	font-family: "fontelloParcours";
	content: "\E811";
	display: inline-block;
}

a.moreLnk > .icon.small,
a.morePg > .icon.small {
	margin: 0;
	padding: 0;
	background-size: contain;
}

/*DIV SECTION*/
body > section,
body > .sub {
	margin-block-end: 0.6rem;
}

.divTi,
.secTi {
	margin-inline-start: -1rem;
}

/*Block*/
.bk > .title {
	margin-block-end: .3rem;
	font-weight: 500;
	color: var(--title-color);
	font-family: var(--title-font-family);
}

.obj > .title,
.pre > .title {
	margin-block-start: .2rem;
}

.bk > .body {
	padding-inline-start: .3rem;
}

.info > .icon {
	border: none;
}

/* bk pedag */

.pedag > .body {
	padding-inline-start: 0 !important;
}

.field {
	margin-block: .5rem;
}

.label {
	font-family: var(--label-font-family);
	color: var(--title-color);
	margin-block-end: .3rem;
}

.value {
	color: var(--text-color);
	margin-inline-start: .5em;
}

.value p,
.value ul,
.value ol {
	margin: .2rem 0;
}

.modLabel {
	min-width: 12em;
	display: inline-block;
}

.modLabel::after {
	content: " : ";
}

.fw {
	padding-inline-start: 1em;
}

/*ResList*/
.resList > .icon {
	border: none;
}

ul.listRes {
	padding-inline-start: 1.2em;
	list-style-type: disclosure-closed;
	font-size: var(--p-font-size);
	line-height: 1.4;
}

/*REM*/
.rem {
	border: 1px solid var(--rem-bdcolor);
	border-radius: .4rem;
	padding-inline: 1rem;
	padding-block: 1rem;
	background: var(--rem-bgcolor) url("img/remcorner.svg") no-repeat top right;
	grid-template-columns: auto 1fr;
	column-gap: 0.5em;
}

.rem > .icon {
	border: 0;
	padding: 0;
}

.rem > .icon::before {
	display: inline-block;
	font-family: "fontelloParcours";
	content: "\E81C";
	font-size: 1.5rem;
}

.bk.rem > .body {
	padding: 0;
}

.bk.rem > .body > p:first-child {
	margin-block-start: 0;
}

/*TEXT*/
ul._,
ol._ {
	padding-inline-start: 1.2em;
}

.tis.emp {
	font-weight: 900;
	margin: 0 0.2rem;
}

.tis.spec {
	font-style: italic;
}

.ttl.exp {
	font-size: 70%;
	vertical-align: 30%;
}

.ttl.ind {
	font-size: 70%;
	vertical-align: -30%;
}

.tph.url,
.tlr.urlL {
	text-decoration: underline;
	text-decoration-color: var(--link-bdcolor);
	text-underline-offset: 4px;
	line-height: 1.2;
}

.tph.url:after,
.tlr.urlL:after {
	font-family: "fontelloParcours";
	content: "\E811";
	display: inline-block;
	margin-left: .2rem;
	font-size: 75%;
	vertical-align: top;
}

.tph.url:hover {
	opacity: 0.7;
}

a.lnkMulti {
	font-size: var(--secondaryText-font-size);
	border: 1px solid var(--link-bdcolor);
	padding: 0.1em;
	margin: 0 0.2em;
	border-radius: 0.3em;
	cursor: pointer;
	user-select: none;
}

.tph.fileRemote,
.tlr.fileL {
	text-decoration: underline;
	text-decoration-color: var(--link-bdcolor);
	text-underline-offset: 4px;
	line-height: 1.2;
}

.tph.fileRemote[href]:after,
.tlr.fileL[href]:after {
	font-family: "fontelloParcours";
	content: "\E808";
	display: inline-block;
	margin-left: .2rem;
}

.tph.fileRemote[href]:hover,
.tlr.fileL[href]:hover {
	opacity: 0.7;
}

.tph.lnk,
.tph.lnkNav {
	display: inline;
	text-decoration: underline;
	text-decoration-color: var(--link-bdcolor);
	text-underline-offset: 4px;
}

.tph.lnk:hover,
.tph.lnkNav:hover {
	color: var(--link-hover-color);
}

.tph.lnk {
	color: var(--link-color);
	text-decoration-style: dotted;
}

.tph.lnk > .lnkIcon {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-inline-start: .2rem;
}

.tph.lnk:hover > .lnkIcon {
	opacity: 0.7;
}

.tph.opMod > .lnkIcon {
	background-image: url(img/icon/opale.svg);
}

.tph.rubis > .lnkIcon {
	background-image: url(img/icon/rubis.svg);
}

.tph.topaze > .lnkIcon {
	background-image: url(img/icon/topaze.svg);
}

.tph.subPg > .lnkIcon::before,
.tph.subPgL > .lnkIcon::before {
	font-family: "fontelloParcours";
	content: "\E846";
	display: inline-block;
}

.tph.lnkNav {
	display: inline-block;
	min-height: 1.5em;
	border-inline-start: 2px solid var(--link-bdcolor);
	border-inline-end: 2px solid var(--link-bdcolor);
	border-radius: 0.5rem;
	margin: 0 .2rem;
}

.tph.lnkNav:first-child,
.tph.lnkNav.linkNext:first-child + .tph.lnkNav {
	border: none;
	margin: 0;
}

.tph.lnkNav:first-child::after {
	padding-inline-end: 0;
}

.tph.lnkNav:not(.linkNext)::after {
	content: "";
	width: 1rem;
	height: 1rem;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	vertical-align: middle;
	padding: 0 0.3rem;
}

.tph.lnkNav:hover {
	opacity: 0.7;
}

.tobj {
	border: none;
}

table._ {
	border: 1px solid var(--tab-bdcolor);
	background-color: var(--tab-bgcolor);
	border-collapse: collapse;
	table-layout: fixed;
	color: var(--tab-color);
}

td {
	border: 1px solid var(--tab-bdcolor);
	padding: 5px;
}

td.word {
	text-align: center;
}

td.num {
	text-align: end;
}

tr.head,
col.head {
	background-color: var(--tab-head-bgcolor);
}

table._ p {
	margin-block: 3px;
}

iframe.embed,
iframe.embedL {
	border: 1px solid;
	width: -moz-available;
	width: -webkit-fill-available;
}

.tgr {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	column-gap: .5em;
}

/** res nav */
.pdf::after {
	background-image: url("img/icon/pdf-nav.svg");
}

.pdf.sol::after {
	background-image: url("img/icon/pdf-sol-nav.svg");
}

.web::after {
	background-image: url("img/icon/web-nav.svg");
}

.web.sol::after {
	background-image: url("img/icon/web-sol-nav.svg");
}

.slide::after {
	background-image: url("img/icon/slide-nav.svg");
}

.slide.sol::after {
	background-image: url("img/icon/slide-sol-nav.svg");
}

iframe.res {
	flex: 1;
	width: 100%;
	height: 100%;
	border: none;
	margin: 0;
}

img.res {
	width: fit-content;
	height: fit-content;
	margin: auto;
}

/* CONTENT ELEMENTS */
p-info {
	display: inline-flex;
	cursor: pointer;
	font-size: 75%;
	font-weight: normal;
	border-radius: 5em;
	width: 1em;
	height: 1em;
	padding: 1px;
	margin-inline-start: .2rem;
	vertical-align: middle;
	text-indent: 0;
}

.welcomeArea p-info {
	align-self: center;
}

p-info::before {
	font-family: "fontelloParcours";
	content: "\E821";
	display: inline-block;
}

p-info:hover {
	opacity: 0.7;
}

p-info.on {
	color: var(--button-color);
}

.showBody {
	align-self: self-start;
	background: none;
	border: none;
	padding: 0;
	color: var(--text-color);
	cursor: pointer;
}

.showBody::before {
	font-family: "fontelloParcours";
	content: "\E841";
	display: inline-block;
	font-size: 200%;
}

.showBody.opened::before {
	content: "\E840";
}

.showBody:hover {
	opacity: 0.7;
}

/*SCORES*/
.scores {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.sub > .scores::before,
.subPg > .scores::before,
.rends::before {
	display: block;
	content: " ";
	min-width: 2rem;
	padding: 0 .3rem;
	clip-path: content-box polygon(calc(1rem - 1px) 0%, calc(1rem + 1px) 0%, calc(1rem + 1px) 100%, calc(1rem - 1px) 100%);
	background-color: var(--details-c);
}

nav.program > .scores {
	flex: 1;
	justify-content: center;
	margin-inline: .5em;
}

.inlScores {
	padding-inline: .2em;
	vertical-align: middle;
}