MediaWiki:Common.css

De Omnis Bibliotheca
Aller à :navigation, rechercher

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

  • Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
  • Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
  • Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
  • Opera : appuyez sur Ctrl + F5.
/** Polices d'écritures : **/
@import url("//fonts.googleapis.com/css2?family=Grenze+Gotisch&family=Iceland&family=UnifrakturCook:wght@700&display=swap");

.container {
    max-width: 1400px;
}

/** Titre page**/
span#firstHeadingTitle {
    padding: 0 0.2em;
}

/** Titre paragraphes **/
body.OB h1, body.OB h2 {
    border: none;
    background: linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%) black;
    padding: 0.5em;
    box-shadow: inset 1px 1px #ffffff03,inset 0 0 0 1px #272727,0 4px 3px black,inset 0 0 10px black !important;
}

/** Style des références (sources): **/
body.OB .mw-references-wrap {
    margin-top: 2em;
}
body.OB .mw-references-wrap li {
    padding: 6px 24px;
    margin: 1rem 0;
    border: 1px solid black;
    color: rgb(209 209 209);
    border-radius: 3px;
    background: linear-gradient(transparent 50%,black),linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%) black;
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black, inset 0 -50px 50px black, 0 4px 8px #000;
}
body.OB .mw-references-wrap li:first-child {
    margin-top: 0;
}
body.OB .mw-references-wrap li:last-child {
    margin-bottom: 0;
}
body.OB .mw-references-wrap li:target, sup.reference:target {
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black, inset 0 -50px 50px #00000085, 0 4px 8px #000 !important;
    background: linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%) rgba( 0,127,255,0.133) !important;
}

/** Layout globale de page : **/
#content {
	overflow: hidden;
	position: relative;
}

/** Lazy loader : **/
.lazy-loading-tag {
	display: inline-flex;
	-webkit-mask-image: url('//omnis-bibliotheca.com/images/7/7d/LoadMechanicus.png');
	-webkit-mask-size: 100% 100%;
	mask-image: url('//omnis-bibliotheca.com/images/7/7d/LoadMechanicus.png');
	mask-size: 100% 100%;
}
.lazy-loader[data-state="sleep"],
.lazy-loader[data-state="sleep"] ~ *,
.lazy-loader[data-state="loading"] ~ * {
	display: none !important;
}


/** Previews Random **/


.preview {
	display: inline-flex;
	perspective: 1200px;
	perspective-origin: center 30%;
}
.preview * {
	transition: 0.5s all ease-in-out;
	user-select: none;
}
.preview-ref {
	display: none;
}
.preview-container {
	background: linear-gradient(transparent 50%, black), linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%) black;
	box-shadow: inset 1px 1px #ffffff03,inset 0 0 0 1px #272727,0 4px 3px black,inset 0 0 10px black, inset 0 -50px 50px black;
	display: inline-flex;
	flex-flow: column;
	height: 420px;
	min-height: 420px;
	width: 280px;
	min-width: 280px;
	border-radius: 10px 10px 0 0;
	text-align: left;
	position: relative;
	margin: 0 5px 20px 5px;
	overflow: hidden;
}
.preview-title {
	text-align: center;
	border-radius: 10px 10px 0 0;
	margin: 1px;
	box-shadow: 0 4px 8px #000, inset 0 0 10px #000, inset 0 0 10px #000;
	background: #131414;
}
.preview-title a[title] {
    text-decoration: none;
    font-weight: normal;
    font-size: 110%;
    padding: 10px 0;
    display: block;
    border-radius: 10px 10px 0 0;
    color: white !important;
}
.preview-title a:hover {
	color: #fff !important;
	text-shadow: 0 0 2px #000,0 0 3px #30e2ff,0 0 5px #30e2ff !important;
	background: linear-gradient(#121313,#526c651c 1px, transparent);
	box-shadow: inset 0 0 10px #000;
}
.preview-page-bg {
	margin: 8px;
	border-radius: 5px 5px 0 0;
	box-sizing: border-box;
	position: absolute;
	top: 40px;
	height: calc(100% - 80px);
	width: calc(100% - 16px);
	z-index: 1;
	overflow: hidden;
	transition: 0.5s all ease-in-out;
}
.preview-page-bg::before {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	height: calc(100% - 6px);
	width: calc(100% - 6px);
	box-shadow: inset 0 0 0 1px #8685829e, inset 0 0 15px white, 0 0 5px -2px black;
	border-radius: 5px 5px 0 0;
}
.preview-page-bg::after {
	content: '';
	position: absolute;
	top: 2px;
	right: 2px;
	height: calc(100% - 2px);
	width: calc(100% - 2px);
	box-shadow: inset 0 0 0 1px #868582, inset -3px 3px #c3b49d, 0 0 5px -2px black;
	border-radius: 5px 5px 0 0;
}

.preview-page {
	margin: 8px;
	overflow: hidden;
	font-size: 95%;
	-webkit-mask-image: linear-gradient(black 50%, transparent 280px);
	mask: linear-gradient(black 50%, transparent 280px);
	padding: 20px;
	border-radius: 5px;
	box-sizing: border-box;
	position: absolute;
	color: #553b1e;
	z-index: 2;
	transition: 0.3s;
	top: 46px;
	right: 6px;
	height: calc(100% - 22px);
	width: calc(100% - 22px);
	transition: 0.5s all ease-in-out;
}
.preview-container.random .preview-page {
	-webkit-mask-image: linear-gradient(black 50%, transparent 90%);
	mask-image: linear-gradient(black 50%, transparent 90%);
}
.preview-page a {
	text-decoration: none !important;
	color: unset;
	text-shadow: none;
}
.preview-page a:hover {
	color: #fdfdfd;
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.preview-page a.new {
	color: #cc2200;
	text-shadow: none;
}
.preview-background-image {
	position: absolute;
	top: 40px;
	left: 0;
	max-height: 325px;
	overflow: hidden;
	z-index: -1;
	opacity: 0.5;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(black, transparent);
	mask: linear-gradient(black, transparent);
	transform: translateY(-50%);
}
.preview-footer {
	width: 100%;
	padding: 10px;
	background: #000;
	box-shadow: inset 0 0 0 1px #ffffff1c, 0 -5px 5px -5px black, inset 0 0 10px black;
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
	align-items: center;
	min-height: 40px;
	flex-wrap: wrap;
	height: 40px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
}
.preview-footer > * {
	padding: 2px 5px;
	border-radius: 5px;
	white-space: nowrap;
	font-weight: lighter;
	font-size: 90%;
	background: #2b0d0db0;
	opacity: 0.8;
	margin: 0 5px 10px;
	box-sizing: border-box;
	text-overflow: initial;
	overflow: initial;
	display: block;
}
.preview-footer a[title] {
    color: lightgrey !important;
}
.preview-footer a[title]:hover {
	text-decoration: none !important;
}
.preview-footer a[title]:hover {
	color: white !important;
	opacity: 1;
	background: #2b0d0d;
}
.preview-navigator {
	position: absolute;
	left: 0;
	z-index: 3;
	background: linear-gradient(transparent,black);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 46px;
	height: calc(100% - 86px);
	background-position: center bottom;
	background-size: 100% 50px;
	background-repeat: no-repeat;
	box-sizing: border-box;
}
.preview-navigator a[title] {
	font-weight: normal;
	color: #2b1702 !important;
	transition: all 0.2s ease-in-out;
	text-shadow: 0 0 5px #fff3;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 18px;
	font-family: 'Grenze Gotisch',cursive;
	padding-bottom: 10px;
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	padding-top: 280px;
}
.preview-navigator a:hover {
	text-shadow: 0 0 5px white, 0 0 10px white;
}
.preview-random-img img {
	-webkit-mask: linear-gradient(90deg, transparent, black 20%, black 95%, transparent);
	mask: linear-gradient(90deg, transparent, black 20%, black 95%, transparent);
}
.preview-random-img {
	position: absolute;
	top: 105px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	-webkit-mask: radial-gradient(black, transparent);
	mask: radial-gradient(black, transparent);
	transition: 0.5s all ease-in-out;
}
.preview:hover .preview-page-img {
	scale: 1.05;
}
.preview-page::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(#00000030 1px, transparent 2px, transparent 100%), linear-gradient(90deg, #00000030 1px, transparent 2px, transparent 100%);
	background-size: 100% 8px, 8px 100%;
	-webkit-mask: radial-gradient(transparent 60%, black);
	mask: radial-gradient(transparent 60%, black);
	opacity: 0.5;
}
.preview-page::after {
	position: absolute;
	content: '';
	top: 6px;
	left: 6px;
	height: calc(100% - 12px);
	width: calc(100% - 12px);
	box-shadow: inset 0 0 0 1px #2d1515ba, inset 0 0 0 2px #731919;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 22px, 100% 100%, 0 100%);
	opacity: 0.5;
}
.preview-container.random .preview-footer a {
	font-size: 18px;
	border-radius: 50%;
	box-sizing: border-box;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	height: 30px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.preview-page > a:first-child {
	position: absolute;
	font-size: 0;
	color: transparent;
	top: 0;
	right: 0;
	width: 35px;
	height: 25px;
	z-index: 5;
	border-radius: 0 0 0 8px;
	clip-path: polygon(-20% -20%, 120% 120%, -20% 120%);
	box-shadow: inset 1px -1px 0 #938a7a, 0 0 5px, 0 0 5px #a7977a;
	transform: translateX(18px) rotate(32deg);
	transform-origin: left top;
	background: linear-gradient(45deg, #eadabf 30%, #37230d);
}
.preview-page > a:first-child:hover {
	background: linear-gradient(45deg, #d5c3a4 30%, #553717);
}

.preview-page-img {
	position: absolute;
	width: 200px;
	height: 280px;
	background: black;
	top: 50%;
	box-shadow: 2px 2px 20px black;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid #ffffff17;
	display: flex;
	justify-content: center;
	align-items: center;
}
.preview-page-img.right {
	right: 0;
	transform: translateY(-45%) translateX(100%) rotateY(-41deg);
}
.preview-page-img.left{
	left: 0;
	transform: translateY(-45%) translateX(-100%) rotateY(41deg);
}
.preview-page-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 0 1px #ffffff38;
	background: linear-gradient(transparent, transparent 6px, #6af1f84d 20px, #ffffff8b 13px, #6af1f84d 16px, transparent), linear-gradient(rgba(0,0,0,0.1) 0px,rgba(0,0,0,0.1) 2px,rgba(128,128,128,0.1) 2px,rgba(128,128,128,0.1) 4px);
	background-size: 100% 20px, auto 4px;
	background-position: 0 -30px, center center;
	background-repeat: no-repeat, repeat;
	opacity: 0.6;
	border-radius: 10px;
}
.preview-symbol {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	opacity: 0.6;
	z-index: 0;
	pointer-events: none;
}
#previews-wrapper {
	--preview-wrapper-bg: black;
	position: relative;
	margin: 0 auto 60px auto;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	width: 1100px;
	box-sizing: border-box;
	justify-content: center;
	max-width: 100%;
}
#previews-wrapper > * {
	margin: 40px 40px 0 !important;
	transition: 0.3s all ease-in-out;
	z-index: 1;
}
#previews-wrapper > :nth-child(2n+1) {
	justify-self: end;
}
#previews-wrapper > :nth-child(2n) {
	justify-self: start;
}
.preview-section-subtitle {
	text-align: center;
	letter-spacing: 2px;
	font-family: 'Grenze Gotisch', cursive;
	font-size: 18px;
	font-style: normal;
	color: #403e3e;
	padding: 10px;
	text-shadow: 0 0 3px #00000021, 0 0 15px #00000057;
}


#previews-wrapper > .preview-refresh-btn {
	position: absolute;
	top: 500px;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	margin: 0 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%);
	box-shadow: inset 0 0 0 1px #27272782, inset 0 0 10px black, inset 0 0 10px #000, 0 4px 3px black;
	cursor: pointer;
	font-size: 32px;
	color: white;
	user-select: none;
	padding: 5px 5px 4px 5px;
	transition: 0.3s all ease-in-out;
	z-index: 0;
}
#previews-wrapper > .preview-refresh-btn:hover {
	box-shadow: inset 0 0 0 1px #27272782, inset 0 0 10px black, inset 0 0 10px #000, 0 0 2px white, 0 0 10px #30e2ff, 0 0 100px #30e2ff;
}
#previews-wrapper[status="loading"] > .preview-refresh-btn {
	pointer-events: none !important;
	box-shadow: inset 0 0 0 1px #27272782, inset 0 0 10px black, inset 0 0 10px #000, 0 0 2px white, 0 0 10px #30e2ff, 0 0 100px #30e2ff;
}
.preview-refresh-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	background: conic-gradient(transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent);
	transform: translate3d(-50%, -50%, 0);
	-webkit-mask: radial-gradient(transparent 30px, black 70px, transparent 70%);
	mask: radial-gradient(transparent 30px, black 70px, transparent 70%);
	border-radius: 50%;
	box-shadow: inset 0 0 20px black;
	pointer-events: none;
	animation: 5s center-rotation infinite linear;
	animation-play-state: paused;
	opacity: 0;
}
.preview-refresh-btn:hover::after {
	opacity: 1;
}
#previews-wrapper[status="loading"] .preview-refresh-btn::after {
	animation-play-state: running;
	opacity: 1;
}
#previews-wrapper > .preview-refresh-btn > div {
	background: black;
	height: 50px;
	width: 50px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	z-index: 1;
	box-shadow: inset 1px 1px #ffffff03,inset 0 0 0 1px #272727,0 4px 3px black,inset 0 0 10px black,inset 0 0 20px black,inset 0 0 20px black;
	background: linear-gradient(135deg,#717978a0,#414444a0,#575b5ba0,#232625a0,#3c4240a0,#1f2322a0,#717978a0,#414444a0,#575b5ba0,#232625a0,#3c4240a0,#1f2322a0) #2f2d2d !important;
	font-size: 40px;
	padding-bottom: 6px;
	box-sizing: border-box;
	text-shadow: 0 0 2px #000,0 0 3px #59595970,0 0 5px #ffffff73 !important;
	color: black;
}
#previews-wrapper > .preview-refresh-btn:hover > div {
	text-shadow: 0 0 2px #ff3030,0 0 3px #ff3030,0 0 5px #ff3030 !important;
	color: white;
}
#previews-wrapper[status="loading"] > .preview-refresh-btn:hover > div {
	color: black !important;
	text-shadow: 0 0 2px #000,0 0 3px #59595970,0 0 5px #ffffff73 !important;
	opacity: 1 !important;
}
#previews-wrapper > .preview-refresh-btn img {
	position: relative;
	pointer-events: none;
	transition: 2s all ease-in-out;
	z-index: 0;
	transform: rotate(0deg);
	border-radius: 50%;
	overflow: hidden;
	width: 70px;
	height: 70px;
}
#previews-wrapper > .preview-refresh-btn:hover img {
	transform: rotate(180deg);
}

/** Adjust Style for dynamic Preview resfresh: **/
#previews-wrapper * {
	transition: 0.5s all ease-in-out;
	user-select: none;
}
#previews-wrapper[status="loading"] .preview-footer a {
	opacity: 0;
	pointer-events: none;
}
#previews-wrapper[status="loading"] .preview * {
	color: transparent !important;
	text-shadow: none !important;
	pointer-events: none;
}
#previews-wrapper[status="loading"] .preview-page,
#previews-wrapper[status="loading"] .preview-page-bg {
	transform: translateY(100%);
}

.preview {
	transform-style: preserve-3d;
}
.preview-page-img {
	transition: 0.5s all ease-in-out;
	backface-visibility: hidden;
}
#previews-wrapper[status="loading"] .preview-page-img.left {
	transform: translateY(-45%) translateX(-100%) rotateY(calc(180deg + 41deg));
}
#previews-wrapper[status="loading"] .preview-page-img.right {
	transform: translateY(-45%) translateX(100%) rotateY(calc(-180deg - 41deg));
}

.preview-page-img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	transition: 1s all ease-in-out;
	box-shadow: inset 0 0 0 1px #000;
}
#previews-wrapper[status="loading"] .preview-page-img::before {
	box-shadow: inset 0 0 500px 250px black;
}
#previews-wrapper[status="loading"] .preview-footer a {
	position: relative;
	transform: translateX(-300px);
}
@-webkit-keyframes center-rotation {
  from {
	transform: translate3d(-50%, -50%, 0) rotate(0);
  }
  to { 
	transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

@keyframes center-rotation {
  from {
	transform: translate3d(-50%, -50%, 0) rotate(0);
  }
  to { 
	transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

/** Theme Votann features  **/
.votann-runes-mask {
	-webkit-mask-image: url('//omnis-bibliotheca.com/images/e/ea/VotannRunes.png');
	-webkit-mask-size: 100% auto;
	-webkit-mask-repeat: no-repeat repeat;
	-webkit-mask-position-x: center;
	mask-image: url('//omnis-bibliotheca.com/images/e/ea/VotannRunes.png');
	mask-size: 100% auto;
	mask-repeat: no-repeat repeat;
	mask-position-x: center;
}
.votann-runes-wrapper {
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-image: url('//omnis-bibliotheca.com/images/e/ea/VotannRunes.png');
	-webkit-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
	-moz-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
	-ms-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
	-o-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
	filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
}
.votann-symbol-wrapper {
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-image: url(//omnis-bibliotheca.com/images/b/b0/VotannFactionSymbol.png);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
	-moz-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
	-ms-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
	-o-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
	filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #0d0d0da3);
}
.votann-symbol-wrapper.back {
}
.votann-symbol-mask {
	-webkit-mask-image: url(//omnis-bibliotheca.com/images/b/b0/VotannFactionSymbol.png);
	-webkit-mask-size: 100% auto;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-image: url(//omnis-bibliotheca.com/images/b/b0/VotannFactionSymbol.png);
	mask-size: 100% auto;
	mask-repeat: no-repeat;
	mask-position: center center;
	height: 100%;
}

/** Theme Ork features  **/
body.OB.theme-ork .mw-parser-output h3 {
	background: linear-gradient(#000, #0000 50%), url('//omnis-bibliotheca.com/images/6/69/Deco-ork-6.jpg'), linear-gradient(#601717, #601717) !important;
	padding-bottom: 31px;
	background-size: auto 22px, auto 22px, auto 27px !important;
	background-position-y: bottom !important;
	background-repeat: no-repeat !important;
	/* mask: linear-gradient(black 80%, transparent 120%); */
	box-shadow: inset 10px 0 10px -10px black, inset -10px 0 10px -10px black !important;
}
body.OB.theme-ork .mw-parser-output h1, 
body.OB.theme-ork .mw-parser-output h2 {
	border: none;
	background: linear-gradient(#000,#0000 50%),url(//omnis-bibliotheca.com/images/6/69/Deco-ork-6.jpg),linear-gradient(#601717,#601717),linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%) #011712;
	padding: 0.5em;
	box-shadow: inset 0 1px 0 #272727,inset 0 0 10px black, inset 0 0 20px black !important;
	padding-bottom: 31px;
	background-size: auto 22px,auto 22px,auto 27px,auto auto !important;
	background-position-y: bottom !important;
	background-repeat: no-repeat !important;
}
body.OB.theme-ork #deco-top-middle-border {
	background: url('//omnis-bibliotheca.com/images/thumb/5/5e/Deco-ork-3.jpg/1338px-Deco-ork-3.jpg');
	background-size: auto 100%;
}

/** Encadré style Asuryani **/
body.OB.theme .asuryani-pane-1 {
	padding: 1em;
	border-radius: 20px;
	text-shadow: 0 0 5px black;
	max-width: 100%;
	color: #ccd7db !important;
	border: 1px solid #6171711c !important;
	box-shadow: 0 10px 10px -10px black, 0 20px 20px -20px black, 0 30px 30px -30px black, inset 0 0 2px 5px #00000070;
	background: linear-gradient(135deg, #03807047 0, #013c3c47 25%, #015b5b47 40%, #001a1e47 55%, #013b4447 75%, #00040347 85%);
}
body.OB.theme .asuryani-pane-2 {
	background: #9dbdc226;
	padding: 1em;
	border-radius: 20px;
	box-shadow: 0 4px 4px -2px #66848c;
	max-width: 100%;
}

body.OB.theme .asuryani-pane-3 {
	color: #90b9b5;
	padding: 60px 0;
	clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 calc(100% - 60px));
	width: calc(100% + 100px);
	transform: translateX(-50px);
	background: linear-gradient(2deg, black 50px, transparent 100px, transparent calc(100% - 100px), black calc(100% - 50px)), linear-gradient(135deg, #03807047 0, #013c3c47 25%, #015b5b47 40%, #001a1e47 55%, #013b4447 75%, #00040347 85%) #0f141c;
	box-shadow: 0 10px 10px -10px black, 0 20px 20px -20px black, 0 30px 30px -30px black, inset 0 0 2px 5px #00000070;
	clear: both;
}

/** Cadre custom necromunda **/
.cadre-custom-necromunda {
	width: 800px;
	max-width: 100%;
	position: relative;
	padding: 3em;
	box-sizing: border-box;
	margin: 40px auto;
	background: url(//omnis-bibliotheca.com/images/0/0f/Parchemin.jpg);
	font-family: 'Grenze Gotisch',cursive;
	font-size: 1rem;
	color: #3c2407;
	box-shadow: inset 0 0 10px 9px #473720,inset 0 0 20px 9px #473720;
}
.cadre-custom-necromunda .ccn-deco {
	pointer-events: none;
	position: absolute;
}
.cadre-custom-necromunda .ccn-corner {
	pointer-events: none;
	position: absolute;
	left: 0;
	width: 100%;
}
.cadre-custom-necromunda .ccn-deco.p-top {
	top: 0;
}
.cadre-custom-necromunda .ccn-deco.p-bottom {
	bottom: 0;
}
.cadre-custom-necromunda .ccn-deco.p-left {
	left: 0;
}
.cadre-custom-necromunda .ccn-deco.p-right {
	right: 0;
}
.cadre-custom-necromunda .ccn-corner.p-top > .image {
	position: absolute;
	top: 0;
	z-index: 10;
}
.cadre-custom-necromunda .ccn-corner.p-bottom > .image {
	position: absolute;
	bottom: 0;
	z-index: 10;
}
.cadre-custom-necromunda .ccn-corner.p-top > .image:first-child {
	left: 0;
	transform: scaleX(-1);
}
.cadre-custom-necromunda .ccn-corner.p-top > .image:last-child {
	right: 0;
}
.cadre-custom-necromunda .ccn-corner.p-bottom > .image:first-child {
	right: 0;
	transform: scaleX(-1);
}
.cadre-custom-necromunda .ccn-corner.p-bottom > .image:last-child {
	left: 0;
}
.ccn-deco.ccn-border {
	border: 1px solid #4e3e25;
	overflow: hidden;
	box-sizing: border-box;
	z-index: 5;
}
.cadre-custom-necromunda .ccn-border.p-top,
.cadre-custom-necromunda .ccn-border.p-bottom {
	width: 100%;
	height: 8px;
	left: 0;
	background: url("//omnis-bibliotheca.com/images/5/59/Cadre-necromunda-border-h.jpg");
}
.cadre-custom-necromunda .ccn-border.p-left,
.cadre-custom-necromunda .ccn-border.p-right {
	width: 8px;
	height: 100%;
	top: 0;
	background: url("//omnis-bibliotheca.com/images/e/eb/Cadre-necromunda-border.jpg");
}
.cadre-custom-necromunda .ccn-deco.ccn-sign.p-top {
	left: 50%;
	top: 0;
	transform: translateX(-50%) translateY(-43px);
	z-index: 20;
}
.cadre-custom-necromunda .ccn-title {
	font-size: 1.6rem;
	line-height: 100%;
	display: inline-flex;
	align-items: center;
	padding: 5px;
	box-shadow: 0 0 0px 2px #6f5f466b,0 0 0px 7px #dac7a7,0 0 0px 12px #4d130f85;
	margin-bottom: 30px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
}
.cadre-custom-necromunda .ccn-title :first-child {
	font-size: 280%;
	margin-right: 5px;
	height: 100%;
	display: flex;
	padding-bottom: 8px;
	color: #4d130fd4;
	text-shadow: 0 0 2px #d5c4a6;
}
.cadre-custom-necromunda .ccn-deco.ccn-stamp {
	right: 0;
	opacity: 0.5;
	top: 50px;
	z-index: 0;
}
.cadre-custom-necromunda .ccn-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cadre-custom-necromunda .ccn-content p {
	margin: 0;
}
.cadre-custom-necromunda .ccn-deco.ccn-seal {
	position: absolute;
	bottom: 0;
	right: 90px;
	transform: translateY(20%);
	z-index: 15;
}
.cadre-custom-necromunda .ccn-separator {
	height: 10px;
	display: flex;
	align-items: center;
}
.cadre-custom-necromunda .ccn-tree-fork {
	display: flex;
	align-items: start;
	width: 100%;
}
.cadre-custom-necromunda .ccn-tree-fork > :first-child {
	text-align: right;
	margin: 10px 10px 0 0;
	flex: 1;
}
.cadre-custom-necromunda .ccn-tree-fork > :last-child {
	text-align: right;
	margin: 10px 0 0 10px;
	flex: 1;
}
.cadre-custom-necromunda .ccn-tree-fork > * > * {
	padding-bottom: 4px;
}
.cadre-custom-necromunda .ccn-tree-fork > :first-child > * {
	text-align: right;
	position: relative;
	padding-right: 10px;
}
.cadre-custom-necromunda .ccn-tree-fork > :first-child > ::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 1px;
	background: #3c2407;
}
.cadre-custom-necromunda .ccn-tree-fork > :last-child > * {
	text-align: left;
	position: relative;
	padding-left: 10px;
}
.cadre-custom-necromunda .ccn-tree-fork > :last-child > ::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 1px;
	background: #3c2407;
}

/** Filtre vitraux pour le theme Sororitas. **/
body.theme-sororitas .deco-left > .deco-left-1 img,
body.theme-sororitas .deco-right> .deco-right-1 img {
	filter: hue-rotate(50deg) brightness(1.4) saturate(0.5);
}

/** Effet sur le sigle libre-marchand **/
body.OB.theme.theme-jdr-rogue-trader .deco-top-middle-sigil .image {
	display: block;
	-webkit-mask: url('//omnis-bibliotheca.com/images/9/92/Symbol_libre-marchand.png');
	mask: url('//omnis-bibliotheca.com/images/9/92/Symbol_libre-marchand.png');
}

/** theme JDR imperium maledictum **/
.jdr-imperium-maledictum-margin-bg {
    background: url("//omnis-bibliotheca.com/images/thumb/2/29/Imperium-maledictum-margin.jpg/100px-Imperium-maledictum-margin.jpg");
}

/** Background parchemin. **/
.bg-parchemin {
	background: url('//omnis-bibliotheca.com/images/0/0f/Parchemin.jpg') !important;
}
.bg-parchemin-clair,
.bg-parchemin-light,
.bg-parchemin-lightened {
	background: url('//omnis-bibliotheca.com/images/8/84/Parchemin-clair.jpg') !important;
}

/** gestion auto des marges des table flottantes **/
body.mediawiki .mw-parser-output > table.float-right {
	margin: 0 0 1em 1em;
	clear: right;
}
body.mediawiki .mw-parser-output > table.float-left {
    margin: 0 1em 1em 0;
    clear: left ;
}
body.mediawiki .mw-parser-output > table.auto-center {
    margin-bottom: 1em;
    clear: both;
}

/** Grille s'ajustant à la taille de l'écran. **/
.responsive-grid {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}
.responsive-grid > * {
    flex: 1;
    padding: 1em;
    box-sizing: border-box;
}


/** scrollbar du site (sauf pour firefox) **/
body::-webkit-scrollbar {
    width: 20px;
}
body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg,#717978,#414444,#575b5b,#232625,#3c4240,#1f2322);
    border-radius: 3px;
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 5px black, inset 0 0 15px black;
}
body::-webkit-scrollbar-track {
    background: #151616;
    box-shadow: -1px 0 1px #1e1e1e;
}


/** police d'écriture spéciale**/

.text-standard {
    font-size: 1rem;
    font-family: Verdana,Geneva,sans-serife;
    font-weight: normal;
    font-size: 1rem;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}
.text-gothic {
    font-family: 'Grenze Gotisch', cursive;
    font-weight: normal;
    font-size: 1.2rem;
    font-style: normal;
    text-transform: none;
    line-height: 1.2;
}
.text-gothic a {
    font-weight: normal !important;
}

.text-scifi {
    font-family: 'Iceland';
    font-size: 1.4em;
    letter-spacing: -0.5px;
}

/** Mise en évidence de la première lettre d'un texte en gothic et grande taille. **/
.first-letter-large:first-letter {
    font-family: 'Grenze Gotisch',cursive;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    line-height: 0.6;
    font-size: calc(1.375rem + 1.5vw)!important;
    float: left;
    margin-right: 0.1em;
}


/** Classes génériques **/

.w-300,
.w-xs {
   width: 300px !important;
   max-width: 100%;
}
.w-400,
.w-small {
   width: 400px !important;
   max-width: 100%;
}
.w-500 {
   width: 500px !important;
   max-width: 100%;
}
.w-600 {
   width: 600px !important;
   max-width: 100%;
}
.w-800,
.w-middle {
   width: 800px !important;
   max-width: 100%;
}
.w-1000,
.w-large {
   width: 1000px !important;
   max-width: 100%;
}
.w-1200,
.w-xl {
   width: 1200px !important;
   max-width: 100%;
}
.w-100p,
.w-100 {
   width: 100% !important;
}

.auto-center {
   margin-left: auto !important;
   margin-right: auto !important;
}
.auto-center.auto-margin {
   margin-left: 0 auto 1em auto !important;
}
.text-center {
   text-align: center !important;
}
.text-right {
   text-align: right !important;
}
.text-left {
   text-align: left !important;
}
.text-italic {
   font-style: italic !important;
}
.text-bold {
   font-weight: bold !important;
}

.float-left {
    float: left !important;
}
.float-left.auto-margin {
    margin: 0 1em 1em 0 !important;
}
.float-right {
    float: right !important;
}
.float-right.auto-margin {
    margin: 0 0 1em 1em !important;
}
.clear-both {
   clear: both !important;
}
.clear-right {
   clear: right !important;
}
.clear-left {
   clear: left !important;
}



/*** tables ***/

/** Table custom standard **/
table.OB-data-table {
    background: linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%) black;
    box-shadow: inset 1px 1px #ffffff03,0 0 0 1px #272727,0 4px 3px black,inset 0 0 10px black !important;
    border-radius: 3px;
    border-collapse: separate;
    border-spacing: 0.5em 0.4em;
    padding: 0.2em;
}
table.OB-data-table > tr > th, 
table.OB-data-table > * > tr > th {
    color: #bdbdbd;
}
table.OB-data-table > tr > td,
table.OB-data-table > * > tr > td {
    background: linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%) black !important;
    box-shadow: inset 1px 1px #ffffff1f,inset 0 0 0 1px #272727,0 4px 10px black;
    border-radius: 3px;
    margin: 0.2em;
    padding: 0.2em 1em;
}

/** Ancien stile 'wikitable' **/
table.simple {
    background-color: #f8f9fa;
    color: #222;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
}
table.simple > tr > th,
table.simple > tr > td,
table.simple > * > tr > th,
table.simple > * > tr > td {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em;
}
body.OB .mw-parser-output > .wikitable {
	float: none;
	margin-left: auto;
	margin-right: auto;
}
/** table - style Adepta Sororitas **/
body.OB.theme table.wikitable_sororitas {
	color: #DBE9F4;
	background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black !important;
	box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
	padding: 30px;
	border-radius: 5px;
	padding: 10px;
	border: none;
	border-collapse: unset;
	clear: both;
	border-spacing: 0;
}
body.OB.theme table.wikitable_sororitas > tr > th, 
body.OB.theme table.wikitable_sororitas > tr > td, 
body.OB.theme table.wikitable_sororitas > * > tr > th, 
body.OB.theme table.wikitable_sororitas > * > tr > td {
	border: 2px solid #623939;
	padding: 10px 20px;
}

body.OB.theme.theme-jdr-imperium-maledictum table.wikitable {
	position: relative;
    background-image: url("//omnis-bibliotheca.com/images/8/89/Imperium-maledictum-panel-bg.jpg") !important;
    background-repeat: repeat  !important;
    box-shadow: inset 4px 4px #ffffff03, inset 0 0 0 4px #95a0a2, 0 4px 5px black, inset 0 0 10px black !important;
}
body.OB.theme.theme-jdr-imperium-maledictum table.wikitable:not(.citation)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 100%;
	background-image: url("//omnis-bibliotheca.com/images/4/40/Imperium-maledictum-panel-corner-top.png"), url("/images/b/ba/Imperium-maledictum-panel-corner-bottom.png");
	background-position: left top, left bottom;
	background-repeat: no-repeat, no-repeat;
	pointer-events: none;
}
body.OB.theme.theme-jdr-imperium-maledictum table.wikitable:not(.citation)::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 42px;
	height: calc(100% + 1px);
	background-image: url("//omnis-bibliotheca.com/images/4/40/Imperium-maledictum-panel-corner-top.png"), url("/images/b/ba/Imperium-maledictum-panel-corner-bottom.png");
	background-position: left top, left bottom;
	background-repeat: no-repeat, no-repeat;
	transform: scaleX(-1);
	pointer-events: none;
}

/** Modèles: **/

.parchemin-ob {
	background: linear-gradient(transparent 50%, black), linear-gradient(135deg,#71797848 0,#41444448 25%,#575b5b48 40%,#23262548 55%,#3c424048 75%,#1f232248 85%) black;
	box-shadow: inset 1px 1px #ffffff03,inset 0 0 0 1px #272727,0 4px 3px black,inset 0 0 10px black, inset 0 -50px 50px black;
	display: flex;
	flex-flow: column;
	border-radius: 10px;
	text-align: left;
	position: relative;
	margin: 0 5px 20px 5px;
	overflow: hidden;
}
.parchemin-ob-title {
    text-align: center;
    border-radius: 10px 10px 0 0;
    margin: 1px;
    box-shadow: 0 4px 8px #000, inset 0 0 10px #000, inset 0 0 10px #000;
    background: #131414;
    min-height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Grenze Gotisch', cursive;
    font-weight: normal;
    font-size: 20px;
}
.parchemin-ob-title a {
	text-decoration: none;
	font-weight: normal;
	padding: 10px 0;
	display: block;
	border-radius: 10px 10px 0 0;
	color: white;
	flex: 1;
}
.parchemin-ob.titled .parchemin-ob-title a {
    color: white !important;
}
.parchemin-ob.titled .parchemin-ob-title a.external {
    background-position-x: calc(100% - 10px);
}
.parchemin-ob-title a:hover {
	color: white !important;
	text-shadow: 0 0 2px #000,0 0 3px #30e2ff,0 0 5px #30e2ff !important;
	box-shadow: inset 0 0 10px #000;
}
.parchemin-ob-page-bg {
	margin: 8px;
	border-radius: 5px;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	height: calc(100% - 16px);
	width: calc(100% - 16px);
	z-index: 1;
	overflow: hidden;
}
.parchemin-ob.titled .parchemin-ob-page-bg {
	top: 40px;
	height: calc(100% - 56px);
}
.parchemin-ob-page-bg::before {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	height: calc(100% - 6px);
	width: calc(100% - 6px);
	box-shadow: inset 0 0 0 1px #8685829e, inset 0 0 15px white, 0 0 5px -2px black;
	border-radius: 5px;
}
.parchemin-ob-page-bg::after {
	content: '';
	position: absolute;
	top: 2px;
	right: 2px;
	height: calc(100% - 2px);
	width: calc(100% - 2px);
	box-shadow: inset 0 0 0 1px #868582, inset -3px 3px #c3b49d, 0 0 5px -2px black;
	border-radius: 5px;
}

.parchemin-ob-content {
    margin: 3px 14px 8px 14px;
    overflow: hidden;
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;
    color: #382612;
    z-index: 2;
    right: 6px;
    width: calc(100% - 22px);
    position: relative;
    height: 100%;
    flex: 1;
}
.mw-body-content .parchemin-ob-content a,
.mw-body-content .parchemin-ob-content a.external {
	text-decoration: none !important;
	text-shadow: none;
	color: #382612 !important;
}
.mw-body-content .parchemin-ob-content a:hover,
.mw-body-content .parchemin-ob-content a.external:hover {
	color: #fdfdfd !important;
	text-shadow: 0 0 1px black, 0 0 2px black !important;
}
.mw-body-content .parchemin-ob-content a.new:hover,
.mw-body-content .parchemin-ob-content a.new {
	text-decoration: none !important;
	text-shadow: none;
	color: #cc2200 !important;
}
.parchemin-ob-content a.new {
	color: #cc2200;
	text-shadow: none;
}
.parchemin-ob-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#00000030 1px, transparent 2px, transparent 100%), linear-gradient(90deg, #00000030 1px, transparent 2px, transparent 100%);
    background-size: 100% 8px, 8px 100%;
    -webkit-mask: radial-gradient(transparent 60%, black);
    mask: radial-gradient(transparent 60%, black);
    opacity: 0.5;
    pointer-events: none;
}
.parchemin-ob-content::after {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    width: calc(100% - 12px);
    box-shadow: inset 0 0 0 1px #2d1515ba, inset 0 0 0 2px #731919;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 22px, 100% 100%, 0 100%);
    opacity: 0.5;
    pointer-events: none;
}

.parchemin-ob-content .parchemin-ob-corner {
	position: absolute;
	font-size: 0;
	color: transparent;
	top: 0;
	right: 0;
	width: 35px;
	height: 25px;
	z-index: 5;
	border-radius: 0 0 0 8px;
	clip-path: polygon(-20% -20%, 120% 120%, -20% 120%);
	box-shadow: inset 1px -1px 0 #938a7a, 0 0 5px, 0 0 5px #a7977a;
	transform: translateX(18px) rotate(32deg);
	transform-origin: left top;
	background: linear-gradient(45deg, #eadabf 30%, #37230d);
}
.parchemin-ob.inlight .parchemin-ob-content .parchemin-ob-corner {
    background: linear-gradient(45deg, #e4e0d5 30%, #544937);
}

body.OB .mw-parser-output > ul:last-of-type {
	box-shadow: 5px 5px 5px -5px #0000006e,inset 0 0 50px #000,0 0 3px #443c3d,0 0 3px black,inset 25px 0 50px #ffffff4d,inset 5px 5px 2px -5px #ffffffba;
	background: linear-gradient(rgba(0,0,0,0.1) 0px,rgba(0,0,0,0.1) 2px,rgba(128,128,128,0.1) 2px,rgba(128,128,128,0.1) 4px),radial-gradient( rgba(128,186,200,0.4),rgba(20,24,28,0.76)),linear-gradient(135deg,#000,#042417,#000,#000,#000,#02150e,#000,#000,#000,#042417,#000);
	background-size: auto 4px,100% 100%;
	padding: 35px 30px 35px 60px;
	box-sizing: border-box !important;
	margin: 0 10px;
	display: flex;
	flex-flow: column;
}
body.OB .perspective-container {
	text-align: center;
	perspective: 1000px;
	background: linear-gradient(#000, #00000061 60%, #000c11 100%), radial-gradient(#334c46, transparent);
	position: relative;
	width: 200%;
	transform: translateX(-25%);
	-webkit-mask: linear-gradient(black calc(100% - 20px), transparent);
	mask-image: linear-gradient(black calc(100% - 20px), transparent);
}
body.OB .perspective-container.cards {
	text-align: center;
	perspective: 1000px;
	background: linear-gradient(#000, #00000061 60%, #000c11 100%), radial-gradient(#334c46, transparent);
	position: relative;
	width: calc(100% + 4em);
	transform: translateX(-2em);
	-webkit-mask: linear-gradient(black calc(100% - 20px), transparent);
	mask-image: linear-gradient(black calc(100% - 20px), transparent);
}
body.OB .perspective-container::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 200%;
	height: 1500px;
	background-image: linear-gradient(#0000006e , #181d1d3d 80%), linear-gradient(#75b9b96e 0px, transparent 4px, transparent calc(100% - 4px), #75b9b96e 100%), linear-gradient(90deg, #75b9b96e 0px, transparent 2px, transparent calc(100% - 2px), #75b9b96e 100%);
	background-repeat: repeat;
	background-size: auto, auto 80px, 80px auto;
	background-position: center center;
	transform: translateX(-25%) rotateX(88deg);
	transform-origin: center bottom;
	z-index: -1;
	-webkit-mask-image: linear-gradient(transparent, black, transparent);
	mask-image: linear-gradient(transparent, black, transparent);
}
body.OB .portrait-scifi-entry:not(:hover) .portrait-scifi-overlay-1 {
	box-shadow: inset 0 -30px 50px 0 transparent, inset 0 0 50px transparent, inset 0 -100px 50px -50px transparent, 5px 5px 5px -5px #0000006e, inset 0 0 50px #000, 0 0 3px #000, inset 25px 0 50px #ffffff5c, inset 5px 5px 2px -5px #ffffffba !important;
}
body.OB .portrait-scifi-entry:hover .portrait-scifi-overlay-1 {
	transition: 0s background ease-in-out !important;
}
body.OB .portrait-scifi-entry.frame > .portrait-scifi-overlay-1 {
	background: radial-gradient(transparent, transparent 70%, black), linear-gradient(90deg, black, transparent 10px, transparent calc(100% - 10px), black), linear-gradient(black, transparent 10px, transparent calc(100% - 10px), black);
}
body.OB .portrait-scifi-entry:hover .portrait-scifi-overlay-2 {
	background-position: 0 110%, 0 10%!important;
	transition: 0.7s all ease-in-out !important;
}

.portrait-scifi-avatar > :last-child {
	position: absolute;
	left: 0 !important;
	top: 0 !important;
	transform: none !important;
	width: 100%;
	height: 100%;
}
.portrait-scifi-avatar > :last-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    transition: 0.3s all ease-in-out;
}
.portrait-scifi-entry:hover .portrait-scifi-avatar > :last-child img {
    transform: scale(1.05);
}
body.OB .portrait-scifi-avatar > .image {
	overflow: hidden;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}
body.OB .portrait-scifi-avatar.top > .image {
	align-items: baseline;
}
body.OB .portrait-scifi-avatar.bottom > .image {
	align-items: end;
}
body.OB .portrait-scifi-entry:not(:hover) > .portrait-scifi-name {
	text-shadow: 0 0 3px transparent, 0 0 3px transparent, 0 0 3px transparent, 0 0 3px black, 0 0 5px transparent, 0 0 10px transparent !important;
}

body.OB .portrait-scifi-entry > .portrait-scifi-name {
	font-family: 'Iceland';
	font-size: 16px;
	letter-spacing: -0.5px;
}
body.OB .portrait-scifi-name::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: calc(100% - 20px);
	width: 100%;
	border-radius: 5px;
	padding: 6px 0;
	box-sizing: border-box;
	background: linear-gradient(135deg,#71797848,#41444448,#575b5b48,#23262548,#3c424048,#1f232248) #131313 !important;
	box-shadow: inset 1px 1px #ffffff1f,inset 0 0 0 1px #272727,0 4px 10px black !important;
}
body.OB .portrait-scifi-logo {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 10px 0 10px 20px;
	width: 100%;
	text-align: center;
	opacity: 0.7;
	z-index: 20;
	pointer-events: none;
}
body.OB .portrait-scifi-logo img {
	background: radial-gradient(#000000ba, transparent 80%);
}
body.OB .portrait-scifi-entry > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	opacity: 0;
	clip-path: polygon(0 0%, calc(100% - 20px) 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
}

body.OB .perso-card-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
/*** Carte Necron ***/
body.OB .perso-card.necron {
	box-sizing: border-box;
	padding: 0;
	margin: 2em;
	position: relative;
	display: table;
	text-align: center;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(135deg, #000, #042417, #000, #000, #000, #02150e, #000, #000, #000, #042417, #000), radial-gradient(#000 80%, #00f21a38) !important;
	box-shadow: inset 0 0 20px #000, inset 25px 0 50px #04a26e26, inset 5px 5px 2px -5px #ffffffba, 1px 1px 5px #000, 1px 1px 3px #000 !important;
}
body.OB .perso-card::before {
	content: '';
	position: absolute;
	top: 40px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 49px);
	background: #f9f9f90d;
}
body.OB .perso-card.necron > .logo {
	position: absolute;
	z-index: 10;
	top: 0;
	background: none !important;
	right: 0;
	transform: translateY(-9px) translateX(19px);
	opacity: 0.9;
}
body.OB .perso-card.necron .perso-card-title {
	font-size: 16px;
	color: #cacaca !important;
	text-shadow: 0 0 5px #ffffff2e !important;
	padding: 0.5em;
	margin-bottom: 0.3em;
	overflow: clip;
	border-radius: 10px 5px 0 0;
	box-shadow: 0 10px 10px -10px #61ca8f, 0 20px 20px -15px #b4ffbc;
	position: relative;
	z-index: 20;
	height: 35px;
	box-sizing: border-box;
}
body.OB .perso-card.necron .perso-card-title::after {
	content: '';
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #4bfbb124, #45d7a02e, #0c31278c, #0c31278c, #000000f0), linear-gradient(#00000029, black);
}
body.OB .perso-card.necron .bg-title {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	height: 100%;
	overflow: clip;
}
body.OB .perso-card.necron .bg-title:last-child {
	transform: translateX(-50%) translateY(-9px);
	display: block;
	z-index: 1;
}
body.OB .perso-card.necron .perso-card-title .label {
	font-size: 16px;
	color: #ffffff78 !important;
	text-shadow: 0 0 5px #ffffff2e !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-40%);
	z-index: 50;
}
body.OB .perso-card.necron .perso-card-description {
	box-sizing: border-box;
	padding: 0.5em 0.5em 1em 0.5em;
	position: relative;
	width: 220px;
	flex: 1;
	text-shadow: 0 0 40px #50ff00, 0 0 80px #50ff00, 0 0 25px #fff !important;
	color: #fafff85e;
}
body.OB .perso-card.necron .perso-card-description a {
	color: black !important;
}
body.OB .perso-card.necron .perso-card .portrait-scifi-entry{
	scale: 0.95;
}
body.OB .perso-card.necron .perso-card .portrait-scifi-entry:hover {
	scale: 1;
}
body.OB .perso-card.necron .perso-card:hover .perso-card-description, 
body.OB .perso-card.necron .perso-card:hover .perso-card-description a {
	color: #ffffffb0 !important;
}
body.OB .perso-card.necron .perso-card .status {
	color: #a8a19a;
}

body.OB .custom-table-header {
	display: flex;
	justify-content: space-between;
	padding: 0.5em 1.5em;
	color: #cacaca;
	font-style: italic;
}
body.OB .custom-table-header > div {
	flex: 1;
}
body.OB .custom-table {
	background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) !important;
	box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
	padding: 0.5em;
}
body.OB .custom-table > div {
	display: flex;
	justify-content: space-between;
	background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) !important;
	box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
	padding: 0.5em;
	margin: 0.5em;
}
body.OB .custom-table > div > div {
	flex: 1;
}
body.OB .custom-table > div > div:last-child {
	min-width: 280px;
	white-space: nowrap;
}

body.OB .responsive-flex {
	display: flex;
	flex-direction: row;
	max-width: 100%;
}

body.OB .responsive-flex > * {
	flex: 1;
}
body.OB .responsive-flex.spacing > * {
	padding: 0 1em;
}


body.OB .sheet-wrapper {
	position: relative;
	clear: both;
}


body.OB .sheet-wrapper h2,
body.OB .sheet-wrapper h3,
body.OB .sheet-wrapper h4,
body.OB .sheet-wrapper h5 {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(89px);
	margin: 16px 0;
	padding-left: 6em;
	width: calc(100% - 127px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-direction: row;
	white-space: nowrap;
	background: linear-gradient(#121313 60%,#0000), linear-gradient(135deg, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248) !important;
	box-shadow: 0 4px 4px -4px black !important;
	border-bottom: 1px solid black;
}
body.OB .sheet-wrapper h2 > :first-child,
body.OB .sheet-wrapper h3 > :first-child,
body.OB .sheet-wrapper h4 > :first-child,
body.OB .sheet-wrapper h5 > :first-child {
	overflow: hidden;
	text-overflow: ellipsis;
}
body.OB .sheet-wrapper h2 > :last-child,
body.OB .sheet-wrapper h3 > :last-child,
body.OB .sheet-wrapper h4 > :last-child,
body.OB .sheet-wrapper h5 > :last-child {
	flex: 1;
	display: block;
}
body.OB .sheet-content {
	min-height: 220px;
	display: flex;
}
body.OB .sheet-image {
	min-width: 89px;
}
body.OB .sheet-desc {
	position: relative;
	margin-top: 45px;
	padding: 1em 3em 1em 84px;
	clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px));
	box-sizing: border-box;
	text-shadow: 0 0 5px black, 0 0 15px black;
	display: block;
	transition: 0s all ease-in-out;
	background: radial-gradient(circle at 0 0, #000, #0000 200px), radial-gradient(at center 0, #2f2f2f, #0000 75%) #111;
}
body.OB .sheet-desc::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 150%;
	height: 250%;
	border-radius: 50%;
	background: radial-gradient(#00000085, #00000087, #35353573, transparent 50%);
	transform: translateX(-50%) translateY(50%);
	pointer-events: none;
	z-index: -1;
}
body.OB .sheet-desc::after {
	content: '';
	top: 0;
	right: 0;
	width: 250%;
	height: 100%;
	transform: translateX(50%) translateY(-50%);
	pointer-events: none;
	background: radial-gradient(#acacac21, transparent 50%);
	position: absolute;
	z-index: -1;
}


.carriere-pane-content {
	background: linear-gradient(135deg, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248) !important;
	margin: 1.5em;
	position: relative;
	overflow: clip;
	box-sizing: border-box;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	width: 200px;
}
.carriere-pane-content.imperium {
	box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 -30px 5px -5px #ffffff70, inset 0 -32px 0 #9f000061 !important;
}
.carriere-pane-content.ork {
	box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 -30px 5px -5px #ffffff70, inset 0 -32px 0 #283c24 !important;
}
.carriere-pane-content.aeldari {
	box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 -30px 5px -5px #ffffff70, inset 0 -32px 0 #093a4d !important;
}
.carriere-pane-content.other {
	box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 -30px 5px -5px #ffffff70, inset 0 -32px 0 #37373761 !important;
}
.carriere-pane-image {
	display: inline-block;
	border-radius: 5px;
	box-shadow: inset 0 0 1px #ffffff38, inset 0 0 5px #000, inset 0 0 15px #000;
	padding: 10px;
	margin: 12px;
	min-height: 256px;
	box-sizing: border-box;
}
.carriere-pane-image .image {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.carriere-pane-image img {
	width: auto;
	height: auto;
	margin: auto;
}
.carriere-pane-image fit-vertical img {
	min-height: 236px !important;
}
.carriere-pane-image fit-horizontal img {
	min-height: 156px !important;
}
.carriere-pane-title {
	text-align: center;
	font-family: sans-serif;
	letter-spacing: 1px;
	font-size: 14px;
	transform: translateY(-5px);
	color: #e3e3e3;
	text-shadow: 0 0 5px black;
	min-width: 140px;
	box-shadow: inset 0 0 1px #ffffff38, inset 0 0 5px #000, inset 0 0 15px #000;
	padding: 0.5em;
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.carriere-pane-label {
	padding: 2px 0;
	width: 100%;
	margin-top: 4px;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	background: #191b1b;
	color: #6f6f6f;
	box-shadow: inset 1px 1px 0 #ffffff1a, inset -1px 2px 0 #0000003d;
	height: 23px;
	box-sizing: border-box;
	background: #1c0404 !important;
}
.carriere-pane-infos {
	position: absolute;
	top: 0;
	left: 15px;
	width: calc(100% - 30px);
	pointer-events: none;
}
.carriere-pane-infos-handler {
	display: flex;
	justify-content: center;
	background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #1c1c1c;
	box-shadow: inset 0 1px 0 #ffffff17, inset 0 -1px 0px #000000ad, 0 2px 10px black;
	clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, calc(100% - 9px) 200%, 9px 200%, 9px 100%);
	height: 22px;
	font-weight: bold;
	pointer-events: all;
	z-index: 1;
	position: relative;
}
.imperium .carriere-pane-infos-handler {
	background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #1c0404;
}
.aeldari .carriere-pane-infos-handler {
	background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #04041c;
}
.ork .carriere-pane-infos-handler {
	background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #041c04;
}
.other .carriere-pane-infos-handler {
	background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #1c1c1c;
}
.carriere-pane-image:hover ~ .carriere-pane-infos *, .carriere-pane-infos:hover * {
	opacity: 1;
	pointer-events: all;
}
.carriere-pane-infos-data {
	margin: auto;
	width: 160px;
	height: 244px;
	background: radial-gradient(#454545, #1c0404);
	padding: 0.5em;
	box-sizing: border-box;
	pointer-events: none;
	text-align: left;
	opacity: 0;
	font-style: italic;
	position: relative;
	transform: translateY(-7px);
	border-radius: 5px;
}
.carriere-pane-infos-data a {
	font-style: normal;
	font-weight: normal;
}
.imperium .carriere-pane-infos-data {
	background: radial-gradient(#452e2e, #1c0404);
}
.ork .carriere-pane-infos-data {
	background: radial-gradient(#2e452e, #041c04);
}
.aeldari .carriere-pane-infos-data {
	background: radial-gradient(#2e2e45, #04041c);
}
.other .carriere-pane-infos-data {
	background: radial-gradient(#454545, #1c1c1c);
}


.split-image {
	position: relative;
	margin: 2rem auto;
	display: flex;
	perspective: 1000px;
	transform-style: preserve-3d;
}
.split-image > * {
	display: flex;
}
.split-image .left-pane {
	width: 25%;
	transform: scale(0.8);
	transform-origin: right;
}
.split-image .center-pane {
	width: 50%;
}
.split-image .right-pane {
	width: 25%;
	transform: translateX(-30%) scale(0.8);
	transform-origin: left;
}
.split-image .left-pane > :nth-child(1) {
	width: 20%;
}
.split-image .left-pane > :nth-child(2) {
	width: 80%;
}
.split-image .center-pane > :nth-child(1) {
	width: 10%;
}
.split-image .center-pane > :nth-child(2) {
	width: 90%;
}
.split-image .right-pane > :nth-child(1) {
	width: 20%;
}
.split-image .right-pane > :nth-child(2) {
	width: 80%;
}

.split-image .left-pane > :nth-child(1) img {
	transform: translateX(0);
}
.split-image .left-pane > :nth-child(2) img {
	transform: translateX(-5%);
}
.split-image .center-pane > :nth-child(1) img {
	transform: translateX(-25%);
}
.split-image .center-pane > :nth-child(2) img {
	transform: translateX(-30%);
}
.split-image .right-pane > :nth-child(1) img {
	transform: translateX(-75%);
}
.split-image .right-pane > :nth-child(2) img {
	transform: translateX(-80%);
}


.split-image > * > :nth-child(2n+1) {
	perspective: 1000px;
	perspective-origin: right center;
}
.split-image > * > :nth-child(2n+1) > * {
	transform: rotateY(-60deg);
	transform-origin: right center;
	height: 100%;
	width: 100%;
	background: white;
	position: relative;
}
.split-image > * > :nth-child(2n+1) > ::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 10px black, inset 0 0 40px black;
	z-index: 10;
}

.split-image > * > :nth-child(2n) {
	perspective: 1000px;
	perspective-origin: left center;
}
.split-image > * > :nth-child(2n) > * {
	transform: rotateY(30deg);
	transform-origin: left center;
	height: 100%;
	width: 100%;
	background: black;
	box-shadow: 0 40px 40px -30px #ffffff30;
}

.split-image > * > * {
	height: 100%;
	width: 100%;
}
.split-image > * > * > * {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.split-image *, .split-image ::before  {
	transition: 1s all ease-in-out;
}
.split-image:hover * {
	transform: none;
	box-shadow: none !important;
}
.split-image:hover ::before {
	box-shadow: inset 0 0 10px transparent, inset 0 0 40px transparent !important;
}

/** Pour le mécanisme de sélection **/
[data-trigger] {
	cursor: pointer;
	user-select: none;
}
:not(.p-navbar) > [data-target]:not(.active) {
    display: none;
}

/** Effets d'animation: **/

@keyframes shine {
    to {
      background-position: 200% center;
    }
}
@keyframes shine-alt {
    to {
      background-position: -200% center;
    }
}

@media screen and (max-device-width: 900px) {
    #content a.image {
        animation-play-state: paused !important;
    }
}