/*
 * Presse Locale
 */ 
main:has(+ footer) {
	width: fit-content;
	margin: auto;
}
header>div, footer>div, main:not(.fiche) {
	margin: 0;
}

/*
main, header>div, footer>div {
	max-width: none;
}
header>div, footer>div {
	margin: 0;
}


header {
	padding: 1rem 0 0 1rem;
}
*/
body {
	background-color: var(--white);
	user-select: none;
}
h1 {
	margin-top: 1rem;
	font-size: 200%;
}


/*
 *  Écrans ePaper
 */
.screen {
	width: 192px;
	height: 320px;
	border: 0.25rem solid var(--graylight);
	position: relative;
	box-sizing: content-box;
	position: relative;
}
.screen>*:not(.metadata):not(.ruban) {
	position: absolute;
	top: 0;
	left: 0;
}
.screen .content, .screen .preview, .screen .history {
	transform-origin: 0 0;
	transition: opacity 0.25s linear;
}
.screen .content {
	transform: scale(0.4);
	opacity: 0.7;
}
.screen .content.orientation-left {
	transform: scale(0.4) translateX(480px) rotate(90deg);
}
.screen .content.orientation-right {
	transform: scale(0.4) translateY(800px) rotate(-90deg);
}
.screen.loaded.refresh .content {
	animation: new_screen 5s;
}
@keyframes new_screen {
  0% 	{	filter: invert(1); }
  10% 	{	filter: invert(0); }
  20% 	{	filter: invert(1); }
  30% 	{	filter: invert(0); }
  40% 	{	filter: invert(1); }
  50% 	{	filter: invert(0); }
  60% 	{	filter: invert(0); }
  70% 	{	filter: invert(1); }
  80% 	{	filter: invert(0); }
  90% 	{	filter: invert(1); }
  100% 	{	filter: invert(0); }
}

.screen .overlay {
	background: var(--gray);
	width: 100%;
	height: 100%;
	mix-blend-mode: darken;
	box-shadow: inset 0 0 0.5rem #00000044;
}
.screen.hover .overlay {
	box-shadow: inset 0 0 0.5rem #00000044;
}
.screen.hover, .editor .screen {
	border-width: 1rem;
	box-shadow: 0 0 0.5rem #00000044;
}


/* Spécificités de la page des écrans */
.screens .screen {
	transform: perspective(800px) rotateY(90deg);
	transition: transform 0.5s ease-in-out;
}
.screens .screen, .screen .preview, .screen .history {
	width: 120px;
	height: 200px;
}
.screens .metadatas {
	margin-top:	1rem;
}

.screens .screen.loaded {
	transform: perspective(800px) rotateY(0deg);
}
.screens .screen.new .new {
	display: block;
}
.screens .screen .metadata {
	display: none;
	position: absolute;
	text-transform: uppercase;
	background: var(--white);
	border-radius: 10rem;
	font-size: 70%;
	height: 1rem;
	font-weight: bold;
	padding: 0 0.5rem;
	bottom: 0.5rem;
}
.screens .screen .metadata.locked {
	right: 0.5rem;
	padding: 0 0.5rem;
}
.screens .screen .metadata.dead {
	top: 0.5rem;
	right: 0.5rem;
	padding: 0 0.15rem;
}
.screens .screen .metadata.date {
	left: 0.5rem;
}
.screens .screen .content.orientation-left {
	transform: scale(0.25) translateX(480px) rotate(90deg);
}
.screens .screen .content.orientation-right {
	transform: scale(0.25) translateY(800px) rotate(-90deg);
}
.screens .screen.hover {
	width: 288px;
	height: 480px;
}
.screens .places .screen.hover {
	border-color: var(--vert);
}
.screens .screen.hover .content.orientation-left {
	transform: scale(0.6) translateX(480px) rotate(90deg);
}
.screens .screen.hover .content.orientation-right {
	transform: scale(0.6) translateY(800px) rotate(-90deg);
}
.screens .userinfos {
	position: fixed;
	right: 0;
}




/*
 *  Page des écrans
 */
.screens {
	padding-top: 0;
}
.screens:not(.mobile) .places {
	max-width: calc(100vw - 400px);
	max-height: calc(100vh - 1rem);	
}
.screens .inspector {
	display: none;
	margin: 1rem 0 0 1rem;
	vertical-align: top;
}
.screens:not(.mobile) .inspector {
	display: inline-block;
}
.screens .inspector .metadata div {
	font-weight: 300;
	display: inline-block;
	margin-right: 0.25rem;
}
.screens .places {
	display: inline-block;
}
.screens .buttons {
	margin-top: 5rem;
}
.screens .buttons nav {
	justify-content: unset;
}
.screens .display {
	display: inline-block;
	background: var(--graylight);
	padding: 1rem;
	box-shadow: 0 0 0.5rem #00000044;
	margin: 0;
	border-radius: 1rem;
}
.screens .display:first-child {
	margin-top: 1rem;
}
.screens .display .screen.hovered.locked {
	border-color: var(--orange);
	cursor: not-allowed;
}
.screens .display .screen.hovered:not(.locked), .screens.superuser .display .screen.hovered.locked {
	border-color: var(--vert);
	cursor: pointer;
	z-index: 10;
}

.screens .display .screen .preview {
	opacity: 0;
}
.screens .display .screen.hovered .preview {
	opacity: 1;
}
.screens .display .screen.dateEnd .content, .screens .display .screen.dateEnd.hovered .preview {
	opacity: 0.05;
}
.screens .display .screen .history {
	pointer-events: none;
	opacity: 0;
	transform-origin: center center;
	transition: opacity 0.25s linear, transform 0.25s linear;
}
.screens .display .screen.historic {
	z-index: 1;
}
.screens .display .screen .history {
	display: none;
}
.screens .display .screen.historic .history {
	pointer-events: auto;
	opacity: 0.3;
	cursor: pointer;
	border: 0.2rem solid transparent;
}
.screens .display .screen.historic .history.loaded {
	display: block;
}
.screens .display .screen.historic .history:hover {
	opacity: 1;
	border-color: #2DADAA;
}

.screens .display .screen.historic .history[history='0'] { transform: perspective(800px) translateY(  40px) translateZ(100px) rotateX(-60deg); }
.screens .display .screen.historic .history[history='1'] { transform: perspective(800px) translateY(  -7px) translateZ(100px) rotateX(-60deg); }
.screens .display .screen.historic .history[history='2'] { transform: perspective(800px) translateY( -54px) translateZ(100px) rotateX(-60deg); }
.screens .display .screen.historic .history[history='3'] { transform: perspective(800px) translateY(-101px) translateZ(100px) rotateX(-60deg); }
.screens .display .screen.historic .history[history='4'] { transform: perspective(800px) translateY(-150px) translateZ(100px) rotateX(-60deg); }


/*
 *   Page d'édition
 */
.editor .screen {
	display: inline-block;
	margin: 1rem 0 0rem 0;
}
.editor .tools {
	margin-top: 3.8rem	;
	position: relative;
}
.editor .side {
	display: inline-block;
	vertical-align: top;
}
.editor .side.left #editor {
	height: 100vh;
	width: 100vw;
	box-shadow: 0 0 0.2rem #00000066;
}
.editor:not(.mobile) .side.left #editor {
	width: calc(100vw - 305px);
}
.editor:not(.mobile) .side.right {
	width: calc(305px - 2rem);
	margin-left: 1rem;
}
.editor.mobile .side.right {
	text-align: center;
	padding-bottom: 1rem;
}
.editor .side.right {
	position: relative;
}
.editor .side.right canvas.preview {
	display: none;
	border: 1px solid black;
}
.editor .side.right .screen {
	cursor: alias;
}
.editor .side.right .shortcut {
	display: inline-block;
	font-size: 0.7rem;
	line-height: 0.7rem;
	text-decoration: underline;
	cursor: pointer;
	margin-right: 0.25rem;
}
.editor:not(.superuser) .side.right #locked, .editor:not(.superuser) .side.right label[for='locked'] {
	display: none;
}
.editor .metadatas {
	line-height: 1rem;
}
.editor .metadatas label {
	margin-right: 0.5rem;
}
.editor .polotno-close-panel {
	padding: 5px;
}
.editor .polotno-close-panel>div {
	border: 1px solid #CCC;
}
.editor .side.left input[type='text'], .editor .side.left input[type='search'], .editor .side.left input[type='datetime-local'], .editor .side.left input[type='number'], .editor .side.left input[type='submit'], .editor .side.left input[type='file'], .editor .side.left select {
	margin: 0;
	padding: 1rem 0;
	font-size: 100%;
}

.editor .button.small {
	border-bottom-color: var(--marron);
}
.editor .button.small:not(.disabled):hover {
	background: var(--marron) !important;
}
input[type="text"].small, input[type="search"].small, input[type="datetime-local"].small {
	width: 12rem;
	margin: 0.5rem 0 0 0;
}
input[type="checkbox"] {
	margin: 0.75rem 0.25rem 0.75rem 0;
}


/*
 * Tweet des librairies
 */ 
.ruban {
	display: none;
}


@media (min-width: 60em) {
	main {
		max-width: initial;
	}
	.editor nav {
		justify-content: left;
	}	
}