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

De WikiPerche
← Modification précédenteModification suivante →

Admin (discussion | contributions)

3 groupes d'utilisateurs
3 018 modifications
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
```css
```css id="timeless-perche-final"
/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs
/* ==========================================================================
   de l'habillage Timeless */
  MEDIAWIKI:TIMELESS.CSS
 
   THÈME « PERCHE »
 
  Palette :
  Beige général      #F7F3EA
  Blanc              #FFFFFF
  Sable              #E9E0CC
  Vert foncé          #3B5B3E
  Vert                #5C7A4E
  Vert clair          #7A9471
  Brun                #8A4B2E
  Brun foncé          #6B3A22
  Texte              #2C2A26


/* ==========================================================================
  Principe :
   THÈME "PERCHE" — TIMELESS
  - conserver le layout natif de Timeless ;
   Palette originale conservée
  - modifier principalement les couleurs ;
   - ne pas imposer de dimensions ou de positionnement ;
   - éviter les règles globales susceptibles de casser VisualEditor.
   ========================================================================== */
   ========================================================================== */


Ligne 32 : Ligne 45 :


html {
html {
     background-color: #F7F3EA;
     background-color: var(--perche-bg);
}
}


body {
body {
     background-color: #F7F3EA;
     background-color: var(--perche-bg);
     color: #2C2A26;
     color: var(--perche-text);
     min-height: 100%;
     min-height: 100%;
}
}
Ligne 47 : Ligne 60 :


#content {
#content {
     background-color: #FFFFFF;
     background-color: var(--perche-white);
     color: #2C2A26;
     color: var(--perche-text);
}
}


Ligne 60 : Ligne 73 :
#mw-header-container,
#mw-header-container,
header#mw-header {
header#mw-header {
     background-color: #3B5B3E !important;
     background-color: var(--perche-green-dark) !important;
}
}


/* Logo */
/* Logo */
#p-logo.mw-portlet {
#p-logo.mw-portlet {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
}
}


/* Texte et liens dans l'en-tête */
/* Texte et liens */
.mw-header,
.mw-header,
.mw-header a,
.mw-header a,
#mw-header-container a {
#mw-header-container a {
     color: #F7F3EA !important;
     color: var(--perche-bg) !important;
}
}


/* Survol des liens de l'en-tête */
/* Survol */
.mw-header a:hover,
.mw-header a:hover,
.mw-header a:focus,
.mw-header a:focus,
#mw-header-container a:hover,
#mw-header-container a:hover,
#mw-header-container a:focus {
#mw-header-container a:focus {
     color: #FFFFFF !important;
     color: var(--perche-white) !important;
}
}


Ligne 89 : Ligne 102 :


#personal-inner.dropdown {
#personal-inner.dropdown {
     background-color: #FFFFFF;
     background-color: var(--perche-white);
     color: #2C2A26 !important;
     color: var(--perche-text) !important;
}
}


#personal-inner.dropdown a {
#personal-inner.dropdown a {
     color: #2C2A26 !important;
     color: var(--perche-text) !important;
}
}


#personal-inner.dropdown a:visited {
#personal-inner.dropdown a:visited {
     color: #6B3A22 !important;
     color: var(--perche-brown-dark) !important;
}
}


#personal-inner.dropdown a:hover,
#personal-inner.dropdown a:hover,
#personal-inner.dropdown a:focus {
#personal-inner.dropdown a:focus {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
     color: #3B5B3E !important;
     color: var(--perche-green-dark) !important;
}
}


Ligne 114 : Ligne 127 :
#mw-footer-container,
#mw-footer-container,
#footer {
#footer {
     background-color: #3B5B3E !important;
     background-color: var(--perche-green-dark) !important;
     color: #F7F3EA !important;
     color: var(--perche-bg) !important;
}
}


#footer a,
#footer a,
#mw-footer-container a {
#mw-footer-container a {
     color: #F7F3EA !important;
     color: var(--perche-bg) !important;
}
}


#footer a:hover,
#footer a:hover,
#mw-footer-container a:hover {
#mw-footer-container a:hover {
     color: #FFFFFF !important;
     color: var(--perche-white) !important;
}
}


Ligne 137 : Ligne 150 :
.sidebar-inner,
.sidebar-inner,
#mw-related-navigation {
#mw-related-navigation {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
     color: #2C2A26;
     color: var(--perche-text);
}
}


/* Cadre interne des portlets */
/* Fond interne des portlets */
.sidebar-chunk {
.sidebar-chunk {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
     border: none !important;
     border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
Ligne 162 : Ligne 175 :
.sidebar-inner .mw-portlet-body a,
.sidebar-inner .mw-portlet-body a,
.sidebar-chunk a {
.sidebar-chunk a {
     color: #8A4B2E !important;
     color: var(--perche-brown) !important;
}
}


Ligne 174 : Ligne 187 :
.sidebar-inner .mw-portlet-body a:visited,
.sidebar-inner .mw-portlet-body a:visited,
.sidebar-chunk a:visited {
.sidebar-chunk a:visited {
     color: #6B3A22 !important;
     color: var(--perche-brown-dark) !important;
}
}


/* Survol des liens */
/* Survol */
#mw-site-navigation a:hover,
#mw-site-navigation a:hover,
#mw-site-navigation a:focus,
#mw-site-navigation a:focus,
Ligne 188 : Ligne 201 :
.sidebar-chunk a:hover,
.sidebar-chunk a:hover,
.sidebar-chunk a:focus {
.sidebar-chunk a:focus {
     color: #3B5B3E !important;
     color: var(--perche-green-dark) !important;
}
}




/* ==========================================================================
/* ==========================================================================
   9. LIENS DANS LE CONTENU
   9. LIENS DU CONTENU
   ========================================================================== */
   ========================================================================== */


#content a {
#content a {
     color: #8A4B2E;
     color: var(--perche-brown);
}
}


#content a:visited {
#content a:visited {
     color: #6B3A22;
     color: var(--perche-brown-dark);
}
}


#content a:hover,
#content a:hover,
#content a:focus {
#content a:focus {
     color: #3B5B3E;
     color: var(--perche-green-dark);
}
}


Ligne 220 : Ligne 233 :
#content .mw-references a:hover,
#content .mw-references a:hover,
#content .mw-references a:focus {
#content .mw-references a:focus {
     color: #3B5B3E !important;
     color: var(--perche-green-dark) !important;
}
}


Ligne 231 : Ligne 244 :
.sidebar-inner,
.sidebar-inner,
#mw-site-navigation {
#mw-site-navigation {
     border-color: #7A9471 !important;
     border-color: var(--perche-green-light) !important;
}
}


hr {
hr {
     border-color: #7A9471 !important;
     border-color: var(--perche-green-light) !important;
}
}


Ligne 245 : Ligne 258 :
#mw-head-base,
#mw-head-base,
#mw-page-base {
#mw-page-base {
     background-color: #3B5B3E !important;
     background-color: var(--perche-green-dark) !important;
}
}


.mw-header-container,
.mw-header-container,
.mw-header-wrapper {
.mw-header-wrapper {
     background-color: #3B5B3E !important;
     background-color: var(--perche-green-dark) !important;
}
}


Ligne 259 : Ligne 272 :


.color-bar {
.color-bar {
     background-color: #7A9471 !important;
     background-color: var(--perche-green-light) !important;
}
}


.color-middle,
.color-middle,
.color-middle-container {
.color-middle-container {
     background-color: #5C7A4E !important;
     background-color: var(--perche-green) !important;
}
}


.color-left,
.color-left,
.color-right {
.color-right {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
}
}


Ligne 277 : Ligne 290 :
   ========================================================================== */
   ========================================================================== */


#content h1,
/*
* MediaWiki utilise désormais des conteneurs .mw-heading pour les titres.
* On prend en charge à la fois cette structure et les anciens h1/h2.
*/
 
/* Titres de niveau 1 */
#content .mw-heading1,
#content h1 {
    border-bottom-color: var(--perche-green-light) !important;
}
 
/* Titres de niveau 2 */
#content .mw-heading2,
#content h2 {
#content h2 {
     border-bottom-color: #7A9471 !important;
     border-bottom-color: var(--perche-green-light) !important;
}
 
/* Titres de niveau 3 à 6 */
#content .mw-heading3,
#content .mw-heading4,
#content .mw-heading5,
#content .mw-heading6,
#content h3,
#content h4,
#content h5,
#content h6 {
    border-bottom-color: var(--perche-green-light) !important;
}
}


Ligne 291 : Ligne 328 :
#mw-page-header-links .mw-portlet li a:hover,
#mw-page-header-links .mw-portlet li a:hover,
#mw-page-header-links .mw-portlet li a:focus {
#mw-page-header-links .mw-portlet li a:focus {
     border-bottom-color: #7A9471 !important;
     border-bottom-color: var(--perche-green-light) !important;
}
}


#p-associated-pages li.selected,
#p-associated-pages li.selected,
#p-views li.selected {
#p-views li.selected {
     border-bottom-color: #7A9471 !important;
     border-bottom-color: var(--perche-green-light) !important;
}
}


Ligne 304 : Ligne 341 :
   ========================================================================== */
   ========================================================================== */


.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel::after {
.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel::after,
    color: #8A4B2E;
}
 
.toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
.toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
     color: #8A4B2E;
     color: var(--perche-brown);
}
}


.toctitle .toctogglelabel:hover::after {
.toctitle .toctogglelabel:hover::after {
     color: #3B5B3E;
     color: var(--perche-green-dark);
     text-decoration: underline;
     text-decoration: underline;
     cursor: pointer;
     cursor: pointer;
Ligne 327 : Ligne 361 :
.mw-searchSuggest-link.mw-searchSuggest-active,
.mw-searchSuggest-link.mw-searchSuggest-active,
.mw-searchSuggest-link.mw-searchSuggest-active * {
.mw-searchSuggest-link.mw-searchSuggest-active * {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
     color: #2C2A26 !important;
     color: var(--perche-text) !important;
}
}


Ligne 334 : Ligne 368 :
.suggestions-result-current .mw-searchSuggest-link,
.suggestions-result-current .mw-searchSuggest-link,
.suggestions-result-current * {
.suggestions-result-current * {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
     color: #2C2A26 !important;
     color: var(--perche-text) !important;
}
}


Ligne 344 : Ligne 378 :


#simpleSearch {
#simpleSearch {
     border-color: #7A9471 !important;
     border-color: var(--perche-green-light) !important;
}
}


#searchInput {
#searchInput {
     color: #2C2A26;
     color: var(--perche-text);
}
}


Ligne 357 : Ligne 391 :


.wikitable {
.wikitable {
     border-color: #7A9471 !important;
     border-color: var(--perche-green-light) !important;
}
}


.wikitable > tr > th,
.wikitable > tr > th,
.wikitable > * > tr > th {
.wikitable > * > tr > th {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
     color: #3B5B3E;
     color: var(--perche-green-dark);
     border-color: #7A9471 !important;
     border-color: var(--perche-green-light) !important;
}
}


.wikitable > tr > td,
.wikitable > tr > td,
.wikitable > * > tr > td {
.wikitable > * > tr > td {
     border-color: #7A9471 !important;
     border-color: var(--perche-green-light) !important;
}
}


Ligne 378 : Ligne 412 :


.thumbinner {
.thumbinner {
     background-color: #F7F3EA !important;
     background-color: var(--perche-bg) !important;
     border-color: #7A9471 !important;
     border-color: var(--perche-green-light) !important;
}
}


Ligne 389 : Ligne 423 :
pre,
pre,
code {
code {
     background-color: #F7F3EA;
     background-color: var(--perche-bg);
     color: #2C2A26;
     color: var(--perche-text);
     border-color: #7A9471;
     border-color: var(--perche-green-light);
}
}




/* ==========================================================================
/* ==========================================================================
   22. BOUTONS MEDIAWIKI
   22. BOUTONS DU SITE
   ========================================================================== */
   ========================================================================== */


/*
/*
  * Boutons MediaWiki classiques.
  * Tous les boutons classiques MediaWiki et OOUI :
*
* Normal  : vert
* Texte  : blanc
* Survol  : vert foncé
  *
  *
  * On ne cible PAS .oo-ui-buttonElement-button globalement :
  * Les règles VisualEditor spécifiques plus bas permettent de garantir
  * OOUI est utilisé partout dans VisualEditor.
  * le même rendu pour le bouton « Enregistrer les modifications ».
  */
  */


.mw-ui-button {
    background-color: #5C7A4E !important;
    color: #FFFFFF !important;
    border-color: #3B5B3E !important;
}
/* Liens utilisés comme boutons */
a.mw-ui-button {
    background-color: #5C7A4E !important;
    color: #FFFFFF !important;
}
/* Survol */
.mw-ui-button:hover,
.mw-ui-button:focus,
a.mw-ui-button:hover,
a.mw-ui-button:focus {
    background-color: #3B5B3E !important;
    color: #FFFFFF !important;
    border-color: #3B5B3E !important;
}
/* Désactivé */
.mw-ui-button:disabled,
.mw-ui-button.disabled {
    background-color: #7A9471 !important;
    color: #F7F3EA !important;
    border-color: #7A9471 !important;
}
/* ==========================================================================
  BOUTONS DU SITE — THÈME PERCHE
  ========================================================================== */
/* Boutons classiques MediaWiki et OOUI */
.mw-ui-button,
.mw-ui-button,
.oo-ui-buttonElement-button {
.oo-ui-buttonElement-button {
     background-color: #5C7A4E !important;
     background-color: var(--perche-green) !important;
     color: #FFFFFF !important;
    background-image: none !important;
     border-color: #3B5B3E !important;
     color: var(--perche-white) !important;
     border-color: var(--perche-green-dark) !important;
}
}


/* Texte contenu dans les boutons */
/* Texte et éléments internes */
.mw-ui-button *,
.mw-ui-button *,
.oo-ui-buttonElement-button * {
.oo-ui-buttonElement-button * {
     color: #FFFFFF !important;
     color: var(--perche-white) !important;
}
}


/* Survol */
 
/* Survol / focus */
 
.mw-ui-button:hover,
.mw-ui-button:hover,
.mw-ui-button:focus,
.mw-ui-button:focus,
.oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-button:focus {
.oo-ui-buttonElement-button:focus {
     background-color: #3B5B3E !important;
     background-color: var(--perche-green-dark) !important;
     color: #FFFFFF !important;
    background-image: none !important;
     border-color: #3B5B3E !important;
     color: var(--perche-white) !important;
     border-color: var(--perche-green-dark) !important;
}
}


Ligne 469 : Ligne 475 :
.oo-ui-buttonElement-button:hover *,
.oo-ui-buttonElement-button:hover *,
.oo-ui-buttonElement-button:focus * {
.oo-ui-buttonElement-button:focus * {
     color: #FFFFFF !important;
     color: var(--perche-white) !important;
}
 
 
/* Boutons actifs */
 
.mw-ui-button:active,
.oo-ui-buttonElement-button:active {
    background-color: var(--perche-green-dark) !important;
    color: var(--perche-white) !important;
    border-color: var(--perche-green-dark) !important;
}
}


/* Boutons désactivés */
/* Boutons désactivés */
.mw-ui-button:disabled,
.mw-ui-button:disabled,
.mw-ui-button.disabled,
.mw-ui-button.disabled,
.oo-ui-buttonElement-button:disabled,
.oo-ui-buttonElement-button:disabled,
.oo-ui-widget-disabled .oo-ui-buttonElement-button {
.oo-ui-widget-disabled .oo-ui-buttonElement-button {
     background-color: #7A9471 !important;
     background-color: var(--perche-green-light) !important;
     color: #F7F3EA !important;
     color: var(--perche-bg) !important;
     border-color: #7A9471 !important;
     border-color: var(--perche-green-light) !important;
}
}


/* ==========================================================================
/* ==========================================================================
   23. VISUALEDITOR — BOUTON « ENREGISTRER LES MODIFICATIONS »
   23. VISUALEDITOR — ENREGISTRER LES MODIFICATIONS
   ========================================================================== */
   ========================================================================== */


/*
/*
  * IMPORTANT :
  * Renforcement spécifique du bouton de sauvegarde de VisualEditor.
  *
  *
  * Le bouton de sauvegarde de VisualEditor appartient au groupe
  * Le groupe save est ciblé afin de garantir le rendu même lorsqu'une
* "save". On cible uniquement ce groupe.
  * règle OOUI plus spécifique est appliquée par VisualEditor.
*
  * Pas de règle OOUI globale afin de ne pas modifier les autres
* boutons et contrôles de VisualEditor.
  */
  */




/* --------------------------------------------------------------------------
/* Fond */
  Fond du bouton
  -------------------------------------------------------------------------- */


.ve-ui-toolbar-group-save .oo-ui-tool-link,
.ve-ui-toolbar-group-save .oo-ui-tool-link,
.ve-ui-toolbar-group-save .oo-ui-tool,
.ve-ui-toolbar-group-save .oo-ui-tool,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button {
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button {
     background-color: #5C7A4E !important;
     background-color: var(--perche-green) !important;
     background-image: none !important;
     background-image: none !important;
     border-color: #3B5B3E !important;
     border-color: var(--perche-green-dark) !important;
     box-shadow: none !important;
     box-shadow: none !important;
}
}




/* --------------------------------------------------------------------------
/* Texte */
  Texte du bouton
  -------------------------------------------------------------------------- */
 
/*
* Plusieurs éléments OOUI peuvent porter le libellé.
* On cible donc les éléments internes du bouton.
*/


.ve-ui-toolbar-group-save .oo-ui-tool-link,
.ve-ui-toolbar-group-save .oo-ui-tool-link,
Ligne 525 : Ligne 532 :
.ve-ui-toolbar-group-save .oo-ui-tool *,
.ve-ui-toolbar-group-save .oo-ui-tool *,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button * {
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button *,
    color: #FFFFFF !important;
}
 
 
/* --------------------------------------------------------------------------
  Cas spécifique du titre OOUI
  -------------------------------------------------------------------------- */
 
.ve-ui-toolbar-group-save .oo-ui-tool-title,
.ve-ui-toolbar-group-save .oo-ui-tool-title,
.ve-ui-toolbar-group-save .oo-ui-tool-title *,
.ve-ui-toolbar-group-save .oo-ui-tool-title *,
.ve-ui-toolbar-group-save .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save .oo-ui-labelElement-label * {
.ve-ui-toolbar-group-save .oo-ui-labelElement-label * {
     color: #FFFFFF !important;
     color: var(--perche-white) !important;
}
}




/* --------------------------------------------------------------------------
/* Survol */
  Survol
  -------------------------------------------------------------------------- */


.ve-ui-toolbar-group-save .oo-ui-tool-link:hover,
.ve-ui-toolbar-group-save .oo-ui-tool-link:hover,
.ve-ui-toolbar-group-save .oo-ui-tool:hover,
.ve-ui-toolbar-group-save .oo-ui-tool:hover,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:hover {
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:hover {
     background-color: #3B5B3E !important;
     background-color: var(--perche-green-dark) !important;
     background-image: none !important;
     background-image: none !important;
     border-color: #3B5B3E !important;
     border-color: var(--perche-green-dark) !important;
     color: #FFFFFF !important;
     color: var(--perche-white) !important;
}
}


.ve-ui-toolbar-group-save .oo-ui-tool-link:hover *,
.ve-ui-toolbar-group-save .oo-ui-tool-link:hover *,
.ve-ui-toolbar-group-save .oo-ui-tool:hover *,
.ve-ui-toolbar-group-save .oo-ui-tool:hover *,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:hover *,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:hover * {
.ve-ui-toolbar-group-save .oo-ui-tool-title:hover,
    color: var(--perche-white) !important;
.ve-ui-toolbar-group-save .oo-ui-labelElement-label:hover {
    color: #FFFFFF !important;
}
}




/* --------------------------------------------------------------------------
/* Focus / actif */
  Focus / actif
  -------------------------------------------------------------------------- */


.ve-ui-toolbar-group-save .oo-ui-tool-link:focus,
.ve-ui-toolbar-group-save .oo-ui-tool-link:focus,
Ligne 574 : Ligne 567 :
.ve-ui-toolbar-group-save .oo-ui-tool:active,
.ve-ui-toolbar-group-save .oo-ui-tool:active,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:active {
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:active {
     background-color: #3B5B3E !important;
     background-color: var(--perche-green-dark) !important;
     background-image: none !important;
     background-image: none !important;
     border-color: #3B5B3E !important;
     border-color: var(--perche-green-dark) !important;
     color: #FFFFFF !important;
     color: var(--perche-white) !important;
}
}


Ligne 586 : Ligne 579 :
.ve-ui-toolbar-group-save .oo-ui-tool:active *,
.ve-ui-toolbar-group-save .oo-ui-tool:active *,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:active * {
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:active * {
     color: #FFFFFF !important;
     color: var(--perche-white) !important;
}
}




/* ==========================================================================
/* ==========================================================================
   24. FOCUS DES LIENS
   24. ACCESSIBILITÉ — FOCUS
   ========================================================================== */
   ========================================================================== */


Ligne 599 : Ligne 592 :
#mw-related-navigation a:focus,
#mw-related-navigation a:focus,
.sidebar-inner a:focus {
.sidebar-inner a:focus {
     outline-color: #5C7A4E;
     outline-color: var(--perche-green);
}
}




/* ==========================================================================
/* ==========================================================================
   25. FIN — PROTECTION DU LAYOUT TIMELESS
   25. PROTECTION DU LAYOUT TIMELESS
   ========================================================================== */
   ========================================================================== */


/*
/*
  * Aucun changement volontaire de :
  * Ce fichier ne modifie volontairement pas :
  *
  *
  * - position
  * - position
Ligne 620 : Ligne 613 :
  * - overflow
  * - overflow
  *
  *
  * Le layout natif de Timeless reste maître de la mise en page.
  * Le layout natif de Timeless reste donc maître de la mise en page.
  */
  */
```
```

Version du 3 octobre 2026 à 14:10

```css id="timeless-perche-final"
/* ==========================================================================
   MEDIAWIKI:TIMELESS.CSS
   THÈME « PERCHE »
   
   Palette :
   Beige général       #F7F3EA
   Blanc               #FFFFFF
   Sable               #E9E0CC
   Vert foncé          #3B5B3E
   Vert                #5C7A4E
   Vert clair          #7A9471
   Brun                #8A4B2E
   Brun foncé          #6B3A22
   Texte               #2C2A26

   Principe :
   - conserver le layout natif de Timeless ;
   - modifier principalement les couleurs ;
   - ne pas imposer de dimensions ou de positionnement ;
   - éviter les règles globales susceptibles de casser VisualEditor.
   ========================================================================== */


/* ==========================================================================
   1. PALETTE
   ========================================================================== */

:root {
    --perche-bg: #F7F3EA;
    --perche-white: #FFFFFF;
    --perche-sand: #E9E0CC;
    --perche-green-dark: #3B5B3E;
    --perche-green: #5C7A4E;
    --perche-green-light: #7A9471;
    --perche-brown: #8A4B2E;
    --perche-brown-dark: #6B3A22;
    --perche-text: #2C2A26;
}


/* ==========================================================================
   2. FOND GÉNÉRAL
   ========================================================================== */

html {
    background-color: var(--perche-bg);
}

body {
    background-color: var(--perche-bg);
    color: var(--perche-text);
    min-height: 100%;
}


/* ==========================================================================
   3. CONTENU PRINCIPAL
   ========================================================================== */

#content {
    background-color: var(--perche-white);
    color: var(--perche-text);
}


/* ==========================================================================
   4. EN-TÊTE
   ========================================================================== */

#p-logo,
.mw-header,
#mw-header-container,
header#mw-header {
    background-color: var(--perche-green-dark) !important;
}

/* Logo */
#p-logo.mw-portlet {
    background-color: var(--perche-sand) !important;
}

/* Texte et liens */
.mw-header,
.mw-header a,
#mw-header-container a {
    color: var(--perche-bg) !important;
}

/* Survol */
.mw-header a:hover,
.mw-header a:focus,
#mw-header-container a:hover,
#mw-header-container a:focus {
    color: var(--perche-white) !important;
}


/* ==========================================================================
   5. MENU PERSONNEL
   ========================================================================== */

#personal-inner.dropdown {
    background-color: var(--perche-white);
    color: var(--perche-text) !important;
}

#personal-inner.dropdown a {
    color: var(--perche-text) !important;
}

#personal-inner.dropdown a:visited {
    color: var(--perche-brown-dark) !important;
}

#personal-inner.dropdown a:hover,
#personal-inner.dropdown a:focus {
    background-color: var(--perche-sand) !important;
    color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   6. PIED DE PAGE
   ========================================================================== */

#mw-footer-container,
#footer {
    background-color: var(--perche-green-dark) !important;
    color: var(--perche-bg) !important;
}

#footer a,
#mw-footer-container a {
    color: var(--perche-bg) !important;
}

#footer a:hover,
#mw-footer-container a:hover {
    color: var(--perche-white) !important;
}


/* ==========================================================================
   7. SIDEBARS / NAVIGATION
   ========================================================================== */

#mw-site-navigation,
#mw-page-tools,
.sidebar-inner,
#mw-related-navigation {
    background-color: var(--perche-sand) !important;
    color: var(--perche-text);
}

/* Fond interne des portlets */
.sidebar-chunk {
    background-color: var(--perche-sand) !important;
    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   8. LIENS DES SIDEBARS
   ========================================================================== */

#mw-site-navigation a,
#mw-site-navigation .mw-portlet-body a,
#mw-related-navigation a,
#mw-related-navigation .mw-portlet-body a,
#mw-page-tools a,
#mw-page-tools .mw-portlet-body a,
.sidebar-inner a,
.sidebar-inner .mw-portlet-body a,
.sidebar-chunk a {
    color: var(--perche-brown) !important;
}

#mw-site-navigation a:visited,
#mw-site-navigation .mw-portlet-body a:visited,
#mw-related-navigation a:visited,
#mw-related-navigation .mw-portlet-body a:visited,
#mw-page-tools a:visited,
#mw-page-tools .mw-portlet-body a:visited,
.sidebar-inner a:visited,
.sidebar-inner .mw-portlet-body a:visited,
.sidebar-chunk a:visited {
    color: var(--perche-brown-dark) !important;
}

/* Survol */
#mw-site-navigation a:hover,
#mw-site-navigation a:focus,
#mw-related-navigation a:hover,
#mw-related-navigation a:focus,
#mw-page-tools a:hover,
#mw-page-tools a:focus,
.sidebar-inner a:hover,
.sidebar-inner a:focus,
.sidebar-chunk a:hover,
.sidebar-chunk a:focus {
    color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   9. LIENS DU CONTENU
   ========================================================================== */

#content a {
    color: var(--perche-brown);
}

#content a:visited {
    color: var(--perche-brown-dark);
}

#content a:hover,
#content a:focus {
    color: var(--perche-green-dark);
}


/* ==========================================================================
   10. RÉFÉRENCES / SOURCES
   ========================================================================== */

#content .reference a:hover,
#content .reference a:focus,
#content sup.reference a:hover,
#content sup.reference a:focus,
#content .mw-references a:hover,
#content .mw-references a:focus {
    color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   11. BORDURES ET SÉPARATEURS
   ========================================================================== */

#content,
.sidebar-inner,
#mw-site-navigation {
    border-color: var(--perche-green-light) !important;
}

hr {
    border-color: var(--perche-green-light) !important;
}


/* ==========================================================================
   12. ÉLÉMENTS TECHNIQUES DU HEADER TIMELESS
   ========================================================================== */

#mw-head-base,
#mw-page-base {
    background-color: var(--perche-green-dark) !important;
}

.mw-header-container,
.mw-header-wrapper {
    background-color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   13. BARRE DE COULEUR SOUS L'EN-TÊTE
   ========================================================================== */

.color-bar {
    background-color: var(--perche-green-light) !important;
}

.color-middle,
.color-middle-container {
    background-color: var(--perche-green) !important;
}

.color-left,
.color-right {
    background-color: var(--perche-sand) !important;
}


/* ==========================================================================
   14. TITRES
   ========================================================================== */

/*
 * MediaWiki utilise désormais des conteneurs .mw-heading pour les titres.
 * On prend en charge à la fois cette structure et les anciens h1/h2.
 */

/* Titres de niveau 1 */
#content .mw-heading1,
#content h1 {
    border-bottom-color: var(--perche-green-light) !important;
}

/* Titres de niveau 2 */
#content .mw-heading2,
#content h2 {
    border-bottom-color: var(--perche-green-light) !important;
}

/* Titres de niveau 3 à 6 */
#content .mw-heading3,
#content .mw-heading4,
#content .mw-heading5,
#content .mw-heading6,
#content h3,
#content h4,
#content h5,
#content h6 {
    border-bottom-color: var(--perche-green-light) !important;
}


/* ==========================================================================
   15. ONGLETS DE PAGE
   ========================================================================== */

#mw-page-header-links .mw-portlet li.selected,
#mw-page-header-links .mw-portlet li.selected a,
#mw-page-header-links .mw-portlet li a:hover,
#mw-page-header-links .mw-portlet li a:focus {
    border-bottom-color: var(--perche-green-light) !important;
}

#p-associated-pages li.selected,
#p-views li.selected {
    border-bottom-color: var(--perche-green-light) !important;
}


/* ==========================================================================
   16. SOMMAIRE
   ========================================================================== */

.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel::after,
.toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
    color: var(--perche-brown);
}

.toctitle .toctogglelabel:hover::after {
    color: var(--perche-green-dark);
    text-decoration: underline;
    cursor: pointer;
}


/* ==========================================================================
   17. RECHERCHE — SUGGESTIONS
   ========================================================================== */

.mw-searchSuggest-link:hover,
.mw-searchSuggest-link:hover *,
.mw-searchSuggest-link.mw-searchSuggest-active,
.mw-searchSuggest-link.mw-searchSuggest-active * {
    background-color: var(--perche-sand) !important;
    color: var(--perche-text) !important;
}

.suggestions-result-current,
.suggestions-result-current .mw-searchSuggest-link,
.suggestions-result-current * {
    background-color: var(--perche-sand) !important;
    color: var(--perche-text) !important;
}


/* ==========================================================================
   18. CHAMPS DE RECHERCHE
   ========================================================================== */

#simpleSearch {
    border-color: var(--perche-green-light) !important;
}

#searchInput {
    color: var(--perche-text);
}


/* ==========================================================================
   19. TABLEAUX MEDIAWIKI
   ========================================================================== */

.wikitable {
    border-color: var(--perche-green-light) !important;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
    background-color: var(--perche-sand) !important;
    color: var(--perche-green-dark);
    border-color: var(--perche-green-light) !important;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
    border-color: var(--perche-green-light) !important;
}


/* ==========================================================================
   20. IMAGES / MINIATURES
   ========================================================================== */

.thumbinner {
    background-color: var(--perche-bg) !important;
    border-color: var(--perche-green-light) !important;
}


/* ==========================================================================
   21. CODE
   ========================================================================== */

pre,
code {
    background-color: var(--perche-bg);
    color: var(--perche-text);
    border-color: var(--perche-green-light);
}


/* ==========================================================================
   22. BOUTONS DU SITE
   ========================================================================== */

/*
 * Tous les boutons classiques MediaWiki et OOUI :
 *
 * Normal  : vert
 * Texte   : blanc
 * Survol  : vert foncé
 *
 * Les règles VisualEditor spécifiques plus bas permettent de garantir
 * le même rendu pour le bouton « Enregistrer les modifications ».
 */

.mw-ui-button,
.oo-ui-buttonElement-button {
    background-color: var(--perche-green) !important;
    background-image: none !important;
    color: var(--perche-white) !important;
    border-color: var(--perche-green-dark) !important;
}

/* Texte et éléments internes */
.mw-ui-button *,
.oo-ui-buttonElement-button * {
    color: var(--perche-white) !important;
}


/* Survol / focus */

.mw-ui-button:hover,
.mw-ui-button:focus,
.oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-button:focus {
    background-color: var(--perche-green-dark) !important;
    background-image: none !important;
    color: var(--perche-white) !important;
    border-color: var(--perche-green-dark) !important;
}

.mw-ui-button:hover *,
.mw-ui-button:focus *,
.oo-ui-buttonElement-button:hover *,
.oo-ui-buttonElement-button:focus * {
    color: var(--perche-white) !important;
}


/* Boutons actifs */

.mw-ui-button:active,
.oo-ui-buttonElement-button:active {
    background-color: var(--perche-green-dark) !important;
    color: var(--perche-white) !important;
    border-color: var(--perche-green-dark) !important;
}


/* Boutons désactivés */

.mw-ui-button:disabled,
.mw-ui-button.disabled,
.oo-ui-buttonElement-button:disabled,
.oo-ui-widget-disabled .oo-ui-buttonElement-button {
    background-color: var(--perche-green-light) !important;
    color: var(--perche-bg) !important;
    border-color: var(--perche-green-light) !important;
}


/* ==========================================================================
   23. VISUALEDITOR — ENREGISTRER LES MODIFICATIONS
   ========================================================================== */

/*
 * Renforcement spécifique du bouton de sauvegarde de VisualEditor.
 *
 * Le groupe save est ciblé afin de garantir le rendu même lorsqu'une
 * règle OOUI plus spécifique est appliquée par VisualEditor.
 */


/* Fond */

.ve-ui-toolbar-group-save .oo-ui-tool-link,
.ve-ui-toolbar-group-save .oo-ui-tool,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button {
    background-color: var(--perche-green) !important;
    background-image: none !important;
    border-color: var(--perche-green-dark) !important;
    box-shadow: none !important;
}


/* Texte */

.ve-ui-toolbar-group-save .oo-ui-tool-link,
.ve-ui-toolbar-group-save .oo-ui-tool-link *,
.ve-ui-toolbar-group-save .oo-ui-tool,
.ve-ui-toolbar-group-save .oo-ui-tool *,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button *,
.ve-ui-toolbar-group-save .oo-ui-tool-title,
.ve-ui-toolbar-group-save .oo-ui-tool-title *,
.ve-ui-toolbar-group-save .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save .oo-ui-labelElement-label * {
    color: var(--perche-white) !important;
}


/* Survol */

.ve-ui-toolbar-group-save .oo-ui-tool-link:hover,
.ve-ui-toolbar-group-save .oo-ui-tool:hover,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:hover {
    background-color: var(--perche-green-dark) !important;
    background-image: none !important;
    border-color: var(--perche-green-dark) !important;
    color: var(--perche-white) !important;
}

.ve-ui-toolbar-group-save .oo-ui-tool-link:hover *,
.ve-ui-toolbar-group-save .oo-ui-tool:hover *,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:hover * {
    color: var(--perche-white) !important;
}


/* Focus / actif */

.ve-ui-toolbar-group-save .oo-ui-tool-link:focus,
.ve-ui-toolbar-group-save .oo-ui-tool:focus,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:focus,
.ve-ui-toolbar-group-save .oo-ui-tool-link:active,
.ve-ui-toolbar-group-save .oo-ui-tool:active,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:active {
    background-color: var(--perche-green-dark) !important;
    background-image: none !important;
    border-color: var(--perche-green-dark) !important;
    color: var(--perche-white) !important;
}

.ve-ui-toolbar-group-save .oo-ui-tool-link:focus *,
.ve-ui-toolbar-group-save .oo-ui-tool:focus *,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:focus *,
.ve-ui-toolbar-group-save .oo-ui-tool-link:active *,
.ve-ui-toolbar-group-save .oo-ui-tool:active *,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:active * {
    color: var(--perche-white) !important;
}


/* ==========================================================================
   24. ACCESSIBILITÉ — FOCUS
   ========================================================================== */

#content a:focus,
#mw-site-navigation a:focus,
#mw-page-tools a:focus,
#mw-related-navigation a:focus,
.sidebar-inner a:focus {
    outline-color: var(--perche-green);
}


/* ==========================================================================
   25. PROTECTION DU LAYOUT TIMELESS
   ========================================================================== */

/*
 * Ce fichier ne modifie volontairement pas :
 *
 * - position
 * - display
 * - width
 * - height
 * - margin
 * - padding
 * - flex
 * - grid
 * - overflow
 *
 * Le layout natif de Timeless reste donc maître de la mise en page.
 */
```
Récupérée de "https://wikiperche.fr/index.php?title=MediaWiki:Timeless.css&oldid=2738"