« MediaWiki:Citizen.css » : différence entre les versions

Dernière version du 6 juin 2026 à 14:27

/* La totalité du CSS placé ici s'appliquera aux utilisateurs de l'habillage Citizen. */
/* Archivum Céleste — basé sur la BI, palette céleste (or + bleu profond + teal) */

:root,
html,
body{
    --color-subtle: #745b27;
}
html.citizen-feature-custom-width-clientpref-standard {
	--sidebar-size-onleft: 0;
	--color-subtle: #745b27;
}
.citizen-page-container {
    text-align: justify;
}
#mw-searchoptions label.oo-ui-labelElement-label {
    white-space: nowrap;
    overflow: hidden;
    max-width: 200px;
    text-overflow: ellipsis;
    display: block;
}
input, select, textarea {
    background: white;
    border: 1px solid grey;
    border-radius: 3px;
}
input[name="wpUpload"] {
    color: #dbdeea;
    background-color: var(--background-color-progressive,#36c);
    border-color: var(--background-color-progressive,#36c);
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    min-height: 2.25rem;
    padding-inline: var(--space-md);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-hover);
    transition-property: opacity;
    font-size: inherit;
}
input[name="wpUpload"]:hover {
    background-color: var(--color-progressive--hover, #4b77d6);
    border-color: var(--color-progressive--hover, #4b77d6);
}

.citizen-header__logo img.mw-logo-icon {
    width: 42px;
    height: 42px;
}
html {
  scroll-padding-top: 80px !important;
}
.citizen-body-container {
    min-height: 60vh;
}
.ext-WikiEditor-realtimepreview-preview {
    background: #f4f2ea;
}
/** Ajustement auto des images **/
figure[typeof="mw:File"] > a img,
figure[typeof="mw:File/Thumb"] > a img {
    max-width: 100%;
    height: auto;
}

/** Composants custom **/
.react-zoom {
	transition: 0.3s all ease-in-out;
	position: relative;
	z-index: 0;
}
.react-zoom:hover {
	transform: scale(1.05);
	z-index: 1;
}
.citizen-drawer__header {
    background: #20273312;
}
header.mw-header.citizen-header {
    background: radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,0.5) 100%) #4f586e;
    --color-base: #adbedf;
    color: var(--color-base);
    --color-base: #dbdeea;
    color: #dbdeea;
}

#skin-client-prefs-skin-theme form { 
   grid-template-columns: repeat(2,1fr);
}
div#skin-client-prefs-skin-theme,
#skin-client-prefs-citizen-feature-pure-black {
    display: none;
}

div#citizen-drawer__card {
    --color-1: #ffffff;
    --color-2: #dad2c0;
    --color-3: #aa8a58;
    --color-4: #ffa754;
    --color-5: black;
    background: linear-gradient(0deg,var(--color-1),var(--color-1),var(--color-2));
    box-shadow: var(--color-3) 0px 0px 2px inset,var(--color-1) 0px 0px 15px inset,var(--color-1) 0px 0px 15px inset,var(--color-3) 0px 0px 70px -20px inset,var(--color-5) 0px 5px 15px -10px !important;
}

.citizen-siteStats {
    color: #012a40;
}
.citizen-menu .mw-list-item a {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    min-height: 2.25rem;
    padding-inline: var(--space-md);
    font-weight: var(--font-weight-medium);
    color: #302608;
    transition: var(--transition-hover);
    transition-property: opacity;
}
.citizen-menu .mw-list-item a:hover {
	background-color: white;
	color: black;
}
#citizen-drawer__card .citizen-menu .mw-list-item a .citizen-ui-icon {
    display: none;
}

.citizen-client-prefs-radio__label {
    border-color: transparent;
    color: #012a40;
}

.citizen-client-prefs-radio__input:checked ~ .citizen-client-prefs-radio__label {
    border-color: inherit;
    color: var(--color-base);
    background: var(--color-progressive);
}

.citizen-header__logo .citizen-header__button {
    color: transparent;
    border-radius: 50%;
    --color-1: #948769;
    --color-2: #000000;
    --color-4: #6e421a;
    --color-3: white;
    --color-5: black;
    background: linear-gradient(0deg,var(--color-1),var(--color-1),var(--color-2));
    box-shadow: var(--color-3) 0px 0px 2px inset,var(--color-1) 0px 0px 15px inset,var(--color-1) 0px 0px 15px inset,var(--color-3) 0px 0px 70px -20px inset,var(--color-5) 0px 5px 15px -10px !important;
    width: calc(var(--header-button-size) + 2px);
    height: calc(var(--header-button-size) + 2px);
}
.citizen-header__logo .citizen-header__button:hover {
    color: var(--color-base);
    color: black;
}
@media screen and (min-width: 640px) {
    .citizen-drawer__logo img {
        display: none;
    }
}


div#citizen-preferences__card,
div#citizen-userMenu__card {
    --color-1: #e8e5df;
    --color-2: #dad2c0;
    --color-3: #aa8a58;
    --color-4: #ffa754;
    --color-5: black;
    background: linear-gradient(0deg, var(--color-1), var(--color-1), var(--color-2));
    box-shadow: var(--color-3) 0px 0px 2px inset, var(--color-1) 0px 0px 15px inset, var(--color-1) 0px 0px 15px inset, var(--color-3) 0px 0px 70px -20px inset, var(--color-5) 0px 5px 15px -10px !important;
}

.citizen-userInfo-usergroups a ,
.citizen-userInfo-stats-item-value {
    color: #012a40;
}
.citizen-userInfo #pt-userpage-2 > a > span {
    font-family: 'Spectral SC',serif;
    font-weight: normal;
    color: var(--color-progressive);
}

:root {
	--background-color-base: #e8e1d2;
	--color-surface-0: #e8e1d2;
	--transform-image-hover: 1;
	
    --delta-lightness-state-base: 4%;
    --delta-lightness-surface-base: -2%;
	
--color-progressive-oklch__l: 46.12%;
--color-progressive-oklch__c: 0.0377;
--color-progressive-oklch__h: 267.50;
	
    --color-surface-0-oklch__l: 96%;
    --color-surface-0-oklch__c: 0.01;
	
    --color-emphasized-oklch__l: 5%;
    --color-emphasized-oklch__c: 0.07000000000000001;
	
    --color-base-oklch__l: 20%;
    --color-base-oklch__c: 0.09;
	
    --color-subtle-oklch__l: 35%;
    --color-subtle-oklch__c: 0.11;
	
    --color-placeholder-oklch__l: 40%;
    --color-placeholder-oklch__c: 0.07000000000000001;
	
    --color-disabled-oklch__l: 60%;
    --color-disabled-oklch__c: 0.05;
    --color-inverted-primary: #fff;
	
    --color-destructive__h: 340;
    --color-destructive__l: 40%;
    --color-success__h: 170;
    --color-success__l: 17%;
    --color-warning__h: 48;
    --color-warning__l: 40%;
	
    --background-color-subtle__s: 95%;
    --background-color-subtle__l: 95%;
	
    --background-color-icon: rgba(0,0,0,var(--opacity-icon-base));
    --background-color-icon--hover: rgba(0,0,0,var(--opacity-icon-base--hover));
    --background-color-icon--active: rgba(0,0,0,var(--opacity-icon-base--active));
	
    --color-link: var(--color-progressive);
    --color-link--hover: var(--color-progressive--hover);
    --color-link--active: var(--color-progressive--active);
	
    --color-syntax-red: #e53935;
    --color-syntax-orange: #f76d47;
    --color-syntax-yellow: #e2931d;
    --color-syntax-green: #91b859;
    --color-syntax-cyan: #39adb5;
    --color-syntax-blue: #6182b8;
    --color-syntax-paleblue: #8796b0;
    --color-syntax-purple: #9c3eda;
    --color-syntax-brown: #916b53;
    --color-syntax-pink: #ff5370;
    --color-syntax-violet: #945eb8;
    --color-syntax-grey: #90a4ae;
	
    --backdrop-filter-frosted-glass: blur(16px) saturate(140%);
    --backdrop-opacity: 0.65;
	
    --filter-invert: none;
    --filter-invert-primary: invert(1) hue-rotate(180deg);
	
    --opacity-glass: 0.9;
	
    --font-grade: 25;
	
    --shadow-color-oklch__l: 12%;
    --shadow-color-oklch__c: 0.01;
    --shadow-color-hsl__s: 10%;
    --shadow-color-hsl__l: 20%;
    --shadow-opacity: 0.03;
	
    color-scheme: light;
    --color-progressive-hsl__h: 220;
    --color-progressive-hsl__s: 60%;
    --color-progressive-hsl__l: 50%;
	
    --color-surface-0-hsl__s: 30%;
    --color-surface-0-hsl__l: 96%;
    --color-surface-1-hsl__s: 40%;
	
    --color-emphasized-hsl__s: 85%;
    --color-emphasized-hsl__l: 5%;
	
    --color-base-hsl__s: 30%;
    --color-base-hsl__l: 20%;
	
    --color-subtle-hsl__s: 40%;
    --color-subtle-hsl__l: 35%;
	
    --color-placeholder-hsl__s: 85%;
    --color-placeholder-hsl__l: 40%;
	
    --color-disabled-hsl__s: 85%;
    --color-disabled-hsl__l: 60%;
	
    --border-radius-medium: calc(var(--border-radius-base) * 2);
    --border-radius-large: calc(var(--border-radius-base) * 3);
	
    --box-shadow-border: var(--border-color-base) 0 0 0 1px;
	
    --filter-invert-fixed: invert(1) hue-rotate(180deg);
	
    --font-family-citizen-base: 'Roboto','Roboto-fallback';
    --font-family-citizen-serif: 'Roboto Serif','Roboto Serif-fallback';
    --font-family-citizen-monospace: 'Roboto Mono','Roboto Mono-fallback';
    --font-family-language-base: '';
    --font-family-language-serif: '';
    --font-family-language-monospace: '';
    --size-icon: 1.25rem;
    --toolbar-size: 2.5rem;
    --height-sticky-header: 0px;
    --header-size: 3.5rem;
    --header-card-maxheight: 80vh;
    --overflow-gradient-size: 2rem;
    --width-layout: 1080px;
    --width-layout--extended: calc(var(--width-layout) * 1.5);
    --width-layout--extended-alt: calc(var(--width-layout) * 1);
    --width-toc: 240px;
    --width-page: 1080px;
    --padding-page: 16px;
	
	
    --border-width-base: 1px;
    --border-width-thick: 2px;
    --border-radius-base: 4px;
    --border-radius-sharp: 0;
    --border-radius-pill: 9999px;
    --border-radius-circle: 50%;
	
    --box-shadow-small: 0 0 0 1px var(--border-color-base);
    --box-shadow-medium: 0 0.5px 0.6px var(--box-shadow-color-alpha-base),0 1.6px 1.8px -0.8px var(--box-shadow-color-alpha-base),0 4px 4.5px -1.7px var(--box-shadow-color-alpha-base),0 9.8px 11px -2.5px var(--box-shadow-color-alpha-base);
    --box-shadow-large: 0 0.5px 0.6px var(--box-shadow-color-alpha-base),0 2.8px 3.1px -0.4px var(--box-shadow-color-alpha-base),0 5.3px 6px -0.7px var(--box-shadow-color-alpha-base),0 8.7px 9.8px -1.1px var(--box-shadow-color-alpha-base),0 13.9px 15.6px -1.4px var(--box-shadow-color-alpha-base),0 21.8px 24.5px -1.8px var(--box-shadow-color-alpha-base);
	
    --font-family-base: var(--font-family-citizen-base),var(--font-family-language-base),system-ui,-apple-system,sans-serif;
    --font-family-serif: var(--font-family-citizen-serif),var(--font-family-language-serif),'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
    --font-family-monospace: var(--font-family-citizen-monospace),var(--font-family-language-monospace),'Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
    --font-weight-normal: 400;
    --font-weight-medium: calc(var(--font-weight-normal) + 100);
    --font-weight-semi-bold: calc(var(--font-weight-normal) + 200);
    --font-weight-bold: calc(var(--font-weight-normal) + 300);
    --font-family-overline: var(--font-family-base);
    --font-weight-overline: var(--font-weight-medium);
    --font-size-overline: var(--font-size-small);
    --line-height-overline: var(--line-height-small);
    --text-transform-overline: none;
    --letter-spacing-overline: normal;
	
    --color-primary__h: var(--color-progressive-hsl__h);
    --color-primary__s: var(--color-progressive-hsl__s);
    --color-primary__l: var(--color-progressive-hsl__l);
	
	/* override Archivum Céleste : direction céleste (or + bleu profond + teal) */
	
	--color-link: #30818b !important;
    --color-link--hover: #005173;
    --color-link--active: #005173;
    
	--color-visited: #30818b !important;
    --color-visited--hover: #005173;
    --color-visited--active: #005173;

--color-progressive-oklch__l: 46.12%;
--color-progressive-oklch__c: 0.0377;
--color-progressive-oklch__h: 267.50;

	--color-destructive__h: 340;
    --color-destructive__l: 20%;
	
	--color-subtle-oklch__l: 38%;
    --color-subtle-oklch__c: 0.32;
    
    --background-color-button-quiet--hover: rgb(0 80 115 / 47%);
    --background-color-button-quiet--active: rgb(0 80 115 / 29%);
}
input {
    --background-color-base: white;
}

.skin-citizen .mw-ui-container {
    background: var(--color-surface-3);
}

.citizen-menu__heading {
    font-family: 'Spectral SC',serif;
    font-weight: normal;
    color: #1a1a1a;
}

.citizen-drawer__siteinfo {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-xxs);
}

.mw-logo-wordmark {
    font-family: 'Spectral SC',serif;
    font-weight: normal;
    color: #91763c;
    letter-spacing: -0.5px;
}

.citizen-footer__sitetitle {
    display: flex;
    flex-direction: row;
    gap: var(--space-sm);
    align-items: center;
}

.citizen-footer__sitetitle .mw-logo-wordmark {
    font-size: var(--font-size-xxx-large);
    color: var(--color-progressive);
}

@media screen and (min-width: 640px) {
.mw-logo-wordmark {
    font-size: 1.35rem;
}
}

footer.mw-footer.citizen-footer {
    --color-1: #e8e5df;
    --color-2: #dad2c0;
    --color-3: #aa8a58;
    --color-4: #ffa754;
    --color-5: black;
    background: linear-gradient(0deg, var(--color-1), var(--color-1), var(--color-2));
    box-shadow: var(--color-3) 0px 0px 2px inset, var(--color-1) 0px 0px 15px inset, var(--color-1) 0px 0px 15px inset, var(--color-3) 0px 0px 70px -20px inset, var(--color-5) 0px 5px 15px -10px !important;
}

.citizen-footer__content, 
.citizen-footer__bottom {
    gap: 0 var(--space-xxl);
}
#footer-places ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
nav#footer-places ul a {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 1120px) {
	body.citizen-toc-enabled .citizen-page-heading {
	    flex-grow: 1;
	    padding-left: 40px;
	}
	body.citizen-toc-enabled .citizen-body-container {
        --page-inner-margin: 35px;
        grid-template-areas: 'content sidebar' 'footer footer';
        grid-template-columns: minmax(0, calc(var(--width-layout) - var(--page-inner-margin))) var(--width-toc);
	}
	body.citizen-toc-enabled .citizen-body-container div#bodyContent {
	    padding-left: 25px;
	}
	body.citizen-toc-enabled .page-actions {
	    padding-right: 50px;
	}
	:root.citizen-header-position-left {
	    --header-size-inline-start: var(--sidebar-size-onleft);
	}
	.citizen-page-container {
	    padding-left: var(--sidebar-size-onleft);
	}
	.citizen-page-sidebar {
	    padding-right: 22px;
	}
	.citizen-page-container {
	    position: relative;
	    --bg-color: #0d476529;
	    background-position: center top,left top,right top;
	    background-repeat: no-repeat,no-repeat,no-repeat;
	    background-attachment: fixed,fixed,fixed;
	    background: linear-gradient(90deg,#00263c00,var(--bg-color) 20%,var(--bg-color) 80%,#e8e1d200);
	}
	.citizen-page-container > * {
	    z-index: 2;
	}
	html.citizen-feature-custom-width-clientpref-standard {
		--sidebar-size-onleft: 74px;
	}
	html {
		--sidebar-size-onleft: 74px;
	}
	html.citizen-feature-custom-width-clientpref-standard .citizen-page-container::after {
	    content: '';
	    --content-margin: calc(calc(95% - calc(var(--width-layout) + var(--width-toc))) / 2);
	    position: absolute;
	    inset: 0 var(--content-margin) 0 calc(var(--content-margin) + var(--sidebar-size-onleft));
	    background: var(--color-surface-0);
	    box-shadow: 0 0 12px black,0 0 30px -10px black,0 0 50px black;
	    background: url(/resources/assets/top-border.webp), linear-gradient(90deg, transparent, #f2efe8 50px, #f6f4f0 calc(100% - 50px), transparent), url(/resources/assets/deco/Border-page.jpg), url(/resources/assets/deco/Border-page-mirror.jpg) #eae9e6;
	    background-repeat: repeat no-repeat,no-repeat no-repeat,no-repeat repeat,no-repeat repeat;
	    background-position: left top,center center,-20px top,calc(100% + 20px) top;
	    background-size: auto 21px,auto auto,78px auto,78px auto;
	}
    html.citizen-feature-custom-width-clientpref-standard .citizen-page-container {
	    position: relative;
	    --bg-color: #0d476529;
	    background: linear-gradient(90deg,#00263c00,var(--bg-color) 20%,var(--bg-color) 80%,#e8e1d200)  #010106eb;
	}
	
	.citizen-page-container > footer.mw-footer.citizen-footer {
	    z-index: 1;
	}
	header.mw-header.citizen-header::after {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 100%;
	    bottom: 0;
	    width: 80px;
	    background-size: 100% auto;
	    background: url(/images/9/90/Side-corner-aos-alt.webp), url(/images/d/dd/Side-corner-aos.webp), linear-gradient(90deg, #908568, #a39578, #a49779 16px, #5d5740 16px, #2f2b1d 18px, #0000004d 16px, transparent);
	    background-size: 80px auto, 80px auto, 80px 100%;
	    background-repeat: no-repeat, no-repeat, repeat;
	    background-position: top, bottom, left;
	    box-shadow: -5px 0 5px -5px black, inset 2px 0 2px -2px black,inset 16px 0 16px -16px #ffffff;
	    pointer-events: none;
	}
	html.citizen-feature-custom-width-clientpref-standard .citizen-page-container::before {
	    --img-height: 900px;
	    content: '';
	    position: fixed;
	    height: var(--img-height);
	    top: 0;
	    left: 62px;
	    right: 0;
	    background: url(images/4/46/Side-bg-aos.webp),url(images/4/46/Side-bg-aos.webp);
	    z-index: 0;
	    background-position: -100px top,calc(100% + 130px) top;
	    background-size: auto var(--img-height),auto var(--img-height);
	    background-repeat: no-repeat,no-repeat;
	    filter: sepia(0.2);
	    -webkit-mask: linear-gradient(180deg,white,transparent 75%);
	    mask: linear-gradient(180deg,white,transparent 75%);
	}
}

.citizen-userInfo-stats-item-label {
    font-family: 'Spectral SC',serif;
    font-weight: normal;
    color: var(--color-progressive);
}
kbd.citizen-keyboard-hint-key {
    display: none;
}

.citizen-drawer__menu {
    --size-icon: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(15rem,auto));
    gap: var(--space-sm);
    justify-content: center;
    max-width: inherit;
    padding: var(--space-xs);
    background: #000000bf;
    padding: 0.7em;
    box-sizing: border-box;
    box-shadow: 0 5px 5px #00000082,inset 0 0 0 1px #ffffff1a;
    background: #806d4f2e;
    margin: 0;
}

.citizen-drawer__menu #n-Communauté a,
.citizen-drawer__menu #n-Nos-wikis a {
    pointer-events: none;
    margin-left: var(--space-xs);
    padding-left: var(--space-md);
    padding-right: var(--space-xs);
    border-left: 1px solid var(--border-color-base);
    border-radius: 0;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-normal);
    color: #002a40 !important;
}

.mw-portlet-External {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-md);
    margin-inline: calc(var(--space-xs) * -1);
    padding: var(--space-xs);
    border-top: var(--border-base);
    backdrop-filter: var(--backdrop-filter-frosted-glass);
    font-size: var(--font-size-x-small);
    grid-column: 1 / -1;
    white-space: nowrap;
}
.mw-portlet-External .citizen-menu__heading {
    display: none;
}
.mw-portlet-External ul {
    display: flex;
    overflow: auto;
}
li#n-sidebar-icon-discord a::before {
    content: "\f392";
    --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Free"));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: var(--fa-display, inline-block);
    font-family: var(--_fa-family);
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    font-weight: var(--fa-style, 900);
    line-height: 1;
    text-align: center;
    text-rendering: auto;
    --fa-family: var(--fa-family-brands);
    --fa-style: 400;
    width: var(--fa-width, 1.25em);
    color: #012a40;
	font-size: 1rem;
}
li#n-sidebar-icon-discord a * {
	display: none;
}
.citizen-siteStats {
    color: #697381;
}
li#t-upload {
    display: none;
}

.card-subtype:first-child, 
.card-subtype:not([class*="2"]) + * + [class*="2"], 
.card-subtype:not([class*="3"]) + * + [class*="3"], 
.card-subtype:not([class*="4"]) + * + [class*="4"], 
.card-subtype:not([class*="5"]) + * + [class*="5"] {
    display: block !important;
}
.card-custom {
    transition-timing-function: var(--transition-timing-function-ease-out);
    transition-duration: var(--transition-duration-medium);
    --bg-color: #001a2cf0;
    --title-spacing: 1.5rem;
    --title-size: 20px;
}
.card-custom:hover {
    transform: translate(0, -5px);
    box-shadow: 0 0 0 1px #00000012, 2px 2px 15px -3px black, 2px 10px 15px -8px black !important;
}
.card-custom > a {
    position: absolute;
    inset: 0 0 0 0;
    opacity: 0;
    user-select: none;
    z-index: 5;
}
.card-custom .image-item-wrapper * {
    position: absolute;
    inset: 0 0 0 0;
    display: block;
    height: 100%;
    width: 100%;
}
.card-custom .image-item-wrapper img {
    object-fit: cover;
}
.card-custom .card-custom-color::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, var(--bg-color) 50%);
}
.card-custom.card-coming-soon {
    filter: grayscale(0.5);
    pointer-events: none;
    user-select: none;
}
.card-custom.card-coming-soon::after {
    content: 'À venir...';
    position: absolute;
    top: 40%;
    left: 50%;
    width: 360px;
    font-family: 'Spectral SC', serif;
    color: black;
    transform: translateX(-50%) rotate(-25deg);
    transform-origin: center center;
    text-align: center;
    font-size: 1.5rem;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(170deg, #ada187 0%, #998d75 45%, #786c4b 100%);
    background-size: auto 100%;
    box-shadow: 0 0 20px -10px black, 0 1px 0 black, 0 0 10px black;
}

/** customized card (cf. Modèle:CardResultCustomerClass) **/
.card-custom[class*="faction-"] {
    width: 140px !important;
}
.card-custom[class*="faction-"] * {
    --title-spacing: 0.75rem;
    --title-size: 16px;
}
.card-custom[class*="faction-"] .card-custom-title {
    box-shadow: 0 0 1px 1px #0000006b,0 0 0 1px #00000070 !important;
    border-radius: 2px !important;
    padding: 5px !important;
    color: #f0f0f0 !important;
    background: #161515ba !important;
}

/* Couleurs spécifiques des factions AOS à compléter ici, par ex. :
.card-custom.faction-stormcast-eternals { --bg-color: #1a3a5c; }
.card-custom.faction-sylvaneth         { --bg-color: #1f3a25; }
.card-custom.faction-slaves-to-darkness{ --bg-color: #3a0d12; }
.card-custom.faction-skaven            { --bg-color: #34483b; }
.card-custom.faction-nighthaunt        { --bg-color: #0c2a2e; }
... etc.
*/

@media screen and (min-width: 1680px) {
    .ns-14 {
        --width-layout--extended: var(--width-layout--extended-alt);
    }
}
@media screen and (min-width: 1680px) {
	:root.citizen-feature-custom-width-clientpref-standard {
	    --width-layout: 1080px !important;
	}
	:root.citizen-feature-custom-width-clientpref-wide {
	    --width-layout: 1600px !important;
	}
	custom-width-clientpref-full {
	    --width-layout: 100vw !important;
	}
    .ns-14 {
        --width-layout: var(--width-layout) !important;
        --width-page: calc(var(--width-layout) + var(--width-toc) + var(--space-lg)) !important;
    }
    .ns-6, .ns-14 {
        --width-layout: var(--width-layout--extended) !important;
        --width-page: calc(var(--width-layout--extended) + var(--width-toc) + var(--space-lg)) !important;
    }
}


.accueil-welcome {
    padding: 50px 0;
}
@media screen and (max-width: 1119px) {
	.accueil-welcome {
	    padding: 40px 0 20px 0;
	}
}
.accueil-message {
    position: relative;
    border-radius: 5px;
	overflow: hidden;
}
.accueil-message::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 400px;
    background: url(/images/7/72/Ac-book.webp);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.accueil-message-content {
    position: relative;
    margin: 30px 0 30px 30%;
}
.accueil-message-content > * {
	padding: 10px 20px;
    color: #000000;
    backdrop-filter: blur(0);
    border: 1px solid grey;
    --color-1: #fefefe;
    --color-2: #ffffff;
    --color-3: #cecfd4;
    --color-4: #ffa754;
    --color-5: black;
    background: linear-gradient(0deg, var(--color-1), var(--color-1), var(--color-2));
    box-shadow: 0 5px #0000006b, 0 6px #005173, 0 7px 2px #00000070, 0 -6px #0000006b, 0 -7px #005173, 0 -8px #00000070, inset 0 0 0 1px #00000047, var(--color-3) 0px 0px 2px inset, var(--color-1) 0px 0px 15px inset, var(--color-1) 0px 0px 15px inset, var(--color-3) 0px 0px 70px -20px inset, var(--color-5) 0px 5px 15px -10px !important;
    border-radius: 10px;
    overflow: hidden;
}
@media screen and (min-width: 1120px) {
	.accueil-message-content > * {
		padding: 30px 50px;
	}
}
.accueil-message-content-sign {
    text-align: end;
    font-style: italic;
}
@media screen and (max-width: 1119px) {
	.accueil-message {
	    margin: 0 -20px;
	}
	.accueil-message-content {
	    margin: 7px 30px 100px 30px;
	}
	.accueil-message::before {
	    content: '';
	    position: absolute;
	    inset: 0 auto 0 0;
	    width: 100%;
	    background: url(/resources/assets/AC-image.png);
	    background-repeat: no-repeat;
	    background-position-y: -82px;
	    background-position-x: center;
	    border-radius: 0;
	}
	body, .citizen-page-container {
	    background: #e8e1d2 !important;
	}
}

.discord-pane:hover {
        box-shadow: 0 1px 16px -5px #001a2c !important;
}
.discord-pane-logo > a {
    border-radius: 50%;
    box-shadow: 0 4px 10px black;
    padding: 4px;
    background: #4f586e;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    z-index: 1;
    text-decoration: none;
}
.discord-pane-logo > a::before, 
.discord-pane-logo > a::after {
    display: none !important;
}
.discord-pane-top-message {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(17px);
    padding: 8px 16px;
    z-index: 5;
    border-radius: 3px;
    color: #dbdeea;
    font-family: 'Spectral SC', serif;
    font-weight: normal;
    background: #141517;
    background: url(/resources/assets/topbar-bg-grey.jpg);
    background-size: auto 100%;
    box-shadow: inset 0 5px 20px -5px black, inset 0 5px 20px -5px black;
}
.discord-pane-top-message img {
    filter: saturate(0.7) hue-rotate(-10deg) brightness(0.8) contrast(1.1);
}
@media screen and (max-width: 1119px) {
	.discord-pane-character {
	    inset: 100% 0 0 0;
	    transform: translateX(30%) !important;
	}
}

h1,
h2 {
    font-family: 'Spectral SC', serif;
    font-weight: normal;
}
.firstHeading {
    color: #745b27;
    display: flex;
    align-items: center;
    jusitfy-content: start;
}
.firstHeading-container {
    text-align: left;
}
.citizen-body-container h2 {
    border-bottom: 1px solid var(--border-color-base,#a2a9b1);
}
span.mw-page-title-namespace {
    font-family: 'Spectral SC', serif;
    text-shadow: 0 0 2px black;
    letter-spacing: -0.5px;
    margin-bottom: 0;
    color: #dce2e6;
    box-shadow: 0 0 0 1px #0000006b, 0 0 0 2px #b18a3b, 0 0 0 3px #00000070;
    padding: 0 5px;
    background: #16151582;
    font-weight: normal;
    line-height: 1.3;
    z-index: 1;
    position: relative;
    font-size: 1rem;
    border-radius: 10px;
}
.citizen-sticky-header-page-info span.mw-page-title-namespace {
    box-shadow: none;
    font-size: 1rem;
    color: #b19456;
}
span.mw-page-title-separator {
    opacity: 0;
}
#siteSub {
	display: none;
}
.mw-headline {
    text-align: start;
}
.citizen-sticky-header-background {
    background: #141517;
    background: url(/resources/assets/topbar-bg-grey.jpg);
    background-size: auto 100%;
    box-shadow: inset 0 10px 40px -10px black;
}
.citizen-sticky-header {
    --color-base: #dbdeea;
}
.citizen-sticky-header-page-title {
    color: white;
    font-family: 'Spectral SC', serif;
    font-weight: normal;
}
.citizen-page-container {
    --bg-color: #e8e1d2;
}

#ca-edit > a, #ca-ve-edit > a {
    color: #dbdeea;
    background-color: var(--background-color-progressive);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: #dbdeea;
    background-color: var(--background-color-progressive,#36c);
    border-color: var(--background-color-progressive,#36c);
}
.citizen-command-palette__footer-hints {
    display: none;
}

div#footer-tagline,
p#footer-desc {
    color: black;
}
.citizen-footer a {
    color: var(--color-link);
    text-decoration: none;
}
.citizen-footer a:hover {
    color: var(--color-link-hover);
}
.citizen-footer a:active {
    color: var(--color-link-active);
}
@media (min-width: 1120px) {
    table.wikitable[style*="float:left"],
    table.wikitable[style*="float: left"] {
        float: left !important;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    table.wikitable[style*="float:right"],
    table.wikitable[style*="float: right"] {
        float: right !important;
        margin-left: 10px;
        margin-bottom: 10px;
    }
}
.wikitable tbody tr:hover {
    background-color: transparent;
}

#footer-places {
    align-items: center;
}
li#footer-places-about {
    display: none;
}
.mw-cookiewarning-container {
    bottom: 0;
    right: 0;
    top: unset;
    margin: 0;
    border-radius: 0;
    background: #141517;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
}
@media only screen and (min-width: 1120px) {
    .citizen-header-position-left .mw-cookiewarning-container {
        left: unset;
        bottom: 0;
        right: 0;
        top: unset;
        width: min(500px, calc(100vw + calc(2 * var(--space-xs))));
    }
}
.mw-cookiewarning-container .oo-ui-layout.oo-ui-horizontalLayout {
	gap: var(--space-md);
	grid-template-columns: minmax(0,1fr);
}
.mw-cookiewarning-container .mw-cookiewarning-text {
    color: #fff !important;
	padding: 10px 0;
	color: white;
}

.citizen-menu__card {
	backdrop-filter: unset;
}

@media (min-width: 1120px) {
	.accueil-subtitle {
	    position: relative;
	}
	.accueil-subtitle::before {
	    content: '';
	    position: absolute;
	    right: calc(100% + 60px);
	    top: 50%;
	    width: 100%;
	    height: 3px;
	    background: radial-gradient(at right, black, transparent 70%);
	}
	.accueil-subtitle::after {
	    content: '';
	    position: absolute;
	    left: calc(100% + 60px);
	    top: 50%;
	    width: 100%;
	    height: 3px;
	    background: radial-gradient(at left, black, transparent 70%);
	}
}

.wikiEditor-ui-view.wikiEditor-ui-view-wikitext {
    background: white;
}

figcaption {
    margin: 4px 0 0 0 !important;
    padding: 5px 10px !important;
    font-family: var(--font-family-citizen-serif);
    font-size: var(--font-size-medium);
    color: black;
    --color-1: #ffffff;
    --color-2: #ffffff;
    --color-3: #44423e;
    --color-4: #ffa754;
    --color-5: black;
    background: linear-gradient(0deg,var(--color-1),var(--color-1),var(--color-2));
    box-shadow: inset 0 0 0 1px #00000047,var(--color-3) 0px 0px 2px inset,var(--color-1) 0px 0px 15px inset,var(--color-1) 0px 0px 15px inset,var(--color-3) 0px 0px 70px -20px inset,var(--color-5) 0px 5px 15px -10px,0 4px #005173,0 5px 2px #00000070,0 -4px #0000006b,0 -5px #005173,0 -7px #00000070;
}
div#catlinks div#mw-normal-catlinks li > a {
    background: white;
    color: black;
}
nav#footer-icons {
    display: none;
}

/** default button **/
button.btn {
    vertical-align: top;
    text-align: center;
    position: relative;
    min-height: 32px;
    text-decoration: none;
    border-style: solid;
    border-width: 1px;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-base);
    line-height: 1;
    transition-property: background-color,color,border-color,box-shadow;
    transition-duration: 100ms;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: inherit;
    background-color: var(--background-color-interactive-subtle, #f8f9fa);
    color: var(--color-base, #202122);
    border-color: var(--border-color-base, #a2a9b1);
}
button.btn:hover {
    background-color: var(--background-color-base, #fff);
    color: var(--color-base--hover, #404244);
    border-color: var(--border-color-base, #a2a9b1);
}
button.btn.btn-primary {
    color: #dbdeea;
    background-color: var(--background-color-progressive,#36c);
    border-color: var(--background-color-progressive,#36c);
}
button.btn.btn-primary:hover {
	background-color: var(--color-progressive--hover, #4b77d6);
    border-color: var(--color-progressive--hover, #4b77d6);
}

#Sources,
#Source {
    clear: both;
    display: block;
}
table.formtable input, table.formtable select, table.formtable textarea, textarea#pf_free_text {
    background: white;
    font-size: 0.85rem;
    outline: 0;
}
.runQueryEmbedded .search-inputs-wrapper, 
.runQueryEmbedded form#pfForm > .mw-content-ltr.mw-parser-output, 
.runQueryEmbedded .search-inputs-wrapper * {
    display: flex;
    align-items: center;
    margin: 0;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 10px;
}
.leaflet-container {
  background-color: #e9e5d6;
  border-radius: 5px;
}
img.map-icon-overlay.leaflet-interactive:hover {
    filter: brightness(1.2) contrast(120%);
}
.leaflet-popup {
    --x-color: #003044;
}
.leaflet-popup-content-wrapper {
    box-shadow: inset 0 0 0 4px var(--x-color),inset 0 0 0 8px black,#aa8a58 0px 0px 2px 8px inset,#e8e5df 0px 0px 15px 8px inset,#e8e5df 0px 0px 15px 8px inset,#aa8a58 0px 0px 70px -12px inset,black 0px 5px 15px -10px;
    background: #e9e5d6;
}
.leaflet-popup-tip {
    background: var(--x-color);
}
.leaflet-popup-content {
    margin: 0;
}
img.popup-image {
    float: right;
    margin: 0 0 4px 4px;
}
.leaflet-popup-content .popup-title {
    padding: 6px 10px 4px 10px;
    border-radius: 5px 5px 0 0;
    border-bottom: 0;
    box-shadow: 0 0 0 1px var(--x-color),0 11px 0 -7px #cc8a26,0 10px 10px -6px black;
    z-index: 10;
    position: relative;
    background: linear-gradient(90deg,black, var(--x-color) 20%);
}
.leaflet-popup-content .popup-title a {
    color: #dbdeea;
    font-family: 'Spectral SC', serif;
    font-weight: normal;
    font-size: 14px;
}
.leaflet-popup-content .popup-desc {
    padding: 13px 24px 13px 20px;
    font-family: var(--font-family-base);
    font-variation-settings: 'GRAD' var(--font-grade);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
    line-height: 1.4;
}
.leaflet-popup-content .popup-desc::first-letter,
.leaflet-popup-content .popup-desc span::first-letter {
    font-family: "Germania Versalien";
    font-size: 40px;
    float: left;
    margin: -9px 4px -10px 0;
}
.map-icon-overlay {
	pointer-events: auto;
}
.leaflet-zoom-animated .map-icon-overlay {
	transition: transform 0.15s linear;
}
.leaflet-container a.leaflet-popup-close-button {
    z-index: 10;
}
@font-face{
    font-family: "Germania Versalien";
    src: url("/resources/assets/fonts/germania-versalien/d36b44b6a3db50effb9a46cb68e5627c.eot");
    src: url("/resources/assets/fonts/germania-versalien/d36b44b6a3db50effb9a46cb68e5627c.eot?#iefix")format("embedded-opentype"),
        url("/resources/assets/fonts/germania-versalien/d36b44b6a3db50effb9a46cb68e5627c.woff")format("woff"),
        url("/resources/assets/fonts/germania-versalien/d36b44b6a3db50effb9a46cb68e5627c.woff2")format("woff2"),
        url("/resources/assets/fonts/germania-versalien/d36b44b6a3db50effb9a46cb68e5627c.ttf")format("truetype"),
        url("/resources/assets/fonts/germania-versalien/d36b44b6a3db50effb9a46cb68e5627c.svg#Germania Versalien")format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
span#wpRunQuery button {
    background: linear-gradient(90deg, black, #2e2e2e 20%);
    box-shadow: inset 0 0 0 4px black, 0 0 2px black, 0 0 0 4px #3d3419;
    padding: 10px 15px 10px 2.71428571em;
    outline: 0;
    border: 0;
    border-radius: 1px;
    position: relative;
    transition: all 0.3s ease-in-out;
    user-select: none;
}
span#wpRunQuery button:hover {
    background: linear-gradient(90deg, black, #003044 20%);
}
span#wpRunQuery button::after {
    content: '';
    position: absolute;
    inset: -4px 0 0 -4px;
    background: url('/resources/assets/button-corner.webp');
    background-repeat: no-repeat;
    background-size: 24px 24px;
    z-index: 100;
    pointer-events: none;
}

/* SMW – Parcourir les propriétés */
#t-smwbrowselink a::before {
	content: '';
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.5em;
	vertical-align: -0.15em;

	/* icône OOUI */
	background: currentColor;
	-webkit-mask: url("/resources/lib/ooui/themes/wikimediaui/images/icons/article-ltr.svg") no-repeat center;
	mask: url("/resources/lib/ooui/themes/wikimediaui/images/icons/article-ltr.svg") no-repeat center;
}

/* fix: remove auto <br> injection */
p > br:first-child:last-child {
    display: none;
}

/** Accueil **/
.accueil-titre {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(transparent 50%,white 75%,#ffffff42,#26242414 98%,white),radial-gradient(at center,#ffffff 0%,#ffffff 55%,#4f586e4a 100%) white;
    --content-margin: calc(calc(95% - calc(var(--width-layout) + var(--width-toc))) / 2);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-radius: 0 0 10px 10px;
}
@media screen and (min-width: 1120px) {
	.accueil-titre {
    right: var(--content-margin);
    left: calc(var(--content-margin) + var(--sidebar-size-onleft));
	}
}
.accueil-titre > :first-child {
    font-family: 'Spectral SC',serif;
    font-size: 32px;
    --shadow-color-custom: #b3854024;
    color: #005073;
    padding: 20px 10px;
    margin-bottom: 20px;
    line-height: 1.5;
    width: 100%;
    background: radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,0.5) 100%),linear-gradient(170deg,#3a5870 0%,#4f586e 45%,#4f586e 100%);
    box-shadow: 0 1px black,0 6px #b19456,0 7px black;
    overflow: hidden;
    position: relative;
}
.accueil-titre > :first-child > * {
    z-index: 10;
    position: relative;
}
.accueil-titre > :first-child::after {
    content: '';
    background: url(images/9/91/Aos-sun.webp);
    position: absolute;
    inset: 0 0 0 0;
    z-index: 0;
    background-position: center -20%;
    opacity: 0.3;
    filter: brightness(0);
}

body.page-Accueil div#mw-content-text {
    margin-top: 200px;
}
.discord-pane-link {
    filter: saturate(0.5);
}
.discord-pane-link:not(:hover) {
    filter: sepia(1) saturate(0.0);
}

/* alignement des entrées du sommaire de page */
span.citizen-toc-heading {
    text-align: start;
}

/* lien help technique mediawiki à cacher */
a.mw-helplink {
    display: none !important;
}

/* Modèle: Interwiki */
.interwiki-ref {
    --color-1: #dfe5f2;
    --color-2: #ffffff;
    --color-3: #cecfd4;
    --color-4: #ffa754;
    --color-5: black;
    background: linear-gradient(0deg, var(--color-1), var(--color-1), var(--color-2));
    box-shadow: inset 0 0 0 1px #00000047, var(--color-3) 0px 0px 2px inset, var(--color-1) 0px 0px 15px inset, var(--color-1) 0px 0px 15px inset, var(--color-3) 0px 0px 70px -20px inset, var(--color-5) 0px 5px 15px -10px !important;
    border-radius: 10px;
    overflow: hidden;
}
.interwiki-ref-title {
    padding: 5px 15px;
    color: white;
	font-family: 'Spectral SC', serif;
    font-size: 16px;
    font-weight: normal;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(170deg, #3d424f 0%, #4f586e 45%, #4f586e 100%);
    background-size: auto 100%;
    border-radius: 10px 10px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: inset 0 -1px black, 0 3px #b19456, 0 4px black;
}
.interwiki-ref-name {
    color: #cdae6e;
    font-size: 18px;
}
.interwiki-ref-content {
	padding: 15px 20px;
}
.interwiki-ref-content ul {
    margin-top: 5px;
    margin-bottom: 5px;
}
@media (min-width: 1120px) {
	.interwiki-ref.interwiki-ref-pos-right {
		float: right;
		clear: right;
		width: 500px;
		margin: 5px 0 10px 20px;
	}
	.interwiki-ref.interwiki-ref-pos-left {
		float: left;
		clear: left;
		width: 500px;
		margin: 5px 20px 10px 0;
	}
}


/* Modèle: Travaux */
.ac-pane {
    --color-1: #dfe5f2;
    --color-2: #ffffff;
    --color-3: #cecfd4;
    --color-4: #ffa754;
    --color-5: black;
    background: linear-gradient(0deg, var(--color-1), var(--color-1), var(--color-2));
    box-shadow: inset 0 0 0 1px #00000047, var(--color-3) 0px 0px 2px inset, var(--color-1) 0px 0px 15px inset, var(--color-1) 0px 0px 15px inset, var(--color-3) 0px 0px 70px -20px inset, var(--color-5) 0px 5px 15px -10px !important;
    border-radius: 10px;
    overflow: hidden;
}
.ac-pane-title {
    padding: 5px 15px;
    color: white;
	font-family: 'Spectral SC', serif;
    font-size: 16px;
    font-weight: normal;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(170deg, #3d424f 0%, #4f586e 45%, #4f586e 100%);
    background-size: auto 100%;
    border-radius: 10px 10px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: inset 0 -1px black, 0 3px #b19456, 0 4px black;
}
.ac-pane-name {
    color: #cdae6e;
    font-size: 18px;
}
.ac-pane-desc {
    border: 40px solid transparent;
    border-image-source: url(/images/1/16/Bg-sun-aos.png);
    border-image-slice: 80 80 80 80;
    border-image-width: 40px;
    border-image-outset: 5px;
    text-align: center;
}

/* Modèle: Citation AC */
.ac-citation {
    background: #ffffff;
    clear: both;
}
@media (min-width: 1120px) {
	.ac-citation.ac-citation-position-right {
	    float: right;
	    width: 500px;
	    margin: 0 0 1rem 1rem;
	}
	.ac-citation.ac-citation-position-left {
	    float: left;
	    width: 500px;
	    margin: 0 1rem 1rem 0;
	}
}
.ac-citation-title {
    padding: 5px 15px;
    color: #c6ba9b;
    font-family: 'Spectral SC',serif;
    font-size: 16px;
    font-weight: normal;
    background: radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,0.5) 100%),linear-gradient(170deg,#3d424f 0%,#4f586e 45%,#4f586e 100%);
    background-size: auto 100%;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 -1px black,0 3px #b19456,0 4px black;
    color: #dacaa1;
    text-align: center;
}
.ac-citation-body {
    border: 30px solid transparent;
    border-image-source: url(/images/1/16/Bg-sun-aos.png);
    border-image-slice: 100 100 100 100;
    border-image-width: 40px;
    border-image-outset: 5px;
}
.ac-citation-content {
    color: #505259;
    padding: 0 10px;
}
.ac-citation-sign {
    text-align: right;
    font-style: italic;
    margin-top: 8px;
    padding: 0 10px;
    color: #745b27;
}

/* Formulaire: Propriété de page */
table.formtable [name*="InfosScriptorium"] + * {
    margin: 0;
    --background-color-base: #ffffff;
}

/* Scriptorium */
.smwtable-scriptorium {
  border-collapse: collapse;
  width: 100%;
}
.smwtable-scriptorium th {
    font-weight: 400;
    color: #dbdeea;
  background-color: #4f586e;
  padding: 8px 12px;
  text-align: left;
}
.smwtable-scriptorium tr:nth-child(even) td {
  background-color: #F9F8F5;
}
.smwtable-scriptorium tr:nth-child(odd) td {
  background-color: #FFFFFF;
}
.smwtable-scriptorium td {
  padding: 6px 12px;
  border-bottom: 0.5px solid #E8E6DF;
}
.smwtable-scriptorium tr:hover td {
  background-color: #EEEDFE;
}
.smwtable-scriptorium td {
    text-align: left;
}
.smwtable-scriptorium td.smwtable-scriptorium-date {
    text-align: right;
}
.smwtable-scriptorium-status, 
.smwtable-scriptorium-user, 
.smwtable-scriptorium-sources {
    font-size: 0.8rem;
    display: flex;
    gap: 5px;
    align-items: center;
}
.smwtable-scriptorium-sources,
.smwtable-scriptorium-status {
    white-space: nowrap;
}
span.smwtable-scriptorium-user::before {
    content: '';
    --avatar-size: 25px;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    display: inline-block;
    --avatar-background: transparent;
    background: var(--avatar-background);
    background-size: cover;
}
span.smwtable-scriptorium-user.Blacklisted.Jack::before {
    --avatar-background: url(images/3/31/BJack.webp);
}
span.smwtable-scriptorium-user.Xens::before {
    --avatar-background: url(images/d/d6/Xens.webp);
}
span.smwtable-scriptorium-user.Zhaagtar::before {
    --avatar-background: url(images/7/7a/Zhaagtar.webp);
}
span.smwtable-scriptorium-user.Zhaagtar::before {
    --avatar-background: url(images/7/7a/Zhaagtar.webp);
}
span.smwtable-scriptorium-user.Nyklaus::before {
    --avatar-background: url(images/0/0e/Nyklaus.webp);
}
span.smwtable-scriptorium-user.Christer::before {
    --avatar-background: url(images/7/70/Christer.webp);
}

/* Icone du menu "Modifier propriétés" d'une page */
li#ca-pfedit a[href*="Sp%C3%A9cial:AjouterDonn%C3%A9es/D%C3%A9finition_des_propri%C3%A9t%C3%A9s_de_page"]::before {
    content: "\f70e";
    font-family: "Font Awesome 7 Free";
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-rendering: auto;
    font-size: 18px;
}

/* fix combobox with empty value */
.oo-ui-selectWidget .oo-ui-labelElement-label {
    display: block;
    min-height: 19px;
}

/* animation: rotation */
@-webkit-keyframes rotation {
    from {
        transform: rotate(0);
        transform-origin: center center;
    }

    to {
        transform: rotate(360deg);
        transform-origin: center center;
    }
}
@keyframes center-rotation {
    from {
        transform: rotate(0);
        transform-origin: center center;
    }

    to {
        transform: rotate(360deg);
        transform-origin: center center;
    }
}

/* Explorer menu - loading spinner */
body:not(.explorer-available) .citizen-header__start::before {
    position: absolute;
    content: "\f110";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    font-size: 20px;
    place-items: center;
    width: var(--header-button-size);
    height: var(--header-button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: 5s rotation infinite linear;
}