« Modèle:Accueil CSS » et « MediaWiki:Common.css » : différence entre les pages

De Omnis Bibliotheca
(Différence entre les pages)
Aller à :navigation, rechercher
m (fix news card layout)
 
m (fix layout)
 
Ligne 1 : Ligne 1 :
<includeonly>{{#css:
/** Polices d'écritures : **/
body #globalWrapper {
@import url("//fonts.googleapis.com/css2?family=Grenze+Gotisch&family=Iceland&family=UnifrakturCook:wght@700&display=swap");
font-size: 12.7px;.news-thumb
 
/** Misc. layout **/
.flex-1 {
  flex: 1;
}
 
/** fix page menu layout **/
div#toc a {
    flex-wrap: nowrap;
    white-space: nowrap;
}
 
/*************************************/
/** TODO: A TRANSFERER vers le skin **/
/*************************************/
 
@media print {
  .page-wrapper {
    position: relative !important;
    height: auto !important;
  }
  body .page-wrapper div#content,
  body.OB .page-wrapper div#content,
  body.OB.theme .page-wrapper div#content {
    box-shadow: none !important;
  }
  #firstHeading, #firstHeading *,
  h1, h1 *,
  h2, h2 *,
  h3, h3 *,
  h4, h4 *,
  h5, h5 *,
  h6, h6 * {
    color: black !important;
  }
}
 
.container {
    max-width: 1400px;
}
}
body.OB #globalWrapper div#content {
 
     overflow: clip;
/** Titre page**/
    box-shadow: 0 0 3px black,-6px 0 0 black !important;
span#firstHeadingTitle {
    pointer-events: all;
     padding: 0 0.2em;
    min-height: calc(100vh - 85px);
    box-sizing: border-box;
    margin: 6em 1em 0 11.4em;
    margin-top: 6em;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
    margin-top: 6em !important;
    background-attachment: fixed !important;
    background-image: radial-gradient(#041c20, black 70%) !important;
}
}
body div#column-one li, body div#column-one li * {
 
font-size: 11.45px;
/** 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;
}
}
#firstHeading {
 
display: none;
a[href].new {
    color: #dd3333;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
 
/** Style des références (sources): **/
body.OB .mw-references-wrap {
    margin-top: 2em;
}
}
#content h2 {
body.OB .mw-references-wrap li {
text-align: center;
    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;
}
}
hr {
body.OB .mw-references-wrap li:first-child {
    background: #2027287d;
     margin-top: 0;
     margin: 3em;
}
}
.section-header {
body.OB .mw-references-wrap li:last-child {
    color: #929495;
     margin-bottom: 0;
    position: relative;
    overflow: visible;
    text-align: center;
    letter-spacing: 4px;
    padding: 0.25em 2em;
    background: linear-gradient(135deg, #71797828, #41444428, #575b5b28, #23262528 , #3c424028, #1f232228) !important;
    box-shadow: inset 0 5px 0 #202728, inset 0 5px 5px black, inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
    font-size: 14px;
    background-color: #01090a !important;
    z-index: 1;
    box-sizing: border-box;
    font-family: 'Grenze Gotisch', cursive;
    font-size: 23px;
    z-index: 15;
     margin: auto;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}
}
#siteSub {
body.OB .mw-references-wrap li:target, sup.reference:target {
display: none;
    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;
}
}
#contentSub {
 
display: none;
/** Layout globale de page : **/
#content {
overflow: hidden;
position: relative;
}
}
.titre-parchemin a, .citation-parchemin a, .signature-parchemin a, .citation-parchemin a.external.text,
 
.titre-parchemin a[title], .citation-parchemin a[title], .signature-parchemin a[title], .citation-parchemin a[title].external.text {
/** Lazy loader : **/
color: #1f5d66 !important;
.lazy-loading-tag {
text-shadow: 0 0 2px #c8b5a8;
display: inline-flex;
font-weight: normal;
-webkit-mask-image: url('/images/7/7d/LoadMechanicus.png');
-webkit-mask-size: 100% 100%;
mask-image: url('/images/7/7d/LoadMechanicus.png');
mask-size: 100% 100%;
}
}
.OB-stamp {
.lazy-loader[data-state="sleep"],
    position: absolute;
.lazy-loader[data-state="sleep"] ~ *,
    right: 0;
.lazy-loader[data-state="loading"] ~ * {
    bottom: 0;
display: none !important;
    transform: translateX(30%) translateY(37px);
    opacity: 0.4;
    clip-path: polygon(5px 5px, 97% 5px, 97% 85%, 5px 85%);
    pointer-events: none;
}
}


#toc {
 
    max-width: 1120px;
/** Previews Random **/
    margin: 40px auto !important;
 
    background: none !important;
 
    box-shadow: none;
.preview {
    border: none !important;
display: inline-flex;
perspective: 1200px;
perspective-origin: center 30%;
}
.preview * {
transition: 0.5s all ease-in-out;
user-select: none;
}
}
#toc > .toctitle {
.preview-ref {
    display: none;
display: none;
}
}
#toc li a {
.preview-container {
color: #929495 !important;
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;
position: relative;
overflow: visible;
margin: 0 5px 20px 5px;
font-weight: bold;
overflow: hidden;
}
.preview-title {
text-align: center;
text-align: center;
font-family: sans-serif;
border-radius: 10px 10px 0 0;
font-style: italic;
margin: 1px;
text-transform: uppercase;
box-shadow: 0 4px 8px #000, inset 0 0 10px #000, inset 0 0 10px #000;
letter-spacing: 5px;
background: #131414;
padding: 16px 24px;
}
background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) !important;
.preview-title a[title] {
/* background-color: rgba(0, 0, 0, 0); */
    text-decoration: none;
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
    font-weight: normal;
/* font-size: 14px; */
    font-size: 110%;
background-color: #000 !important;
    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;
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;
box-sizing: border-box;
display: block;
position: absolute;
margin: 5px;
color: #553b1e;
font-size: 12px;
z-index: 2;
text-decoration: none;
transition: 0.3s;
display: flex;
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;
}
}
#toc li a:hover {
.preview-page a[href].new {
color: #c9cbcc !important;
color: #cc2200;
text-shadow: none;
}
}
#toc li a::before {
.preview-background-image {
content: "\25B2";
position: absolute;
position: absolute;
top: 40px;
left: 0;
left: 0;
top: 50%;
max-height: 325px;
transform: translateX(-16px) translateY(calc(-50% + 3px)) rotate(90deg) scale(1, 0.5);
overflow: hidden;
font-style: normal;
z-index: -1;
font-size: 39px;
opacity: 0.5;
color: transparent !important;
pointer-events: none;
text-shadow: none !important;
-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;
}
}
#toc li a:hover::before {
.preview-footer > * {
color: #464646 !important;
padding: 2px 5px;
text-shadow: 1px 1px 5px #000, 1px 0 5px #000 !important;
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;
}
}
#dallage-grid-left::before {
.preview-footer a[title] {
     content: '';
     color: lightgrey !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(90deg);
    transform-origin: left center;
    border-radius: 0 50% 0 0;
    box-shadow: inset 0 0 5px 15px #121313, inset 0 0 5px 30px rgb(37, 41, 40), inset 0 0 25px 30px black, inset 0 0 5px 70px rgb(49 53 51), inset 0 0 25px 70px black, inset 0 0 5px 100px rgb(52 55 53), inset 0 0 25px 100px black, inset 0 0 5px 120px rgb(23, 25, 24);
    overflow: visible;
    -webkit-mask-image: linear-gradient(transparent, white , white 50%, #0000007a, transparent 90%);
    mask: linear-gradient(transparent, white , white 50%, #0000007a, transparent 90%);
}
}
#dallage-grid-left::after {
.preview-footer a[title]:hover {
    content: '';
text-decoration: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(90deg);
    transform-origin: left center;
    border-radius: 0 50% 0 0;
    box-shadow: 25px -25px 50px 50px #000000;
    overflow: visible;
    clip-path: polygon(0 -50%, 150% 0, 100% 60%, 0 50%);
}
}
#dallage-grid-right::before {
.preview-footer a[title]:hover {
    content: '';
color: white !important;
    position: absolute;
opacity: 1;
    top: 0;
background: #2b0d0d;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(-90deg
);
    transform-origin: right center;
    border-radius: 50% 0 0 0;
    box-shadow: inset 0 0 5px 15px #121313, inset 0 0 5px 30px rgb(37, 41, 40), inset 0 0 25px 30px black, inset 0 0 5px 70px rgb(49 53 51), inset 0 0 25px 70px black, inset 0 0 5px 100px rgb(52 55 53), inset 0 0 25px 100px black, inset 0 0 5px 120px rgb(23, 25, 24);
    overflow: visible;
    -webkit-mask-image: linear-gradient(transparent, white , white 50%, #0000007a , transparent 90%);
    mask: linear-gradient(transparent, white , white 50%, #0000007a , transparent 90%);
}
}
#dallage-grid-right::after {
.preview-navigator {
    content: '';
position: absolute;
    position: absolute;
left: 0;
    top: 0;
z-index: 3;
    left: 0;
background: linear-gradient(transparent,black);
    width: 100%;
width: 100%;
    height: 100%;
display: flex;
    transform: rotateY(-90deg);
justify-content: center;
    transform-origin: right center;
align-items: center;
    border-radius: 50% 0 0 0;
top: 46px;
    box-shadow: -25px -25px 50px 50px #000000;
height: calc(100% - 86px);
    overflow: visible;
background-position: center bottom;
    clip-path: polygon(-50% -50%, 100% 0, 100% 100%, 0 50%);
background-size: 100% 50px;
background-repeat: no-repeat;
box-sizing: border-box;
}
}
.dallage-include p {
.preview-navigator a[title],
.preview-navigator a[title]:visited {
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;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
justify-content: center;
align-items: start;
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);
}
}
.image-side-left,
.preview-random-img {
.image-side-left img,
position: absolute;
.image-side-right,
top: 105px;
.image-side-right img {
left: 50%;
pointer-events: none;
transform: translateX(-50%);
z-index: -1;
-webkit-mask: radial-gradient(black, transparent);
mask: radial-gradient(black, transparent);
transition: 0.5s all ease-in-out;
}
}
.image-side-left a,
.preview:hover .preview-page-img {
.image-side-right a {
scale: 1.05;
line-height: 50px;
font-size: 300px;
color: transparent !important;
pointer-events: all;
}
}
#bodyContent::before {
.preview-page::before {
content: '';
content: '';
position: absolute;
position: absolute;
Ligne 209 : Ligne 344 :
left: 0;
left: 0;
width: 100%;
width: 100%;
height: 800px;
height: 100%;
background: linear-gradient(black 100px, #00495070 200px, black, transparent);
-webkit-mask-image: radial-gradient(white, transparent);
mask: radial-gradient(white, transparent);
pointer-events: none;
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;
}
}


#dallage-grid-left.dallage-wrapper.hexa .dallage-row {
.preview-page > a:first-child {
perspective: 1000px;
position: absolute;
perspective-origin: left -50px;
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 {
[data-trigger*="dalle-"] {
position: absolute;
position: absolute !important;
width: 200px;
z-index: 100;
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%;
width: 100%;
height: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 1px #ffffff38;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
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: linear-gradient(35deg, teal, transparent, transparent, #aceaf4), linear-gradient(-35deg, teal, transparent, transparent, #aceaf4), linear-gradient(90deg, teal, transparent, transparent, transparent, transparent, transparent, #aceaf4), radial-gradient(#ffffffa1 50%, teal 70%);
background-size: 100% 20px, auto 4px;
cursor: pointer;
background-position: 0 -30px, center center;
opacity: 0.4;
background-repeat: no-repeat, repeat;
transition: 0.2s all ease-in-out;
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;
}
}
[data-trigger*="dalle-"]:hover {
.preview-section-subtitle {
opacity: 1;
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;
}
}


[data-trigger*="dalle-"] + [data-target*="dalle-"] {
 
#previews-wrapper > .preview-refresh-btn {
position: absolute;
position: absolute;
z-index: 120;
top: 500px;
width: 100%;
left: 50%;
height: 100%;
transform: translateX(-50%) translateY(-50%);
margin: 0 !important;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
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 {
[data-trigger*="dalle-"] + [data-target]:not(.active) * {
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;
pointer-events: none !important;
opacity: 0;
}
}
[data-trigger*="dalle-"]:not(active) + [data-target] {
#previews-wrapper[status="loading"] > .preview-refresh-btn {
pointer-events: none !important;
pointer-events: none !important;
display: block;
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;
}
}
[data-target] > .dalle-off {
.preview-refresh-btn::after {
position: absolute !important;
content: '';
position: absolute;
top: 50%;
top: 50%;
left: 50%;
left: 50%;
z-index: 100;
width: 400px;
width: 100%;
height: 400px;
height: 100%;
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);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: linear-gradient(35deg, teal, transparent, transparent, #aceaf4), linear-gradient(-35deg, teal, transparent, transparent, #aceaf4), linear-gradient(90deg, teal, transparent, transparent, transparent, transparent, transparent, #aceaf4), radial-gradient(#ffffffa1 50%, teal 70%);
transition: 0.2s opacity 0.1s ease-in-out;
transform: translate3d(-50%, -50%, 0);
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;
}
}
.dallage-row > .active {
.preview-refresh-btn:hover::after {
z-index: 100;
opacity: 1;
}
}
 
#previews-wrapper[status="loading"] .preview-refresh-btn::after {
[data-target] > .dalle-sfx {
animation-play-state: running;
position: absolute !important;
z-index: 0;
width: 1%;
height: 1%;
border-radius: 50%;
background: radial-gradient(#00ffdb, transparent 70%);
scale: 1;
transition: 0s all;
transform: translate3d(-50%, -50%, 0);
top: 50%;
left: 50%;
opacity: 1;
opacity: 1;
pointer-events: none !important;
}
[data-target].active > .dalle-sfx {
width: 1000% !important;
height: 1000% !important;
opacity: 0 !important;
transition: 0.4s all ease-in-out !important;
}
[data-target]:not(.active) > .dalle-sfx {
opacity: 1 !important;
}
}
.discord-top-btn {
#previews-wrapper > .preview-refresh-btn > div {
background: black;
height: 50px;
width: 50px;
position: absolute;
position: absolute;
right: 20px;
display: flex;
top: 0;
justify-content: center;
z-index: 10;
align-items: center;
border-radius: 50%;
border-radius: 50%;
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 0 50px black, 0 4px 10px black !important;
padding: 4px;
}
.discord-top-btn:hover::before {
content: 'Discordiae';
position: absolute;
bottom: 0;
left: 50%;
transform: translate3d(-50%, calc(100% + 6px), 0);
color: #929495;
text-align: center;
letter-spacing: 1px;
padding: 5px 10px;
box-shadow: inset 1px 1px #ffffff1c, inset 0 0 0 1px #000, 0 4px 10px black, inset 0 0 50px black !important;
z-index: 1;
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;
box-sizing: border-box;
background: linear-gradient(135deg, #444141 10%, #414444 25%, #2f3535 40%, #232625 55%, #3c4240 75%, #2f2d2d 85%) !important;
text-shadow: 0 0 2px #000,0 0 3px #59595970,0 0 5px #ffffff73 !important;
font-family: 'Grenze Gotisch', cursive;
color: black;
font-size: 17px;
}
border-radius: 5px;
#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;
}
}
.discord-top-btn::after {
#previews-wrapper > .preview-refresh-btn img {
content: '';
position: relative;
position: absolute;
top: 50%;
left: 50%;
width: calc(100% - 6px);
height: calc(100% - 6px);
z-index: 1;
pointer-events: none;
pointer-events: none;
background-image: linear-gradient(rgba(0,0,0,0.2) 0px,rgba(0,0,0,0.3) 2px,rgba(0, 0, 0, 0.2) 2px,rgba(255, 255, 255, 0.2) 3px);
transition: 2s all ease-in-out;
background-size: auto 3px;
z-index: 0;
transform: rotate(0deg);
border-radius: 50%;
overflow: hidden;
overflow: hidden;
box-sizing: border-box;
width: 70px;
transform: translate3d(-50%, -50%, 0);
height: 70px;
border-radius: 50%;
}
box-shadow: inset 0 0 5px #000, inset 0 0 15px #60fdff;
#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;
transition: 0.5s all ease-in-out;
opacity: 0.8;
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;
}
}
.discord-top-btn:hover::after {
#previews-wrapper[status="loading"] .preview-page,
background-position-y: 5%;
#previews-wrapper[status="loading"] .preview-page-bg {
box-shadow: inset 0 0 5px #fff, inset 0 0 15px #60fdff;
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));
}


/** Scène 3D - News **/
.preview-page-img::before {
 
content: '';
.annonces li {
position: absolute;
list-style: none;
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;
}
}
.animation-root:not(:hover) .animation {
#previews-wrapper[status="loading"] .preview-footer a {
animation-play-state: paused !important;
position: relative;
transform: translateX(-300px);
}
}
@media (hover: none) {
@-webkit-keyframes center-rotation {
   .animation-root .animation,  
   from {
  .animation-root .animation *,  
transform: translate3d(-50%, -50%, 0) rotate(0);
   .animation-root .animation *::before,
   }
   .animation-root .animation *::after {
   to {  
animation-play-state: paused !important;
transform: translate3d(-50%, -50%, 0) rotate(360deg);
   }
   }
}
}
@media (hover: hover) {
 
   .animation-root:hover .servo-crane-deco {
@keyframes center-rotation {
top: 0;
   from {
left: 0;
transform: translate3d(-50%, -50%, 0) rotate(0);
   }
   }
   .animation-root:hover .servo-crane-deco.light {
   to {  
background: none;
transform: translate3d(-50%, -50%, 0) rotate(360deg);
z-index: 2;
opacity: 1;
transition: 1s all ease-in-out, 0s opacity ease-in-out 2s;
   }
   }
}
}
.zoomable {
 
transition: 1s all ease-in-out;
/** Theme Votann features  **/
transform: scale(0.95) !important;
.votann-runes-mask {
-webkit-mask-image: url('/images/e/ea/VotannRunes.png');
-webkit-mask-size: 100% auto;
-webkit-mask-repeat: no-repeat repeat;
-webkit-mask-position-x: center;
mask-image: url('/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('/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(/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(/images/b/b0/VotannFactionSymbol.png);
-webkit-mask-size: 100% auto;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-image: url(/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('/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(/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('/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(/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;
}
}
.links {
.cadre-custom-necromunda .ccn-corner {
pointer-events: none;
position: absolute;
position: absolute;
left: 0;
width: 100%;
}
.cadre-custom-necromunda .ccn-deco.p-top {
top: 0;
top: 0;
}
.cadre-custom-necromunda .ccn-deco.p-bottom {
bottom: 0;
}
.cadre-custom-necromunda .ccn-deco.p-left {
left: 0;
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;
z-index: 10;
margin: 30px 10px;
}
text-align: center;
.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("/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("/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;
display: flex;
flex-flow: column;
padding-bottom: 8px;
align-items: start;
color: #4d130fd4;
width: calc(100% - 20px);
text-shadow: 0 0 2px #d5c4a6;
box-sizing: border-box;
}
overflow: clip;
.cadre-custom-necromunda .ccn-deco.ccn-stamp {
transition: 0.6s all ease-in-out;
right: 0;
opacity: 0.5;
top: 50px;
z-index: 0;
}
}
.links * {
.cadre-custom-necromunda .ccn-content {
display: flex;
display: flex;
flex-flow: row;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: left;
text-decoration: none !important;
transition: 0.6s all ease-in-out;
}
}
.links a,
.cadre-custom-necromunda .ccn-content p {
#content .links .external.text {
margin: 0;
height: 36px;
}
color: white !important;
.cadre-custom-necromunda .ccn-deco.ccn-seal {
position: absolute;
bottom: 0;
right: 90px;
transform: translateY(20%);
z-index: 15;
}
}
.links > * {
.cadre-custom-necromunda .ccn-separator {
height: 30px;
height: 10px;
background: transparent;
width: 100%;
display: flex;
display: flex;
flex-flow: row;
align-items: center;
align-items: center;
padding: 4px 20px;
}
border-radius: 3px;
.cadre-custom-necromunda .ccn-tree-fork {
display: flex;
align-items: start;
width: 100%;
width: 100%;
box-sizing: border-box;
}
}
:hover > .links > * {
.cadre-custom-necromunda .ccn-tree-fork > :first-child {
background: #0005;
text-align: right;
margin: 10px 10px 0 0;
flex: 1;
}
}
.links a + span::before {
.cadre-custom-necromunda .ccn-tree-fork > :last-child {
content: '';
text-align: right;
width: 20px;
margin: 10px 0 0 10px;
height: 20px;
flex: 1;
display: inline-block;
}
}
.links a + *,
.cadre-custom-necromunda .ccn-tree-fork > * > * {
.links a + * a {
padding-bottom: 4px;
opacity: 1;
transform: none;
color: white !important;
}
}
.links :hover > a + *,
.cadre-custom-necromunda .ccn-tree-fork > :first-child > * {
.links :hover > a + * a {
text-align: right;
text-shadow: 0 0 2px #30e2ff,0 0 3px #30e2ff,0 0 5px #30e2ff !important;
position: relative;
padding-right: 10px;
}
}
.ripple-floor {
.cadre-custom-necromunda .ccn-tree-fork > :first-child > ::after {
background-position: center;
content: '';
background-color: #239d9d36;
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
right: 0;
height: 100%;
height: 100%;
width: 100%;
width: 1px;
background: #3c2407;
}
.cadre-custom-necromunda .ccn-tree-fork > :last-child > * {
text-align: left;
position: relative;
padding-left: 10px;
}
}
.ripple-floor::before {
.cadre-custom-necromunda .ccn-tree-fork > :last-child > ::after {
content: '';
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
width: 100%;
height: 100%;
height: 100%;
background: #9acbbb7d radial-gradient(circle, #9acbbb7d 1%, transparent 1%) center/20000%;
width: 1px;
z-index: 1;
background: #3c2407;
content: '';
}
opacity: 0;
 
transition: all 0.8s ease-in-out 1s;
/** Filtre vitraux pour le theme Sororitas. **/
background-repeat: no-repeat;
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('/images/9/92/Symbol_libre-marchand.png');
mask: url('/images/9/92/Symbol_libre-marchand.png');
}
}
.animation-root:not(:hover) .ripple-floor::before {
 
background-color: #ffffff00;
/** theme JDR imperium maledictum **/
background-size: 0%;
.jdr-imperium-maledictum-margin-bg {
opacity: 0.5;
    background: url("/images/thumb/2/29/Imperium-maledictum-margin.jpg/100px-Imperium-maledictum-margin.jpg");
transition: all 0s;
}
}
.animation-root .red-eye-deco {
 
position: absolute;
/** Background parchemin. **/
bottom: 96px;
.bg-parchemin {
left: 121px;
background: url('/images/0/0f/Parchemin.jpg') !important;
width: 16px;
height: 16px;
border-radius: 50%;
z-index: 1;
background: radial-gradient(#ffffffdb, #f00, #ff000061, #ff000036, transparent 75%);
transition: 1s all ease-in-out;
box-shadow: 0 0 20px red,0 0 30px red, inset 0 0 5px #ff00004a;
}
}
.animation-root .screen-green-light {
.bg-parchemin-clair,
position: absolute;
.bg-parchemin-light,
z-index: -1;
.bg-parchemin-lightened {
bottom: 0;
background: url('/images/8/84/Parchemin-clair.jpg') !important;
left: -7px;
width: 100%;
height: 100%;
background: radial-gradient(#08fb91b5, #00ff9024, transparent 75%);
background-size: 250px 120px;
background-repeat: no-repeat;
background-position-y: 0;
background-position-X: 0;
transition: 1s all ease-in-out;
}
}
.animation-root:not(:hover) .red-eye-deco,
 
.animation-root:not(:hover) .screen-green-light {
/** gestion auto des marges des table flottantes **/
opacity: 0;
body.mediawiki .mw-parser-output > table.float-right {
margin: 0 0 1em 1em;
clear: right;
}
}
.tome-wrapper .eye-green-light {
body.mediawiki .mw-parser-output > table.float-left {
position: absolute;
    margin: 0 1em 1em 0;
top: 0;
    clear: left ;
left: 0;
width: 460px;
height: 950px;
border-radius: 50%;
z-index: 100;
transition: 1s all ease-in-out;
background: conic-gradient(transparent 70deg, #60bb3696, transparent 140deg);
background-position-x: 0%;
background-position-y: 0%;
-webkit-mask-image: radial-gradient(transparent, black 15%, transparent 72%, transparent);
mask-image: radial-gradient(transparent, black 15%, transparent 72%, transparent);
transform: translateX(calc(20px - 50%)) translateY(calc(-90px - 50%)) rotate(43deg);
pointer-events: none;
}
}
.tome-wrapper:not(:hover) .eye-green-light {
body.mediawiki .mw-parser-output > table.auto-center {
opacity: 0;
    margin-bottom: 1em;
    clear: both;
}
}


@media screen and (max-width: 1279px) {
/** Grille s'ajustant à la taille de l'écran. **/
  .responsive-layout {
.responsive-grid {
margin-top: 4em;
    clear: both;
flex-direction: column;
    display: flex;
align-content: center;
    flex-wrap: wrap;
  }
    max-width: 100%;
  .hide-on-small-screen {
}
display: none;
.responsive-grid > * {
  }
    flex: 1;
    padding: 1em;
    box-sizing: border-box;
}
}


div.techno-pane:hover > div > div.top-glass {
 
box-shadow: inset 0 0 20px #ff000091, inset 1px 1px #ffffff1f, inset 0 0 0 1px #27272763, inset 0 0 20px 1px #ff5d5d, 0 0 15px red !important;
/** scrollbar du site (sauf pour firefox) **/
background: linear-gradient(135deg, #717978 10%, #414444 25%, #575b5b 40%, #232625 55%, #3c4240 75%, #1f2322 85%) #fff !important;
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;
}
}
.servo-crane-deco {
body::-webkit-scrollbar-track {
position: absolute;
    background: #151616;
top: 100px;
    box-shadow: -1px 0 1px #1e1e1e;
left: 100px;
}
transition: 1s all ease-in-out 1s;
 
background: radial-gradient(#201e1e, transparent 70%, transparent);
 
height: 580px;
/** police d'écriture spéciale**/
width: 190px;
 
-webkit-animation: its-alive 10s  linear infinite;
.text-standard {
animation: its-alive 10s linear infinite;
    font-size: 1rem;
    font-family: Verdana,Geneva,sans-serife;
    font-weight: normal;
    font-size: 1rem;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}
}
.servo-crane-deco.light {
.text-gothic {
background: none;
    font-family: 'Grenze Gotisch', cursive;
z-index: 0;
    font-weight: normal;
opacity: 0;
    font-size: 1.2rem;
transition: 1s all ease-in-out, 0.1s opacity ease-in-out 0s;
    font-style: normal;
pointer-events: none !important;
    text-transform: none;
    line-height: 1.2;
}
}
.servo-crane-deco.light::after {
.text-gothic a {
content: "";
    font-weight: normal !important;
top: 41px;
left: 70px;
width: 800px;
height: 800px;
position: absolute;
background: conic-gradient(transparent 90deg, #ff00007d, transparent 120deg);
pointer-events: none;
-webkit-mask-image: radial-gradient(transparent, black 15%, transparent 70%, transparent);
mask-image: radial-gradient(transparent, black 15%, transparent 70%, transparent);
background-position: center;
transform: translateX(-50%) translateY(-50%);
}
}
.animation-root:hover .servo-crane-deco.light::after {
 
-webkit-animation: its-alive-ray 10s  linear infinite;
.text-scifi {
animation: its-alive-ray 10s linear infinite;
    font-family: 'Iceland';
    font-size: 1.4em;
    letter-spacing: -0.5px;
}
}


.update-pane > a:hover {
/** Mise en évidence de la première lettre d'un texte en gothic et grande taille. **/
cursor: pointer;
.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;
}
}




@media screen and (min-width: 900px) {
/** Classes génériques **/


/* Safari */
.w-300,
@-webkit-keyframes its-alive {
.w-xs {
  0% { -webkit-transform: translateX(-90px) translateY(-90px) rotate(20deg); }
  width: 300px !important;
  10% { -webkit-transform: translateX(-75px) translateY(-95px) rotate(15deg); }
  max-width: 100%;
  35% { -webkit-transform: translateX(-60px) translateY(-90px) rotate(20deg); }
  55% { -webkit-transform: translateX(-80px) translateY(-85px) rotate(15deg) ; }
  75% { -webkit-transform: translateX(-85px) translateY(-85px) rotate(20deg) ; }
  90% { -webkit-transform: translateX(-75x) translateY(-95px) rotate(15deg); }
  100% { -webkit-transform: translateX(-90px) translateY(-90px) rotate(20deg); }
}
}
@keyframes its-alive {
.w-400,
  0% { transform: translateX(-90px) translateY(-90px) rotate(20deg); }
.w-small {
  10% { transform: translateX(-75px) translateY(-95px) rotate(15deg); }
  width: 400px !important;
  35% { transform: translateX(-60px) translateY(-90px) rotate(20deg); }
  max-width: 100%;
  55% { transform: translateX(-80px) translateY(-85px) rotate(15deg) ; }
}
  75% { transform: translateX(-85px) translateY(-85px) rotate(20deg) ; }
.w-500 {
  90% { transform: translateX(-75x) translateY(-95px) rotate(15deg); }
  width: 500px !important;
  100% { transform: translateX(-90px) translateY(-90px) rotate(20deg); }
  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;
}
}


/* Safari */
.auto-center {
@-webkit-keyframes its-alive-ray {
  margin-left: auto !important;
  0% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-10deg); }
  margin-right: auto !important;
  10% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-15deg); }
}
  35% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-20deg); }
.auto-center.auto-margin {
  55% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-15deg) ; }
  margin-left: 0 auto 1em auto !important;
  75% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-20deg) ; }
}
  90% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-15deg); }
.text-center {
  100% { -webkit-transform: translateX(-50%) translateY(-50%) rotate(-10deg); }
  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;
}
}


@keyframes its-alive-ray {
.float-left {
  0% { transform: translateX(-50%) translateY(-50%) rotate(-10deg); }
    float: left !important;
  10% { transform: translateX(-50%) translateY(-50%) rotate(-15deg); }
}
  35% { transform: translateX(-50%) translateY(-50%) rotate(20deg); }
.float-left.auto-margin {
  55% { transform: translateX(-50%) translateY(-50%) rotate(-15deg) ; }
    margin: 0 1em 1em 0 !important;
  75% { transform: translateX(-50%) translateY(-50%) rotate(-20deg) ; }
}
  90% { transform: translateX(-50%) translateY(-50%) rotate(-15deg); }
.float-right {
  100% { transform: translateX(-50%) translateY(-50%) rotate(-10deg); }
    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;
}
}
@-webkit-keyframes shade-off {
 
  0% {
.OB-panel {
     opacity: 0;
    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;
  100% {
    border-radius: 3px;
     opacity: 0.8;
     padding: 0.2em;
  }
}
}
@keyframes shade-off {
 
  0% {
/*** tables ***/
    opacity: 0;
 
  }
/** fix pour les fiche de char**/
  100% {
table.fiche-char td:nth-child(2n+1) {
     opacity: 0.8;
     white-space: nowrap;
  }
}
}


@-webkit-keyframes spin {
/** Table custom standard **/
  0% { -webkit-transform: rotate(0deg); }
table.OB-data-table {
  100% { -webkit-transform: rotate(360deg); }
    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;
}
}
@keyframes spin {
table.OB-data-table > tr > th,
  0% { transform: rotate(0deg); }
table.OB-data-table > * > tr > th {
  100% { transform: rotate(360deg); }
    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;
}
}


.scs-list {
/** Ancien stile 'wikitable' **/
text-align: left;
table.simple {
color: #ffffffd1;
    background-color: #f8f9fa;
text-shadow: none;
    color: #222;
padding-top: 10px;
    margin: 1em 0;
pointer-events: all;
    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;
}
}
.scs-pane {
 
padding: 1px 10px 3px;
body.OB.theme.theme-jdr-imperium-maledictum table.wikitable {
width: 100%;
position: relative;
position: relative;
height: 100%;
    background-image: url("/images/8/89/Imperium-maledictum-panel-bg.jpg") !important;
box-sizing: border-box;
    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 {
.scs-pane::after {
content: '';
position: absolute;
position: absolute;
content: '';
top: 0;
top: 0;
left: 0;
left: 0;
width: 100%;
width: 42px;
height: 100%;
height: 100%;
z-index: 10;
background-image: url("/images/4/40/Imperium-maledictum-panel-corner-top.png"), url("/images/b/ba/Imperium-maledictum-panel-corner-bottom.png");
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
background-position: left top, left bottom;
transition: 1s all ease-in-out;
background-repeat: no-repeat, no-repeat;
box-shadow: inset 0 0 1px 1px #a2a9b1;
animation: clipMe 10s linear infinite;
pointer-events: none;
pointer-events: none;
border-radius: 5px;
opacity: 0.6;
}
}
.scs-pane::before{
body.OB.theme.theme-jdr-imperium-maledictum table.wikitable:not(.citation)::after {
content: '';
position: absolute;
position: absolute;
content: '';
top: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
width: 42px;
height: 100%;
height: calc(100% + 1px);
z-index: 10;
background-image: url("/images/4/40/Imperium-maledictum-panel-corner-top.png"), url("/images/b/ba/Imperium-maledictum-panel-corner-bottom.png");
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
background-position: left top, left bottom;
transition: 1s all ease-in-out;
background-repeat: no-repeat, no-repeat;
box-shadow: inset 0 0 1px 1px #a2a9b1;
transform: scaleX(-1);
animation: clipMe 10s linear infinite;
pointer-events: none;
pointer-events: none;
border-radius: 5px;
opacity: 0.6;
scale: -1 -1;
}
}
*/
 
.scs-pane ul {
/** Modèles: **/
margin: 0;
 
.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;
}
}
.scs-pane li[data-mw-revid] {
.parchemin-ob.titled .parchemin-ob-title a.external {
background: none !important;
    background-position-x: calc(100% - 10px);
max-width: 300px;
box-sizing: border-box;
text-overflow: ellipsis;
font-size: 0;
line-height: 0;
margin: 11px 0;
list-style-image: none;
text-align: center;
}
}
.scs-pane li[data-mw-revid]:nth-child(6) ~ * {
.parchemin-ob-title a:hover {
display: none;
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;
}
}
.scs-pane li[data-mw-revid] a {
.parchemin-ob-page-bg {
text-overflow: ellipsis;
margin: 8px;
max-width: 300px;
border-radius: 5px;
box-sizing: border-box;
position: absolute;
top: 0;
height: calc(100% - 16px);
width: calc(100% - 16px);
z-index: 1;
overflow: hidden;
overflow: hidden;
font-size: 14px;
line-height: 16px;
padding: 0 0.2em 0.2em 0.2em;
margin: 0;
background: none !important;
display: block;
font-weight: normal;
color: white;
white-space: nowrap;
}
}
.scs-pane li[data-mw-revid] a:hover {
.parchemin-ob.titled .parchemin-ob-page-bg {
text-shadow: 0 0 2px #ff6130 !important;
top: 40px;
text-decoration: none;
height: calc(100% - 56px);
background: #0005 !important;
}
}
.scs-pane li[data-mw-revid] > a:first-child,
.parchemin-ob-page-bg::before {
.scs-pane li[data-mw-revid] > a:first-child * {
content: '';
pointer-events: none;
position: absolute;
text-shadow: 0 0 5px black !important;
top: 6px;
font-weight: normal;
right: 6px;
color: #ffffff80 !important;
height: calc(100% - 6px);
font-size: 12px;
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;
}
}
.scs-pane li[data-mw-revid] > :not(a.mw-newpages-pagename):not(a:first-child) {
.parchemin-ob-page-bg::after {
display: none;
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;
}
}


.animation-root:not(:hover) .scs-pane::before,
.parchemin-ob-content {
.animation-root:not(:hover) .scs-pane::after {
    margin: 14px 14px 8px 14px;
animation-play-state: paused !important;
    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[href].new:hover,
.mw-body-content .parchemin-ob-content a[href].new {
text-decoration: none !important;
text-shadow: none;
color: #cc2200 !important;
}
.parchemin-ob-content a[href].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;
}
}


@-webkit-keyframes clipMe {
.parchemin-ob-content .parchemin-ob-corner {
  0%, 100% {clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px); }
position: absolute;
  25% {clip-path: polygon(calc(100% - 2px) 0, 100% 0, 100% 100%, calc(100% - 2px) 100%); }
font-size: 0;
  50% {clip-path: polygon(0 calc(100% - 2px), 100% calc(100% - 2px), 100% 100%, 0 100%); }
color: transparent;
  75% {clip-path: polygon(0 0, 2px 0, 2px 100%, 0 100%); }
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);
}
}
@keyframes clipMe {
.parchemin-ob.inlight .parchemin-ob-content .parchemin-ob-corner {
  0%, 100% {clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px); }
    background: linear-gradient(45deg, #e4e0d5 30%, #544937);
  25% {clip-path: polygon(calc(100% - 2px) 0, 100% 0, 100% 100%, calc(100% - 2px) 100%); }
  50% {clip-path: polygon(0 calc(100% - 2px), 100% calc(100% - 2px), 100% 100%, 0 100%); }
  75% {clip-path: polygon(0 0, 2px 0, 2px 100%, 0 100%); }
}
}


.annonces ul li::before {
body.OB .mw-parser-output > ul:last-of-type {
content: '◈';
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;
color: #2d7a84;
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;
position: absolute;
transform: translateX(-18px);
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;
}
}
.tome-wrapper::before {
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;
position: absolute;
top: 31%;
left: 0 !important;
left: 23px;
top: 0 !important;
height: 70%;
transform: none !important;
width: 200px;
width: 100%;
content: '';
height: 100%;
background: radial-gradient(black, transparent 70%);
transform: translateX(-50%);
}
}
.book {
.portrait-scifi-avatar > :last-child img {
perspective-origin: center -20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    transition: 0.3s all ease-in-out;
}
}
.book .page-content * {
.portrait-scifi-entry:hover .portrait-scifi-avatar > :last-child img {
font-family: 'Grenze Gotisch', cursive;
    transform: scale(1.05);
font-size: 15.5px !important;
line-height: 1;
}
}
.book .page-content * a[title] {
body.OB .portrait-scifi-avatar > .image {
position: relative;
font-weight: inherit;
text-decoration: none;
text-shadow: 0 0 10px white;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
color: #1e1714cf !important;
font-size: 15.5px !important;
line-height: 17px !important;
overflow: hidden;
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;
}
}
.novum-majoris-page a[title]::before {
 
content: '\2022 ';
body.OB .portrait-scifi-entry > .portrait-scifi-name {
font-size: 22px;
font-family: 'Iceland';
font-size: 16px;
letter-spacing: -0.5px;
}
}
.book .page-content * a[title]:hover::after {
body.OB .portrait-scifi-name::after {
content: '';
content: '';
display: block;
background: radial-gradient(closest-side, #ffffff3d, transparent);
position: absolute;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
height: 200%;
width: calc(100% + 50px);
z-index: -1;
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;
}
}
.book .coverDesign.cover_deco > :first-child {
body.OB .portrait-scifi-logo img {
font-family: 'Grenze Gotisch', cursive;
background: radial-gradient(#000000ba, transparent 80%);
font-size: 22px;
}
}
.jdr-dice {
body.OB .portrait-scifi-entry > a {
position: absolute;
position: absolute;
top: 560px;
top: 0;
left: 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;
z-index: 10;
transform: translateX(-35px);
top: 0;
perspective: 2000px;
background: none !important;
perspective-origin: 100px -500px;
right: 0;
transform: translateY(-9px) translateX(19px);
opacity: 0.9;
}
}
.jdr-dice:hover::after {
body.OB .perso-card.necron .perso-card-title {
content: 'Jeux de Rôle';
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;
position: absolute;
bottom: 0;
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%;
left: 50%;
z-index: 2;
transform: translateX(-50%);
white-space: nowrap;
z-index: 0;
font-size: 11px;
width: 100%;
text-align: center;
display: flex;
font-family: sans-serif;
justify-content: center;
font-style: italic;
height: 100%;
text-transform: uppercase;
overflow: clip;
letter-spacing: 2px;
transform: translateY(64%) translateX(-43%) rotateY(25deg) translateY(-82px);
transform-origin: center top;
text-shadow: 0 0 2px #30e2ff,0 0 3px #30e2ff,0 0 5px #30e2ff !important;
color: #fff;
}
}
.themes-link a {
body.OB .perso-card.necron .bg-title:last-child {
text-align: center;
transform: translateX(-50%) translateY(-9px);
background: #bed1d32e;
border-radius: 5px;
margin: 10px;
text-shadow: 0 0 1px #a6a6a6;
display: block;
display: block;
text-decoration: none;
z-index: 1;
}
}
.themes-link a:hover {
body.OB .perso-card.necron .perso-card-title .label {
background: #bed1d373;
font-size: 16px;
color: white;
color: #ffffff78 !important;
text-shadow: 0 0 5px #ffffff2e !important;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-40%);
z-index: 50;
}
}
.news-flag > * {
body.OB .perso-card.necron .perso-card-description {
border-radius: 5px;
box-sizing: border-box;
padding: 2px 20px 2px 10px;
padding: 0.5em 0.5em 1em 0.5em;
text-align: center;
min-width: 110px;
display: inline-block;
margin-top: 20px;
break-after: right;
font-weight: bold;
background: #bed1d33d;
color: #000;
text-shadow: none;
position: relative;
position: relative;
transform: translateX(-12px);
width: 220px;
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
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;
}
}
.deco-metal-left {
body.OB .perso-card.necron .perso-card .portrait-scifi-entry{
position: absolute;
scale: 0.95;
top: 24px;
left: 0;
width: 26px;
height: 92px;
z-index: 100;
border-radius: 0 50% 50% 0;
box-shadow: 1px 1px 10px black, inset 1px 1px #ffffff3d,inset 0 0 8px black;
background: linear-gradient(135deg, #717978a0, #414444a0, #575b5ba0, #232625a0, #3c4240a0, #1f2322a0) #2f2d2d !important;
transform: translateX(-1px);
}
}
.novum-majoris-page, .novum-majoris-page :not(a) {
body.OB .perso-card.necron .perso-card .portrait-scifi-entry:hover {
margin: 0;
scale: 1;
display: flex;
flex-direction: column;
}
}
.novum-majoris-page a::before {
body.OB .perso-card.necron .perso-card:hover .perso-card-description,
content: '◈ ';
body.OB .perso-card.necron .perso-card:hover .perso-card-description a {
color: #ffffffb0 !important;
}
}
.center-pane > * {
body.OB .perso-card.necron .perso-card .status {
pointer-events: all;
color: #a8a19a;
}
}


/** Holo Disk **/
body.OB .custom-table-header {
 
display: flex;
.holo-disk-wrapper {
justify-content: space-between;
    display: table;
padding: 0.5em 1.5em;
    position: relative;
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;
}
}
.holo-pane {
body.OB .custom-table > div {
height: 300px;
width: 200px;
display: flex;
display: flex;
position: relative;
justify-content: space-between;
z-index: 10;
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;
}
}
.holo-pane > :first-child {
 
height: 100% !important;
body.OB .responsive-flex {
background-color: transparent !important;
display: flex;
position: absolute !important;
flex-direction: row;
top: 30px;
max-width: 100%;
width: 100%;
}
}
.holo-pane > :first-child > :first-child {
 
background: linear-gradient(90deg, transparent, #77fdfe8f, transparent);
body.OB .responsive-flex > * {
color: black !important;
flex: 1;
box-shadow: 0 12px 12px -8px #3ff;
}
}
.holo-seals {
body.OB .responsive-flex.spacing > * {
position: absolute;
padding: 0 1em;
right: 10px;
top: 85%;
height: unset !important;
background: radial-gradient(black, transparent 70%);
}
}
.holo-pane-body {
 
height: 100%;
 
body.OB .sheet-wrapper {
position: relative;
position: relative;
z-index: 2;
clear: both;
left: 50%;
}
transform: translateX(-50%);
 
 
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;
box-sizing: border-box;
width: 100%;
display: flex;
padding: 80px 20px 0 20px;
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;
}
}
.holo-pane-body a {
body.OB .sheet-wrapper h2 > :last-child,
background: none !important;
body.OB .sheet-wrapper h3 > :last-child,
padding: 0 !important;
body.OB .sheet-wrapper h4 > :last-child,
body.OB .sheet-wrapper h5 > :last-child {
flex: 1;
display: block;
display: block;
}
}
.holo-pane-body a.external:hover {
body.OB .sheet-content {
color: #ffffffc4 !important;
min-height: 220px;
text-shadow: 0 0 3px #ff6130, 0 0 5px #ff6130 !important;
display: flex;
text-decoration: none;
}
body.OB .sheet-image {
min-width: 89px;
}
}
.partenaire {
body.OB .sheet-desc {
position: relative;
position: relative;
}
margin-top: 45px;
:hover > .partenaire-desc {
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;
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;
}
}
.partenaire:hover::before {
body.OB .sheet-desc::before {
z-index: 10;
content: '';
}
/*
.partenaire::before {
content: 'i';
text-transform: full-width;
font-style: normal;
position: absolute;
position: absolute;
bottom: 0;
left: 0;
left: 0;
background: #0e4949;
width: 150%;
width: 20px;
height: 250%;
height: 20px;
border-radius: 50%;
border-radius: 50%;
color: black;
background: radial-gradient(#00000085, #00000087, #35353573, transparent 50%);
z-index: 0;
transform: translateX(-50%) translateY(50%);
font-weight: bold;
pointer-events: none;
line-height: 20px;
z-index: -1;
box-shadow: 0 0 2px black;
top: 50%;
transform: translateY(-50%);
}
}
*/
body.OB .sheet-desc::after {
.partenaire-desc {
content: '';
display: none;
top: 0;
right: 0;
width: 250%;
height: 100%;
transform: translateX(50%) translateY(-50%);
pointer-events: none;
background: radial-gradient(#acacac21, transparent 50%);
position: absolute;
position: absolute;
right: 85%;
z-index: -1;
text-transform: none;
}
width: 300px;
 
background: #000000f0;
 
padding: 20px 30px 20px 20px;
.carriere-pane-content {
top: 50%;
background: linear-gradient(135deg, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248) !important;
transform: translateY(-50%);
margin: 1.5em;
border-radius: 15px;
position: relative;
box-shadow: inset 1px 1px #ffffff20, inset -1px -1px #ffffff10, 0 0 5px #000;
overflow: clip;
text-align: justify;
box-sizing: border-box;
font-style: normal;
min-width: 200px;
color: #868686;
display: flex;
z-index: 2;
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;
}
}
.partenaire-desc b {
.carriere-pane-label {
color: #30818b;
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;
}
}
.partenaire-desc::after {
.carriere-pane-infos {
content: '';
position: absolute;
position: absolute;
right: 13px;
top: 0;
top: 0;
height: 100%;
left: 15px;
background: red;
width: calc(100% - 30px);
width: 1px;
pointer-events: none;
background: linear-gradient(transparent, #0e4949, transparent);
}
}
.partenaire-tags * {
.carriere-pane-infos-handler {
display: flex;
display: flex;
margin: 0;
justify-content: center;
padding: 0;
background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #1c1c1c;
text-align: center;
box-shadow: inset 0 1px 0 #ffffff17, inset 0 -1px 0px #000000ad, 0 2px 10px black;
justify-content: right;
clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, calc(100% - 9px) 200%, 9px 200%, 9px 100%);
margin: 0 5px;
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;
font-style: italic;
color: #439191;
position: relative;
transform: translateY(-7px);
border-radius: 5px;
}
}
.holo-base {
.carriere-pane-infos-data a {
text-align: center;
font-style: normal;
z-index: 0;
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;
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;
}
}
.holo-base::after {
.split-image .center-pane {
content: '';
width: 50%;
position: absolute;
}
top: 60%;
.split-image .right-pane {
left: 50%;
width: 25%;
width: 140%;
transform: translateX(-30%) scale(0.8);
height: 140%;
transform-origin: left;
transform: translateX(-50%) translateY(-50%);
}
background: radial-gradient(black, transparent 70%);
.split-image .left-pane > :nth-child(1) {
z-index: -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%;
}
}
.holo-base img {
.split-image .right-pane > :nth-child(2) {
width: 160px;
width: 80%;
height: 80px;
transform: translateY(10px);
}
}


/** Message sur le panneau de droite. **/
.split-image .left-pane > :nth-child(1) img {
.accueil-side-text {
transform: translateX(0);
top: 50%;
}
right: 50%;
.split-image .left-pane > :nth-child(2) img {
transform-origin: right;
transform: translateX(-5%);
transform: translateY(-50%) translateX(50%);
}
opacity: 0.7;
.split-image .center-pane > :nth-child(1) img {
width: 100%;
transform: translateX(-25%);
display: flex;
justify-content: center;
cursor: pointer;
}
}
.accueil-side-text:hover {
.split-image .center-pane > :nth-child(2) img {
opacity: 1;
transform: translateX(-30%);
}
}
.accueil-side-text > * {
.split-image .right-pane > :nth-child(1) img {
color: white;
transform: translateX(-75%);
font-size: 60px;
transform: translateX(166px) translateY(0);
opacity: 0.7;
text-shadow: 0 0 5px black, 0 0 15px black;
text-align: center;
}
}
.accueil-side-text > * > a[href] {
.split-image .right-pane > :nth-child(2) img {
    color: white !important;
transform: translateX(-80%);
}
}




.recent-activity-cards-wrapper .news-card {
.split-image > * > :nth-child(2n+1) {
    width: 200px !important;
perspective: 1000px;
--offset-y-card: 9px !important;
perspective-origin: right center;
}
}
.recent-activity-cards-wrapper .news-card .news-content {
.split-image > * > :nth-child(2n+1) > * {
    display: none !important;
transform: rotateY(-60deg);
transform-origin: right center;
height: 100%;
width: 100%;
background: white;
position: relative;
}
}
.recent-activity-cards-wrapper .news-card .news-thumb {
.split-image > * > :nth-child(2n+1) > ::before {
    width: 100% !important;
content: '';
top: 18px !important;
position: absolute;
height: calc(100% - 27px) !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 10px black, inset 0 0 40px black;
z-index: 10;
}
}
.recent-activity-cards-wrapper .news-card.parchemin-ob .parchemin-ob-title a {
 
    color: white !important;
.split-image > * > :nth-child(2n) {
    top: 0;
perspective: 1000px;
    position: absolute;
perspective-origin: left center;
    width: 100%;
}
    white-space: nowrap;
.split-image > * > :nth-child(2n) > * {
    text-overflow: ellipsis;
transform: rotateY(30deg);
    overflow: hidden;
transform-origin: left center;
    padding: 20px 15px 0 15px !important;
height: 100%;
width: 100%;
background: black;
box-shadow: 0 40px 40px -30px #ffffff30;
}
 
.split-image > * > * {
height: 100%;
width: 100%;
}
}
.recent-activity-cards-wrapper .news-card .news-type {
.split-image > * > * > * {
    position: absolute;
height: 100%;
    top: 0;
width: 100%;
    left: 50%;
overflow: hidden;
    transform: translateX(-50%);
}
}
.recent-activity-cards-wrapper .news-card .parchemin-ob-content::before {
.split-image *, .split-image ::before {
    top: 0px !important;
transition: 1s all ease-in-out;
}
}
.recent-activity-cards-wrapper .news-card .parchemin-ob-content::after {
.split-image:hover * {
    -webkit-mask-image: none !important;
transform: none;
    mask: none !important;
box-shadow: none !important;
    top: 6px;
    height: calc(100% - 13px);
    z-index: 20 !important;
}
}
.recent-activity-cards-wrapper .news-card .parchemin-ob-content .parchemin-ob-corner {
.split-image:hover ::before {
    z-index: 25 !important;
box-shadow: inset 0 0 10px transparent, inset 0 0 40px transparent !important;
    top: var(--offset-y-card);
}
}
.recent-activity-cards-wrapper .news-card .news-summary-link {
 
    display: none !important;
/** Pour le mécanisme de sélection **/
[data-trigger] {
cursor: pointer;
user-select: none;
}
}
.recent-activity-cards-wrapper .news-card .parchemin-ob.titled .parchemin-ob-page-bg {
:not(.p-navbar) > [data-target]:not(.active) {
     top: 46px !important;
     display: none;
    height: calc(100% - 62px) !important;
}
}


/** Effets d'animation: **/


}}{{Tome
@keyframes shine {
| mode=css_only }}{{:Catégorie:Factions de Necromunda
    to {
| mode=css_only }}{{:Catégorie:Factions de l'Imperium
      background-position: 200% center;
| mode=css_only }}{{Moniteur
    }
| mode=css_only }}{{ Diaporama | id=univers-diaporama | height=450px
}
| mode=css_only }}{{Card News
@keyframes shine-alt {
| css_mode=css_only }}{{Gallery |id=news-gallery |class=no-print |width=500px |height=320px |border-radius=5px |padding=0 |background=none |box-shadow=none
    to {
| css_mode=css_only }}</includeonly><noinclude>{{Page OB}}
      background-position: -200% center;
<br><br><br><br><br><br><br>
    }
<div style="color: red; text-align: center;">Page technique de définition du CSS de la page d'Accueil</div></noinclude>
}
 
@media screen and (max-device-width: 900px) {
    #content a.image {
        animation-play-state: paused !important;
    }
}

Version actuelle datée du 31 janvier 2024 à 22:51

/** Polices d'écritures : **/
@import url("//fonts.googleapis.com/css2?family=Grenze+Gotisch&family=Iceland&family=UnifrakturCook:wght@700&display=swap");

/** Misc. layout **/
.flex-1 {
   flex: 1;
}

/** fix page menu layout **/
div#toc a {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/*************************************/
/** TODO: A TRANSFERER vers le skin **/
/*************************************/

@media print {
  .page-wrapper {
    position: relative !important;
    height: auto !important;
  }
  body .page-wrapper div#content,
  body.OB .page-wrapper div#content,
  body.OB.theme .page-wrapper div#content {
    box-shadow: none !important;
  }
  #firstHeading, #firstHeading *,
  h1, h1 *, 
  h2, h2 *, 
  h3, h3 *, 
  h4, h4 *, 
  h5, h5 *, 
  h6, h6 * {
    color: black !important;
  }
}

.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;
}

a[href].new {
    color: #dd3333;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

/** 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('/images/7/7d/LoadMechanicus.png');
	-webkit-mask-size: 100% 100%;
	mask-image: url('/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[href].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],
.preview-navigator a[title]:visited {
	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('/images/e/ea/VotannRunes.png');
	-webkit-mask-size: 100% auto;
	-webkit-mask-repeat: no-repeat repeat;
	-webkit-mask-position-x: center;
	mask-image: url('/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('/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(/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(/images/b/b0/VotannFactionSymbol.png);
	-webkit-mask-size: 100% auto;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-image: url(/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('/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(/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('/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(/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("/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("/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('/images/9/92/Symbol_libre-marchand.png');
	mask: url('/images/9/92/Symbol_libre-marchand.png');
}

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

/** Background parchemin. **/
.bg-parchemin {
	background: url('/images/0/0f/Parchemin.jpg') !important;
}
.bg-parchemin-clair,
.bg-parchemin-light,
.bg-parchemin-lightened {
	background: url('/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;
}

.OB-panel {
    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;
    padding: 0.2em;
}

/*** tables ***/

/** fix pour les fiche de char**/
table.fiche-char td:nth-child(2n+1) {
    white-space: nowrap;
}

/** 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("/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("/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("/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: 14px 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[href].new:hover,
.mw-body-content .parchemin-ob-content a[href].new {
	text-decoration: none !important;
	text-shadow: none;
	color: #cc2200 !important;
}
.parchemin-ob-content a[href].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;
    }
}