/* 
 * Couleurs ENSCi
 */
 :root {
	--text: #444444;
	--white: #FFFFFF;

	--bleu: #303DDC;
	--orange: #ff744b;
	--vert: #00C7AE;
	--marron: #B87247;
	--yellow: #FAE60B;

	--yellowdark: #A7A700;
	--yellowlight: #FFF5B8;
	--bleulight: #E3E9FF;

	--gray: #DDDDDD;
	--graymedium: #999999;
	--graylight: #EEEEEE;
	--grayverylight: #F3F3F3;

	--red: #e91f00;
	--red-op: #e91f004d
}



/* 
 * Fonts ENSCi
 */
 @font-face {
    font-family: 'Maison Neue Mono';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-Mono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-DemiItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-BookItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-Demi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue Mono';
    src: url('https://ressources.ensci.com/css/fonts/MaisonNeue-MonoItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}



/* 
 * Généralités
 */
html {
	min-height: calc(100% + env(safe-area-inset-top));
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html, body, input, select, .button {
	color: var(--text);
	background: var(--white);
}
html, body, h1, h2, h3, h4, h5, h6, ul, p, input, select, span, .ui-widget {
	font-family: 'Maison Neue';
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 130%;
}
main, header, footer {
	width: 100%;
}
main, header>div, footer>div {
	max-width: 60rem;
}
.hidden {
	display: none;
}
.code {
    font-family: 'Maison Neue Mono';
}
.todo {
	color: red;
	display: none;
}
.disabled, .halfdisabled {
	background: var(--graylight);
	opacity: 0.4;
}
.disabled {
	cursor: not-allowed !important;
	pointer-events: none;
}
.valign {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}


/* 
 * Balises standard
 */
h1 {
	font-size: 250%;
	font-weight: 700;
	margin: 0 0 0.25rem 0;
}
h2 {
	font-size: 180%;
	font-weight: 700;
	margin: 1rem 0 0.25rem 0;
}
h3 {
	font-size: 150%;
	font-weight: 700;
	margin: 0 0 0.25rem 0;
}
h4 {
	font-size: 110%;
	font-weight: 700;
	margin: 0 0 0.25rem 0;
}
hr {
	opacity: 0.25;
}
li a, p a {
	color: var(--bleu);
}
p {
	margin: 0.3rem 0 0.3rem 0;
}
p span {
	font-size: 90%;
	font-weight: 300;
	line-height: 110%;
}
p span.count {
	font-size: 70%;
	font-weight: 100;
}



/*
 *	Customs de librairies
 */
 .ui-widget .ui-menu-item {
	font-size: 110%;
}
.owl-carousel .owl-item img {
	width: auto;
}
.owl-carousel .owl-nav {
	display: none;
}



/*
 *	Grille / Layout
 */
header>div, footer>div, main:not(.fiche) {
	width: calc(100% - 2rem);
	margin: 0 auto;
}
header>div, footer>div, main {
	padding: 1rem;
}
footer>div {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
body {
	position: relative;
}
body:has(footer) {
	min-height: 100vh;
}
main:has(+ footer) {
	padding-bottom: 8rem;
}
#home {
	margin-bottom: 5rem;
}
footer {
	position: absolute;
	bottom: 0;
	padding: 1rem 0;
	background: var(--bleu);
	color: var(--white);
	font-size: 80%;
}
footer p {
	font-size: 100%;
	line-height: 110%;
}
.subsection {
	background-color: var(--grayverylight);
	padding: 2rem 0;
}
nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
#home>nav {
	gap: 1rem;
	align-items: flex-end;
}
nav .button {
	margin: 0;
}
/*
nav:has(*) {
	text-align: center;
	padding-top: 0.5rem;
}*/
nav.espaces article {
	display: flex;
	overflow-x: scroll;
}
header .logo {
	width:  10rem;
	display: block;
}
header .logo + h1, h1.loading, h1.loadingfirst {
	font-size: 130%;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--bleu);
	border-top: 0.4rem solid var(--bleu);
	display: inline-block;
	padding-top: 0.5rem;
	margin-top: 0.2rem;
}
h1.loading, h&.loadingfirst {
	border-color: var(--orange);
	color: var(--orange);
	margin-left: 0.2rem;
}
#home h1 {
	padding-top: 2rem;
}
.main_section h1 {
	padding-top: 1rem;
}
#home>h1 {
	padding-top: 0;
}

/*
 *	Gestion utilisateur
 */
body:not(.connected) .connected, body.connected .notconnected,
body:not(.loading) .notloaded, body.loading .loaded,
body:not(.loadingfirst) .notloadedfirst, body.loadingfirst .loadedfirst
{
	display: none !important;
}
.profiles { 
	white-space: nowrap;
}
.profile {
	border-radius: 100%;
	border: 2px solid var(--graylight);
	width: 7.5rem;
	height: 7.5rem;
	background: url("") no-repeat top center/cover;
	background-color: var(--white);
	margin: auto;
	display: inline-block;
}
.userinfos {
	color: var(--graymedium);
	text-align: right;
	position: fixed;
	top: 2.5rem;
	right: 1.75rem;
	z-index: 1;
}
.userinfos>* {
	display: inline-block;
}
.userinfos:not(.connected)>* {
	padding-top: 0.5rem;
}
.userinfos.connected .userNotConnected, .userinfos.notconnected .userConnected, .userinfos.notconnected .profile {
	display: none;
}
.userinfos .profile {
	width: 3rem;
	height: 3rem;
}
.userinfos .connect, .userinfos .disconnect {
	cursor: pointer;
}




/*
 *	Boutons et inputs
 */
 .button, input[type='text'], input[type='search'], input[type='datetime-local'], input[type='number'], input[type='submit'], input[type='file'], select, .checkbox_button + label {
	border: 1px solid transparent;
	border-radius: 0.25rem;
	padding: 0.5rem 1rem;
	margin: 0 0.5rem 0.5rem 0;
	max-width: 22rem;
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	vertical-align: middle;
	background: var(--bleulight);
}
select {
	max-width: 23.2rem;
}
.button, input[type='submit'], input[type='file'] {
	cursor: pointer;
	user-select: none;
}
.button p {
	font-size: 110%;
	text-align: left;
	margin: 0.25rem 0 0 0;
}
.button p, input[type='submit'], input[type='file'] {
	font-weight: 700;
}
input[type='submit'], input[type='file'] {
	margin-top: 0.5rem;
	padding: 0.65rem 1rem 0.5rem 1rem;
}
.button.large {
	padding: 0.5rem 1rem;
	gap: 0.75rem;
}
.button.large p {
	font-size: 110%;
}
.button.small {
	background: var(--bleulight);
	padding: 0.4rem 0.75rem;
	box-shadow: 0 0 0.5rem #00000022;
}
.button.small p {
	font-size: 90%;
}
.button.inline {
	padding: 0.5rem 0.5rem;
	border-radius: 100%;
	margin: 0 0 0.2rem 0.4rem;
}


.button>img {
	height: 1.5rem;
}
.button.large>img {
	height: 3rem;
}
.button.small>img {
	height: 1.25rem;
}
.button:not(.disabled):hover img, .button.selected img {
	filter: invert() brightness(0.8) sepia(1);
}


.button.important {
	background: var(--orange);
	color: var(--white);
}
.button.important.green {
	background: var(--vert);
	color: var(--white);
}
.button.important:not(.disabled)>img {
	filter: invert();
}
.button.important:hover {
	background: var(--bleu);
}


input::placeholder {
	color: var(--gray);
}
.button:not(.disabled):hover, .button.selected, input[type='submit']:not(.disabled):hover, input[type='file']:not(.disabled):hover {
	background: var(--bleu) !important;
	color: var(--yellowlight);
}
.button.special:not(.disabled):hover, .button.special.selected, input[type='submit'].special:not(.disabled):hover, input[type='file'].special:not(.disabled):hover {
	background: var(--orange) !important;
	color: var(--white);
}


.button p img {
	height: 1rem;
	vertical-align: -0.1rem;
	margin-left: 0.2rem;
}
nav .button.home {
	position: relative;
	width: 12rem;
	min-height: 12rem;
	text-align: center;
	flex-direction: column;
	vertical-align: bottom;
}
nav .button.disabled p {
	display: block;
	text-align: center;
	padding: 0;
	margin: 0 auto;
}
nav .button.home p {
	text-align: center;
}
nav .button.home>img {
	width: 	5rem;
	padding: 1rem 0;
	height: auto;
	margin: 0 auto
}
nav .button.large {
	max-width: none;
}
nav .button, input[type='text'], input[type='search'], input[type='datetime-local'], input[type='number'], select, .checkbox_button + label {
	background: var(--white) !important;
	border: 1px solid var(--gray);
	border-bottom: 4px solid var(--bleu);
}
nav .button.special {
	border-bottom-color: var(--orange);
}
nav input[type='checkbox'] + label {
	user-select: none;
    width: 8rem;
    height: 3.1rem;
	vertical-align: top;
	padding-top: 0.9rem;

	font-size: 110%;
	font-weight: 700;
	font-style: italic;
	border-bottom-color: var(--gray);
	text-align: center;
	color: var(--graymedium);
}
nav input[type='checkbox']:checked + label, nav input[type='checkbox']:checked + label {
	background: var(--vert) !important;
	border-bottom-color: var(--vert);
	color: var(--white);
}

input[type='text'], input[type='search'], input[type='datetime-local'], input[type='number'], select {
	font-size: 120%;
	font-weight: 700;
	font-style: italic;
	border-bottom-color: var(--vert);
	padding: 1.4rem 1.25rem 1.2rem 1.25rem;
	width: 100%;
	text-align: center;
}
input[type='text'].small, input[type='search'].small, input[type='datetime-local'].small, input[type='number'].small, select.small {
	font-size: 100%;
	text-align: left;
	padding: 0.65rem 0.5rem 0.5rem 0.5rem;
	vertical-align: 0rem;
	width: auto;
}
input[type='datetime-local'].small {
	width: 10.6rem;
}
select {
	padding: 1.6rem 1.25rem 1.3rem 1.25rem
}
select.small {
	vertical-align: -0.05rem;
	padding: 0.7rem 0.5rem 0.55rem 0.5rem;
}
select.ultrasmall {
	font-size: 80%;
	text-align: center;
	width: auto;
	vertical-align: -0.05rem;
	padding: 0.5rem 0.3rem 0.35rem 0.2rem;
}


input[type='checkbox'] {
    vertical-align: -0.1rem;
	width: 0.8rem;
	height: 0.8rem;
	margin: 0 0.25rem 0 0;
}
input[type='checkbox'].checkbox_img, input[type='checkbox'].checkbox_button {
    display: none;
}
input[type='checkbox'].checkbox_img + label {
    padding: 0;
    height: 1.5rem;
    width: 1.5rem;
	vertical-align: -0.2rem;
	cursor: pointer;
	background: url("") no-repeat top center/cover;
    display: inline-block;
}
input[type='checkbox'].checkbox_img:checked + label {
	background: url("") no-repeat top center/cover;
    display: inline-block;
}
#language + label {
	position: fixed;
	top: 0.5rem;
	right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
	background: url("https://ressources.ensci.com/medias/pictos/lang_fra.svg") no-repeat top center/cover;
}
#language:checked + label {
	background: url("https://ressources.ensci.com/medias/pictos/lang_eng.svg") no-repeat top center/cover;
}

/* Date et heure */
.shortcut {
	display: inline-block;
	font-size: 80%;
	text-decoration: underline;
	cursor: pointer;
	margin-right: 0.25rem;
}



/*
 * Systèmes de box
 */
.boxes {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	align-items: flex-start;
}

.boxes .box {
	width: 19rem;
	border: 1px solid var(--graylight);
	border-radius: 0.35rem;
	background: var(--white);
}

.boxes .box .photo {
	width: calc(100% - 2rem);
	height: 11rem;
	border: 1rem solid var(--white);
	background: url("") no-repeat center center/contain;
	background-color: var(--white);
	margin-bottom: 1rem;
}

.boxes article.box:not(.fiche)>div:not(:empty) {
	padding: 1rem;
}
.boxes article.box:not(.fiche)>div:not(:empty) .metadata {
	margin-bottom: 1rem;
}

.boxes .box .intro {
	border-top-left-radius: 0.35rem;
	border-top-right-radius: 0.35rem;
	background: var(--grayverylight);
	border-bottom: 1px solid var(--graylight);
}
.boxes .box.gm-style-iw .intro {
	margin-bottom: 1rem;
	padding: 1rem;
}
.boxes .box.focus:not(.fiche) {
	border-color: var(--bleu);
}
.boxes .box.focus:not(.fiche) .intro {
	background: var(--bleu);
	color: var(--white);
}
.boxes .box.focus:not(.fiche) .intro a {
	color: var(--white);
	text-decoration: underline !important;
}
.boxes .box.focus:not(.fiche).interdit {
	border-color: var(--red);
}
.boxes .box.interdit:not(.fiche) .intro {
	background: var(--red-op);
}
.boxes .box.focus:not(.fiche).interdit .intro {
	background: var(--red);
}

.boxes .box:not(.fiche) .intro .visuel, .boxes .box:not(.fiche) .intro h3 {
	margin-bottom: 0;
}
.boxes .box .intro .metadata {
	display: table-row;
}

.boxes .box .metadata>* {
	margin: 0;
	display: table-cell;
	vertical-align: top;
}
.boxes .box .intro .metadata p, .boxes .box .intro .metadata li {
	font-size: 90%;
	line-height: 110%;
}
.boxes .box .intro .metadata p, .boxes .box .intro .metadata ul{
	padding: 0.25rem 0;
}
.boxes .box .intro .metadata .code {
	word-break: break-all
}
.boxes .box .metadata.important>* {
	font-weight: 900 !important;
}
.boxes .box .metadata .meta {
	font-weight: 300;
}
.boxes .box .metadata .value {
	padding-left: 0.5rem !important;
	vertical-align: middle;
}
.boxes .box .metadata ul.value {
	list-style: none;
}
.boxes .box .metadata ul.value li:not(:only-child) {
	background: url('https://ressources.ensci.com/medias/pictos/arrow_right.svg') no-repeat top left;
	background-size: 0.38rem;
	padding: 0 0 0.2rem 0.75rem;
}
.boxes .box.focus:not(.fiche) .intro .metadata ul.value li:not(:only-child) {
	background: url('https://ressources.ensci.com/medias/pictos/arrow_right_white.svg') no-repeat top left;
	background-size: 0.38rem;
}
.boxes .box .intro .metadata ul.value li:not(:only-child) {
	background-size: 0.3rem;
	padding: 0 0 0.2rem 0.65rem;
}


.boxes .box .visuel {
	position: relative;
}
.boxes .box.gm-style-iw .visuel {
	display: none;
}

.boxes .box .visuel .epis {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
}

.boxes .box .visuel .epis img {
	display: inline-block;
	height: 2.5rem;
	margin-right: 0.3rem;
}
.boxes .box.focus:not(.fiche) .visuel .epis img {
	filter: hue-rotate(145deg) brightness(1.5);
}

/*
 * Mode fiche
 */ 
.boxes .box.fiche {
    max-width: none;
    width: 100%;
}
.boxes .box.fiche .intro, .boxes .box.fiche li a, .boxes .box.fiche p a {
    background: white;
    color: var(--text);
}
.boxes .box.fiche .intro {
	padding-bottom: 1rem;;
	margin-bottom: 1rem;;
}
.boxes .box.fiche .photo {
    display: none;
}
.boxes .box.fiche {
    border-color: transparent;
}

.boxes .box.fiche h3 {
    color: var(--bleu);
    font-size: 180%
}
.boxes .box.fiche h4 {
    font-size: 100%;
}

.boxes .box.fiche .intro .metadata p, .boxes .box.fiche .intro .metadata li {
    font-size: 100%;
}
.boxes .box.fiche .content .metadata .value {
    padding-left: 0 !important;
    font-size: 100%;
    font-weight: 500;
}

/*
 * Close ×
 */ 
 .closex {
	background: var(--bleu);
	color: var(--yellowlight);
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	height: 2rem;
	width: 2rem;
	border-radius: 1rem;
	cursor: pointer;
}
.closex>div {
	text-align: center;
	font-weight: 900;
	font-size: 150%;
	margin: 0.5rem 0 0 0;
}
.closex:hover {
	background: var(--yellowlight);
	color: var(--bleu);
}


/*
 * Datatable & jconfim
 */
table.dataTable {
	margin: 0;
}
.jconfirm .jconfirm-box-container {
	margin: auto;
	width: 30rem;
}
.jconfirm.jconfirm-white .jconfirm-bg, .jconfirm.jconfirm-light .jconfirm-bg {
	opacity: 0.8;
}

/*
 * Rubans et pastilles
 */ 
 .pastille {
	right: -0.75rem;
	top: -0.75rem;
	min-width: 2rem;
	height: 2rem;
	position: absolute;
	background: var(--red);
	color: var(--white);
	border-radius: 1.5rem;
}
 .pastille>div {
	font-weight: 900;
	margin-top: 0.5rem;
	font-size: 125%;
 }
 .ruban {
	width: 4.5rem;
	height: 4.5rem;
	right: -0.25rem;
	top: -0.35rem;
	position: absolute;
	text-align: right;
	overflow: hidden;
	z-index: 1;
}
.ruban span {
	width: 6rem;
	top: 1.25rem;
	right: -1.25rem;
	font-size: 70%;
	color: var(--text);
	background: var(--yellow);
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	transform: rotate(45deg);
	display: block;
	box-shadow: 0 3px 10px -5px #000;
	position: absolute;
	padding: 0.25rem 0 0.025rem 0;
}
.ruban.red span {
	background: var(--red);
	color: var(--white);
}
.ruban span::before, .ruban span::after {
	content: "";
	position: absolute;
	z-index: -1;
}
.ruban span::before {
	left: 0;
	top: 100%;
	border-left: 0.2rem solid var(--yellowdark);
	border-right: 0.2rem solid transparent;
	border-bottom: 0.2rem solid transparent;
	border-top: 0.2rem solid var(--yellowdark);
}
.ruban span::after {
	right: 0;
	top: 100%;
	border-left: 0.2rem solid transparent;
	border-right: 0.2rem solid var(--yellowdark);
	border-bottom: 0.2rem solid transparent;
	border-top: 0.2rem solid var(--yellowdark);
}



/*
 * Popup plein écran
 */
 .popup {
	display: none;
	position: fixed !important;
	z-index: 10;
	top: 0;
	left: 0;
	width: calc(100vw - 2rem);
	padding: 1rem;
	height: calc(100vh - 2rem);
	background: #000000CC;
	color: var(--white);
}



/* 
 * Responsive
 */
@media (max-width: 40em) {
	main, header>div, footer>div {
		max-width: unset;
	}
	.boxes .box {
		width: 100%;
	}
	.boxes .box .intro .metadata p, .boxes .box .intro .metadata ul {
		font-size: 80%;
		word-break: break-all
	}
	nav .button.home {
		width: 9.5rem;
	}
	#home nav .button.large {
		width: calc(100vw - 5rem);
	}
}