MediaWiki:Vaulttec.css
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/*
* MediaWiki:Vaulttec.css — v10
* Chargé uniquement pour les utilisateurs du skin VaultTec.
*/
/* ============================================================
1. VARIABLES
============================================================ */
:root {
--background-color-dp-00: #06100b;
--background-color-dp-01: #0a1a0f;
--background-color-dp-02: #0f2015;
--background-color-dp-03: #11251a;
--background-color-dp-04: #142b1e;
--background-color-dp-06: #173122;
--background-color-dp-08: #1a3727;
--background-color-dp-12: #1e3f2c;
--background-color-dp-16: #214531;
--background-color-dp-24: #254c36;
--background-img: none;
--background-main: transparent;
--box-background-color: rgba(12, 24, 18, 0.85);
--box-shadow: 0 0 10px rgba(125, 255, 156, 0.12);
--color-base: #cce8d4;
--color-warning: #f5c84a;
--color-link: #4ab06a;
--color-link-visited: #357a4d;
--border-color-base: rgba(125, 255, 156, 0.15);
}
/* ============================================================
2. BODY & CONTAINERS
============================================================ */
body {
background: #06100b !important;
background-image: none !important;
}
.mw-page-container {
background: transparent !important;
border: none !important;
max-width: 100% !important;
padding: 0 !important;
}
/* ============================================================
3. LAYOUT
============================================================ */
.vt-page-container {
display: flex !important;
width: 100% !important;
align-items: flex-start !important;
min-height: calc(100vh - 54px) !important;
}
.vt-sidebar, #mw-panel {
width: 220px !important;
flex-shrink: 0 !important;
}
.vt-content-container, #content {
flex: 1 1 auto !important;
min-width: 0 !important;
width: 0 !important;
}
#bodyContent {
max-width: none !important;
width: 100% !important;
padding: 28px 36px 60px !important;
}
/* ============================================================
4. TOC — rétractable, replié par défaut
============================================================ */
#mw-content-text .toc,
#mw-content-text #toc {
float: none !important;
clear: both !important;
position: static !important;
width: fit-content !important;
max-width: min(300px, 100%) !important;
min-width: 160px !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
background: rgba(6, 15, 11, 0.88) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 3px !important;
overflow: hidden !important;
box-sizing: border-box !important;
font-size: 12px !important;
}
#mw-content-text .toctitle,
#mw-content-text .toc .toctitle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
padding: 8px 14px !important;
cursor: pointer !important;
user-select: none !important;
margin: 0 !important;
border-bottom: 1px solid transparent !important;
white-space: nowrap !important;
}
#mw-content-text .toctitle h2,
#mw-content-text .toc .toctitle h2 {
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: rgba(125, 255, 156, 0.65) !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
#mw-content-text .toctitle::after {
content: '▸';
color: rgba(125, 255, 156, 0.4);
font-size: 9px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
#mw-content-text .toc:not(.vt-toc-collapsed) .toctitle {
border-bottom-color: rgba(125, 255, 156, 0.12) !important;
}
#mw-content-text .toc:not(.vt-toc-collapsed) .toctitle::after {
transform: rotate(90deg);
}
#mw-content-text .toc.vt-toc-collapsed > ul {
display: none !important;
}
#mw-content-text .toc:not(.vt-toc-collapsed) > ul {
display: block !important;
padding: 6px 0 8px !important;
margin: 0 !important;
}
#mw-content-text .toc ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#mw-content-text .toc li a {
display: flex !important;
align-items: baseline !important;
padding: 4px 14px !important;
font-size: 11px !important;
color: #7aaa88 !important;
font-family: 'IBM Plex Mono', monospace !important;
border-left: 2px solid transparent !important;
transition: all 0.15s !important;
text-decoration: none !important;
white-space: nowrap !important;
}
#mw-content-text .toc li a:hover {
color: #7dff9c !important;
background: rgba(125, 255, 156, 0.08) !important;
border-left-color: #4ab06a !important;
}
#mw-content-text .toc li li a {
padding-left: 24px !important;
font-size: 10px !important;
color: rgba(125, 255, 156, 0.4) !important;
}
.tocnumber {
color: rgba(125, 255, 156, 0.35) !important;
margin-right: 6px !important;
}
/* ============================================================
5. INFOBOX
============================================================ */
.avt-infobox,
.mw-parser-output .avt-infobox {
width: 320px !important;
max-width: 100% !important;
float: right !important;
clear: right !important;
margin: 0 0 1em 1.5em !important;
box-sizing: border-box !important;
background-color: rgba(12, 24, 18, 0.9) !important;
border-color: rgba(125, 255, 156, 0.2) !important;
box-shadow: 0 0 10px rgba(125, 255, 156, 0.12) !important;
color: #cce8d4 !important;
}
@media screen and (max-width: 720px) {
.avt-infobox,
.mw-parser-output .avt-infobox {
width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 0 1em 0 !important;
}
}
.avt-infobox-header {
background-color: #142b1e !important;
border-color: rgba(125, 255, 156, 0.2) !important;
color: #7dff9c !important;
}
.avt-infobox p.bloc, .avt-infobox caption {
background-color: #142b1e !important;
color: #7dff9c !important;
}
.avt-infobox th[scope="row"] { color: #4ab06a !important; }
.avt-infobox td { color: #cce8d4 !important; }
.infobox-default-image { background-image: url("/images/1/11/Logo_wiki_LAVT_vert.png") !important; }
.avt-infobox caption,
.mw-parser-output .avt-infobox caption {
display: table-caption !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ============================================================
6. WIKITABLE
============================================================ */
.wikitable, .va-table, .mw-datatable {
background-color: rgba(12, 24, 18, 0.85) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
}
.wikitable > tr > th, .wikitable > * > tr > th,
.va-table > tr > th, .va-table > * > tr > th {
background-color: #0f2015 !important;
color: #7dff9c !important;
}
.wikitable > tr > td, .wikitable > * > tr > td,
.va-table > tr > td, .va-table > * > tr > td {
border-color: rgba(125, 255, 156, 0.1) !important;
color: #cce8d4 !important;
}
.wikitable tr:hover td { background-color: rgba(125, 255, 156, 0.06) !important; }
/* ============================================================
7. PALETTES & NAVBOXES
============================================================ */
.palette {
background-color: rgba(12, 24, 18, 0.85) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
}
.palette-titre, .palette-banniere, .palette-section, .palette-groupe {
background-color: #0f2015 !important;
color: #7dff9c !important;
}
.palette-pair { background-color: transparent !important; }
.va-infobox-title, .va-navbox-title { background: #0f2015 !important; color: #7dff9c !important; }
/* ============================================================
8. BOÎTES GÉNÉRIQUES
============================================================ */
.avt-warn-banner, .avt-note-banner, .avt-section-banner,
.avt-dropdown-box, .avt-genericbox, .homepage-box,
.spinoff-box, .avt-content-game-box {
background-color: rgba(12, 24, 18, 0.85) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
}
.avt-dropdown-box-title { background-color: #0f2015 !important; color: #7dff9c !important; }
/* ============================================================
9. LIENS
============================================================ */
.mw-parser-output a { color: #4ab06a; }
.mw-parser-output a:visited { color: #357a4d; }
.mw-parser-output a:hover { color: #7dff9c; }
.new, a.new { color: #ff5e5e !important; }
/* ============================================================
10. TOC VECTOR 2022
============================================================ */
.sidebar-toc, .vector-toc {
background-color: rgba(12, 24, 18, 0.85) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
}
.vector-toc .vector-toc-link,
.sidebar-toc .sidebar-toc-link { color: #4ab06a !important; }
.vector-toc .vector-toc-link:hover,
.sidebar-toc .sidebar-toc-link:hover { color: #7dff9c !important; }
/* ============================================================
11. PORTAILS & ACCUEIL
============================================================ */
.homepage-box-title, .portal-box-title,
.spinoff-box-title, .canceled-box-title, .fangame-box-title,
.homepage-presentation-title, .homepage-participation-title,
.homepage-articleday-title {
color: #7dff9c !important;
text-shadow: 0 0 8px rgba(125, 255, 156, 0.4) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
}
/* ============================================================
12. SITENOTICE
============================================================ */
.avt-sitenotice {
background-color: rgba(12, 24, 18, 0.9) !important;
border-color: rgba(125, 255, 156, 0.2) !important;
color: #cce8d4 !important;
}
/* ============================================================
13. RECHERCHE — dropdown miniatures
============================================================ */
.vt-search { position: relative !important; }
.vt-search-dropdown {
display: none;
position: absolute;
top: calc(100% + 2px);
left: 0;
width: 420px;
max-width: calc(100vw - 40px);
background: rgba(8, 18, 12, 0.98);
border: 1px solid rgba(125, 255, 156, 0.2);
border-top: none;
z-index: 500;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
}
.vt-search-item {
display: flex; align-items: center; gap: 12px; padding: 9px 14px;
color: #cce8d4; text-decoration: none !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.07);
font-family: 'Crimson Pro', Georgia, serif; font-size: 15px; transition: background 0.1s;
}
.vt-search-item:hover { background: rgba(125, 255, 156, 0.07); color: #7dff9c !important; text-decoration: none !important; }
.vt-search-thumb {
width: 40px; height: 40px; flex-shrink: 0;
background: rgba(125, 255, 156, 0.05); border: 1px solid rgba(125, 255, 156, 0.12);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vt-search-thumb img { width: 40px; height: 40px; object-fit: cover; display: block; }
.vt-search-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-search-title mark { background: none; color: #7dff9c; font-weight: 700; }
.vt-search-footer {
display: block; padding: 10px 14px;
font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
color: rgba(125, 255, 156, 0.4); text-decoration: none !important; text-transform: uppercase;
border-top: 1px dashed rgba(125, 255, 156, 0.1); background: rgba(125, 255, 156, 0.02);
}
.vt-search-footer:hover { color: #7dff9c !important; background: rgba(125, 255, 156, 0.06); text-decoration: none !important; }
/* ============================================================
14. BOUTON RECHERCHE — loupe
============================================================ */
.vt-search input.searchButton,
.vt-search #searchButton {
text-indent: -9999px !important; overflow: hidden !important;
width: 42px !important; min-width: 42px !important; padding: 0 !important; flex-shrink: 0 !important;
background-color: rgba(125, 255, 156, 0.10) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237dff9c' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: center !important; background-size: 18px !important;
border: 1px solid rgba(125, 255, 156, 0.35) !important; cursor: pointer !important;
}
.vt-search input.searchButton:hover,
.vt-search #searchButton:hover { background-color: rgba(125, 255, 156, 0.2) !important; }
/* ============================================================
15. DARK MODE — icône parasite
============================================================ */
.ext-darkmode-link::before,
.ext-darkmode-link:before { display: none !important; content: none !important; }
/* ============================================================
16. CATÉGORIES
============================================================ */
#catlinks {
background-color: rgba(12, 24, 18, 0.85) !important;
border-top: 1px solid rgba(125, 255, 156, 0.15) !important;
border-bottom: none !important; padding: 10px 36px !important;
font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important;
letter-spacing: 0.1em !important; color: #7aaa88 !important;
}
#catlinks a { color: #4ab06a !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-size: 10px !important; }
#catlinks a:hover { color: #7dff9c !important; }
/* Masquer le lien "Catégories → Spécial:Catégories" qui fait doublon avec le label MW */
#mw-normal-catlinks > a:first-child { display: none !important; }
#catlinks ul { display: inline !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
#catlinks ul li { display: inline !important; }
#catlinks ul li::before { content: '·' !important; margin: 0 6px !important; color: rgba(125, 255, 156, 0.25) !important; }
/* ============================================================
17. TITRES — structure MW 1.44+ avec .mw-heading wrapper
============================================================ */
/* Le flex est sur .mw-heading, pas sur h2 */
.mw-parser-output .mw-heading {
display: flex !important;
align-items: baseline !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.13) !important;
margin: 32px 0 14px !important;
padding-bottom: 8px !important;
}
.mw-parser-output .mw-heading h2 {
display: block !important;
flex: 1 !important;
border-bottom: 0 !important;
margin: 0 !important;
padding-bottom: 0 !important;
font-family: 'Instrument Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 28px !important;
color: #cce8d4 !important;
text-align: left !important;
}
.mw-parser-output .mw-heading .mw-editsection {
flex-shrink: 0 !important;
margin-left: 12px !important;
}
/* Réduction de l'écart quand des titres se suivent */
.mw-parser-output .mw-heading + .mw-heading,
.mw-parser-output .mw-heading + h3,
.mw-parser-output .mw-heading + h4,
.mw-parser-output h3 + h4 {
margin-top: 8px !important;
}
/* ============================================================
17. MODIFICATIONS RÉCENTES — filtres OOUI + légende
============================================================ */
.mw-rcfilters-ui-filterWrapperWidget,
.mw-rcfilters-ui-filterTagMultiselectWidget { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top { background-color: #0f2015 !important; border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; }
.mw-rcfilters-ui-tagItemWidget { background-color: rgba(125, 255, 156, 0.1) !important; border: 1px solid rgba(125, 255, 156, 0.3) !important; color: #7dff9c !important; }
.mw-rcfilters-ui-tagItemWidget .oo-ui-labelElement-label { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-buttonElement-button,
.mw-rcfilters-ui-filterWrapperWidget .oo-ui-buttonElement-button { color: #4ab06a !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-buttonElement-button:hover,
.mw-rcfilters-ui-filterWrapperWidget .oo-ui-buttonElement-button:hover { color: #7dff9c !important; }
.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-framed .oo-ui-buttonElement-button { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.3) !important; color: #4ab06a !important; }
.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-framed .oo-ui-buttonElement-button:hover { background-color: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-textInputWidget .oo-ui-inputWidget-input { background-color: rgba(12, 24, 18, 0.95) !important; border-color: rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-textInputWidget .oo-ui-inputWidget-input::placeholder { color: rgba(125, 255, 156, 0.3) !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select .oo-ui-buttonElement-button { color: #4ab06a !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.mw-rcfilters-ui-filterWrapperWidget-bottom { background-color: #0f2015 !important; border-top: 1px solid rgba(125, 255, 156, 0.15) !important; }
.mw-rcfilters-ui-filterWrapperWidget .oo-ui-labelElement-label { color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.mw-changeslist-legend { background-color: rgba(12, 24, 18, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; padding: 10px 16px !important; margin: 8px 0 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.mw-changeslist-legend summary { color: #7dff9c !important; cursor: pointer !important; font-size: 11px !important; letter-spacing: 0.1em !important; }
.mw-changeslist-legend dl { margin: 8px 0 0 !important; }
.mw-changeslist-legend dt { color: #7dff9c !important; font-weight: 600 !important; }
.mw-changeslist-legend dd { color: #7aaa88 !important; }
dt.newpage, dt.minoredit, dt.botedit, dt.unpatrolled { color: #7dff9c !important; background: rgba(125, 255, 156, 0.08) !important; padding: 1px 6px !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; display: inline-block !important; }
.mw-changeslist-date { color: #7dff9c !important; }
h4.mw-rcfilters-ui-changesListWrapperWidget-date { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.2em !important; border-bottom: 1px dashed rgba(125, 255, 156, 0.2) !important; }
/* ============================================================
18. OOUI — fonds blancs résiduels
============================================================ */
.oo-ui-tagMultiselectWidget, .oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget-group, .mw-rcfilters-ui-table,
.mw-rcfilters-ui-row, .mw-rcfilters-ui-cell { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
.oo-ui-textInputWidget, .oo-ui-textInputWidget input,
.oo-ui-inputWidget-input { background-color: #0a1a0f !important; border-color: rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; }
.oo-ui-tagItemWidget, .mw-rcfilters-ui-tagItemWidget { background-color: rgba(125, 255, 156, 0.08) !important; border: 1px solid rgba(125, 255, 156, 0.25) !important; color: #7dff9c !important; }
.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #4ab06a !important; }
/* ============================================================
19. FILTRES ENREGISTRÉS — savedLinks
============================================================ */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks,
.mw-rcfilters-ui-savedLinksListWidget,
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonMenuSelectWidget { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button,
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.25) !important; color: #4ab06a !important; }
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button:hover,
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button:hover { background-color: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important; }
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-indicatorElement-indicator { opacity: 0.6 !important; }
.oo-ui-menuSelectWidget, .oo-ui-dropdownWidget-menu { background-color: rgba(8, 18, 12, 0.98) !important; border-color: rgba(125, 255, 156, 0.2) !important; }
.oo-ui-optionWidget { color: #cce8d4 !important; }
.oo-ui-optionWidget:hover, .oo-ui-optionWidget-highlighted { background-color: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important; }
/* ============================================================
20. ÉDITEUR — formulaire uniquement (pas de CodeMirror)
============================================================ */
#editform, .editOptions, .wikiEditor-ui,
.wikiEditor-ui-toolbar, .wikiEditor-ui-text { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
#wpTextbox1, .wikiEditor-ui-text textarea { background-color: #060f0b !important; color: #cce8d4 !important; border-color: rgba(125, 255, 156, 0.2) !important; }
.wikiEditor-ui-toolbar { background: #0f2015 !important; border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important; }
.wikiEditor-ui-toolbar .group { border-right-color: rgba(125, 255, 156, 0.1) !important; }
.wikiEditor-ui-toolbar .tool:hover { background: rgba(125, 255, 156, 0.08) !important; }
#wpSave, #wpPreview, #wpDiff, .editButtons input[type="submit"] { background-color: rgba(12, 24, 18, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.3) !important; color: #4ab06a !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; letter-spacing: 0.1em !important; cursor: pointer !important; }
#wpSave:hover, #wpPreview:hover, #wpDiff:hover, .editButtons input[type="submit"]:hover { background-color: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; border-color: rgba(125, 255, 156, 0.5) !important; }
#wpSave { background-color: rgba(125, 255, 156, 0.12) !important; color: #7dff9c !important; }
.editButtons .mw-editbutton-cancel { color: rgba(125, 255, 156, 0.4) !important; }
#wpSummary, #wpSummaryWidget input { background-color: #060f0b !important; border-color: rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; }
.editCheckboxes label, .editOptions label { color: #7aaa88 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.editpage-head-copywarn, #editpage-copywarn { color: #4a6e55 !important; font-size: 11px !important; }
/* ============================================================
21. MOBILE — onglets défilants
============================================================ */
@media screen and (max-width: 720px) {
.vt-page-tabs { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; flex-wrap: nowrap !important; height: auto !important; min-height: 44px !important; padding: 0 8px !important; }
.vt-page-tabs::-webkit-scrollbar { height: 3px !important; }
.vt-page-tabs::-webkit-scrollbar-thumb { background: rgba(125, 255, 156, 0.2) !important; }
.vt-tabs-ns ul, .vt-tabs-views ul, .vt-tabs-more ul { flex-wrap: nowrap !important; white-space: nowrap !important; }
.vt-page-tabs li a { white-space: nowrap !important; padding: 0 10px !important; font-size: 10px !important; }
.vt-tabs-sep { display: none !important; }
}
/* ============================================================
22. TITRE DE PAGE — padding cohérent
============================================================ */
#firstHeading, #mw-content-subtitle {
padding-left: 36px !important;
padding-right: 36px !important;
}
/* ============================================================
23. NAV PRIMAIRE — masquer si vide
============================================================ */
.vt-nav-primary:not(:has(a)) {
display: none !important;
width: 0 !important;
padding: 0 !important;
border: none !important;
}
/* ============================================================
24. FIXES SKIN
============================================================ */
/* CodeMirror — fix décalage curseur */
html body .CodeMirror { padding: 0 !important; }
/* Overlay drawer — ne intercepte jamais les clics */
.vt-drawer-overlay,
.vt-drawer-overlay.is-open { pointer-events: none !important; }
/* Bouton fermer drawer — masqué sur desktop */
@media screen and (min-width: 901px) {
.vt-drawer-close { display: none !important; }
}
/* Watermark V — supprimé */
.vt-watermark { display: none !important; }
/* Barre outils personnels — adaptation mobile */
@media screen and (max-width: 900px) {
.vt-user-tools { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: calc(100vw - 180px); flex-shrink: 1; }
.vt-user-tools::-webkit-scrollbar { display: none; }
.vt-user-tools ul { flex-wrap: nowrap; }
.vt-user-tools li a { padding: 0 8px; font-size: 10px; letter-spacing: 0.06em; }
}
@media screen and (max-width: 600px) {
#pt-preferences, #pt-watchlist { display: none; }
}
/* ============================================================
25. MEDIAUPLOADER — Spécial:MediaUploader
============================================================ */
#upload-wizard { background: rgba(12, 24, 18, 0.6); border: 1px solid rgba(125, 255, 156, 0.15); color: #cce8d4; padding: 24px; border-radius: 4px; margin-top: 16px; }
#upload-wizard .ui-widget, #upload-wizard .ui-widget-content, #upload-wizard .ui-state-default, #upload-wizard .ui-corner-all, #upload-wizard .ui-corner-top, #upload-wizard .ui-corner-bottom, #upload-wizard .mediauploader-form { background: transparent !important; background-image: none !important; border-color: transparent !important; color: inherit !important; }
#mediauploader-steps, #mediauploader-steps.arrowSteps { background: rgba(6, 15, 11, 0.8) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 4px; padding: 0 !important; margin: 0 0 24px 0 !important; list-style: none; display: flex !important; overflow: hidden; height: auto !important; }
#mediauploader-steps li, #mediauploader-steps.arrowSteps li { flex: 1; padding: 14px 6px !important; background: transparent !important; background-image: none !important; color: rgba(125, 255, 156, 0.4) !important; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px !important; font-family: 'IBM Plex Mono', monospace !important; font-weight: 500; border: 0 !important; border-right: 1px solid rgba(125, 255, 156, 0.15) !important; margin: 0 !important; text-align: center; line-height: 1.3 !important; height: auto !important; min-height: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: keep-all; }
#mediauploader-steps li::before, #mediauploader-steps li::after, #mediauploader-steps.arrowSteps li::before, #mediauploader-steps.arrowSteps li::after { display: none !important; content: none !important; }
#mediauploader-steps li:last-child { border-right: 0 !important; }
#mediauploader-steps li.arrow, #mediauploader-steps li.current, #mediauploader-steps li.mediauploader-step-current { background: rgba(125, 255, 156, 0.12) !important; color: #7dff9c !important; box-shadow: inset 0 -2px 0 #7dff9c; }
#mediauploader-steps li.completed, #mediauploader-steps li.mediauploader-step-completed { color: #4ab06a !important; }
#mediauploader-content, .mediauploader-stepdiv { color: #cce8d4; }
.mediauploader-stepdiv h2, .mediauploader-stepdiv h3 { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(125, 255, 156, 0.2); padding-bottom: 8px; margin-top: 24px; }
#mediauploader-filelist, #mediauploader-filelist.ui-corner-all { background: transparent !important; border: 0 !important; padding: 0 !important; }
.mediauploader-file { background: rgba(6, 15, 11, 0.8) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 4px !important; padding: 16px !important; margin-bottom: 12px !important; color: #cce8d4 !important; }
.mediauploader-file.filled { border-color: rgba(125, 255, 156, 0.35) !important; }
#upload-wizard .mediauploader-visible-file, #upload-wizard .mediauploader-visible-file.ui-corner-top.ui-corner-bottom { background: rgba(6, 15, 11, 0.7) !important; background-image: none !important; border: 1px solid rgba(125, 255, 156, 0.15) !important; border-radius: 4px !important; padding: 16px 20px !important; color: #cce8d4 !important; }
#upload-wizard .mediauploader-visible-file-filename, #upload-wizard .mediauploader-file-texts, #upload-wizard .mediauploader-file-preview { background: transparent !important; background-image: none !important; }
#upload-wizard .mediauploader-visible-file-filename-text { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; font-weight: 500; }
.mediauploader-file-status-line { color: rgba(168, 230, 184, 0.7) !important; font-size: 12px; font-style: italic; margin-top: 4px; }
.mediauploader-file-indicator { background: transparent !important; }
#upload-wizard .mediauploader-add-file, #upload-wizard .oo-ui-selectFileInputWidget, #upload-wizard .oo-ui-selectFileWidget { background: rgba(6, 15, 11, 0.6) !important; background-image: none !important; border: 2px dashed rgba(125, 255, 156, 0.25) !important; border-radius: 4px !important; padding: 16px 20px !important; color: #cce8d4 !important; transition: all 0.2s ease; box-shadow: none !important; }
#upload-wizard .mediauploader-add-file:hover, #upload-wizard .oo-ui-selectFileWidget-canDrop { border-color: #7dff9c !important; background: rgba(125, 255, 156, 0.05) !important; }
#upload-wizard .oo-ui-selectFileInputWidget-info, #upload-wizard .oo-ui-selectFileInputWidget-info.oo-ui-textInputWidget { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: rgba(168, 230, 184, 0.6) !important; }
#upload-wizard .oo-ui-selectFileInputWidget-info input[type="search"], #upload-wizard .oo-ui-selectFileInputWidget-info .oo-ui-inputWidget-input { background: transparent !important; background-image: none !important; color: rgba(168, 230, 184, 0.6) !important; border: 0 !important; box-shadow: none !important; font-style: italic; }
#upload-wizard .oo-ui-selectFileInputWidget-info input[type="search"]::placeholder { color: rgba(168, 230, 184, 0.5) !important; font-style: italic; }
#upload-wizard .oo-ui-selectFileInputWidget-dropLabel, #upload-wizard .oo-ui-selectFileWidget-dropLabel { background: transparent !important; color: rgba(168, 230, 184, 0.6) !important; font-style: italic; }
#upload-wizard .oo-ui-selectFileInputWidget-selectButton { background: transparent !important; }
#upload-wizard .oo-ui-buttonElement > .oo-ui-buttonElement-button, .mediauploader-stepdiv .oo-ui-buttonElement > .oo-ui-buttonElement-button { background: rgba(12, 24, 18, 0.9) !important; background-image: none !important; border: 1px solid rgba(125, 255, 156, 0.3) !important; color: #4ab06a !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; padding: 8px 18px !important; border-radius: 2px !important; box-shadow: none !important; text-shadow: none !important; transition: all 0.2s ease; min-height: 36px !important; }
#upload-wizard .oo-ui-buttonElement > .oo-ui-buttonElement-button:hover, .mediauploader-stepdiv .oo-ui-buttonElement > .oo-ui-buttonElement-button:hover { background: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; border-color: rgba(125, 255, 156, 0.6) !important; }
#upload-wizard .oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button, #upload-wizard .oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, .mediauploader-stepdiv .oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button, .mediauploader-stepdiv .oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background: rgba(125, 255, 156, 0.15) !important; color: #7dff9c !important; border-color: #7dff9c !important; font-weight: 500 !important; }
#upload-wizard .oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button:hover, #upload-wizard .oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background: rgba(125, 255, 156, 0.25) !important; color: #cdffd6 !important; box-shadow: 0 0 12px rgba(125, 255, 156, 0.3) !important; }
#upload-wizard .oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button, .mediauploader-stepdiv .oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { background: rgba(255, 122, 122, 0.08) !important; color: #ff7a7a !important; border-color: rgba(255, 122, 122, 0.4) !important; }
#upload-wizard .oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover { background: rgba(255, 122, 122, 0.15) !important; color: #ff9a9a !important; }
#upload-wizard .oo-ui-widget-disabled .oo-ui-buttonElement-button, .mediauploader-stepdiv .oo-ui-widget-disabled .oo-ui-buttonElement-button { opacity: 0.4 !important; cursor: not-allowed !important; }
#upload-wizard .oo-ui-iconElement-icon, .mediauploader-stepdiv .oo-ui-iconElement-icon { filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) contrast(101%); opacity: 0.85; }
#upload-wizard input[type="text"], #upload-wizard input[type="number"], #upload-wizard textarea, #upload-wizard .oo-ui-textInputWidget input, #upload-wizard .oo-ui-textInputWidget textarea, #upload-wizard .oo-ui-multilineTextInputWidget textarea { background: rgba(6, 15, 11, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; padding: 8px 12px !important; border-radius: 2px !important; box-shadow: none !important; }
#upload-wizard input:focus, #upload-wizard textarea:focus, #upload-wizard .oo-ui-textInputWidget input:focus, #upload-wizard .oo-ui-textInputWidget textarea:focus, #upload-wizard .oo-ui-multilineTextInputWidget textarea:focus { border-color: #7dff9c !important; outline: 0 !important; box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.15) !important; }
#upload-wizard .oo-ui-progressBarWidget, #upload-wizard .mediauploader-progress { background: rgba(6, 15, 11, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 2px; overflow: hidden; height: 8px; }
#upload-wizard .oo-ui-progressBarWidget-bar, #upload-wizard .mediauploader-progress-bar { background: linear-gradient(90deg, #4ab06a, #7dff9c) !important; height: 100% !important; transition: width 0.3s ease; }
#upload-wizard .errorbox, .mediauploader-error { background: rgba(255, 94, 94, 0.1) !important; border: 1px solid rgba(255, 94, 94, 0.4) !important; color: #ff9a9a !important; padding: 12px !important; border-radius: 4px; }
#upload-wizard .successbox, .mediauploader-success { background: rgba(125, 255, 156, 0.08) !important; border: 1px solid rgba(125, 255, 156, 0.4) !important; color: #7dff9c !important; padding: 12px !important; border-radius: 4px; }
#upload-wizard .warningbox, .mediauploader-warning { background: rgba(245, 200, 74, 0.1) !important; border: 1px solid rgba(245, 200, 74, 0.4) !important; color: #f5c84a !important; padding: 12px !important; border-radius: 4px; }
#upload-wizard a { color: #7dff9c !important; text-decoration: none; border-bottom: 1px solid rgba(125, 255, 156, 0.3); }
#upload-wizard a:hover { color: #cdffd6 !important; border-bottom-color: #7dff9c; }
.mediauploader-unavailable, .mw-special-MediaUploader #mw-content-text > p:first-child { background: rgba(6, 15, 11, 0.6); border: 1px solid rgba(125, 255, 156, 0.2); border-left: 3px solid #f5c84a; padding: 16px 20px; color: #cce8d4; border-radius: 4px; }
#mediauploader-deeds-thumbnails { background-color: transparent !important; border-radius: 2px; text-align: center; margin: 1em 0; }
#mediauploader-deeds-thumbnails .mediauploader-thumbnail { background: transparent !important; }
#mediauploader-deeds-thumbnails canvas { filter: brightness(0.8) sepia(1) hue-rotate(76deg) saturate(0.5); opacity: 0.7; }
/* ============================================================
26. PAGE D'ACCUEIL — Grille responsive
============================================================ */
.homepage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"welcome welcome"
"games games"
"autres theme"
"anecdotes articleday"
"presentation participation";
gap: 16px;
width: 100%;
box-sizing: border-box;
}
.homepage-welcome { grid-area: welcome; }
.homepage-portal-games { grid-area: games; }
.homepage-portal-autres{ grid-area: autres; }
.homepage-portal-theme { grid-area: theme; }
.homepage-anecdotes { grid-area: anecdotes; }
.homepage-articleday { grid-area: articleday; }
.homepage-presentation { grid-area: presentation; }
.homepage-participation{ grid-area: participation; }
.homepage-box { background: rgba(6, 15, 11, 0.7); border: 1px solid rgba(125, 255, 156, 0.15); border-radius: 4px; overflow: hidden; }
.homepage-box-title { background: rgba(125, 255, 156, 0.07); border-bottom: 1px solid rgba(125, 255, 156, 0.2); color: #7dff9c; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; padding: 10px 16px; margin: 0; text-align: center; }
.homepage-box-content { padding: 16px; color: #cce8d4; }
.homepage-box-content a { color: #7dff9c; text-decoration: none; border-bottom: 1px solid rgba(125, 255, 156, 0.3); }
.homepage-box-content a:hover { color: #cdffd6; border-bottom-color: #7dff9c; }
.homepage-welcome { background: rgba(6, 15, 11, 0.7) !important; border: 1px solid rgba(125, 255, 156, 0.15) !important; border-radius: 4px !important; overflow: hidden; padding: 0 !important; text-align: center; }
.homepage-welcome-title { background: rgba(125, 255, 156, 0.07); border-bottom: 1px solid rgba(125, 255, 156, 0.2); color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; font-weight: 500; font-style: normal !important; text-transform: uppercase; letter-spacing: 0.12em; padding: 10px 16px; margin: 0; text-shadow: none !important; }
html body .homepage-welcome .logo-light, html body .homepage .logo-light { display: none !important; }
html body .homepage-welcome .logo-dark, html body .homepage .logo-dark { display: inline !important; }
.logo-accueil { margin: 20px auto; background: transparent !important; display: block; }
.logo-accueil img { max-width: 340px; width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(125, 255, 156, 0.2)); }
.homepage-welcome-subtitle { color: #cce8d4; font-size: 0.95em; margin: 6px 16px; line-height: 1.6; }
.homepage-welcome-subtitle a { color: #7dff9c !important; border-bottom: 1px solid rgba(125, 255, 156, 0.3); text-decoration: none; }
.homepage-welcome-subtitle a:hover { color: #cdffd6 !important; }
.homepage-welcome-links { margin: 20px 16px; display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(125, 255, 156, 0.1); padding-top: 16px; }
.homepage-welcome-links img { transition: filter 0.2s ease, transform 0.2s ease; }
.homepage-welcome-links img:hover { filter: brightness(1.15) drop-shadow(0 0 8px rgba(125, 255, 156, 0.4)); transform: scale(1.06); }
.homepage-portal-games-list { display: flex; flex-wrap: wrap; list-style: none; padding: 8px; margin: 0; gap: 12px; justify-content: center; }
.homepage-portal-games-item { flex: 0 0 calc(25% - 12px); max-width: 130px; text-align: center; color: #cce8d4; }
.homepage-portal-games-logo { margin-bottom: 6px; display: flex; justify-content: center; align-items: center; height: 70px; }
.homepage-portal-games-logo img { max-width: 100%; max-height: 70px; width: auto; height: auto; transition: filter 0.2s ease, transform 0.2s ease; }
.homepage-portal-games-logo img:hover { filter: brightness(1.2) drop-shadow(0 0 8px rgba(125, 255, 156, 0.4)); transform: scale(1.07); }
.homepage-portal-games-item div:last-child a, .homepage-portal-games-item em a, .homepage-portal-games-item i a { color: #7dff9c !important; font-size: 12px; text-decoration: none; border-bottom: 1px solid rgba(125, 255, 156, 0.3); font-style: italic; }
.homepage-portal-autres-list { display: flex; flex-wrap: wrap; list-style: none; padding: 8px; margin: 0; gap: 16px; justify-content: center; }
.homepage-portal-autres-list .homepage-portal-games-item { flex: 0 0 calc(33% - 16px); max-width: 150px; }
.homepage-portal-autres-list .homepage-portal-games-logo { height: 90px; }
.homepage-portal-autres-list .homepage-portal-games-logo img { max-height: 90px; }
.homepage-portal-theme .liste-horizontale ul { display: flex; flex-wrap: wrap; list-style: none; padding: 4px; margin: 0; gap: 6px; justify-content: center; }
.homepage-portal-theme .liste-horizontale li { background: rgba(125, 255, 156, 0.06); border: 1px solid rgba(125, 255, 156, 0.15); border-radius: 2px; padding: 5px 10px; list-style: none; margin: 0; }
.homepage-portal-theme .liste-horizontale li::before { display: none; }
.homepage-portal-theme .liste-horizontale li a { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border-bottom: 0; }
.homepage-portal-theme .liste-horizontale li a:hover { color: #cdffd6 !important; }
@media screen and (max-width: 720px) {
.nomobile { display: none !important; }
.homepage { grid-template-columns: 1fr; grid-template-areas: "welcome" "games" "autres" "theme" "anecdotes" "articleday" "presentation" "participation"; gap: 10px; padding: 8px; }
.homepage-welcome, .homepage-welcome.nomobile { display: block !important; grid-area: welcome !important; }
.homepage-welcome .logo-accueil { display: none !important; }
.homepage-welcome-title { font-size: 10px !important; padding: 8px 12px; }
.homepage-welcome-subtitle { font-size: 0.85em; margin: 4px 12px; }
.homepage-welcome-links { margin: 12px; gap: 12px; padding-top: 12px; }
.homepage-portal-games-list { gap: 8px; padding: 8px 4px; }
.homepage-portal-games-item { flex: 0 0 calc(50% - 8px); max-width: none; }
.homepage-portal-games-logo { height: 55px; }
.homepage-portal-games-logo img { max-height: 55px; }
.homepage-portal-autres-list .homepage-portal-games-item { flex: 0 0 100%; max-width: none; display: flex; align-items: center; gap: 12px; text-align: left; }
.homepage-portal-autres-list .homepage-portal-games-logo { height: 50px; min-width: 60px; flex-shrink: 0; }
.homepage-portal-theme .liste-horizontale li { padding: 4px 8px; font-size: 10px; }
.homepage-box-title { font-size: 10px; padding: 8px 12px; letter-spacing: 0.1em; }
.homepage-box-content { padding: 12px; font-size: 14px; }
}
@media screen and (min-width: 721px) { .mobileonly { display: none !important; } }
@media screen and (min-width: 721px) and (max-width: 1100px) {
.homepage-portal-games-item { flex: 0 0 calc(25% - 12px); }
.homepage-portal-games-logo { height: 60px; }
.homepage-portal-games-logo img { max-height: 60px; }
}
/* ============================================================
27. LISIBILITÉ — Taille du texte des articles
============================================================ */
.mw-parser-output { font-size: 17px; line-height: 1.75; }
.mw-parser-output h2 { font-size: 1.5em; }
.mw-parser-output h3 { font-size: 1.25em; }
.mw-parser-output h4 { font-size: 1.1em; }
#firstHeading { font-size: 2em; }
/* ============================================================
29. VISUAL EDITOR — Toolbar sticky sous le header
============================================================ */
/* Sélecteurs multiples pour matcher toutes les versions de VE */
html body .ve-ui-toolbar,
html body .ve-init-mw-desktopArticleTarget-toolbar,
html body .ve-ui-toolbar.oo-ui-toolbar-position-top {
position: sticky !important;
top: 54px !important;
z-index: 900 !important;
background: rgba(12, 24, 18, 0.95) !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6) !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}