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 — v8
* 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 — droite, sticky
============================================================ */
#mw-content-text .toc,
#mw-content-text #toc {
float: right !important;
clear: right !important;
margin: 0 0 24px 28px !important;
min-width: 200px !important;
max-width: 240px !important;
position: sticky !important;
top: 74px !important;
max-height: calc(100vh - 100px) !important;
overflow-y: auto !important;
background: rgba(12, 24, 18, 0.9) !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
padding: 14px 0 10px !important;
}
#mw-content-text .toctitle h2,
#mw-content-text .toc .toctitle {
font-family: 'IBM Plex Mono', monospace !important;
font-size: 9px !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
color: rgba(125, 255, 156, 0.5) !important;
padding: 0 16px 10px !important;
border-bottom: 1px dashed rgba(125, 255, 156, 0.13) !important;
margin-bottom: 6px !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;
padding: 5px 16px !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;
}
#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: 28px !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 {
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;
}
.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;
}
/* Fix caption pleine largeur */
.avt-infobox caption,
.mw-parser-output .avt-infobox caption {
display: table-caption !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ============================================================
6. WIKITABLE
============================================================ */
.wikitable, .va-table, .mw-datatable {
background-color: rgba(12, 24, 18, 0.85) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
}
.wikitable > tr > th, .wikitable > * > tr > th,
.va-table > tr > th, .va-table > * > tr > th {
background-color: #0f2015 !important;
color: #7dff9c !important;
}
.wikitable > tr > td, .wikitable > * > tr > td,
.va-table > tr > td, .va-table > * > tr > td {
border-color: rgba(125, 255, 156, 0.1) !important;
color: #cce8d4 !important;
}
.wikitable tr:hover td {
background-color: rgba(125, 255, 156, 0.06) !important;
}
/* ============================================================
7. PALETTES & NAVBOXES
============================================================ */
.palette {
background-color: rgba(12, 24, 18, 0.85) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
}
.palette-titre, .palette-banniere,
.palette-section, .palette-groupe {
background-color: #0f2015 !important;
color: #7dff9c !important;
}
.palette-pair { background-color: transparent !important; }
.va-infobox-title, .va-navbox-title {
background: #0f2015 !important;
color: #7dff9c !important;
}
/* ============================================================
8. BOÎTES GÉNÉRIQUES
============================================================ */
.avt-warn-banner, .avt-note-banner, .avt-section-banner,
.avt-dropdown-box, .avt-genericbox, .homepage-box,
.spinoff-box, .avt-content-game-box {
background-color: rgba(12, 24, 18, 0.85) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
color: #cce8d4 !important;
}
.avt-dropdown-box-title {
background-color: #0f2015 !important;
color: #7dff9c !important;
}
/* ============================================================
9. LIENS
============================================================ */
.mw-parser-output a { color: #4ab06a; }
.mw-parser-output a:visited { color: #357a4d; }
.mw-parser-output a:hover { color: #7dff9c; }
.new, a.new { color: #ff5e5e !important; }
/* ============================================================
10. TOC VECTOR 2022
============================================================ */
.sidebar-toc, .vector-toc {
background-color: rgba(12, 24, 18, 0.85) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
}
.vector-toc .vector-toc-link,
.sidebar-toc .sidebar-toc-link { color: #4ab06a !important; }
.vector-toc .vector-toc-link:hover,
.sidebar-toc .sidebar-toc-link:hover { color: #7dff9c !important; }
/* ============================================================
11. PORTAILS & ACCUEIL
============================================================ */
.homepage-welcome-title, .homepage-box-title, .portal-box-title,
.spinoff-box-title, .canceled-box-title, .fangame-box-title,
.homepage-presentation-title, .homepage-participation-title,
.homepage-articleday-title {
color: #7dff9c !important;
text-shadow: 0 0 8px rgba(125, 255, 156, 0.4) !important;
border-color: rgba(125, 255, 156, 0.15) !important;
}
/* ============================================================
12. SITENOTICE
============================================================ */
.avt-sitenotice {
background-color: rgba(12, 24, 18, 0.9) !important;
border-color: rgba(125, 255, 156, 0.2) !important;
color: #cce8d4 !important;
}
/* ============================================================
13. RECHERCHE — dropdown miniatures
============================================================ */
.vt-search { position: relative !important; }
.vt-search-dropdown {
display: none;
position: absolute;
top: calc(100% + 2px);
left: 0;
width: 420px;
max-width: calc(100vw - 40px);
background: rgba(8, 18, 12, 0.98);
border: 1px solid rgba(125, 255, 156, 0.2);
border-top: none;
z-index: 500;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
}
.vt-search-item {
display: flex; align-items: center; gap: 12px; padding: 9px 14px;
color: #cce8d4; text-decoration: none !important;
border-bottom: 1px solid rgba(125, 255, 156, 0.07);
font-family: 'Crimson Pro', Georgia, serif; font-size: 15px; transition: background 0.1s;
}
.vt-search-item:hover { background: rgba(125, 255, 156, 0.07); color: #7dff9c !important; text-decoration: none !important; }
.vt-search-thumb {
width: 40px; height: 40px; flex-shrink: 0;
background: rgba(125, 255, 156, 0.05); border: 1px solid rgba(125, 255, 156, 0.12);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vt-search-thumb img { width: 40px; height: 40px; object-fit: cover; display: block; }
.vt-search-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-search-title mark { background: none; color: #7dff9c; font-weight: 700; }
.vt-search-footer {
display: block; padding: 10px 14px;
font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
color: rgba(125, 255, 156, 0.4); text-decoration: none !important; text-transform: uppercase;
border-top: 1px dashed rgba(125, 255, 156, 0.1); background: rgba(125, 255, 156, 0.02);
}
.vt-search-footer:hover { color: #7dff9c !important; background: rgba(125, 255, 156, 0.06); text-decoration: none !important; }
/* ============================================================
14. BOUTON RECHERCHE — loupe
============================================================ */
.vt-search input.searchButton,
.vt-search #searchButton {
text-indent: -9999px !important; overflow: hidden !important;
width: 42px !important; min-width: 42px !important; padding: 0 !important; flex-shrink: 0 !important;
background-color: rgba(125, 255, 156, 0.10) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237dff9c' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: center !important; background-size: 18px !important;
border: 1px solid rgba(125, 255, 156, 0.35) !important; cursor: pointer !important;
}
.vt-search input.searchButton:hover,
.vt-search #searchButton:hover { background-color: rgba(125, 255, 156, 0.2) !important; }
/* ============================================================
15. SIDEBAR — TOC déplacé
============================================================ */
.vt-sidebar-toc { padding: 0; }
.vt-sidebar-toc .toc, .vt-sidebar-toc #toc {
float: none !important; position: sticky !important; top: 10px !important;
max-height: calc(100vh - 160px) !important; overflow-y: auto !important;
width: 100% !important; max-width: 100% !important; margin: 0 !important;
border: none !important; padding: 0 !important; background: transparent !important;
}
.vt-sidebar-toc .toctitle { display: none; }
/* ============================================================
16. DARK MODE — icône parasite
============================================================ */
.ext-darkmode-link::before,
.ext-darkmode-link:before { display: none !important; content: none !important; }
/* ============================================================
17. 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 { color: rgba(125, 255, 156, 0.5) !important; font-weight: 600 !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; }
/* ============================================================
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. FILTRES ENREGISTRÉS — savedLinks
============================================================ */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks,
.mw-rcfilters-ui-savedLinksListWidget,
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonMenuSelectWidget { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button,
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.25) !important; color: #4ab06a !important; }
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button:hover,
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button:hover { background-color: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important; }
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-indicatorElement-indicator { opacity: 0.6 !important; }
.oo-ui-menuSelectWidget, .oo-ui-dropdownWidget-menu { background-color: rgba(8, 18, 12, 0.98) !important; border-color: rgba(125, 255, 156, 0.2) !important; }
.oo-ui-optionWidget { color: #cce8d4 !important; }
.oo-ui-optionWidget:hover, .oo-ui-optionWidget-highlighted { background-color: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important; }
/* ============================================================
21. ÉDITEUR — formulaire uniquement (pas de CodeMirror)
NB : on ne touche PAS à CodeMirror car cela casse
le positionnement du curseur et crée des textes fantômes.
============================================================ */
#editform, .editOptions, .wikiEditor-ui,
.wikiEditor-ui-toolbar, .wikiEditor-ui-text { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
#wpTextbox1, .wikiEditor-ui-text textarea { background-color: #060f0b !important; color: #cce8d4 !important; border-color: rgba(125, 255, 156, 0.2) !important; }
.wikiEditor-ui-toolbar { background: #0f2015 !important; border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important; }
.wikiEditor-ui-toolbar .group { border-right-color: rgba(125, 255, 156, 0.1) !important; }
.wikiEditor-ui-toolbar .tool:hover { background: rgba(125, 255, 156, 0.08) !important; }
#wpSave, #wpPreview, #wpDiff, .editButtons input[type="submit"] { background-color: rgba(12, 24, 18, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.3) !important; color: #4ab06a !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; letter-spacing: 0.1em !important; cursor: pointer !important; }
#wpSave:hover, #wpPreview:hover, #wpDiff:hover, .editButtons input[type="submit"]:hover { background-color: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; border-color: rgba(125, 255, 156, 0.5) !important; }
#wpSave { background-color: rgba(125, 255, 156, 0.12) !important; color: #7dff9c !important; }
.editButtons .mw-editbutton-cancel { color: rgba(125, 255, 156, 0.4) !important; }
#wpSummary, #wpSummaryWidget input { background-color: #060f0b !important; border-color: rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; }
.editCheckboxes label, .editOptions label { color: #7aaa88 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.editpage-head-copywarn, #editpage-copywarn { color: #4a6e55 !important; font-size: 11px !important; }
/* ============================================================
22. 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; }
}
/* ============================================================
23. TITRE DE PAGE — padding cohérent
============================================================ */
#firstHeading, #mw-content-subtitle {
padding-left: 36px !important;
padding-right: 36px !important;
}
/* ============================================================
24. NAV PRIMAIRE — masquer si vide
============================================================ */
.vt-nav-primary:not(:has(a)) {
display: none !important;
width: 0 !important;
padding: 0 !important;
border: none !important;
}
/* ============================================================
25. CODEMIRROR — Fix décalage curseur (T245532, T418793)
VisualEditor injecte inline `.ve-init-mw-desktopArticleTarget
.CodeMirror { padding: 1.5em }` qui décale curseur (vertical
~1 ligne, horizontal ~3 caractères). On neutralise.
============================================================ */
html body .CodeMirror {
padding: 0 !important;
}
/* ============================================================
26. MEDIAUPLOADER — Spécial:MediaUploader
Toutes les règles sont scopées à #upload-wizard ou aux
classes .mediauploader-* pour ne pas affecter le reste du wiki.
============================================================ */
/* ── Conteneur principal ──────────────────────────────────── */
#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;
}
/* ── Override jQuery UI light theme dans le wizard ────────── */
#upload-wizard .ui-widget,
#upload-wizard .ui-widget-content,
#upload-wizard .ui-state-default,
#upload-wizard .ui-corner-all,
#upload-wizard .ui-corner-top,
#upload-wizard .ui-corner-bottom,
#upload-wizard .mediauploader-form {
background: transparent !important;
background-image: none !important;
border-color: transparent !important;
color: inherit !important;
}
/* ── Étapes du wizard — kill les flèches par défaut ────────── */
#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;
position: relative;
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;
}
/* Étape active */
#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;
}
/* Étapes complétées */
#mediauploader-steps li.completed,
#mediauploader-steps li.mediauploader-step-completed {
color: #4ab06a !important;
}
/* ── Contenu des étapes ───────────────────────────────────── */
#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;
}
/* ── Liste de fichiers ─────────────────────────────────────── */
#mediauploader-filelist,
#mediauploader-filelist.ui-corner-all {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.mediauploader-file {
background: rgba(6, 15, 11, 0.8) !important;
border: 1px solid rgba(125, 255, 156, 0.2) !important;
border-radius: 4px !important;
padding: 16px !important;
margin-bottom: 12px !important;
color: #cce8d4 !important;
}
.mediauploader-file.filled {
border-color: rgba(125, 255, 156, 0.35) !important;
}
#upload-wizard .mediauploader-visible-file,
#upload-wizard .mediauploader-visible-file.ui-corner-top.ui-corner-bottom {
background: rgba(6, 15, 11, 0.7) !important;
background-image: none !important;
border: 1px solid rgba(125, 255, 156, 0.15) !important;
border-radius: 4px !important;
padding: 16px 20px !important;
color: #cce8d4 !important;
}
#upload-wizard .mediauploader-visible-file-filename,
#upload-wizard .mediauploader-file-texts,
#upload-wizard .mediauploader-file-preview {
background: transparent !important;
background-image: none !important;
}
#upload-wizard .mediauploader-visible-file-filename-text {
color: #7dff9c !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important;
font-weight: 500;
}
.mediauploader-file-status-line {
color: rgba(168, 230, 184, 0.7) !important;
font-size: 12px;
font-style: italic;
margin-top: 4px;
}
.mediauploader-file-indicator {
background: transparent !important;
}
/* ── Zone "Ajouter des fichiers" / drop zone ──────────────── */
#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;
}
/* Bloc "info" intérieur (placeholder "Aucun fichier sélectionné") */
#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;
}
/* ── BOUTONS OOUI — scopés au wizard uniquement ────────────── */
#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;
}
/* Bouton primaire/progressive (Continuer, Téléverser, Ajouter) */
#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;
}
/* Bouton destructive (Retirer, Annuler) */
#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;
}
/* Bouton désactivé */
#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;
}
/* Icônes des boutons (poubelle, upload) — teinte phosphore */
#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;
}
/* ── Champs de formulaire (Décrire, métadonnées) ──────────── */
#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;
}
/* ── Barres de progression ────────────────────────────────── */
#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;
}
/* ── Messages de statut (succès / erreur / warning) ───────── */
#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;
}
/* ── Liens dans l'uploader ─────────────────────────────────── */
#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;
}
/* ── Page "non disponible" / "connexion nécessaire" ───────── */
.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;
}
/* ── Thumbnails des licences (Accorder les droits) ────────── */
#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;
}
/* ============================================================
27. PAGE D'ACCUEIL — .homepage-welcome
============================================================ */
/* ── Conteneur principal ──────────────────────────────────── */
.homepage-welcome {
background: transparent !important;
color: #cce8d4;
text-align: center;
padding: 24px 16px;
}
/* ── Titre ────────────────────────────────────────────────── */
.homepage-welcome-title {
color: #7dff9c !important;
font-family: 'Crimson Pro', 'Linux Libertine', Georgia, serif;
font-style: italic;
font-size: 2em;
font-weight: 400;
margin-bottom: 16px;
text-shadow: 0 0 20px rgba(125, 255, 156, 0.4);
}
/* ── Logo : afficher dark, masquer light ─────────────────── */
.homepage-welcome .logo-light {
display: none !important;
}
.homepage-welcome .logo-dark {
display: inline !important;
}
.logo-accueil {
margin: 16px 0;
background: transparent !important;
}
.logo-accueil img {
max-width: 100%;
height: auto;
filter: drop-shadow(0 0 12px rgba(125, 255, 156, 0.2));
}
/* ── Sous-titres (stats, description) ─────────────────────── */
.homepage-welcome-subtitle {
color: #cce8d4 !important;
font-size: 1em;
margin: 6px 0;
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;
border-bottom-color: #7dff9c;
}
/* ── Liens réseaux (Facebook, Discord, etc.) ──────────────── */
.homepage-welcome-links {
margin-top: 16px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.homepage-welcome-links img {
transition: filter 0.2s ease, transform 0.2s ease;
filter: brightness(0.9);
}
.homepage-welcome-links img:hover {
filter: brightness(1.1) drop-shadow(0 0 6px rgba(125, 255, 156, 0.4));
transform: scale(1.05);
}
/* ── Gestion mobile / nomobile ────────────────────────────── */
/* nomobile = visible desktop, masqué mobile */
@media screen and (max-width: 720px) {
.nomobile {
display: none !important;
}
}
/* mobileonly = masqué desktop, visible mobile */
@media screen and (min-width: 721px) {
.mobileonly {
display: none !important;
}
}
/* ── Adaptations mobile si un bloc mobileonly existe ─────── */
@media screen and (max-width: 720px) {
.mobileonly.homepage-welcome,
.homepage-welcome.mobileonly {
background: transparent !important;
padding: 16px 12px;
text-align: center;
}
.homepage-welcome-title {
font-size: 1.5em;
}
.homepage-welcome-subtitle {
font-size: 0.95em;
padding: 0 8px;
}
.homepage-welcome-links {
gap: 8px;
}
.logo-accueil img {
max-width: 280px;
}
}
/* ============================================================
28. PAGE D'ACCUEIL — Grille responsive
============================================================ */
/* ── Conteneur principal — grille 2 colonnes desktop ─────── */
.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; }
/* ── Boîtes génériques ────────────────────────────────────── */
.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;
}
/* ── Liste des jeux — 4 par ligne max ────────────────────── */
.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 > div > a,
.homepage-portal-games-item > div > i > 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;
}
/* ── Autres portails ──────────────────────────────────────── */
.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;
}
/* ── Portail thématique ───────────────────────────────────── */
.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;
}
/* ── Welcome block ────────────────────────────────────────── */
.homepage-welcome {
background: transparent !important;
text-align: center;
padding: 32px 16px;
color: #cce8d4;
}
.homepage-welcome-title {
color: #7dff9c;
font-family: 'Crimson Pro', Georgia, serif;
font-style: italic;
font-size: 2.2em;
font-weight: 400;
margin-bottom: 16px;
text-shadow: 0 0 20px rgba(125, 255, 156, 0.4);
}
/* Logo dark/light — spécificité maximale */
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: 12px 0;
background: transparent !important;
}
.logo-accueil img {
max-width: 100%;
height: auto;
filter: drop-shadow(0 0 16px rgba(125, 255, 156, 0.25));
}
.homepage-welcome-subtitle {
color: #cce8d4;
font-size: 1em;
margin: 6px 0;
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-top: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.homepage-welcome-links img {
transition: filter 0.2s ease, transform 0.2s ease;
}
.homepage-welcome-links img:hover {
filter: brightness(1.1) drop-shadow(0 0 8px rgba(125, 255, 156, 0.4));
transform: scale(1.06);
}
/* ── MOBILE ≤ 720px ───────────────────────────────────────── */
@media screen and (max-width: 720px) {
/* Colonne unique */
.homepage {
grid-template-columns: 1fr;
grid-template-areas:
"welcome"
"games"
"autres"
"theme"
"anecdotes"
"articleday"
"presentation"
"participation";
gap: 10px;
padding: 8px;
}
/* Welcome : visible sur mobile mais simplifié (sans logo) */
.homepage-welcome.nomobile {
display: block !important;
padding: 20px 12px;
}
/* On cache le gros logo sur mobile */
.homepage-welcome .logo-accueil {
display: none !important;
}
.homepage-welcome-title {
font-size: 1.4em;
margin-bottom: 8px;
}
.homepage-welcome-subtitle {
font-size: 0.9em;
}
.homepage-welcome-links {
gap: 12px;
margin-top: 12px;
}
/* Jeux : 2 par ligne sur mobile */
.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;
}
/* Autres portails : 1 par ligne sur mobile */
.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;
}
/* Portail thématique compact */
.homepage-portal-theme .liste-horizontale li {
padding: 4px 8px;
font-size: 10px;
}
/* Boîtes compactes */
.homepage-box-title {
font-size: 10px;
padding: 8px 12px;
letter-spacing: 0.1em;
}
.homepage-box-content {
padding: 12px;
font-size: 14px;
}
}
/* ── TABLETTE 721–1100px ──────────────────────────────────── */
@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;
}
}