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 — v39
* 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; }
/* Espacement réduit entre bandeaux d'avertissement consécutifs */
.mw-parser-output .avt-warn-banner,
.mw-parser-output .avt-note-banner,
.mw-parser-output .avt-section-banner {
background-color: rgba(12, 24, 18, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
margin-bottom: 4px !important;
box-shadow: none !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 (header)
============================================================ */
.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; }
#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; }
#catlinks.catlinks-allhidden { display: none !important; }
/* ============================================================
17. TITRES — structure MW 1.44+, sizing fluide responsive
============================================================ */
.mw-parser-output .mw-heading { display: flex !important; align-items: baseline !important; border-bottom: 1px solid rgba(125, 255, 156, 0.13) !important; margin: 22px 0 10px !important; padding-bottom: 6px !important; }
.mw-parser-output .mw-heading h2, .mw-parser-output > 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: clamp(1.25rem, 1.05rem + 1vw, 1.625rem) !important; line-height: 1.25 !important; color: #cce8d4 !important; text-align: left !important; }
.mw-parser-output .mw-heading h3, .mw-parser-output > h3 { font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem) !important; line-height: 1.3 !important; margin: 0 !important; flex: 1 !important; }
.mw-parser-output .mw-heading h4, .mw-parser-output > h4 { font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem) !important; line-height: 1.3 !important; margin: 0 !important; flex: 1 !important; }
.mw-parser-output .mw-heading h5, .mw-parser-output > h5, .mw-parser-output .mw-heading h6, .mw-parser-output > h6 { font-size: 0.9rem !important; line-height: 1.3 !important; margin: 0 !important; flex: 1 !important; }
.mw-parser-output .mw-heading .mw-editsection { flex-shrink: 0 !important; margin-left: 12px !important; }
.mw-parser-output .mw-heading-3, .mw-parser-output .mw-heading-4, .mw-parser-output .mw-heading-5, .mw-parser-output .mw-heading-6 { margin: 16px 0 8px !important; padding-bottom: 4px !important; }
.mw-parser-output .mw-heading + .mw-heading { margin-top: 6px !important; }
/* ============================================================
18. 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; }
/* ============================================================
19. 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; }
/* ============================================================
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; transition: all 0.15s !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; border-color: rgba(125, 255, 156, 0.4) !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; }
#wpSummary:focus, #wpSummaryWidget input:focus { border-color: #7dff9c !important; outline: none !important; box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.12) !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
============================================================ */
html body .CodeMirror { padding: 0 !important; }
/* NOTE : la règle .vt-drawer-overlay { pointer-events: none } a été retirée car
elle contredisait le comportement attendu de l'overlay (capture des clics
pour fermer le drawer). Le skin.less gère cette propriété correctement
en distinguant l'état fermé (none) et ouvert (auto). */
@media screen and (min-width: 901px) { .vt-drawer-close { display: none !important; } }
.vt-watermark { display: none !important; }
@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-color: transparent !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-color: rgba(6, 15, 11, 0.7) !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-color: transparent !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-thumbnail, #upload-wizard .mediauploader-thumbnail-side { background-color: transparent !important; position: relative !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; }
#firstHeading { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
@media screen and (max-width: 900px) {
.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider { display: none !important; }
.mw-parser-output .mw-heading h2, .mw-parser-output .mw-heading h3, .mw-parser-output .mw-heading h4, .mw-parser-output .mw-heading h5, .mw-parser-output .mw-heading h6 { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; white-space: normal !important; }
#bodyContent { padding: 16px 16px 40px !important; }
#firstHeading, #mw-content-subtitle { padding-left: 16px !important; padding-right: 16px !important; }
}
/* ============================================================
28. VISUAL EDITOR — Toolbar sticky + surface + popups
============================================================ */
html body .ve-ui-toolbar,
html body .ve-init-mw-desktopArticleTarget-toolbar {
position: sticky !important;
top: 54px !important;
z-index: 900 !important;
background: rgba(12, 24, 18, 0.97) !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);
}
.ve-ui-toolbar .oo-ui-toolbar-bar,
.ve-ui-toolbar .oo-ui-toolbar-tools,
.ve-ui-toolbar .oo-ui-toolbar-after { background: transparent !important; border: 0 !important; }
.ve-ui-toolbar .oo-ui-toolGroup { border-right: 1px solid rgba(125, 255, 156, 0.08) !important; }
.ve-ui-toolbar .oo-ui-toolGroup:last-child { border-right: 0 !important; }
.ve-ui-toolbar .oo-ui-tool-link {
background: transparent !important;
color: rgba(125, 255, 156, 0.55) !important;
border-radius: 2px !important;
transition: background 0.1s, color 0.1s !important;
}
.ve-ui-toolbar .oo-ui-tool-link:hover { background: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; }
.ve-ui-toolbar .oo-ui-tool-active > .oo-ui-tool-link {
background: rgba(125, 255, 156, 0.15) !important;
color: #7dff9c !important;
box-shadow: inset 0 -2px 0 #7dff9c !important;
}
.ve-ui-toolbar .oo-ui-widget-disabled .oo-ui-tool-link { opacity: 0.3 !important; cursor: default !important; }
.ve-ui-toolbar .oo-ui-popupToolGroup-handle,
.ve-ui-toolbar .oo-ui-toolGroup-handle {
background: transparent !important;
color: rgba(125, 255, 156, 0.55) !important;
border: 0 !important;
border-radius: 2px !important;
transition: background 0.1s, color 0.1s !important;
}
.ve-ui-toolbar .oo-ui-popupToolGroup-handle:hover,
.ve-ui-toolbar .oo-ui-toolGroup-handle:hover { background: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; }
.ve-ui-toolbar .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
color: inherit !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
.ve-ui-toolbar .oo-ui-indicatorElement-indicator {
filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(400%) hue-rotate(76deg) brightness(100%) !important;
opacity: 0.5 !important;
}
.ve-ui-toolbar .oo-ui-iconElement-icon {
filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important;
opacity: 0.6 !important;
}
.ve-ui-toolbar .oo-ui-tool-link:hover .oo-ui-iconElement-icon,
.ve-ui-toolbar .oo-ui-tool-active .oo-ui-iconElement-icon { opacity: 1 !important; }
.ve-ui-toolbar .ve-ui-toolbar-saveButton,
.ve-ui-toolbar .oo-ui-flaggedElement-primary .oo-ui-tool-link,
.ve-ui-toolbar .oo-ui-flaggedElement-progressive .oo-ui-tool-link {
background: rgba(125, 255, 156, 0.15) !important;
border: 1px solid rgba(125, 255, 156, 0.4) !important;
border-radius: 2px !important;
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
.ve-ui-toolbar .ve-ui-toolbar-saveButton:hover,
.ve-ui-toolbar .oo-ui-flaggedElement-primary .oo-ui-tool-link:hover,
.ve-ui-toolbar .oo-ui-flaggedElement-progressive .oo-ui-tool-link:hover {
background: rgba(125, 255, 156, 0.28) !important;
border-color: #7dff9c !important;
box-shadow: 0 0 12px rgba(125, 255, 156, 0.25) !important;
}
.ve-ui-toolbar .oo-ui-toolbar-popups,
.ve-ui-toolbar .oo-ui-popupToolGroup-tools,
.ve-ui-toolbar .oo-ui-listToolGroup-tools,
.ve-ui-toolbar .oo-ui-menuToolGroup-tools {
background: rgba(8, 18, 12, 0.98) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 3px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75) !important;
padding: 4px 0 !important;
}
.ve-ui-toolbar .oo-ui-popupToolGroup-tools .oo-ui-tool-link,
.ve-ui-toolbar .oo-ui-listToolGroup-tools .oo-ui-tool-link,
.ve-ui-toolbar .oo-ui-menuToolGroup-tools .oo-ui-tool-link {
color: #cce8d4 !important;
padding: 8px 16px 8px 44px !important;
display: block !important;
position: relative !important;
border-left: 2px solid transparent !important;
min-height: 32px !important;
}
.ve-ui-toolbar .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-iconElement-icon,
.ve-ui-toolbar .oo-ui-listToolGroup-tools .oo-ui-tool-link .oo-ui-iconElement-icon,
.ve-ui-toolbar .oo-ui-menuToolGroup-tools .oo-ui-tool-link .oo-ui-iconElement-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
}
.ve-ui-toolbar .oo-ui-popupToolGroup-tools .oo-ui-tool-link:hover,
.ve-ui-toolbar .oo-ui-listToolGroup-tools .oo-ui-tool-link:hover,
.ve-ui-toolbar .oo-ui-menuToolGroup-tools .oo-ui-tool-link:hover {
background: rgba(125, 255, 156, 0.08) !important;
color: #7dff9c !important;
border-left-color: #4ab06a !important;
}
.ve-ui-toolbar .oo-ui-popupToolGroup-tools .oo-ui-tool-active .oo-ui-tool-link,
.ve-ui-toolbar .oo-ui-menuToolGroup-tools .oo-ui-tool-active .oo-ui-tool-link {
background: rgba(125, 255, 156, 0.12) !important;
color: #7dff9c !important;
border-left-color: #7dff9c !important;
}
.ve-ui-toolbar .oo-ui-tool-checkIcon { opacity: 0 !important; }
.ve-ui-toolbar .oo-ui-tool-active .oo-ui-tool-checkIcon { opacity: 0.8 !important; }
.ve-ui-toolbar .oo-ui-tool-title {
color: inherit !important;
font-family: 'Crimson Pro', Georgia, serif !important;
font-size: 14px !important;
}
.ve-ui-toolbar .oo-ui-tool-accel {
color: rgba(125, 255, 156, 0.3) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
margin-left: auto !important;
padding-left: 16px !important;
}
.ve-ui-toolbar .oo-ui-popupWidget .oo-ui-popupWidget-popup {
background: rgba(8, 18, 12, 0.98) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 3px !important;
}
.ve-ui-toolbar .oo-ui-popupWidget .oo-ui-popupWidget-head {
background: rgba(6, 15, 11, 0.98) !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.1) !important;
}
.ve-ui-toolbar .oo-ui-popupWidget .oo-ui-labelElement-label { color: #7dff9c !important; }
.ve-ui-surface, .ve-ce-surface { background: #060f0b !important; color: #cce8d4 !important; caret-color: #7dff9c !important; }
.ve-ce-surface ::selection { background: rgba(125, 255, 156, 0.2) !important; }
.ve-ui-context, .ve-ui-linearContext { background: rgba(8, 18, 12, 0.98) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 3px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important; }
.ve-ui-contextItem, .ve-ui-linearContextItem { color: #7aaa88 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; }
.ve-ui-contextItem:hover, .ve-ui-linearContextItem:hover { color: #7dff9c !important; background: rgba(125, 255, 156, 0.06) !important; }
.oo-ui-window-frame { background: rgba(10, 20, 15, 0.98) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8) !important; }
.oo-ui-window-head { background: rgba(6, 15, 11, 0.98) !important; border-bottom: 1px solid rgba(125, 255, 156, 0.12) !important; }
.oo-ui-window-head .oo-ui-labelElement-label { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; }
.oo-ui-window-body { background: rgba(10, 20, 15, 0.98) !important; color: #cce8d4 !important; }
.oo-ui-window-foot { background: rgba(6, 15, 11, 0.98) !important; border-top: 1px solid rgba(125, 255, 156, 0.12) !important; }
.oo-ui-overlay, .oo-ui-window-overlay { background: rgba(0, 0, 0, 0.6) !important; }
/* ── VE Save Dialog ("Enregistrer vos modifications") ── */
.ve-ui-mwSaveDialog-options,
.ve-ui-mwSaveDialog-checkboxes,
.ve-ui-mwSaveDialog-summaryLabel,
.ve-ui-mwSaveDialog-summary,
.ve-ui-mwSaveDialog-messages,
.ve-ui-mwSaveDialog-foot,
.ve-ui-mwSaveDialog-license {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.ve-ui-mwSaveDialog-field-wpMinoredit,
.ve-ui-mwSaveDialog-field-wpWatchthis,
.ve-ui-mwSaveDialog-checkboxes .oo-ui-fieldLayout,
.ve-ui-mwSaveDialog-checkboxes .oo-ui-fieldLayout-body,
.ve-ui-mwSaveDialog-checkboxes .oo-ui-fieldLayout-header,
.ve-ui-mwSaveDialog-checkboxes .oo-ui-fieldLayout-field {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 4px 0 !important;
margin: 0 !important;
}
.ve-ui-mwSaveDialog-field-wpMinoredit:hover,
.ve-ui-mwSaveDialog-field-wpWatchthis:hover {
background: rgba(125, 255, 156, 0.04) !important;
border-radius: 2px !important;
}
.ve-ui-mwSaveDialog-checkboxes .oo-ui-fieldLayout-header .oo-ui-labelElement-label,
.ve-ui-mwSaveDialog-checkboxes label,
.ve-ui-mwSaveDialog-field-wpMinoredit .oo-ui-labelElement-label,
.ve-ui-mwSaveDialog-field-wpWatchthis .oo-ui-labelElement-label {
color: rgba(204, 232, 212, 0.7) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
font-weight: 400 !important;
background: transparent !important;
cursor: pointer !important;
}
.ve-ui-mwSaveDialog-summaryLabel,
.ve-ui-mwSaveDialog-summaryLabel label {
color: rgba(125, 255, 156, 0.6) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
margin-bottom: 6px !important;
}
.ve-ui-mwSaveDialog-summary textarea,
.ve-ui-mwSaveDialog-summary .oo-ui-textInputWidget input,
.ve-ui-mwSaveDialog-summary .oo-ui-textInputWidget textarea {
background: rgba(4, 10, 7, 0.95) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 2px !important;
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important;
padding: 10px 12px !important;
caret-color: #7dff9c !important;
}
.ve-ui-mwSaveDialog-summary textarea:focus,
.ve-ui-mwSaveDialog-summary .oo-ui-textInputWidget textarea:focus {
border-color: rgba(125, 255, 156, 0.5) !important;
box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.1) !important;
outline: none !important;
}
.ve-ui-mwSaveDialog-editSummary-count {
color: rgba(125, 255, 156, 0.35) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
background: transparent !important;
margin-top: 4px !important;
}
.ve-ui-mwSaveDialog-license,
.ve-ui-mwSaveDialog-foot {
color: rgba(204, 232, 212, 0.55) !important;
font-size: 12px !important;
line-height: 1.5 !important;
border-top: 1px dashed rgba(125, 255, 156, 0.1) !important;
padding-top: 12px !important;
margin-top: 12px !important;
}
.ve-ui-mwSaveDialog-license a,
.ve-ui-mwSaveDialog-foot a { color: #4ab06a !important; }
.ve-ui-mwSaveDialog-license a:hover,
.ve-ui-mwSaveDialog-foot a:hover { color: #7dff9c !important; }
.ve-ui-mwSaveDialog-license .ve-ui-mwSaveDialog-warning,
.ve-ui-mwSaveDialog-foot strong,
.ve-ui-mwSaveDialog-foot b { color: #ff7a7a !important; }
/* ============================================================
29. LECTEUR AUDIO — thème phosphore
============================================================ */
.mw-tmh-player,
.mediaContainer {
display: block !important;
width: 100% !important;
max-width: 440px !important;
margin: 12px auto !important;
background: rgba(6, 15, 11, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 3px !important;
padding: 8px !important;
box-sizing: border-box !important;
}
.mw-parser-output audio,
audio.mw-file-element,
.mw-parser-output audio.mw-file-element,
audio.oo-ui-widget {
display: block !important;
width: 100% !important;
max-width: 440px !important;
min-width: 280px !important;
height: 40px !important;
margin: 12px auto !important;
background: rgba(6, 15, 11, 0.9) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 3px !important;
outline: none !important;
accent-color: #7dff9c !important;
}
.mw-parser-output audio::-webkit-media-controls-panel,
audio.mw-file-element::-webkit-media-controls-panel { background: rgba(6, 15, 11, 0.95) !important; border-radius: 3px !important; }
.mw-parser-output audio::-webkit-media-controls-play-button,
.mw-parser-output audio::-webkit-media-controls-mute-button,
audio.mw-file-element::-webkit-media-controls-play-button,
audio.mw-file-element::-webkit-media-controls-mute-button { filter: invert(1) sepia(1) saturate(3) hue-rotate(76deg) !important; }
.mw-parser-output audio::-webkit-media-controls-current-time-display,
.mw-parser-output audio::-webkit-media-controls-time-remaining-display,
audio.mw-file-element::-webkit-media-controls-current-time-display,
audio.mw-file-element::-webkit-media-controls-time-remaining-display {
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
}
.mw-parser-output blockquote:has(audio) {
background: rgba(6, 15, 11, 0.6) !important;
border: 1px solid rgba(125, 255, 156, 0.12) !important;
border-left: 3px solid rgba(125, 255, 156, 0.3) !important;
border-radius: 3px !important;
padding: 12px 16px !important;
font-style: italic !important;
color: #cce8d4 !important;
max-width: 480px !important;
margin: 12px auto !important;
}
/* ============================================================
30. PAGES CONNEXION & CRÉATION DE COMPTE — Codex (MW 1.45)
============================================================ */
.mw-special-Userlogin .mw-body-content,
.mw-special-CreateAccount .mw-body-content { display: flex !important; gap: 40px !important; align-items: flex-start !important; }
#userloginForm,
#createaccount {
background: rgba(6, 15, 11, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 4px !important;
padding: 24px !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 320px !important;
max-width: 480px !important;
box-sizing: border-box !important;
color: #cce8d4 !important;
}
#userloginForm .cdx-field, #createaccount .cdx-field { margin-bottom: 16px !important; }
#userloginForm .cdx-text-input, #createaccount .cdx-text-input,
#userloginForm .cdx-field, #createaccount .cdx-field { width: 100% !important; box-sizing: border-box !important; }
#userloginForm .cdx-label__label, #createaccount .cdx-label__label,
#userloginForm .cdx-label, #createaccount .cdx-label {
color: rgba(125, 255, 156, 0.6) !important; font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.12em !important;
margin-bottom: 6px !important; display: block !important;
}
#userloginForm .cdx-text-input__input,
#createaccount .cdx-text-input__input,
#userloginForm .cdx-text-input__input:enabled,
#createaccount .cdx-text-input__input:enabled {
width: 100% !important; box-sizing: border-box !important;
background-color: rgba(6, 15, 11, 0.9) !important;
border-color: rgba(125, 255, 156, 0.2) !important;
color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important; padding: 10px 12px !important;
}
#userloginForm .cdx-text-input__input:focus, #createaccount .cdx-text-input__input:focus {
border-color: #7dff9c !important; outline: none !important;
box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.12) !important;
}
#userloginForm .cdx-text-input__input:-webkit-autofill,
#createaccount .cdx-text-input__input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px rgba(6, 15, 11, 0.95) inset !important;
-webkit-text-fill-color: #cce8d4 !important;
}
#userloginForm .cdx-field__help-text, #createaccount .cdx-field__help-text { color: rgba(125, 255, 156, 0.3) !important; font-size: 11px !important; }
#wpLoginAttempt, #wpCreateaccount {
display: block !important; width: 100% !important; box-sizing: border-box !important;
background: rgba(125, 255, 156, 0.12) !important; border: 1px solid rgba(125, 255, 156, 0.4) !important;
border-radius: 2px !important; color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important; font-weight: 500 !important; text-transform: uppercase !important;
letter-spacing: 0.15em !important; padding: 14px !important; cursor: pointer !important;
margin-top: 8px !important; transition: all 0.2s !important;
}
#wpLoginAttempt:hover, #wpCreateaccount:hover { background: rgba(125, 255, 156, 0.22) !important; border-color: #7dff9c !important; box-shadow: 0 0 16px rgba(125, 255, 156, 0.2) !important; }
#userloginForm .mw-form-related-link-container, #createaccount .mw-form-related-link-container { margin-top: 16px !important; text-align: center !important; }
#userloginForm a, #createaccount a { color: #4ab06a !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }
#userloginForm .mw-ui-checkbox input + label, #wpRemember + label { color: #7aaa88 !important; font-size: 12px !important; font-family: 'IBM Plex Mono', monospace !important; text-transform: none !important; letter-spacing: 0 !important; }
.mw-createaccount-benefits-container { flex: 1 !important; padding: 20px !important; }
.mw-createaccount-benefits-heading { color: #cce8d4 !important; font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: 1.3em !important; margin-bottom: 24px !important; }
.mw-number-text h2 { color: rgba(125, 255, 156, 0.5) !important; font-size: 3em !important; }
.mw-number-text p { color: rgba(125, 255, 156, 0.35) !important; }
.mw-message-box-error, .errorbox { background: rgba(255, 94, 94, 0.1) !important; border: 1px solid rgba(255, 94, 94, 0.4) !important; color: #ff9a9a !important; border-radius: 2px !important; padding: 12px !important; margin-bottom: 16px !important; }
@media screen and (max-width: 720px) {
.mw-special-Userlogin .mw-body-content, .mw-special-CreateAccount .mw-body-content { flex-direction: column !important; }
#userloginForm, #createaccount { flex: none !important; width: 100% !important; max-width: 100% !important; padding: 16px !important; }
.mw-createaccount-benefits-container { display: none !important; }
}
/* ============================================================
31. PAGE PRÉFÉRENCES
============================================================ */
.oo-ui-tabSelectWidget { background: rgba(6, 15, 11, 0.9) !important; border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important; }
.oo-ui-tabOptionWidget { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; color: rgba(125, 255, 156, 0.4) !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; padding: 10px 16px !important; transition: color 0.15s, border-color 0.15s !important; }
.oo-ui-tabOptionWidget:hover { color: #7dff9c !important; background: rgba(125, 255, 156, 0.05) !important; }
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { color: #7dff9c !important; border-bottom-color: #7dff9c !important; background: rgba(125, 255, 156, 0.07) !important; }
#preferences { background: transparent !important; color: #cce8d4 !important; }
#preferences h2 { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; border-bottom: 1px dashed rgba(125, 255, 156, 0.15) !important; padding-bottom: 8px !important; margin: 24px 0 16px !important; }
#preferences .mw-htmlform-field label, #preferences .oo-ui-labelElement-label { color: #cce8d4 !important; font-size: 13px !important; }
#preferences .mw-htmlform-tip, #preferences .mw-htmlform-ooui .oo-ui-fieldLayout-help { color: rgba(125, 255, 156, 0.35) !important; font-size: 11px !important; }
#preferences input[type="text"], #preferences input[type="number"], #preferences input[type="email"], #preferences input[type="search"], #preferences textarea, #preferences .oo-ui-textInputWidget input { background: rgba(6, 15, 11, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 2px !important; color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; }
#preferences input:focus, #preferences .oo-ui-textInputWidget input:focus { border-color: #7dff9c !important; outline: none !important; box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.12) !important; }
#preferences .mw-htmlform-submit-buttons { background: rgba(6, 15, 11, 0.96) !important; border-top: 1px solid rgba(125, 255, 156, 0.15) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important; }
#preferences .mw-htmlform-submit-buttons .oo-ui-buttonElement-button, #prefsubmit { background: rgba(125, 255, 156, 0.12) !important; border: 1px solid rgba(125, 255, 156, 0.4) !important; color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; border-radius: 2px !important; }
#preferences .mw-htmlform-submit-buttons .oo-ui-buttonElement-button:hover, #prefsubmit:hover { background: rgba(125, 255, 156, 0.22) !important; border-color: #7dff9c !important; }
#preferences .mw-prefs-search input { 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; }
.oo-ui-dropdownWidget-handle { background: rgba(6, 15, 11, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 2px !important; color: #cce8d4 !important; }
.oo-ui-dropdownWidget-handle:hover { background: rgba(6, 15, 11, 0.95) !important; border-color: rgba(125, 255, 156, 0.4) !important; }
.oo-ui-dropdownWidget-handle .oo-ui-labelElement-label { color: #cce8d4 !important; }
.oo-ui-dropdownWidget .oo-ui-indicatorElement-indicator { filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important; opacity: 0.5 !important; }
.oo-ui-dropdownInputWidget select, #preferences select { background: rgba(6, 15, 11, 0.95) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; border-radius: 2px !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; padding: 8px 12px !important; }
.oo-ui-menuSelectWidget { background: rgba(8, 18, 12, 0.98) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 2px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important; }
.oo-ui-menuSelectWidget .oo-ui-optionWidget { color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; padding: 8px 14px !important; }
.oo-ui-menuSelectWidget .oo-ui-optionWidget:hover, .oo-ui-menuSelectWidget .oo-ui-optionWidget-highlighted { background: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important; }
.oo-ui-menuSelectWidget .oo-ui-optionWidget-selected { background: rgba(125, 255, 156, 0.12) !important; color: #7dff9c !important; }
.mw-htmlform-matrix, .mw-widget-checkMatrixWidget-matrix { border-collapse: collapse !important; width: 100% !important; background: transparent !important; }
.mw-htmlform-matrix th, .mw-widget-checkMatrixWidget-matrix th { color: rgba(125, 255, 156, 0.5) !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; padding: 8px 14px !important; border-bottom: 1px solid rgba(125, 255, 156, 0.12) !important; background: transparent !important; font-weight: 500 !important; }
.mw-htmlform-matrix td, .mw-widget-checkMatrixWidget-matrix td { padding: 6px 14px !important; border: 0 !important; background: transparent !important; color: #cce8d4 !important; font-size: 13px !important; }
.mw-htmlform-matrix tr:nth-child(even) td, .mw-widget-checkMatrixWidget-matrix tr:nth-child(even) td { background: rgba(125, 255, 156, 0.03) !important; }
.mw-htmlform-matrix tr.disabled td, .mw-widget-checkMatrixWidget-matrix tr.disabled td { color: rgba(125, 255, 156, 0.25) !important; }
.mw-htmlform-matrix tr, .mw-widget-checkMatrixWidget-matrix tr { background: transparent !important; }
.mw-htmlform-matrix .oo-ui-iconElement-icon, .mw-widget-checkMatrixWidget-matrix .oo-ui-iconElement-icon { filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important; opacity: 0.4 !important; }
.oo-ui-checkboxInputWidget [type='checkbox'] + span { background-color: rgba(6, 15, 11, 0.9) !important; background-image: none !important; border: 2px solid rgba(125, 255, 156, 0.3) !important; border-radius: 2px !important; width: 18px !important; height: 18px !important; }
.oo-ui-checkboxInputWidget [type='checkbox'] + span.vt-checked { background-color: #4ab06a !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpolyline points='1,5 4.5,8.5 11,1' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 12px 10px !important; border-color: #7dff9c !important; }
.oo-ui-checkboxInputWidget.oo-ui-widget-disabled [type='checkbox'] + span { opacity: 0.4 !important; }
.oo-ui-popupWidget-popup { background: rgba(8, 18, 12, 0.98) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 3px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important; color: #cce8d4 !important; padding: 12px 14px !important; font-size: 13px !important; line-height: 1.5 !important; }
.mw-widget-DateInputWidget input, .mw-widget-DateTimeInputWidget input { 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; border-radius: 2px !important; padding: 8px 12px !important; }
.oo-ui-calendarWidget { background: rgba(8, 18, 12, 0.98) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; border-radius: 3px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important; }
.oo-ui-calendarWidget-header { background: rgba(6, 15, 11, 0.95) !important; border-bottom: 1px solid rgba(125, 255, 156, 0.12) !important; padding: 8px !important; }
.oo-ui-calendarWidget-header .oo-ui-buttonElement-button { color: rgba(125, 255, 156, 0.5) !important; background: transparent !important; }
.oo-ui-calendarWidget-header .oo-ui-buttonElement-button:hover { color: #7dff9c !important; background: rgba(125, 255, 156, 0.08) !important; }
.oo-ui-calendarWidget-title { color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }
.oo-ui-calendarWidget .oo-ui-calendarWidget-day-of-week { color: rgba(125, 255, 156, 0.35) !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; }
.oo-ui-calendarWidget .oo-ui-calendarWidget-day { color: #cce8d4 !important; background: transparent !important; border-radius: 2px !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; }
.oo-ui-calendarWidget .oo-ui-calendarWidget-day:hover { background: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; }
.oo-ui-calendarWidget .oo-ui-calendarWidget-day-today { border: 1px solid rgba(125, 255, 156, 0.35) !important; color: #7dff9c !important; }
.oo-ui-calendarWidget .oo-ui-calendarWidget-day-selected { background: rgba(125, 255, 156, 0.18) !important; color: #7dff9c !important; font-weight: 600 !important; }
.oo-ui-calendarWidget .oo-ui-calendarWidget-day-prev-month, .oo-ui-calendarWidget .oo-ui-calendarWidget-day-next-month { color: rgba(125, 255, 156, 0.2) !important; }
/* ============================================================
33. ÉDITEUR WIKICODE — CodeMirror coloration syntaxique
============================================================ */
.ve-ui-mwWikitextSurface .CodeMirror,
.ve-ui-mwWikitextSurface .CodeMirror-scroll {
background: #060f0b !important;
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important;
line-height: 1.6 !important;
}
.ve-ui-mwWikitextSurface .CodeMirror-cursor { border-left-color: #7dff9c !important; }
.ve-ui-mwWikitextSurface .CodeMirror-selected,
.ve-ui-mwWikitextSurface .CodeMirror-focused .CodeMirror-selected { background: rgba(125, 255, 156, 0.15) !important; }
.ve-ui-mwWikitextSurface .CodeMirror-gutters { background: rgba(6, 15, 11, 0.95) !important; border-right: 1px solid rgba(125, 255, 156, 0.1) !important; }
.ve-ui-mwWikitextSurface .CodeMirror-linenumber { color: rgba(125, 255, 156, 0.22) !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.ve-ui-mwWikitextSurface .CodeMirror-activeline-background { background: rgba(125, 255, 156, 0.04) !important; }
.ve-ui-mwWikitextSurface .cm-mw-template-name,
.ve-ui-mwWikitextSurface .cm-mw-template-bracket { color: #f5c84a !important; }
.ve-ui-mwWikitextSurface .cm-mw-template-argument-name { color: #a8d8ea !important; }
.ve-ui-mwWikitextSurface .cm-mw-template-delimiter { color: rgba(245, 200, 74, 0.5) !important; }
.ve-ui-mwWikitextSurface .cm-mw-link-ground,
.ve-ui-mwWikitextSurface .cm-mw-link,
.ve-ui-mwWikitextSurface .cm-mw-link-pagename { color: #4ab06a !important; }
.ve-ui-mwWikitextSurface .cm-mw-link-bracket { color: rgba(74, 176, 106, 0.5) !important; }
.ve-ui-mwWikitextSurface .cm-mw-heading,
.ve-ui-mwWikitextSurface .cm-mw-section-header { color: #7dff9c !important; font-weight: bold !important; }
.ve-ui-mwWikitextSurface .cm-mw-htmlentity,
.ve-ui-mwWikitextSurface .cm-mw-tag-name { color: #ff9a9a !important; }
.ve-ui-mwWikitextSurface .cm-mw-tag-bracket { color: rgba(255, 154, 154, 0.5) !important; }
.ve-ui-mwWikitextSurface .cm-mw-attribute-name { color: #a8d8ea !important; }
.ve-ui-mwWikitextSurface .cm-mw-attribute-value { color: #f5c84a !important; }
.ve-ui-mwWikitextSurface .cm-mw-comment { color: rgba(125, 255, 156, 0.3) !important; font-style: italic !important; }
.ve-ui-mwWikitextSurface .cm-mw-apostrophes-bold { color: rgba(125, 255, 156, 0.5) !important; font-weight: bold !important; }
.ve-ui-mwWikitextSurface .cm-mw-apostrophes-italic { color: rgba(125, 255, 156, 0.5) !important; font-style: italic !important; }
.ve-ui-mwWikitextSurface .cm-mw-table-bracket,
.ve-ui-mwWikitextSurface .cm-mw-table-definition { color: rgba(168, 216, 234, 0.7) !important; }
.ve-ui-mwWikitextSurface .cm-mw-template-variable-bracket,
.ve-ui-mwWikitextSurface .cm-mw-template-variable-name { color: #ff9a9a !important; }
.ve-ui-mwWikitextSurface .cm-mw-parserfunction-name,
.ve-ui-mwWikitextSurface .cm-mw-parserfunction-bracket { color: rgba(245, 200, 74, 0.8) !important; }
.ve-ui-mwWikitextSurface .cm-mw-redirect { color: #7dff9c !important; font-weight: bold !important; }
/* ============================================================
34. BOUTON LANGUES INTERWIKI
============================================================ */
#vt-title-lang-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; }
#vt-title-lang-row #firstHeading { flex: 1 !important; min-width: 0 !important; }
#p-lang-btn { position: relative; flex-shrink: 0; margin-right: 36px !important; }
.vt-lang-btn-trigger {
display: inline-flex !important; align-items: center !important; gap: 6px !important;
background: rgba(125, 255, 156, 0.07) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 2px !important; color: rgba(125, 255, 156, 0.6) !important;
font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important;
text-transform: uppercase !important; letter-spacing: 0.1em !important;
padding: 6px 12px !important; cursor: pointer !important; white-space: nowrap !important;
transition: all 0.15s !important;
}
.vt-lang-btn-trigger:hover,
.vt-lang-btn-trigger[aria-expanded="true"] {
background: rgba(125, 255, 156, 0.14) !important;
border-color: rgba(125, 255, 156, 0.4) !important;
color: #7dff9c !important;
}
.vt-lang-list {
position: absolute; top: calc(100% + 4px); right: 0; z-index: 200;
background: rgba(8, 18, 12, 0.98) !important; border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 3px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
min-width: 180px; padding: 4px 0;
}
.vt-lang-list[hidden] { display: none !important; }
.vt-lang-list ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.vt-lang-list .interlanguage-link a {
display: flex !important; align-items: center !important; gap: 8px !important;
padding: 8px 16px !important; color: #cce8d4 !important; text-decoration: none !important;
font-size: 13px !important; font-family: 'Crimson Pro', Georgia, serif !important;
border-left: 2px solid transparent !important; transition: all 0.1s !important;
}
.vt-lang-list .interlanguage-link a:hover {
background: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important;
border-left-color: #4ab06a !important;
}
/* ============================================================
35. GALERIES & VIGNETTES (THUMBS)
============================================================ */
ul.gallery,
.mw-parser-output .gallery { background: transparent !important; border: 0 !important; margin: 16px 0 !important; padding: 0 !important; }
li.gallerybox,
.mw-parser-output .gallerybox { background: transparent !important; }
li.gallerybox div.thumb,
.gallerybox .thumb {
background: rgba(15, 28, 21, 0.65) !important;
border: 1px solid rgba(125, 255, 156, 0.18) !important;
border-radius: 2px !important; margin: 2px !important;
transition: all 0.15s ease;
}
li.gallerybox div.thumb:hover,
.gallerybox .thumb:hover {
border-color: rgba(125, 255, 156, 0.45) !important;
box-shadow: 0 0 12px rgba(125, 255, 156, 0.12);
}
.gallerytext,
.gallerybox .gallerytext {
color: #cce8d4 !important; background: transparent !important;
font-family: 'Crimson Pro', Georgia, serif !important; padding: 6px 8px !important;
}
.gallerytext p,
.gallerybox .gallerytext p { color: #cce8d4 !important; margin: 0 !important; }
.gallerytext a,
.gallerybox .gallerytext a { color: #7dff9c !important; }
.gallerytext a:hover,
.gallerybox .gallerytext a:hover { color: #b6ffc6 !important; }
.thumbinner,
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"],
.mw-parser-output figure.mw-default-size,
.mw-parser-output figure.thumb {
background: rgba(15, 28, 21, 0.65) !important;
border: 1px solid rgba(125, 255, 156, 0.18) !important;
border-radius: 2px !important; color: #cce8d4 !important;
}
.mw-parser-output figure[typeof~="mw:File/Thumb"] img.mw-file-element,
.mw-parser-output figure[typeof~="mw:File/Frame"] img.mw-file-element,
.mw-parser-output figure.mw-default-size img.mw-file-element {
background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important;
}
.mw-parser-output figure a.mw-file-description,
.mw-parser-output figure a {
border: 0 !important; outline: 0 !important; background: transparent !important; display: block;
}
.thumbcaption,
.mw-parser-output .thumbcaption,
figcaption,
.mw-parser-output figcaption {
color: #cce8d4 !important; background: transparent !important; border: 0 !important;
border-top: 0 !important; outline: 0 !important;
font-family: 'Crimson Pro', Georgia, serif !important;
font-style: italic; font-size: 13px !important; padding: 6px 8px !important;
}
.magnify a {
filter: invert(1) hue-rotate(90deg) saturate(0.6) brightness(1.2) !important;
opacity: 0.6 !important;
}
.magnify a:hover { opacity: 1 !important; }
/* ============================================================
36. SCROLLBAR MOBILE — masquage agressif
============================================================ */
@media screen and (max-width: 900px) {
.vt-page-tabs,
.vt-user-tools,
.vt-page-tabs *,
.vt-user-tools * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
.vt-page-tabs::-webkit-scrollbar,
.vt-user-tools::-webkit-scrollbar {
display: none !important; width: 0 !important; height: 0 !important; background: transparent !important;
}
.vt-page-tabs::-webkit-scrollbar-track,
.vt-user-tools::-webkit-scrollbar-track,
.vt-page-tabs::-webkit-scrollbar-thumb,
.vt-user-tools::-webkit-scrollbar-thumb { display: none !important; background: transparent !important; }
}
/* ============================================================
37. CITATIONS (blockquote)
============================================================ */
blockquote,
.mw-parser-output blockquote,
.mw-parser-output .noexcerpt:not(.avt-warn-banner):not(.avt-note-banner):not(.avt-section-banner) {
background: transparent !important; border: 0 !important; box-shadow: none !important;
padding: 8px 16px !important; margin: 16px auto !important;
font-style: italic; color: #cce8d4;
font-family: 'Crimson Pro', Georgia, serif;
font-size: 16px; line-height: 1.6;
}
blockquote p,
.mw-parser-output blockquote p {
margin: 0 0 8px !important; background: transparent !important; border: 0 !important;
}
blockquote p:last-child { margin-bottom: 0 !important; }
blockquote audio,
.mw-parser-output blockquote audio,
blockquote .mw-mmv-image,
blockquote figure,
blockquote .floatnone,
blockquote .center {
border: 0 !important; background: transparent !important; box-shadow: none !important;
margin: 8px auto !important;
}
/* ============================================================
38. PAGE RECHERCHE — Special:Recherche
============================================================ */
/* Conteneur principal */
.mw-search-results-container,
.searchresults,
#search,
.mw-special-search { color: #cce8d4 !important; }
.search-types,
.mw-search-profile-tabs,
.mw-search-form-wrapper {
background: transparent !important; border: 0 !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important;
}
/* Onglets (Articles / Tout / Multimédia) */
.mw-search-profile-tabs .selected a,
.mw-search-profile-tabs li.selected {
background: rgba(125, 255, 156, 0.1) !important;
border-color: rgba(125, 255, 156, 0.35) !important;
color: #7dff9c !important;
}
.mw-search-profile-tabs li a {
background: rgba(6, 15, 11, 0.6) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
}
.mw-search-profile-tabs li a:hover {
background: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important;
}
/* Champ de saisie principal */
.mw-search-box input[type="search"],
.mw-search-box input[type="text"],
#searchText input,
#powerSearchText {
background: rgba(8, 20, 14, 0.8) !important;
border: 1px solid rgba(125, 255, 156, 0.25) !important;
color: #cce8d4 !important; border-radius: 2px !important;
padding: 8px 12px !important; font-family: 'IBM Plex Mono', monospace !important;
}
.mw-search-box input:focus,
#powerSearchText:focus {
border-color: rgba(125, 255, 156, 0.6) !important; outline: none !important;
box-shadow: 0 0 8px rgba(125, 255, 156, 0.15) !important;
}
/* Bouton Rechercher */
.mw-search-box button,
.mw-search-box input[type="submit"],
#mw-search-top-table button[type="submit"] {
background: rgba(125, 255, 156, 0.12) !important;
border: 1px solid rgba(125, 255, 156, 0.3) !important;
color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important;
text-transform: uppercase !important; font-size: 11px !important;
letter-spacing: 0.1em !important; padding: 8px 16px !important;
cursor: pointer !important; border-radius: 2px !important;
}
.mw-search-box button:hover,
.mw-search-box input[type="submit"]:hover {
background: rgba(125, 255, 156, 0.22) !important;
border-color: rgba(125, 255, 156, 0.6) !important;
}
/* Résultats */
.mw-search-result,
.searchresult {
border-bottom: 1px solid rgba(125, 255, 156, 0.08) !important;
padding: 12px 0 !important; background: transparent !important;
}
.mw-search-result:hover { background: rgba(125, 255, 156, 0.04) !important; }
.mw-search-result-heading a,
.mw-search-results .mw-search-result-heading a {
color: #7dff9c !important; font-family: 'Crimson Pro', Georgia, serif !important;
font-size: 18px !important; font-style: italic !important; text-decoration: none !important;
}
.mw-search-result-heading a:hover { color: #b6ffc6 !important; text-decoration: underline !important; }
.searchresult,
.mw-search-result-data,
.mw-search-result .searchresult {
color: rgba(204, 232, 212, 0.75) !important; font-size: 14px !important;
}
.searchmatch {
color: #7dff9c !important; font-weight: bold !important;
background: rgba(125, 255, 156, 0.1) !important;
border-radius: 2px !important; padding: 0 2px !important;
}
.mw-search-result-data {
color: rgba(125, 255, 156, 0.4) !important; font-size: 12px !important;
font-family: 'IBM Plex Mono', monospace !important; margin-top: 4px !important;
}
.mw-search-ns input[type="checkbox"],
.mw-searchoption input[type="checkbox"] { accent-color: #4ab06a !important; }
.mw-search-ns label,
.mw-searchoption label { color: #cce8d4 !important; font-size: 13px !important; }
.mw-search-nonefound,
p.mw-search-nonefound {
color: rgba(204, 232, 212, 0.6) !important; font-style: italic !important;
border-left: 2px solid rgba(125, 255, 156, 0.25) !important; padding-left: 12px !important;
}
.searchdidyoumean,
.mw-search-exists { color: #cce8d4 !important; }
.searchdidyoumean a,
.mw-search-exists a { color: #7dff9c !important; }
.mw-search-pager-bottom .mw-prevlink,
.mw-search-pager-bottom .mw-nextlink,
.mw-search-pager-top .mw-prevlink,
.mw-search-pager-top .mw-nextlink {
color: #7dff9c !important; border: 1px solid rgba(125, 255, 156, 0.25) !important;
padding: 4px 12px !important; border-radius: 2px !important; text-decoration: none !important;
}
.mw-search-pager-bottom .mw-prevlink:hover,
.mw-search-pager-bottom .mw-nextlink:hover { background: rgba(125, 255, 156, 0.1) !important; }
.results-info,
#mw-search-top-table .results-info {
color: rgba(125, 255, 156, 0.5) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important; text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* Recherche avancée — header + bouton */
.mw-advancedSearch-container {
background: rgba(6, 15, 11, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.12) !important;
border-radius: 3px !important; margin-bottom: 16px !important;
}
.mw-advancedSearch-expandablePane-button {
background: rgba(15, 32, 21, 0.6) !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.1) !important;
}
.mw-advancedSearch-expandablePane-button .oo-ui-buttonElement-button {
background: transparent !important; border: 0 !important;
color: rgba(125, 255, 156, 0.5) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important; text-transform: uppercase !important;
letter-spacing: 0.12em !important; padding: 10px 16px !important;
cursor: pointer !important; transition: color 0.15s !important;
}
.mw-advancedSearch-expandablePane-button .oo-ui-buttonElement-button:hover {
color: #7dff9c !important; background: rgba(125, 255, 156, 0.05) !important;
}
.mw-advancedSearch-expandablePane-button .oo-ui-indicatorElement-indicator {
filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(400%) hue-rotate(76deg) !important;
opacity: 0.5 !important;
}
/* Panneau dépliable */
.mw-advancedSearch-expandablePane-pane,
.mw-advancedSearch-expandablePane-options,
.mw-advancedSearch-expandablePane-namespaces {
background: rgba(4, 10, 7, 0.6) !important;
border-top: 1px solid rgba(125, 255, 156, 0.1) !important;
padding: 16px !important;
}
.mw-advancedSearch-searchPreview,
.mw-advancedSearch-namespacesPreview { background: transparent !important; }
/* Wrapper global champs */
.mw-advancedSearch-fieldContainer {
background: transparent !important;
border: 0 !important; padding: 0 !important; margin: 0 !important;
}
/* Fieldsets */
.mw-advancedSearch-fieldContainer fieldset.oo-ui-fieldsetLayout,
.mw-advancedSearch-container fieldset.oo-ui-fieldsetLayout,
.mw-advancedSearch-expandablePane-pane fieldset.oo-ui-fieldsetLayout {
background: transparent !important; border: 0 !important;
border-top: 1px solid rgba(125, 255, 156, 0.1) !important;
margin: 0 !important; padding: 16px 0 !important;
}
.mw-advancedSearch-fieldContainer fieldset.oo-ui-fieldsetLayout:first-of-type {
border-top: 0 !important; padding-top: 0 !important;
}
/* Legend (titres de section) */
.mw-advancedSearch-fieldContainer legend.oo-ui-fieldsetLayout-header,
.mw-advancedSearch-container legend.oo-ui-fieldsetLayout-header,
.mw-advancedSearch-expandablePane-pane legend.oo-ui-fieldsetLayout-header,
.mw-special-Search .oo-ui-fieldsetLayout-header,
.mw-advancedSearch-container .oo-ui-fieldsetLayout-header {
background: transparent !important; border: 0 !important;
padding: 0 0 12px 0 !important; margin: 0 !important; width: 100% !important;
}
.mw-advancedSearch-fieldContainer legend.oo-ui-fieldsetLayout-header .oo-ui-labelElement-label,
.mw-advancedSearch-container legend.oo-ui-fieldsetLayout-header .oo-ui-labelElement-label,
.mw-special-Search .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label,
.mw-advancedSearch-container .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
color: rgba(125, 255, 156, 0.7) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important; text-transform: uppercase !important;
letter-spacing: 0.18em !important; font-weight: 500 !important;
}
/* OOUI wrappers transparents */
.mw-special-Search .oo-ui-panelLayout,
.mw-special-Search .oo-ui-fieldsetLayout,
.mw-special-Search .oo-ui-fieldsetLayout-group,
.mw-special-Search .oo-ui-fieldLayout,
.mw-special-Search .oo-ui-fieldLayout-body,
.mw-special-Search .oo-ui-fieldLayout-field,
.mw-special-Search .oo-ui-horizontalLayout,
.mw-search-form .oo-ui-panelLayout,
.mw-search-form .oo-ui-fieldsetLayout,
.mw-advancedSearch-container .oo-ui-panelLayout,
.mw-advancedSearch-container .oo-ui-fieldsetLayout,
.mw-advancedSearch-container .oo-ui-fieldsetLayout-group,
.mw-advancedSearch-container .oo-ui-fieldLayout,
.mw-advancedSearch-container .oo-ui-fieldLayout-body,
.mw-advancedSearch-container .oo-ui-fieldLayout-field,
.mw-advancedSearch-container .oo-ui-horizontalLayout,
.mw-advancedSearch-expandablePane-pane .oo-ui-panelLayout,
.mw-advancedSearch-expandablePane-pane .oo-ui-fieldsetLayout,
.mw-advancedSearch-expandablePane-pane .oo-ui-fieldsetLayout-group,
.mw-advancedSearch-expandablePane-pane .oo-ui-fieldLayout,
.mw-advancedSearch-expandablePane-pane .oo-ui-fieldLayout-body,
.mw-advancedSearch-expandablePane-pane .oo-ui-fieldLayout-field,
.mw-advancedSearch-expandablePane-pane .oo-ui-horizontalLayout,
.mw-advancedSearch-fieldContainer .oo-ui-fieldsetLayout-group {
background: transparent !important;
border: 0 !important; box-shadow: none !important;
padding: 0 !important; margin: 0 !important;
}
/* Catch-all label OOUI dans toute la zone recherche */
.mw-special-Search .oo-ui-labelElement-label,
.mw-advancedSearch-container .oo-ui-labelElement-label,
.mw-advancedSearch-fieldContainer .oo-ui-labelElement-label,
.mw-advancedSearch-expandablePane-pane .oo-ui-labelElement-label,
.mw-advancedSearch-expandablePane-options .oo-ui-labelElement-label,
.mw-advancedSearch-expandablePane-namespaces .oo-ui-labelElement-label {
color: rgba(204, 232, 212, 0.85) !important;
background: transparent !important;
}
/* Labels des fields */
.mw-advancedSearch-fieldContainer .oo-ui-fieldLayout-header .oo-ui-labelElement-label,
.mw-advancedSearch-fieldContainer .oo-ui-fieldLayout-header label,
.mw-advancedSearch-expandablePane-pane .oo-ui-fieldLayout-header .oo-ui-labelElement-label,
.mw-advancedSearch-expandablePane-pane .oo-ui-fieldLayout-header label {
color: rgba(204, 232, 212, 0.65) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important; text-transform: none !important;
letter-spacing: 0.02em !important; font-weight: 400 !important;
}
/* Inputs texte */
.mw-advancedSearch-fieldContainer .oo-ui-textInputWidget,
.mw-advancedSearch-fieldContainer .oo-ui-textInputWidget input,
.mw-advancedSearch-expandablePane-pane .oo-ui-textInputWidget input,
.mw-advancedSearch-expandablePane-options input[type="text"],
.mw-advancedSearch-expandablePane-options input[type="search"],
.mw-advancedSearch-expandablePane-options input[type="number"] {
background: rgba(4, 10, 7, 0.95) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 2px !important; color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important; padding: 8px 12px !important;
caret-color: #7dff9c !important; min-height: 36px !important;
}
.mw-advancedSearch-fieldContainer .oo-ui-textInputWidget input:focus,
.mw-advancedSearch-expandablePane-options input:focus {
border-color: rgba(125, 255, 156, 0.5) !important;
box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.1) !important;
outline: none !important;
}
.mw-advancedSearch-fieldContainer .oo-ui-textInputWidget input::placeholder,
.mw-advancedSearch-expandablePane-options input::placeholder {
color: rgba(125, 255, 156, 0.25) !important; font-style: italic !important;
}
/* Tags multiselect */
.mw-advancedSearch-fieldContainer .oo-ui-tagMultiselectWidget,
.mw-advancedSearch-fieldContainer .oo-ui-tagMultiselectWidget-handle,
.mw-advancedSearch-fieldContainer .oo-ui-tagMultiselectWidget-content,
.mw-advancedSearch-fieldContainer .oo-ui-tagMultiselectWidget-group {
background: rgba(4, 10, 7, 0.95) !important;
border: 0 !important;
}
.mw-advancedSearch-fieldContainer .oo-ui-tagMultiselectWidget-handle {
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 2px !important;
min-height: 36px !important; padding: 4px 8px !important;
}
.mw-advancedSearch-fieldContainer .oo-ui-tagMultiselectWidget-handle:focus-within {
border-color: rgba(125, 255, 156, 0.5) !important;
box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.1) !important;
}
.mw-advancedSearch-fieldContainer .oo-ui-tagMultiselectWidget input.oo-ui-inputWidget-input {
background: transparent !important; border: 0 !important;
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important; padding: 4px !important; min-height: 26px !important;
}
/* Tags items */
.mw-advancedSearch-namespace .oo-ui-tagItemWidget,
.mw-advancedSearch-expandablePane-namespaces .oo-ui-tagItemWidget,
.mw-advancedSearch-fieldContainer .oo-ui-tagItemWidget {
background: rgba(125, 255, 156, 0.1) !important;
border: 1px solid rgba(125, 255, 156, 0.3) !important;
border-radius: 2px !important; color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important;
}
.mw-advancedSearch-namespace .oo-ui-tagItemWidget .oo-ui-labelElement-label,
.mw-advancedSearch-fieldContainer .oo-ui-tagItemWidget .oo-ui-labelElement-label {
color: #7dff9c !important; text-transform: none !important;
}
.mw-advancedSearch-namespace .oo-ui-tagItemWidget .oo-ui-buttonElement-button,
.mw-advancedSearch-fieldContainer .oo-ui-tagItemWidget .oo-ui-buttonElement-button {
color: rgba(125, 255, 156, 0.5) !important;
background: transparent !important; border: 0 !important;
}
.mw-advancedSearch-namespace .oo-ui-tagItemWidget .oo-ui-buttonElement-button:hover,
.mw-advancedSearch-fieldContainer .oo-ui-tagItemWidget .oo-ui-buttonElement-button:hover {
color: #ff7a7a !important;
}
/* Champ "Ajouter des espaces de noms" */
.mw-advancedSearch-namespace .oo-ui-tagMultiselectWidget-handle,
.mw-advancedSearch-expandablePane-namespaces .oo-ui-tagMultiselectWidget {
background: rgba(4, 10, 7, 0.95) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 2px !important; min-height: 36px !important;
padding: 4px 8px !important;
}
.mw-advancedSearch-namespace .oo-ui-tagMultiselectWidget input,
.mw-advancedSearch-expandablePane-namespaces .oo-ui-tagMultiselectWidget input {
color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important;
font-size: 12px !important; background: transparent !important; border: 0 !important;
}
.mw-advancedSearch-namespace .oo-ui-tagMultiselectWidget input::placeholder {
color: rgba(125, 255, 156, 0.25) !important; font-style: italic !important;
}
/* Selects natifs */
.mw-advancedSearch-fieldContainer select.oo-ui-inputWidget-input,
.mw-advancedSearch-container select.oo-ui-inputWidget-input,
.mw-advancedSearch-expandablePane-pane select.oo-ui-inputWidget-input,
.mw-advancedSearch-fieldContainer .oo-ui-dropdownInputWidget select,
.mw-advancedSearch-container .oo-ui-dropdownInputWidget select {
background: rgba(4, 10, 7, 0.95) !important;
color: #cce8d4 !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important;
}
.mw-advancedSearch-fieldContainer select.oo-ui-inputWidget-input option,
.mw-advancedSearch-fieldContainer select.oo-ui-inputWidget-input optgroup {
background: #060f0b !important; color: #cce8d4 !important;
}
.mw-advancedSearch-fieldContainer select.oo-ui-inputWidget-input optgroup {
color: rgba(125, 255, 156, 0.6) !important; font-style: italic !important;
}
/* Dropdown handle */
.mw-advancedSearch-expandablePane-pane .oo-ui-dropdownWidget-handle,
.mw-advancedSearch-expandablePane-options .oo-ui-dropdownWidget-handle {
background: rgba(4, 10, 7, 0.95) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 2px !important; color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 12px !important; min-height: 36px !important;
}
.mw-advancedSearch-expandablePane-pane .oo-ui-dropdownWidget-handle:hover {
border-color: rgba(125, 255, 156, 0.4) !important;
}
.mw-advancedSearch-expandablePane-pane .oo-ui-dropdownWidget .oo-ui-labelElement-label {
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important;
}
.mw-advancedSearch-expandablePane-pane .oo-ui-indicatorElement-indicator,
.mw-advancedSearch-expandablePane-options .oo-ui-indicatorElement-indicator {
filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(400%) hue-rotate(76deg) !important;
opacity: 0.4 !important;
}
/* Checkboxes Special:Search */
.mw-special-Search .oo-ui-checkboxInputWidget [type='checkbox'] + span,
.mw-advancedSearch-container .oo-ui-checkboxInputWidget [type='checkbox'] + span {
background-color: rgba(6, 15, 11, 0.95) !important;
background-image: none !important;
border: 1.5px solid rgba(125, 255, 156, 0.35) !important;
border-radius: 2px !important;
}
.mw-special-Search .oo-ui-checkboxInputWidget [type='checkbox']:checked + span,
.mw-advancedSearch-container .oo-ui-checkboxInputWidget [type='checkbox']:checked + span {
background-color: rgba(125, 255, 156, 0.18) !important;
border-color: #7dff9c !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpolyline points='1,5 4.5,8.5 11,1' stroke='%237dff9c' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 10px !important;
}
/* Header sélecteur namespaces */
.mw-advancedSearch-namespace-selection-header,
.mw-advancedSearch-namespace-selection,
.mw-advancedSearch-namespacesPreview {
background: transparent !important; border: 0 !important;
display: flex !important; align-items: center !important;
justify-content: flex-end !important;
padding: 8px 0 !important; margin-bottom: 8px !important;
}
.mw-advancedSearch-namespace-selection-header .oo-ui-checkboxInputWidget,
.mw-advancedSearch-namespace-selection-header .oo-ui-fieldLayout {
background: transparent !important;
}
.mw-advancedSearch-namespace-selection-header .oo-ui-labelElement-label,
.mw-advancedSearch-namespace-selection-header label {
color: rgba(125, 255, 156, 0.55) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important; text-transform: uppercase !important;
letter-spacing: 0.1em !important; font-weight: 400 !important; cursor: pointer !important;
}
/* Boutons preset namespaces */
.mw-advancedSearch-namespacesPreset .oo-ui-buttonElement-button,
.mw-advancedSearch-namespace-presets .oo-ui-buttonElement-button,
.mw-advancedSearch-namespace-presets-buttonSelectWidget .oo-ui-buttonElement-button {
background: rgba(6, 15, 11, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
color: rgba(125, 255, 156, 0.6) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important; text-transform: uppercase !important;
letter-spacing: 0.1em !important; border-radius: 2px !important;
padding: 6px 12px !important;
}
.mw-advancedSearch-namespacesPreset .oo-ui-buttonElement-button:hover,
.mw-advancedSearch-namespace-presets .oo-ui-buttonElement-button:hover {
background: rgba(125, 255, 156, 0.08) !important;
border-color: rgba(125, 255, 156, 0.4) !important;
color: #7dff9c !important;
}
.mw-advancedSearch-namespacesPreset .oo-ui-buttonElement.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button,
.mw-advancedSearch-namespace-presets .oo-ui-buttonElement.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
background: rgba(125, 255, 156, 0.15) !important;
border-color: #7dff9c !important; color: #7dff9c !important;
}
.mw-advancedSearch-namespacesPreset .oo-ui-buttonGroupWidget,
.mw-advancedSearch-namespace-presets .oo-ui-buttonGroupWidget,
.mw-advancedSearch-namespacesPreset,
.mw-advancedSearch-namespace-presets,
#mw-search-ns,
.mw-search-namespaces {
background: transparent !important; border: 0 !important;
}
/* Suffixe "px" */
.mw-advancedSearch-fieldContainer .oo-ui-textInputWidget-labelPosition-after .oo-ui-labelElement-label {
background: rgba(125, 255, 156, 0.06) !important;
color: rgba(125, 255, 156, 0.5) !important;
border-left: 1px solid rgba(125, 255, 156, 0.15) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important; padding: 0 10px !important;
}
/* Icônes ⓘ d'aide */
.mw-advancedSearch-expandablePane-pane .oo-ui-iconElement-icon,
.mw-advancedSearch-expandablePane-options .oo-ui-iconElement-icon,
.mw-advancedSearch-fieldContainer .oo-ui-iconElement-icon {
filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(400%) hue-rotate(76deg) !important;
opacity: 0.4 !important;
}
/* Aucun résultat + lien créer */
.mw-search-createlink {
margin-top: 16px !important; padding: 12px !important;
background: rgba(245, 200, 74, 0.05) !important;
border-left: 2px solid rgba(245, 200, 74, 0.4) !important;
border-radius: 2px !important; color: rgba(204, 232, 212, 0.7) !important;
}
.mw-search-createlink a { color: #f5c84a !important; font-weight: 500 !important; }
.mw-search-createlink a:hover { color: #ffe080 !important; }
/* Conteneur global form */
.mw-search-form-wrapper,
#search,
.mw-special-Search #search {
background: rgba(6, 15, 11, 0.4) !important;
border: 1px solid rgba(125, 255, 156, 0.1) !important;
border-radius: 3px !important; padding: 0 !important;
}
/* ============================================================
39. NOTIFICATIONS / TOAST POST-PUBLICATION
============================================================ */
.mw-notification,
.mw-notification-area .mw-notification,
.postedit,
.postedit-container {
background: rgba(8, 18, 12, 0.97) !important;
border: 1px solid rgba(125, 255, 156, 0.35) !important;
border-radius: 3px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(125, 255, 156, 0.1) !important;
color: #cce8d4 !important;
padding: 12px 16px !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.mw-notification-success,
.mw-notification.mw-notification-type-success,
.mw-notification[data-mw-notification-type="success"] {
border-left: 3px solid #7dff9c !important;
border-color: rgba(125, 255, 156, 0.4) !important;
}
.mw-notification-warn,
.mw-notification.mw-notification-type-warn {
border-left: 3px solid #f5c84a !important;
border-color: rgba(245, 200, 74, 0.4) !important;
}
.mw-notification-error,
.mw-notification.mw-notification-type-error {
border-left: 3px solid #ff7a7a !important;
border-color: rgba(255, 122, 122, 0.4) !important;
}
.mw-notification p,
.mw-notification div,
.mw-notification span,
.postedit-content {
color: #cce8d4 !important;
background: transparent !important;
font-family: 'Crimson Pro', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.mw-notification strong,
.mw-notification b {
color: #7dff9c !important;
font-weight: 600 !important;
}
.mw-notification a,
.postedit a {
color: #7dff9c !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.3) !important;
}
.mw-notification a:hover,
.postedit a:hover {
color: #b6ffc6 !important;
border-bottom-color: #7dff9c !important;
}
.mw-notification .oo-ui-iconElement-icon,
.postedit .oo-ui-iconElement-icon {
filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important;
opacity: 0.9 !important;
}
.mw-notification-close,
.postedit-icon-close {
filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(400%) hue-rotate(76deg) !important;
opacity: 0.5 !important;
transition: opacity 0.15s !important;
}
.mw-notification-close:hover,
.postedit-icon-close:hover { opacity: 1 !important; }
.mw-notification-area { background: transparent !important; }
/* ============================================================
40. WIKITABLE — adaptation à l'infobox (desktop)
============================================================ */
@media screen and (min-width: 721px) {
.mw-parser-output:has(.avt-infobox) .wikitable,
.mw-parser-output:has(.avt-infobox) .va-table {
max-width: calc(100% - 344px) !important; /* 320px infobox + ~1.5em marge */
width: auto !important;
}
}
/* ============================================================
41. CORRECTIONS AVANCÉES — liens, tableaux collapsibles
============================================================ */
/* Liens rouges (.new) dans les tableaux — ne pas écraser avec le vert */
.mw-parser-output table td a.new,
.mw-parser-output table th a.new,
.mw-parser-output .wikitable td a.new,
.mw-parser-output .wikitable th a.new,
.mw-parser-output .va-table td a.new {
color: #ff5e5e !important;
}
.mw-parser-output table td a.new:hover,
.mw-parser-output .wikitable td a.new:hover {
color: #ff8888 !important;
}
/* Liens externes — ambre pour les distinguer des liens internes */
.mw-parser-output a.external,
.mw-parser-output a[rel~="nofollow"] {
color: #f5c84a !important;
}
.mw-parser-output a.external:visited,
.mw-parser-output a[rel~="nofollow"]:visited {
color: #c9973a !important;
}
.mw-parser-output a.external:hover,
.mw-parser-output a[rel~="nofollow"]:hover {
color: #ffe080 !important;
}
/* Tableaux collapsibles — ne pas bloquer le JS avec !important sur display */
/* Le JS MediaWiki masque les lignes via style="display:none" inline.
Toute règle CSS avec !important sur display écrase ce comportement.
On stylise uniquement l'apparence sans toucher display. */
.mw-collapsible-toggle,
.mw-collapsible-toggle a {
color: rgba(125, 255, 156, 0.55) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
cursor: pointer !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
}
.mw-collapsible-toggle a:hover,
.mw-collapsible-toggle:hover {
color: #7dff9c !important;
background: transparent !important;
}
/* Ligne d'en-tête collapsible */
.mw-parser-output .wikitable.mw-collapsible > tbody > tr:first-child > th,
.mw-parser-output table.mw-collapsible > tbody > tr:first-child > th {
background: rgba(10, 22, 16, 0.95) !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.2) !important;
}
/* Cellules avec style inline "background: white" ou couleur claire — reset */
.mw-parser-output .wikitable td[style*="background:#fff"],
.mw-parser-output .wikitable td[style*="background: #fff"],
.mw-parser-output .wikitable td[style*="background:white"],
.mw-parser-output .wikitable td[style*="background: white"],
.mw-parser-output .wikitable td[style*="background:#FFF"],
.mw-parser-output .wikitable td[style*="background: #FFF"] {
background-color: rgba(12, 24, 18, 0.85) !important;
color: #cce8d4 !important;
}
/* Titre de page — ne pas hériter de l'italique des h2 */
#firstHeading,
.firstHeading {
font-style: normal !important;
}
/* ============================================================
42. PAGE PREVIEWS — aperçus au survol des liens (Hovercards)
============================================================ */
/* Conteneur racine — fond sombre + ombrage phosphore */
.mwe-popups,
.mwe-popups.mwe-popups-fade-in-up,
.mwe-popups.mwe-popups-fade-in-down,
.mwe-popups.mwe-popups-no-image-tri,
.mwe-popups.mwe-popups-image-tri,
.mwe-popups.mwe-popups-image-pointer,
.mwe-popups.mwe-popups-is-not-tall,
.mwe-popups.mwe-popups-is-tall {
background: rgba(8, 18, 12, 0.98) !important;
border: 1px solid rgba(125, 255, 156, 0.25) !important;
border-radius: 3px !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.75),
0 0 12px rgba(125, 255, 156, 0.08) !important;
color: #cce8d4 !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Force transparence sur tous les conteneurs internes —
neutralise les fonds blancs résiduels (div, a, container) */
.mwe-popups > div,
.mwe-popups > a,
.mwe-popups > a > div,
.mwe-popups .mwe-popups-container,
.mwe-popups .mwe-popups-extract,
.mwe-popups .mwe-popups-extract p,
.mwe-popups .mwe-popups-discreet,
.mwe-popups .mwe-popups-scroll,
.mwe-popups .mwe-popups-body {
background-color: transparent !important;
}
/* Lien englobant (<a>) cliquable — fond blanc natif neutralisé */
.mwe-popups a,
.mwe-popups a:link,
.mwe-popups a:visited,
.mwe-popups a:hover {
background: transparent !important;
color: #cce8d4 !important;
text-decoration: none !important;
}
/* Pointe (triangle) — masquer la version blanche par défaut */
.mwe-popups.flipped-x::before,
.mwe-popups.flipped-y::before,
.mwe-popups.flipped-x-y::before,
.mwe-popups::before,
.mwe-popups.flipped-x::after,
.mwe-popups.flipped-y::after,
.mwe-popups.flipped-x-y::after,
.mwe-popups::after {
border-color: transparent !important;
display: none !important;
}
/* Titre de l'article dans le popup */
.mwe-popups .mwe-popups-title,
.mwe-popups h3,
.mwe-popups .mwe-popups-extract h3 {
color: #7dff9c !important;
font-family: 'Instrument Serif', Georgia, serif !important;
font-style: italic !important;
font-size: 1.1rem !important;
font-weight: normal !important;
border: 0 !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
}
/* Indicateur de type d'article (icône à côté du titre) */
.mwe-popups .mwe-popups-title .mw-ui-icon {
filter: brightness(0) saturate(100%) invert(91%) sepia(15%)
saturate(594%) hue-rotate(76deg) brightness(101%) !important;
opacity: 0.65 !important;
}
/* Extrait / résumé textuel */
.mwe-popups .mwe-popups-extract {
color: #cce8d4 !important;
font-family: 'Crimson Pro', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.5 !important;
padding: 14px 16px !important;
}
/* Variante "discreet" : titre seul, sans extrait */
.mwe-popups .mwe-popups-discreet {
padding: 10px 14px !important;
}
/* Conteneur de la miniature (image d'aperçu) */
.mwe-popups .mwe-popups-thumbnail,
.mwe-popups .mwe-popups-thumbnail-link,
.mwe-popups svg.mwe-popups-thumbnail {
background: rgba(6, 15, 11, 0.6) !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.12) !important;
}
/* Filtre teinte phosphore sur la miniature pour rester dans le ton */
.mwe-popups .mwe-popups-thumbnail image,
.mwe-popups svg.mwe-popups-thumbnail image {
filter: brightness(0.92) saturate(0.9) hue-rotate(-8deg) !important;
}
/* Aperçus "désambiguïsation" / page d'homonymie */
.mwe-popups.mwe-popups-type-disambiguation {
border-color: rgba(245, 200, 74, 0.35) !important;
}
.mwe-popups.mwe-popups-type-disambiguation .mwe-popups-title {
color: #f5c84a !important;
}
/* Aperçus "lien rouge" (page inexistante) */
.mwe-popups.mwe-popups-type-generic {
border-color: rgba(255, 122, 122, 0.35) !important;
}
.mwe-popups.mwe-popups-type-generic .mwe-popups-title {
color: #ff7a7a !important;
}
/* Barre du bas : paramètres + lien "lire la suite" */
.mwe-popups .mwe-popups-settings,
.mwe-popups footer,
.mwe-popups .mwe-popups-read-link {
background: rgba(6, 15, 11, 0.6) !important;
border-top: 1px solid rgba(125, 255, 156, 0.12) !important;
padding: 8px 14px !important;
}
/* Lien "lire la suite" */
.mwe-popups .mwe-popups-read-link {
color: #4ab06a !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
text-decoration: none !important;
}
.mwe-popups .mwe-popups-read-link:hover {
color: #7dff9c !important;
}
/* Icône engrenage des paramètres */
.mwe-popups .mwe-popups-settings-icon,
.mwe-popups .mw-ui-icon-popups-settings {
filter: brightness(0) saturate(100%) invert(72%) sepia(20%)
saturate(400%) hue-rotate(76deg) brightness(100%) !important;
opacity: 0.45 !important;
transition: opacity 0.15s !important;
}
.mwe-popups .mwe-popups-settings-icon:hover,
.mwe-popups .mw-ui-icon-popups-settings:hover {
opacity: 1 !important;
}
/* Dialogue des paramètres Page Previews (Spécial:Préférences modal) */
.mwe-popups-settings .oo-ui-window-frame,
.mw-popups-settings .oo-ui-window-frame {
background: rgba(10, 20, 15, 0.98) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
}
/* ============================================================
43. DIFF VIEW — comparaison de versions
============================================================ */
/* Tableau de diff principal */
.diff,
table.diff,
table.mw-diff-table {
background: transparent !important;
border: 0 !important;
border-collapse: collapse !important;
width: 100% !important;
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 12.5px !important;
}
/* Colonnes header (Version du …) */
.diff-otitle,
.diff-ntitle {
background: rgba(15, 32, 21, 0.8) !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.2) !important;
color: #cce8d4 !important;
padding: 8px 12px !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-align: center !important;
}
.diff-otitle a,
.diff-ntitle a { color: #7dff9c !important; }
.diff-otitle a:hover,
.diff-ntitle a:hover { color: #b6ffc6 !important; }
/* Marqueurs +/- en marge */
.diff-marker {
color: rgba(125, 255, 156, 0.5) !important;
background: transparent !important;
font-weight: bold !important;
padding: 0 4px !important;
width: 2em !important;
text-align: right !important;
}
/* Numéros de ligne (gouttière) */
.diff-lineno {
background: rgba(6, 15, 11, 0.9) !important;
color: rgba(125, 255, 156, 0.5) !important;
border-bottom: 1px dashed rgba(125, 255, 156, 0.12) !important;
font-size: 10px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
padding: 4px 8px !important;
}
/* Ligne contextuelle (non modifiée) */
.diff-context {
background: rgba(6, 15, 11, 0.4) !important;
color: rgba(204, 232, 212, 0.55) !important;
border-color: rgba(125, 255, 156, 0.08) !important;
padding: 2px 8px !important;
}
/* Ligne supprimée (à gauche) */
.diff-deletedline,
td.diff-deletedline {
background: rgba(255, 94, 94, 0.06) !important;
border-color: rgba(255, 94, 94, 0.2) !important;
color: #cce8d4 !important;
padding: 2px 8px !important;
}
.diff-deletedline .diffchange {
background: rgba(255, 94, 94, 0.22) !important;
color: #ffb8b8 !important;
text-decoration: none !important;
padding: 1px 2px !important;
border-radius: 1px !important;
font-weight: 500 !important;
}
/* Ligne ajoutée (à droite) */
.diff-addedline,
td.diff-addedline {
background: rgba(125, 255, 156, 0.06) !important;
border-color: rgba(125, 255, 156, 0.2) !important;
color: #cce8d4 !important;
padding: 2px 8px !important;
}
.diff-addedline .diffchange {
background: rgba(125, 255, 156, 0.22) !important;
color: #b6ffc6 !important;
text-decoration: none !important;
padding: 1px 2px !important;
border-radius: 1px !important;
font-weight: 500 !important;
}
/* Ligne vide (séparateur sections du diff) */
.diff-empty { background: transparent !important; }
/* Marqueur "Ligne X :" */
.mw-diff-otitle1,
.mw-diff-otitle2,
.mw-diff-otitle3,
.mw-diff-otitle4,
.mw-diff-otitle5,
.mw-diff-ntitle1,
.mw-diff-ntitle2,
.mw-diff-ntitle3,
.mw-diff-ntitle4,
.mw-diff-ntitle5 {
color: #cce8d4 !important;
font-family: 'Crimson Pro', Georgia, serif !important;
font-size: 13px !important;
}
/* Bouton "annuler/défaire" en tête de diff */
.mw-diff-undo a,
.mw-diff-revert a {
color: #f5c84a !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
/* Inline diff (pour DiscussionTools, MobileFrontend) */
.mw-diff-inline-added,
ins.mw-diff-inline-added {
background: rgba(125, 255, 156, 0.18) !important;
color: #b6ffc6 !important;
text-decoration: none !important;
border-radius: 1px !important;
padding: 0 2px !important;
}
.mw-diff-inline-deleted,
del.mw-diff-inline-deleted {
background: rgba(255, 94, 94, 0.18) !important;
color: #ffb8b8 !important;
text-decoration: line-through !important;
border-radius: 1px !important;
padding: 0 2px !important;
}
/* Indicateur de modification (édition tag) */
.mw-tag-marker,
.mw-tag-markers a {
background: rgba(245, 200, 74, 0.12) !important;
border: 1px solid rgba(245, 200, 74, 0.3) !important;
color: #f5c84a !important;
padding: 1px 6px !important;
border-radius: 2px !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* ============================================================
44. DISCUSSIONTOOLS — pages de discussion modernes
============================================================ */
/* Boutons "Répondre", "Souscrire", "Ajouter un sujet" */
.ext-discussiontools-init-replylink-buttons .oo-ui-buttonElement-button,
.ext-discussiontools-init-section-subscribeButton .oo-ui-buttonElement-button,
.ext-discussiontools-init-new-topic .oo-ui-buttonElement-button {
background: transparent !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
color: rgba(125, 255, 156, 0.7) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
border-radius: 2px !important;
padding: 4px 10px !important;
transition: all 0.15s !important;
}
.ext-discussiontools-init-replylink-buttons .oo-ui-buttonElement-button:hover,
.ext-discussiontools-init-section-subscribeButton .oo-ui-buttonElement-button:hover,
.ext-discussiontools-init-new-topic .oo-ui-buttonElement-button:hover {
background: rgba(125, 255, 156, 0.08) !important;
border-color: rgba(125, 255, 156, 0.5) !important;
color: #7dff9c !important;
}
/* Icônes des boutons */
.ext-discussiontools-init-replylink-buttons .oo-ui-iconElement-icon,
.ext-discussiontools-init-section-subscribeButton .oo-ui-iconElement-icon {
filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important;
opacity: 0.65 !important;
}
/* Liens "Répondre" / "Modifier" textuels (legacy) */
.ext-discussiontools-init-replylink-reply,
.ext-discussiontools-init-replylink-open {
color: #4ab06a !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
text-decoration: none !important;
}
.ext-discussiontools-init-replylink-reply:hover,
.ext-discussiontools-init-replylink-open:hover {
color: #7dff9c !important;
}
/* Conteneur d'une section commentée */
.ext-discussiontools-init-section,
.ext-discussiontools-init-highlight,
.ext-discussiontools-init-targetcomment {
background: rgba(125, 255, 156, 0.04) !important;
border-left: 2px solid rgba(125, 255, 156, 0.25) !important;
padding-left: 12px !important;
margin: 8px 0 !important;
border-radius: 2px !important;
}
/* Surlignage du commentaire ciblé (lien #cXXX) */
.ext-discussiontools-init-targetcomment {
background: rgba(245, 200, 74, 0.08) !important;
border-left-color: rgba(245, 200, 74, 0.4) !important;
}
/* Boîte d'auteur de commentaire */
.ext-discussiontools-init-timestamplink {
color: rgba(125, 255, 156, 0.5) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
}
.ext-discussiontools-init-timestamplink:hover { color: #7dff9c !important; }
/* Surface d'édition inline */
.ext-discussiontools-ui-replyWidget,
.ext-discussiontools-ui-newTopic {
background: rgba(6, 15, 11, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 3px !important;
padding: 12px !important;
margin: 8px 0 !important;
}
/* Boutons "Publier" / "Annuler" du widget réponse */
.ext-discussiontools-ui-replyWidget-actions .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button,
.ext-discussiontools-ui-replyWidget-actions .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button {
background: rgba(125, 255, 156, 0.15) !important;
border: 1px solid rgba(125, 255, 156, 0.4) !important;
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
.ext-discussiontools-ui-replyWidget-actions .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button:hover,
.ext-discussiontools-ui-replyWidget-actions .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover {
background: rgba(125, 255, 156, 0.28) !important;
border-color: #7dff9c !important;
box-shadow: 0 0 10px rgba(125, 255, 156, 0.2) !important;
}
/* Mode "ping" — mention d'un utilisateur */
.ext-discussiontools-init-pingmark {
color: #7dff9c !important;
background: rgba(125, 255, 156, 0.1) !important;
border-radius: 2px !important;
padding: 0 4px !important;
}
/* ============================================================
45. ECHO — badges & menus de notifications (header)
============================================================ */
/* Cloches dans la barre utilisateur */
.mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
background: transparent !important;
color: rgba(125, 255, 156, 0.6) !important;
border: 0 !important;
padding: 4px 6px !important;
}
.mw-echo-notifications-badge:hover {
color: #7dff9c !important;
background: rgba(125, 255, 156, 0.08) !important;
}
/* Badge "non lu" (cercle rouge avec nombre) */
.mw-echo-notifications-badge-all-read { opacity: 0.5 !important; }
.mw-echo-unread-notifications {
background: #f5c84a !important;
color: #06100b !important;
border-radius: 50% !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 9px !important;
font-weight: 600 !important;
padding: 2px 5px !important;
min-width: 16px !important;
text-align: center !important;
}
/* Popup déroulant des notifications */
.mw-echo-ui-notificationsListWidget,
.mw-echo-ui-overlay,
.oo-ui-popupWidget.mw-echo-ui-notificationBadgeButton-popup .oo-ui-popupWidget-popup {
background: rgba(8, 18, 12, 0.98) !important;
border: 1px solid rgba(125, 255, 156, 0.25) !important;
border-radius: 3px !important;
color: #cce8d4 !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75) !important;
}
/* Header du popup (Notifications / Alertes / Avis) */
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper,
.mw-echo-ui-notificationsWrapper-header {
background: rgba(6, 15, 11, 0.95) !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important;
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
padding: 10px 14px !important;
}
/* Chaque ligne de notification */
.mw-echo-ui-notificationItemWidget {
background: transparent !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.08) !important;
padding: 10px 14px !important;
color: #cce8d4 !important;
font-family: 'Crimson Pro', Georgia, serif !important;
transition: background 0.1s !important;
}
.mw-echo-ui-notificationItemWidget:hover {
background: rgba(125, 255, 156, 0.05) !important;
}
/* Notification non lue */
.mw-echo-ui-notificationItemWidget-unread {
background: rgba(125, 255, 156, 0.04) !important;
border-left: 2px solid rgba(125, 255, 156, 0.4) !important;
}
/* Texte principal de la notif */
.mw-echo-ui-notificationItemWidget-content-message-header { color: #cce8d4 !important; }
.mw-echo-ui-notificationItemWidget-content-message-body { color: rgba(204, 232, 212, 0.7) !important; font-size: 13px !important; }
/* Timestamp */
.mw-echo-ui-notificationItemWidget-content-actions-timestamp {
color: rgba(125, 255, 156, 0.4) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
}
/* Liens dans les notifications */
.mw-echo-ui-notificationItemWidget a { color: #7dff9c !important; }
.mw-echo-ui-notificationItemWidget a:hover { color: #b6ffc6 !important; }
/* Footer "Toutes les notifications" / "Préférences" */
.mw-echo-ui-notificationsWrapper-footer,
.mw-echo-ui-notificationBadgeButton-popup-footer {
background: rgba(6, 15, 11, 0.95) !important;
border-top: 1px solid rgba(125, 255, 156, 0.12) !important;
padding: 8px 14px !important;
}
.mw-echo-ui-notificationsWrapper-footer a {
color: rgba(125, 255, 156, 0.55) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
.mw-echo-ui-notificationsWrapper-footer a:hover { color: #7dff9c !important; }
/* Icônes des notifications */
.mw-echo-ui-notificationItemWidget .oo-ui-iconElement-icon {
filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important;
opacity: 0.55 !important;
}
/* Page Spécial:Notifications */
.mw-special-Notifications .mw-echo-ui-notificationItemWidget {
background: rgba(6, 15, 11, 0.6) !important;
border: 1px solid rgba(125, 255, 156, 0.1) !important;
border-radius: 2px !important;
margin-bottom: 4px !important;
}
/* ============================================================
46. CITE — références [1][2] et notes de bas de page
============================================================ */
/* Numérotation [1] [2] inline */
.reference,
sup.reference {
font-family: 'IBM Plex Mono', monospace !important;
}
.reference a,
sup.reference a {
color: #7dff9c !important;
background: rgba(125, 255, 156, 0.06) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 2px !important;
padding: 0 3px !important;
font-size: 0.75em !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.reference a:hover,
sup.reference a:hover {
background: rgba(125, 255, 156, 0.15) !important;
border-color: rgba(125, 255, 156, 0.4) !important;
color: #b6ffc6 !important;
}
/* Highlight de la cible quand on clique sur [1] */
.mw-parser-output li:target,
.mw-parser-output sup:target,
.mw-parser-output ol.references li:target,
ol.references li:target {
background: rgba(245, 200, 74, 0.1) !important;
border-left: 2px solid #f5c84a !important;
padding-left: 8px !important;
margin-left: -10px !important;
border-radius: 2px !important;
transition: background 0.3s !important;
}
/* Flèche de retour ↑ depuis la liste des références */
.mw-cite-backlink,
.mw-cite-backlink a,
.references .mw-cite-backlink a {
color: rgba(125, 255, 156, 0.6) !important;
text-decoration: none !important;
font-weight: bold !important;
}
.mw-cite-backlink a:hover { color: #7dff9c !important; }
/* Liste des références <references/> */
.references,
ol.references,
.mw-parser-output ol.references {
font-size: 0.88em !important;
line-height: 1.6 !important;
color: rgba(204, 232, 212, 0.85) !important;
padding-left: 2em !important;
}
.references li,
ol.references li {
margin-bottom: 4px !important;
}
/* Sous-références (a, b, c…) */
.mw-cite-backlink sup {
font-family: 'IBM Plex Mono', monospace !important;
font-size: 0.85em !important;
}
/* Conteneur multi-colonnes <references/> */
.mw-references-columns,
.references-small {
column-rule: 1px solid rgba(125, 255, 156, 0.08) !important;
column-gap: 24px !important;
}
/* ============================================================
47. SYNTAXHIGHLIGHT — Pygments (<syntaxhighlight>)
============================================================ */
/* Bloc de code principal */
.mw-highlight,
.mw-parser-output .mw-highlight,
.mw-highlight pre {
background: #060f0b !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 3px !important;
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important;
line-height: 1.55 !important;
padding: 12px 14px !important;
overflow-x: auto !important;
}
/* Numéros de ligne (linenos) */
.mw-highlight .linenos,
.mw-highlight .lineno {
color: rgba(125, 255, 156, 0.25) !important;
background: transparent !important;
border-right: 1px solid rgba(125, 255, 156, 0.1) !important;
padding-right: 10px !important;
margin-right: 10px !important;
user-select: none !important;
}
/* Ligne mise en évidence (hl_lines=) */
.mw-highlight .hll {
background: rgba(125, 255, 156, 0.08) !important;
display: block !important;
margin: 0 -14px !important;
padding: 0 14px !important;
border-left: 2px solid #7dff9c !important;
}
/* Coloration syntaxique Pygments — palette phosphore */
.mw-highlight .c,
.mw-highlight .c1,
.mw-highlight .cm,
.mw-highlight .cs,
.mw-highlight .cp { color: rgba(125, 255, 156, 0.4) !important; font-style: italic !important; } /* Commentaires */
.mw-highlight .k,
.mw-highlight .kc,
.mw-highlight .kd,
.mw-highlight .kn,
.mw-highlight .kp,
.mw-highlight .kr,
.mw-highlight .kt { color: #f5c84a !important; font-weight: 500 !important; } /* Keywords */
.mw-highlight .s,
.mw-highlight .s1,
.mw-highlight .s2,
.mw-highlight .sb,
.mw-highlight .sc,
.mw-highlight .sd,
.mw-highlight .se,
.mw-highlight .sh,
.mw-highlight .si,
.mw-highlight .sx,
.mw-highlight .sr,
.mw-highlight .ss { color: #b6ffc6 !important; } /* Strings */
.mw-highlight .m,
.mw-highlight .mf,
.mw-highlight .mh,
.mw-highlight .mi,
.mw-highlight .mo,
.mw-highlight .il { color: #ff9a9a !important; } /* Numbers */
.mw-highlight .n,
.mw-highlight .na,
.mw-highlight .nb,
.mw-highlight .bp,
.mw-highlight .nc,
.mw-highlight .no,
.mw-highlight .nd,
.mw-highlight .ni,
.mw-highlight .ne,
.mw-highlight .nf,
.mw-highlight .nl,
.mw-highlight .nn,
.mw-highlight .nt,
.mw-highlight .nv,
.mw-highlight .vc,
.mw-highlight .vg,
.mw-highlight .vi { color: #cce8d4 !important; } /* Names */
.mw-highlight .nf { color: #a8d8ea !important; } /* Function names */
.mw-highlight .nt { color: #ff9a9a !important; } /* HTML tags */
.mw-highlight .o,
.mw-highlight .ow { color: rgba(125, 255, 156, 0.7) !important; } /* Operators */
.mw-highlight .err {
color: #ff5e5e !important;
background: rgba(255, 94, 94, 0.1) !important;
border-bottom: 1px dashed rgba(255, 94, 94, 0.4) !important;
}
/* Code inline `<code>` standard */
.mw-parser-output code,
.mw-parser-output tt {
background: rgba(6, 15, 11, 0.9) !important;
border: 1px solid rgba(125, 255, 156, 0.12) !important;
border-radius: 2px !important;
color: #b6ffc6 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 0.88em !important;
padding: 1px 5px !important;
}
/* Pre standard (non-Pygments) */
.mw-parser-output pre,
.mw-parser-output .mw-code {
background: #060f0b !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 3px !important;
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important;
line-height: 1.55 !important;
padding: 12px 14px !important;
overflow-x: auto !important;
}
/* ============================================================
48. TABBERNEUE — onglets <tabber>
============================================================ */
/* Conteneur tabber */
.tabber,
.tabber__container,
.mw-parser-output .tabber {
background: transparent !important;
border: 0 !important;
margin: 16px 0 !important;
}
/* Barre d'onglets */
.tabber__header,
.tabber__tabs {
background: rgba(6, 15, 11, 0.6) !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.2) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
/* Onglet individuel */
.tabber__tab,
.tabber__header .tabber__tab,
.tabber__tabs .tabber__tab {
background: transparent !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
color: rgba(125, 255, 156, 0.5) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
padding: 10px 16px !important;
margin: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
transition: all 0.15s !important;
}
.tabber__tab:hover {
color: #7dff9c !important;
background: rgba(125, 255, 156, 0.05) !important;
}
/* Onglet actif */
.tabber__tab--active,
.tabber__tab[aria-selected="true"] {
color: #7dff9c !important;
border-bottom-color: #7dff9c !important;
background: rgba(125, 255, 156, 0.08) !important;
}
/* Contenu de l'onglet */
.tabber__section,
.tabber__panel {
background: transparent !important;
border: 0 !important;
padding: 16px 0 !important;
color: #cce8d4 !important;
}
/* Indicateur de défilement (flèches >) sur petits écrans */
.tabber__header__prev,
.tabber__header__next {
background: rgba(6, 15, 11, 0.9) !important;
color: rgba(125, 255, 156, 0.6) !important;
border: 0 !important;
cursor: pointer !important;
}
.tabber__header__prev:hover,
.tabber__header__next:hover { color: #7dff9c !important; }
/* Version animée pendant la transition */
.tabber--live .tabber__section {
transition: opacity 0.2s ease;
}
/* ============================================================
49. REVISIONSLIDER — slider de diff entre versions
============================================================ */
/* Conteneur principal du slider */
.mw-revslider-container,
.mw-revslider-wrapper {
background: rgba(6, 15, 11, 0.8) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 3px !important;
color: #cce8d4 !important;
margin: 8px 0 !important;
padding: 12px !important;
}
/* Bouton toggle (déplier/replier) */
.mw-revslider-toggle-button {
background: transparent !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
color: rgba(125, 255, 156, 0.55) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
padding: 4px 10px !important;
border-radius: 2px !important;
cursor: pointer !important;
}
.mw-revslider-toggle-button:hover {
background: rgba(125, 255, 156, 0.08) !important;
color: #7dff9c !important;
}
/* Axe horizontal (timeline) */
.mw-revslider-revisions-container,
.mw-revslider-revisions {
background: rgba(6, 15, 11, 0.6) !important;
border: 1px solid rgba(125, 255, 156, 0.1) !important;
border-radius: 2px !important;
}
/* Barres représentant chaque révision */
.mw-revslider-revision {
background: rgba(125, 255, 156, 0.25) !important;
border: 0 !important;
transition: background 0.15s !important;
}
.mw-revslider-revision:hover {
background: rgba(125, 255, 156, 0.5) !important;
}
/* Révision sélectionnée (les deux côtés du diff) */
.mw-revslider-revision-old,
.mw-revslider-revision[data-pos="older"] {
background: rgba(255, 94, 94, 0.6) !important;
}
.mw-revslider-revision-new,
.mw-revslider-revision[data-pos="newer"] {
background: rgba(125, 255, 156, 0.7) !important;
}
/* Pointers (curseurs glissants gauche/droite) */
.mw-revslider-pointer-old,
.mw-revslider-pointer-new,
.mw-revslider-pointer {
background: rgba(8, 18, 12, 0.95) !important;
border: 1px solid rgba(125, 255, 156, 0.5) !important;
color: #7dff9c !important;
border-radius: 2px !important;
}
.mw-revslider-pointer-old { border-color: rgba(255, 94, 94, 0.6) !important; }
.mw-revslider-pointer-new { border-color: rgba(125, 255, 156, 0.6) !important; }
/* Tooltips au survol d'une révision */
.mw-revslider-tooltip,
.mw-revslider-tooltip .oo-ui-popupWidget-popup {
background: rgba(8, 18, 12, 0.98) !important;
border: 1px solid rgba(125, 255, 156, 0.25) !important;
border-radius: 3px !important;
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
padding: 8px 10px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}
/* Liens dans le tooltip */
.mw-revslider-tooltip a { color: #7dff9c !important; }
/* Flèches navigation */
.mw-revslider-arrow {
background: transparent !important;
color: rgba(125, 255, 156, 0.5) !important;
border: 0 !important;
cursor: pointer !important;
}
.mw-revslider-arrow:hover { color: #7dff9c !important; }
/* Indicateurs de taille (+/- octets) */
.mw-revslider-revision-wrapper .mw-revslider-bar-bigger,
.mw-revslider-bar-bigger {
background: rgba(125, 255, 156, 0.6) !important;
}
.mw-revslider-revision-wrapper .mw-revslider-bar-smaller,
.mw-revslider-bar-smaller {
background: rgba(255, 94, 94, 0.6) !important;
}
/* ============================================================
50. TABLEPAGER & LISTES SPÉCIALES — pages d'admin et stats
============================================================ */
/* Tableau pager générique (Spécial:Statistiques, ListUsers, AllPages…) */
table.mw-statistics-table,
table.TablePager,
table.mw-spcontent,
.mw-special-Statistics table,
.mw-special-ActiveUsers table,
.mw-special-Listusers table,
.mw-special-Listfiles table,
.mw-special-Listredirects table,
.mw-special-Wantedpages table,
.mw-special-Mostrevisions table,
.mw-special-Brokenredirects table {
background: rgba(6, 15, 11, 0.75) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-collapse: collapse !important;
color: #cce8d4 !important;
width: 100% !important;
margin: 12px 0 !important;
}
/* Entêtes de colonnes */
.TablePager th,
.mw-statistics-table th,
table.mw-spcontent th,
.mw-special-Statistics th,
.mw-special-ActiveUsers th,
.mw-special-Listusers th,
.mw-special-Listfiles th {
background: #0f2015 !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.2) !important;
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
padding: 10px 12px !important;
text-align: left !important;
}
/* En-têtes triables */
.TablePager th.TablePager_sort,
.TablePager th.headerSort,
.TablePager th.headerSortUp,
.TablePager th.headerSortDown {
cursor: pointer !important;
background-image: none !important;
}
.TablePager th.headerSortUp,
.TablePager th.headerSortDown { color: #7dff9c !important; }
.TablePager th.headerSortUp::after { content: ' ▲'; opacity: 0.7; font-size: 9px; }
.TablePager th.headerSortDown::after { content: ' ▼'; opacity: 0.7; font-size: 9px; }
/* Lignes */
.TablePager tr,
.mw-statistics-table tr,
table.mw-spcontent tr {
background: transparent !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.06) !important;
}
/* Lignes alternées */
.TablePager tr:nth-child(even),
.TablePager_even {
background: rgba(125, 255, 156, 0.025) !important;
}
.TablePager tr:nth-child(odd),
.TablePager_odd {
background: transparent !important;
}
.TablePager tr:hover {
background: rgba(125, 255, 156, 0.06) !important;
}
/* Cellules */
.TablePager td,
.mw-statistics-table td,
table.mw-spcontent td {
background: transparent !important;
border: 0 !important;
color: #cce8d4 !important;
padding: 8px 12px !important;
font-size: 13px !important;
}
/* Liens dans les pagers */
.TablePager a,
.mw-statistics-table a { color: #7dff9c !important; }
.TablePager a:visited { color: #4ab06a !important; }
.TablePager a:hover { color: #b6ffc6 !important; }
/* Valeur numérique de statistiques (Spécial:Statistiques) */
.mw-statistics-numbers,
.mw-statistics-table td.mw-statistics-numbers {
font-family: 'IBM Plex Mono', monospace !important;
color: #f5c84a !important;
text-align: right !important;
font-weight: 500 !important;
}
/* Pagination des TablePagers */
.TablePager_nav,
.mw-pager-navigation-bar {
background: rgba(6, 15, 11, 0.6) !important;
border: 1px solid rgba(125, 255, 156, 0.1) !important;
border-radius: 2px !important;
padding: 8px 12px !important;
margin: 8px 0 !important;
color: rgba(204, 232, 212, 0.7) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
}
.TablePager_nav a,
.mw-pager-navigation-bar a,
.mw-numlink {
color: #4ab06a !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
background: rgba(6, 15, 11, 0.5) !important;
padding: 3px 9px !important;
margin: 0 2px !important;
border-radius: 2px !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-size: 10px !important;
}
.TablePager_nav a:hover,
.mw-pager-navigation-bar a:hover {
background: rgba(125, 255, 156, 0.1) !important;
border-color: rgba(125, 255, 156, 0.4) !important;
color: #7dff9c !important;
}
/* Filtres en haut des pagers */
.mw-pager-body,
.mw-pager-tools,
.mw-htmlform-ooui-wrapper {
background: transparent !important;
border: 0 !important;
}
/* Page Spécial:Contributions — fond des lignes */
.mw-contributions-list li,
.mw-special-Contributions ul li {
border-bottom: 1px solid rgba(125, 255, 156, 0.05) !important;
padding: 4px 0 !important;
background: transparent !important;
color: #cce8d4 !important;
}
.mw-contributions-list li:hover {
background: rgba(125, 255, 156, 0.04) !important;
}
/* Liens utilisateur / page dans les listes */
.mw-userlink,
.mw-changeslist-line .mw-userlink {
color: #7dff9c !important;
font-weight: 500 !important;
}
.mw-userlink:hover { color: #b6ffc6 !important; }
/* Boutons "annuler" / "défaire" / "rollback" dans les listes */
.mw-rollback-link a,
.mw-history-undo a,
.mw-changeslist-links a {
color: #f5c84a !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
.mw-rollback-link a:hover,
.mw-history-undo a:hover { color: #ffe080 !important; }
/* Journaux (Spécial:Journal) */
.mw-logevent-loglines,
.mw-special-Log .mw-logline,
ul.mw-logevent-loglines li {
background: transparent !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.05) !important;
padding: 6px 0 !important;
color: #cce8d4 !important;
font-size: 13px !important;
}
.mw-logevent-loglines li:hover { background: rgba(125, 255, 156, 0.04) !important; }
.mw-logline-action {
color: rgba(125, 255, 156, 0.5) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
}
.mw-logevent-actionlink {
color: #4ab06a !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
}
/* Marqueurs (m, b, n) dans RC/historique */
.mw-changeslist-flags abbr,
abbr.minoredit,
abbr.botedit,
abbr.newpage,
abbr.unpatrolled {
background: rgba(125, 255, 156, 0.08) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
color: #7dff9c !important;
border-radius: 2px !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 9px !important;
font-weight: 600 !important;
padding: 0 4px !important;
margin: 0 1px !important;
text-decoration: none !important;
}
/* Différence d'octets (+12 / -45) */
.mw-plusminus-pos {
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-weight: 500 !important;
}
.mw-plusminus-neg {
color: #ff7a7a !important;
font-family: 'IBM Plex Mono', monospace !important;
font-weight: 500 !important;
}
.mw-plusminus-null {
color: rgba(125, 255, 156, 0.4) !important;
font-family: 'IBM Plex Mono', monospace !important;
}
.mw-plusminus-bold {
font-weight: 700 !important;
}
/* ============================================================
51. PAGES FICHIER (Namespace File:) — Spécial:ImagePage
============================================================ */
/* TOC haut de page "Fichier / Historique / Utilisation" */
#filetoc,
ul#filetoc {
background: rgba(6, 15, 11, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 3px !important;
color: #cce8d4 !important;
padding: 8px 14px !important;
margin: 12px 0 !important;
list-style: none !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
text-align: center !important;
justify-content: center !important;
}
#filetoc li {
display: inline !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
#filetoc li::before {
content: '·' !important;
margin: 0 10px !important;
color: rgba(125, 255, 156, 0.3) !important;
}
#filetoc li:first-child::before { display: none !important; }
#filetoc a {
color: rgba(125, 255, 156, 0.65) !important;
text-decoration: none !important;
letter-spacing: 0.12em !important;
}
#filetoc a:hover { color: #7dff9c !important; }
/* Conteneur principal de l'image */
.fullImageLink,
#file,
.mw-filepage-image {
background: transparent !important;
text-align: center !important;
margin: 16px 0 !important;
}
.fullImageLink a,
.fullImageLink img,
#file a,
#file img {
background: transparent !important;
border: 0 !important;
display: inline-block !important;
}
/* Image elle-même : juste un cadre discret */
.fullImageLink img,
#file > a > img {
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 2px !important;
background: rgba(6, 15, 11, 0.4) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
/* Texte "Pas de plus haute résolution disponible" + lien filename */
.mw-filepage-resolutioninfo,
.fullMedia {
color: rgba(204, 232, 212, 0.65) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-align: center !important;
margin: 8px 0 !important;
background: transparent !important;
}
.fullMedia a,
.mw-filepage-resolutioninfo a {
color: #7dff9c !important;
font-weight: 500 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.25) !important;
}
.fullMedia a:hover {
color: #b6ffc6 !important;
border-bottom-color: #7dff9c !important;
}
/* Informations sur le fichier (taille, type MIME) */
.fileInfo,
.mw-filepage-mime,
.mw-filepage-dimensions {
color: rgba(204, 232, 212, 0.6) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
}
/* Tableau d'historique du fichier */
table.filehistory,
.filehistory {
background: rgba(12, 24, 18, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-collapse: collapse !important;
width: 100% !important;
color: #cce8d4 !important;
margin: 12px 0 !important;
}
.filehistory th {
background: #0f2015 !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.2) !important;
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
padding: 10px 12px !important;
text-align: left !important;
}
.filehistory td {
background: transparent !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.06) !important;
color: #cce8d4 !important;
padding: 10px 12px !important;
vertical-align: middle !important;
font-size: 13px !important;
}
.filehistory tr:hover td {
background: rgba(125, 255, 156, 0.04) !important;
}
/* Marqueur "actuel" dans l'historique */
.filehistory td.filehistory-selected,
.filehistory tr.filehistory-selected td {
background: rgba(125, 255, 156, 0.06) !important;
color: #7dff9c !important;
}
/* Vignettes dans le tableau d'historique */
.filehistory img,
.filehistory a img,
.filehistory .mw-thumbnail-link img {
background: rgba(6, 15, 11, 0.6) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 2px !important;
padding: 2px !important;
}
/* Liens de date dans l'historique */
.filehistory a {
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-decoration: none !important;
}
.filehistory a:hover { color: #b6ffc6 !important; }
/* "Vous ne pouvez pas remplacer ce fichier" / autres messages */
.mw-filepage-other-versions,
.mw-filepage-upload-error,
.sharedUploadNotice {
background: rgba(6, 15, 11, 0.6) !important;
border: 1px solid rgba(245, 200, 74, 0.2) !important;
border-left: 3px solid rgba(245, 200, 74, 0.5) !important;
color: rgba(204, 232, 212, 0.85) !important;
padding: 10px 14px !important;
border-radius: 2px !important;
margin: 12px 0 !important;
font-style: italic !important;
}
/* Section "Utilisation du fichier" */
#mw-imagepage-section-linkstoimage,
.mw-imagepage-linkstoimage {
background: transparent !important;
}
.mw-imagepage-linkstoimage ul,
#mw-imagepage-section-linkstoimage ul {
background: rgba(6, 15, 11, 0.5) !important;
border: 1px solid rgba(125, 255, 156, 0.08) !important;
border-radius: 2px !important;
padding: 12px 16px 12px 36px !important;
margin: 8px 0 !important;
list-style: square !important;
}
.mw-imagepage-linkstoimage li,
#mw-imagepage-section-linkstoimage li {
color: #cce8d4 !important;
padding: 3px 0 !important;
}
.mw-imagepage-linkstoimage li::marker {
color: rgba(125, 255, 156, 0.4) !important;
}
/* Métadonnées EXIF (souvent collapsible) */
.mw_metadata,
table.mw_metadata {
background: rgba(6, 15, 11, 0.6) !important;
border: 1px solid rgba(125, 255, 156, 0.1) !important;
color: #cce8d4 !important;
margin: 12px 0 !important;
}
.mw_metadata th {
background: rgba(15, 32, 21, 0.5) !important;
color: rgba(125, 255, 156, 0.65) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
text-align: left !important;
padding: 6px 12px !important;
}
.mw_metadata td {
background: transparent !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.05) !important;
color: rgba(204, 232, 212, 0.75) !important;
padding: 6px 12px !important;
font-size: 12px !important;
}
/* Liens de section [modifier | modifier le wikicode] dans pages File: */
.mw-editsection-bracket {
color: rgba(125, 255, 156, 0.3) !important;
}
.mw-editsection a {
color: rgba(125, 255, 156, 0.5) !important;
}
.mw-editsection a:hover { color: #7dff9c !important; }
/* Cas spécifique : namespace File: utilise des wikitables pour l'historique
mais sans la classe wikitable — on cible la table principale du contenu */
.mw-special-Filepage table:not(.wikitable):not(.va-table):not(.avt-infobox) {
background: rgba(12, 24, 18, 0.85) !important;
color: #cce8d4 !important;
}
.mw-special-Filepage table:not(.wikitable):not(.va-table):not(.avt-infobox) th {
background: #0f2015 !important;
color: #7dff9c !important;
}
.mw-special-Filepage table:not(.wikitable):not(.va-table):not(.avt-infobox) td {
background: transparent !important;
color: #cce8d4 !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.06) !important;
}
/* ============================================================
52. MULTIMEDIAVIEWER (MMV) — lightbox d'image + boutons Codex
============================================================ */
/* ── BOUTONS CODEX (.cdx-button) ──
Codex est le design system Wikimedia, utilisé par MMV, certaines
préférences, et de plus en plus de modules MW 1.45+. Variables natives
en blanc/gris clair — on les redéfinit en phosphore. */
.cdx-button,
button.cdx-button,
.cdx-button.cdx-button--fake-button {
background-color: rgba(125, 255, 156, 0.08) !important;
background-image: none !important;
border: 1px solid rgba(125, 255, 156, 0.25) !important;
border-radius: 2px !important;
color: rgba(125, 255, 156, 0.75) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
padding: 6px 14px !important;
box-shadow: none !important;
text-shadow: none !important;
transition: all 0.15s !important;
cursor: pointer !important;
}
.cdx-button:hover,
.cdx-button:enabled:hover,
button.cdx-button:hover {
background-color: rgba(125, 255, 156, 0.18) !important;
border-color: rgba(125, 255, 156, 0.5) !important;
color: #7dff9c !important;
}
.cdx-button:active,
.cdx-button:enabled:active {
background-color: rgba(125, 255, 156, 0.28) !important;
border-color: #7dff9c !important;
color: #b6ffc6 !important;
}
.cdx-button:focus-visible,
.cdx-button:enabled:focus {
outline: none !important;
box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.25) !important;
}
.cdx-button:disabled,
.cdx-button.cdx-button--disabled {
background-color: rgba(125, 255, 156, 0.04) !important;
border-color: rgba(125, 255, 156, 0.1) !important;
color: rgba(125, 255, 156, 0.25) !important;
cursor: not-allowed !important;
}
/* Boutons "progressive" (action positive principale, ex: "Plus de détails") */
.cdx-button--action-progressive,
.cdx-button.cdx-button--action-progressive,
.cdx-button--weight-primary.cdx-button--action-progressive {
background-color: rgba(125, 255, 156, 0.15) !important;
border-color: rgba(125, 255, 156, 0.5) !important;
color: #7dff9c !important;
}
.cdx-button--action-progressive:hover,
.cdx-button.cdx-button--action-progressive:hover {
background-color: rgba(125, 255, 156, 0.28) !important;
border-color: #7dff9c !important;
color: #b6ffc6 !important;
box-shadow: 0 0 12px rgba(125, 255, 156, 0.2) !important;
}
/* Boutons "destructive" (ex: supprimer, annuler) */
.cdx-button--action-destructive {
background-color: rgba(255, 122, 122, 0.1) !important;
border-color: rgba(255, 122, 122, 0.4) !important;
color: #ff7a7a !important;
}
.cdx-button--action-destructive:hover {
background-color: rgba(255, 122, 122, 0.2) !important;
border-color: #ff7a7a !important;
color: #ff9a9a !important;
}
/* Variante "weight-primary" — bouton principal proéminent */
.cdx-button--weight-primary:not(.cdx-button--action-progressive):not(.cdx-button--action-destructive) {
background-color: rgba(125, 255, 156, 0.18) !important;
border-color: rgba(125, 255, 156, 0.45) !important;
color: #7dff9c !important;
}
/* Variante "weight-quiet" — pas de bordure, fond transparent (icônes plates) */
.cdx-button--weight-quiet {
background-color: transparent !important;
border-color: transparent !important;
color: rgba(125, 255, 156, 0.55) !important;
}
.cdx-button--weight-quiet:hover {
background-color: rgba(125, 255, 156, 0.08) !important;
border-color: transparent !important;
color: #7dff9c !important;
}
/* Icônes dans les boutons Codex */
.cdx-button .cdx-icon,
.cdx-button svg {
filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important;
opacity: 0.75 !important;
}
.cdx-button:hover .cdx-icon,
.cdx-button:hover svg { opacity: 1 !important; }
/* ── MULTIMEDIAVIEWER LIGHTBOX ── */
/* IMPORTANT : .mw-mmv-wrapper englobe TOUTE la lightbox (image comprise).
Lui appliquer un fond opaque masquerait l'image. On laisse uniquement
.mw-mmv-overlay (le fond noir natif derrière l'image) gérer l'arrière-plan. */
.mw-mmv-overlay {
background: rgba(0, 0, 0, 0.88) !important;
}
/* Container principal et wrappers d'image : transparents, sans filtre */
.mw-mmv-wrapper,
.mw-mmv-main,
.mw-mmv-image-wrapper,
.mw-mmv-pre-image {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: #cce8d4 !important;
}
/* L'image elle-même : aucun filtre ni opacité parasite */
.mw-mmv-image,
.mw-mmv-image img,
.mw-mmv-final-image,
img.mw-mmv-dialog-is-open {
background: transparent !important;
filter: none !important;
opacity: 1 !important;
}
/* Le panneau du bas (titre + boutons + métadonnées) */
.mw-mmv-post-image,
.mw-mmv-above-fold,
.mw-mmv-image-metadata,
.mw-mmv-title-contain {
background: rgba(6, 15, 11, 0.97) !important;
border-top: 1px solid rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
}
/* Quand panneau réduit (juste le titre visible) */
.mw-mmv-post-image.mw-mmv-untruncated,
.mw-mmv-untruncated .mw-mmv-above-fold {
background: rgba(6, 15, 11, 0.97) !important;
}
/* Titre du fichier (ex: "FNV 9 de trefles Frumentarii") */
.mw-mmv-title,
.mw-mmv-title-para,
.mw-mmv-title-smaller,
p.mw-mmv-title-para,
.mw-mmv-image-desc,
.mw-mmv-image-desc-div {
color: #cce8d4 !important;
background: transparent !important;
font-family: 'Crimson Pro', Georgia, serif !important;
font-size: 16px !important;
font-weight: normal !important;
}
/* Auteur / source / licence sous le titre */
.mw-mmv-author,
.mw-mmv-source,
.mw-mmv-source-author,
.mw-mmv-credit,
.mw-mmv-credit-fallback {
color: rgba(204, 232, 212, 0.7) !important;
background: transparent !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
}
/* Liens dans le viewer */
.mw-mmv-post-image a,
.mw-mmv-image-metadata a,
.mw-mmv-credit a,
.mw-mmv-author a,
.mw-mmv-source a {
color: #7dff9c !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.2) !important;
}
.mw-mmv-post-image a:hover,
.mw-mmv-image-metadata a:hover {
color: #b6ffc6 !important;
border-bottom-color: #7dff9c !important;
}
/* Bouton "Plus de détails" (gros bouton vert Codex sur ta capture) */
.mw-mmv-stripe-button,
.mw-mmv-stripe button,
button.mw-mmv-stripe-button {
background-color: rgba(125, 255, 156, 0.18) !important;
border: 1px solid rgba(125, 255, 156, 0.5) !important;
border-radius: 2px !important;
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
padding: 10px 18px !important;
box-shadow: none !important;
}
.mw-mmv-stripe-button:hover {
background-color: rgba(125, 255, 156, 0.3) !important;
border-color: #7dff9c !important;
color: #b6ffc6 !important;
box-shadow: 0 0 12px rgba(125, 255, 156, 0.25) !important;
}
/* Bouton "Voir les informations sur l'auteur" / liens secondaires */
.mw-mmv-author-info,
.mw-mmv-permission-link,
.mw-mmv-credit-fallback {
color: rgba(125, 255, 156, 0.6) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
}
.mw-mmv-author-info:hover,
.mw-mmv-permission-link:hover { color: #7dff9c !important; }
/* Boutons d'action latéraux (télécharger, partager) */
.mw-mmv-download-pane,
.mw-mmv-reuse-pane,
.mw-mmv-info-button,
.mw-mmv-download-button,
.mw-mmv-reuse-button,
.mw-mmv-options-button {
background: rgba(8, 18, 12, 0.85) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
color: rgba(125, 255, 156, 0.7) !important;
border-radius: 2px !important;
transition: all 0.15s !important;
}
.mw-mmv-download-button:hover,
.mw-mmv-reuse-button:hover,
.mw-mmv-options-button:hover {
background: rgba(125, 255, 156, 0.1) !important;
border-color: rgba(125, 255, 156, 0.5) !important;
color: #7dff9c !important;
}
/* Icônes (télécharger, partager, licence) — couleur phosphore */
.mw-mmv-license-icon,
.mw-mmv-download-icon,
.mw-mmv-reuse-icon,
.mw-mmv-permission-icon,
.mw-mmv-post-image .oo-ui-iconElement-icon,
.mw-mmv-above-fold .oo-ui-iconElement-icon {
filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important;
opacity: 0.6 !important;
}
.mw-mmv-post-image .oo-ui-iconElement-icon:hover { opacity: 1 !important; }
/* Boutons navigation gauche/droite (chevrons) */
.mw-mmv-prev-image,
.mw-mmv-next-image {
background: rgba(8, 18, 12, 0.6) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
color: rgba(125, 255, 156, 0.6) !important;
transition: all 0.15s !important;
}
.mw-mmv-prev-image:hover,
.mw-mmv-next-image:hover {
background: rgba(125, 255, 156, 0.1) !important;
border-color: rgba(125, 255, 156, 0.4) !important;
color: #7dff9c !important;
}
.mw-mmv-prev-image:disabled,
.mw-mmv-next-image:disabled {
opacity: 0.25 !important;
cursor: not-allowed !important;
}
/* Bouton fermer (X) + plein écran */
.mw-mmv-close,
.mw-mmv-fullscreen,
button.mw-mmv-close,
button.mw-mmv-fullscreen {
background: rgba(8, 18, 12, 0.6) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
color: rgba(125, 255, 156, 0.7) !important;
border-radius: 2px !important;
}
.mw-mmv-close:hover,
.mw-mmv-fullscreen:hover {
background: rgba(125, 255, 156, 0.12) !important;
border-color: rgba(125, 255, 156, 0.5) !important;
color: #7dff9c !important;
}
/* Compteur "1/2" (en haut à gauche) */
.mw-mmv-counter,
.mw-mmv-progress {
background: rgba(8, 18, 12, 0.7) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
color: rgba(125, 255, 156, 0.7) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
border-radius: 2px !important;
padding: 4px 10px !important;
}
/* Barre de progression de chargement de l'image */
.mw-mmv-progress {
background: rgba(125, 255, 156, 0.1) !important;
border: 0 !important;
}
.mw-mmv-progress .mw-mmv-progress-percent {
background: linear-gradient(90deg, #4ab06a, #7dff9c) !important;
transition: width 0.2s ease !important;
}
.mw-mmv-progress.empty .mw-mmv-progress-percent {
background: transparent !important;
}
/* Cadre "Plus de détails" / panneau étendu */
.mw-mmv-image-metadata,
.mw-mmv-image-metadata-column,
.mw-mmv-image-metadata-desc-column,
.mw-mmv-image-metadata-links-column {
background: rgba(6, 15, 11, 0.95) !important;
color: #cce8d4 !important;
border-top: 1px solid rgba(125, 255, 156, 0.08) !important;
}
/* Titres de sections dans les métadonnées étendues */
.mw-mmv-about-links,
.mw-mmv-image-links,
.mw-mmv-image-links h3,
.mw-mmv-image-desc-div .mw-mmv-image-desc {
color: rgba(125, 255, 156, 0.7) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
/* Bouton dialog "Réutiliser ce fichier" / "Télécharger" — popovers */
.mw-mmv-reuse-dialog,
.mw-mmv-download-dialog,
.mw-mmv-options-dialog {
background: rgba(8, 18, 12, 0.98) !important;
border: 1px solid rgba(125, 255, 156, 0.25) !important;
border-radius: 3px !important;
color: #cce8d4 !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8) !important;
}
.mw-mmv-reuse-dialog input,
.mw-mmv-reuse-dialog textarea,
.mw-mmv-download-dialog input {
background: rgba(4, 10, 7, 0.95) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
color: #cce8d4 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 12px !important;
padding: 8px 10px !important;
border-radius: 2px !important;
}
.mw-mmv-reuse-dialog input:focus,
.mw-mmv-download-dialog input:focus {
border-color: rgba(125, 255, 156, 0.5) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(125, 255, 156, 0.1) !important;
}
/* Lien "Afficher la licence" + icône cadenas */
.mw-mmv-permission-link,
.mw-mmv-permission a,
.mw-mmv-license a {
color: #7dff9c !important;
text-decoration: none !important;
}
/* Texte "Fichier: ..." en bas */
.mw-mmv-image-title-para,
.mw-mmv-image-title {
color: rgba(204, 232, 212, 0.6) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
}
/* Texte "Téléversé: 15 novembre 2025" */
.mw-mmv-datetime,
.mw-mmv-image-datetime {
color: rgba(204, 232, 212, 0.5) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
}
/* ============================================================
53. VE DIALOG — fix bande blanche dans le panneau d'édition
============================================================ */
/* Cible uniquement les .oo-ui-fieldsetLayout-group quand ils sont
à l'intérieur d'un dialogue VE (panneau d'édition de référence,
de modèle, de lien, etc.). Ces wrappers internes héritent du fond
blanc OOUI par défaut.
IMPORTANT : préfixé par .oo-ui-window-body pour NE PAS toucher
à la toolbar VE principale ni à son comportement sticky. */
.oo-ui-window-body .oo-ui-fieldsetLayout-group {
background-color: transparent !important;
}
.oo-ui-window-body .ve-ui-targetWidget,
.oo-ui-window-body .ve-init-target-visual {
background-color: transparent !important;
}
/* ============================================================
54. CORRECTIONS CIBLÉES — toolbars dialogues, popups, checkboxes
============================================================ */
/* ─── (1) Toolbar VE dans les dialogues : ne PAS sticky ───
La règle section 28 applique sticky+top:54px à TOUTES les .ve-ui-toolbar.
Quand un dialogue VE (Modifier référence, Galerie, Modifier lien, Insérer
modèle…) contient sa propre toolbar interne, elle hérite de cette règle
et se positionne sous le header de la page, hors du dialogue.
On override pour les toolbars internes aux dialogues. */
.oo-ui-window-body .ve-ui-toolbar,
.oo-ui-window-body .ve-init-mw-desktopArticleTarget-toolbar,
.oo-ui-window-content .ve-ui-toolbar,
html body .oo-ui-window-body .ve-ui-toolbar {
position: static !important;
top: auto !important;
z-index: auto !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ─── (2) Bouton "Enregistrer les modifications" du save dialog ───
Sur la capture du save dialog mobile, le bouton vert "ENREGISTRER LES
MODIFICATIONS" en haut à droite recouvre partiellement le texte du résumé.
On le force à rester dans son cadre. */
.ve-ui-mwSaveDialog .oo-ui-window-foot,
.ve-ui-mwSaveDialog .oo-ui-processDialog-actions-primary {
background: transparent !important;
}
/* ─── (3) Checkboxes OOUI : couvrir TOUS les cas d'état coché ───
DIAGNOSTIC CONSOLE confirmé :
- input.checked = true → span a .vt-checked + background vert correct
- MAIS : opacity computed = 0.4 (cochée) / 0.7 (décochée)
→ toutes les checkboxes apparaissent PÂLES et indistinctes
- Cause : le span checkbox hérite des classes utilitaires
.oo-ui-iconElement-icon, .oo-ui-iconWidget, .oo-ui-image-invert
qui appliquent un opacity et un filter phosphore par défaut.
FIX : neutraliser opacity et filter sur le span checkbox spécifiquement,
et appliquer notre propre style sans interférence. */
/* Force opacity:1 et pas de filter sur les spans checkbox (battre le natif OOUI) */
html body .oo-ui-checkboxInputWidget span.oo-ui-checkboxInputWidget-checkIcon,
html body .oo-ui-checkboxInputWidget [type='checkbox'] + span {
opacity: 1 !important;
filter: none !important;
}
/* État coché : vert phosphore plein + checkmark blanc + halo */
html body .oo-ui-checkboxInputWidget [type='checkbox']:checked + span,
html body .oo-ui-checkboxInputWidget [type='checkbox']:checked ~ span.oo-ui-checkboxInputWidget-checkIcon,
html body .oo-ui-checkboxInputWidget [type='checkbox'] + span.vt-checked,
html body .oo-ui-checkboxInputWidget span.vt-checked {
background-color: #4ab06a !important;
border-color: #7dff9c !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpolyline points='1,5 4.5,8.5 11,1' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 12px 10px !important;
box-shadow: 0 0 6px rgba(125, 255, 156, 0.35) !important;
opacity: 1 !important;
filter: none !important;
}
/* État NON coché — fond sombre + bordure neutre, contraste clair avec coché */
html body .oo-ui-checkboxInputWidget [type='checkbox']:not(:checked) + span:not(.vt-checked),
html body .oo-ui-checkboxInputWidget span.oo-ui-checkboxInputWidget-checkIcon:not(.vt-checked) {
background-color: rgba(6, 15, 11, 0.95) !important;
background-image: none !important;
border: 2px solid rgba(125, 255, 156, 0.45) !important;
border-radius: 2px !important;
box-shadow: none !important;
opacity: 1 !important;
filter: none !important;
}
/* Cas spécifique Codex (.cdx-checkbox) — design system Wikimedia récent */
html body .cdx-checkbox__input:checked + .cdx-checkbox__icon {
background-color: #4ab06a !important;
border-color: #7dff9c !important;
opacity: 1 !important;
}
html body .cdx-checkbox__input + .cdx-checkbox__icon {
background-color: rgba(6, 15, 11, 0.9) !important;
border: 2px solid rgba(125, 255, 156, 0.3) !important;
border-radius: 2px !important;
opacity: 1 !important;
}
/* ─── (4) Popups d'aperçu d'article : retirer le filtre hue-rotate ───
Le filtre hue-rotate(-8deg) sur les miniatures donnait une teinte
vert pomme indistincte aux images. À retirer pour garder les couleurs
d'origine. */
.mwe-popups .mwe-popups-thumbnail image,
.mwe-popups svg.mwe-popups-thumbnail image {
filter: none !important;
}
/* ─── (5) Recherche typeahead : différencier articles existants vs proposés ───
Le widget mw.widgets.TitleInputWidget propose des suggestions de titres
pour créer un lien dans VE. Les articles existants et les "créer cette
page" sont stylés pareil par défaut. On les différencie visuellement. */
/* Article existant (par défaut) — titre en phosphore */
.mw-widget-titleOptionWidget .mw-widget-titleOptionWidget-data-title,
.mw-widget-titleOptionWidget .oo-ui-labelElement-label {
color: #7dff9c !important;
}
/* Article INEXISTANT — confirmé via DevTools :
le widget VE utilise <a class="oo-ui-labelElement-label new"> pour les
suggestions d'articles qui n'existent pas encore.
L'icône à côté a la classe .oo-ui-icon-articleNotFound. */
.mw-widget-titleOptionWidget .oo-ui-labelElement-label.new,
.mw-widget-titleOptionWidget:has(.oo-ui-icon-articleNotFound) .oo-ui-labelElement-label {
color: #ff7a7a !important;
font-style: italic !important;
}
.mw-widget-titleOptionWidget .oo-ui-labelElement-label.new::after,
.mw-widget-titleOptionWidget:has(.oo-ui-icon-articleNotFound) .oo-ui-labelElement-label::after {
content: ' (article inexistant)' !important;
color: rgba(255, 122, 122, 0.65) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
font-weight: normal !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-left: 6px !important;
font-style: normal !important;
}
/* Icône "article non trouvé" en rouge */
.mw-widget-titleOptionWidget .oo-ui-icon-articleNotFound {
filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(2500%) hue-rotate(330deg) brightness(105%) !important;
opacity: 0.7 !important;
}
/* Description "Article inexistant" / "Créer cette page" en italique discret */
.mw-widget-titleOptionWidget-description,
.mw-widget-titleOptionWidget-data-description {
color: rgba(204, 232, 212, 0.55) !important;
font-size: 11px !important;
font-style: italic !important;
}
/* ─── (6) Save dialog mobile : bouton Enregistrer qui dépasse ───
Sur la capture du save dialog mobile, le bouton "ENREGISTRER LES
MODIFICATIONS" passe par-dessus le titre "ENREGISTRER VOS MODIFICAT...".
Le bouton primary doit être contenu dans son cadre. */
@media screen and (max-width: 720px) {
.ve-ui-mwSaveDialog .oo-ui-processDialog-actions-primary,
.ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other {
position: relative !important;
flex-shrink: 0 !important;
}
.ve-ui-mwSaveDialog .oo-ui-processDialog-actions-primary .oo-ui-buttonElement-button {
max-width: 160px !important;
white-space: normal !important;
line-height: 1.2 !important;
padding: 6px 10px !important;
font-size: 10px !important;
}
/* Titre du dialogue tronqué proprement avec ... */
.ve-ui-mwSaveDialog .oo-ui-window-head .oo-ui-labelElement-label {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: calc(100% - 180px) !important;
}
}
/* ============================================================
55. WIDGET RECHERCHE VE — vignettes lisibles
============================================================ */
/* Le widget VE "Ajouter un lien" / "TitleInputWidget" affiche des
vignettes via .mw-widget-titleOptionWidget-hasImage. Le CSS natif
de mw.widgets.TitleOptionWidget applique opacity: 0.7 + un fond
couleur ce qui rend les images illisibles (silhouettes vertes).
On rétablit l'opacité pleine et on neutralise le fond.
Note : ces vignettes sont rendues via background-image sur un <span>
avec background-size: cover. */
.mw-widget-titleWidget-menu-withImages .mw-widget-titleOptionWidget.oo-ui-iconElement > .oo-ui-iconElement-icon.mw-widget-titleOptionWidget-hasImage,
.mw-widget-titleOptionWidget .oo-ui-iconElement-icon.mw-widget-titleOptionWidget-hasImage {
opacity: 1 !important;
background-color: transparent !important;
filter: none !important;
}
/* État sélectionné/hover : pas d'overlay coloré */
.mw-widget-titleOptionWidget-selected .oo-ui-iconElement-icon.mw-widget-titleOptionWidget-hasImage,
.mw-widget-titleOptionWidget.oo-ui-optionWidget-highlighted .oo-ui-iconElement-icon.mw-widget-titleOptionWidget-hasImage,
.mw-widget-titleOptionWidget:hover .oo-ui-iconElement-icon.mw-widget-titleOptionWidget-hasImage {
opacity: 1 !important;
background-color: transparent !important;
}
/* Pour les articles sans image (icône fallback "article") : on garde
un fond discret pour distinguer l'icône SVG monochrome */
.mw-widget-titleOptionWidget .oo-ui-iconElement-icon.oo-ui-icon-article:not(.mw-widget-titleOptionWidget-hasImage) {
opacity: 0.55 !important;
}
/* ============================================================
56. VE — Dialogues modaux au-dessus de la toolbar
============================================================ */
/* Diagnostic confirmé via DevTools sur l'ouverture du dialogue "Insérer modèle" :
structure DOM observée :
<div id="mw-teleport-target"> ← ROOT du téléportage MediaWiki
<div class="ve-ui-overlay-global ve-ui-overlay-global-desktop ve-ui-overlay">
<div class="oo-ui-windowManager oo-ui-windowManager-modal
oo-ui-windowManager-floating ← C'EST FLOATING, PAS FULLSCREEN
oo-ui-windowManager-size-larger">
<div class="oo-ui-window oo-ui-dialog oo-ui-processDialog
ve-ui-mwTemplateDialog-ready ...">
#mw-teleport-target n'a pas de z-index → il hérite du flux normal et
passe sous la toolbar VE (z:900 ou z:1099).
Solution : forcer #mw-teleport-target ET ses descendants à un z-index
très élevé. */
/* Diagnostic confirmé via DevTools sur l'ouverture du dialogue "Insérer modèle" :
structure DOM observée :
<div id="mw-teleport-target"> ← ROOT du téléportage MediaWiki
<div class="ve-ui-overlay-global ve-ui-overlay-global-desktop ve-ui-overlay">
<div class="oo-ui-windowManager oo-ui-windowManager-modal
oo-ui-windowManager-floating ← C'EST FLOATING, PAS FULLSCREEN
oo-ui-windowManager-size-larger">
<div class="oo-ui-window oo-ui-dialog oo-ui-processDialog
ve-ui-mwTemplateDialog-ready ...">
La console révèle qu'un autre CSS applique z-index:450 + position:absolute
sur #mw-teleport-target. On override avec une spécificité maximale. */
html body #mw-teleport-target,
body #mw-teleport-target {
position: relative !important;
z-index: 2000 !important;
}
html body .ve-ui-overlay-global,
html body .ve-ui-overlay-global-desktop,
html body .ve-ui-overlay-local,
html body .ve-ui-overlay {
z-index: 2000 !important;
}
/* Window managers OOUI dans toutes leurs variantes
(floating = la plupart des dialogues VE) */
html body .oo-ui-windowManager-modal,
html body .oo-ui-windowManager-floating,
html body .oo-ui-windowManager-fullscreen {
z-index: 2001 !important;
}
/* Le voile sombre derrière le dialogue (zone cliquable de fermeture) */
html body .oo-ui-window-overlay {
z-index: 1999 !important;
}
/* ============================================================
57. BOUTONS OOUI FRAMED — fond clair par défaut OOUI/Codex
============================================================ */
/* Les boutons OOUI .oo-ui-buttonElement-framed utilisent par défaut
--background-color-interactive-subtle (#f8f9fa, gris très clair).
Visible sur :
- "Filtres enregistrés" (Modifications récentes)
- Boutons d'actions diverses dans des widgets MediaWiki
- Boutons inline OOUI sans contexte spécifique
On les force au thème phosphore avec spécificité élevée. */
html body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: rgba(12, 24, 18, 0.9) !important;
border: 1px solid rgba(125, 255, 156, 0.3) !important;
color: #4ab06a !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.05em !important;
transition: all 0.15s !important;
}
html body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: rgba(125, 255, 156, 0.12) !important;
border-color: rgba(125, 255, 156, 0.55) !important;
color: #7dff9c !important;
}
html body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
background-color: rgba(125, 255, 156, 0.22) !important;
border-color: #7dff9c !important;
color: #b6ffc6 !important;
}
/* Variante progressive (action principale) — phosphore plein */
html body .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
html body .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: rgba(125, 255, 156, 0.15) !important;
border-color: rgba(125, 255, 156, 0.5) !important;
color: #7dff9c !important;
}
html body .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
html body .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: rgba(125, 255, 156, 0.28) !important;
border-color: #7dff9c !important;
color: #b6ffc6 !important;
}
/* Variante destructive — rouge atténué */
html body .oo-ui-buttonElement-framed.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: rgba(255, 122, 122, 0.1) !important;
border-color: rgba(255, 122, 122, 0.4) !important;
color: #ff7a7a !important;
}
html body .oo-ui-buttonElement-framed.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: rgba(255, 122, 122, 0.2) !important;
border-color: #ff7a7a !important;
color: #ff9a9a !important;
}
/* État désactivé */
html body .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background-color: rgba(125, 255, 156, 0.04) !important;
border-color: rgba(125, 255, 156, 0.1) !important;
color: rgba(125, 255, 156, 0.25) !important;
cursor: not-allowed !important;
}
/* Bouton "Filtres enregistrés" RC filters — icône signet */
html body .mw-rcfilters-ui-savedLinksListWidget-button.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
background-color: rgba(125, 255, 156, 0.07) !important;
border-color: rgba(125, 255, 156, 0.25) !important;
color: rgba(125, 255, 156, 0.7) !important;
}
html body .mw-rcfilters-ui-savedLinksListWidget-button.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button:hover {
background-color: rgba(125, 255, 156, 0.15) !important;
border-color: rgba(125, 255, 156, 0.5) !important;
color: #7dff9c !important;
}
/* Label dans les boutons framed */
html body .oo-ui-buttonElement-framed .oo-ui-labelElement-label {
color: inherit !important;
}
/* Icônes dans les boutons framed (battre l'opacity OOUI native) */
html body .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
filter: brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(594%) hue-rotate(76deg) brightness(101%) !important;
opacity: 0.75 !important;
}
html body .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button:hover > .oo-ui-iconElement-icon {
opacity: 1 !important;
}
/* Indicateur (chevron du dropdown) dans les boutons framed */
html body .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(400%) hue-rotate(76deg) !important;
opacity: 0.5 !important;
}
/* ============================================================
BANDEAU DISCORD — barre fixe en bas de page
============================================================ */
.vt-discord-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1500;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
background: rgba(8, 18, 12, 0.97);
border-top: 1px solid rgba(125, 255, 156, 0.35);
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: 'IBM Plex Mono', monospace;
color: #cce8d4;
transition: transform 0.35s ease, opacity 0.35s ease;
}
.vt-discord-banner.vt-banner-hidden {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
/* Texte principal — prend l'espace flexible, à gauche */
.vt-banner-text {
flex: 1;
font-size: 13px;
line-height: 1.5;
}
.vt-banner-text strong {
color: #7dff9c;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Bloc icône + compteur, collé à droite à côté du bouton Rejoindre */
.vt-banner-info {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.vt-banner-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
color: #7dff9c;
}
.vt-banner-icon svg {
width: 24px;
height: 24px;
fill: currentColor;
}
.vt-banner-members {
font-size: 12px;
color: #7dff9c;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
/* Bouton Rejoindre */
.vt-banner-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(125, 255, 156, 0.12);
border: 1px solid rgba(125, 255, 156, 0.4);
border-radius: 2px;
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none !important;
padding: 8px 18px;
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.vt-banner-btn:hover {
background: rgba(125, 255, 156, 0.22);
border-color: #7dff9c;
box-shadow: 0 0 12px rgba(125, 255, 156, 0.25);
color: #b6ffc6 !important;
}
/* Bouton fermer */
.vt-banner-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(125, 255, 156, 0.2);
color: rgba(125, 255, 156, 0.5);
font-size: 18px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
}
.vt-banner-close:hover {
border-color: #ff7a7a;
color: #ff7a7a;
background: rgba(255, 122, 122, 0.08);
}
/* Mobile */
@media (max-width: 720px) {
.vt-discord-banner {
flex-wrap: wrap;
gap: 10px;
padding: 10px 16px;
}
.vt-banner-text {
flex: 1 1 100%;
font-size: 12px;
order: 1;
}
.vt-banner-info {
order: 2;
}
.vt-banner-close {
order: 3;
margin-left: auto;
}
.vt-banner-btn {
order: 4;
flex: 1 1 100%;
justify-content: center;
padding: 10px;
}
}