MediaWiki:Common.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.
/* ============================================================
ATHÉNA — IDENTITÉ VISUELLE PROMÉTHÉE T&I
============================================================
Fichier cible :
MediaWiki:Common.css
Rôle :
Définir l’identité visuelle commune du wiki Athéna :
couleurs, typographie, cartes, encarts, tableaux, accordéons,
pages d’accueil, classes utilitaires et compatibilité mode sombre.
Principe de conception :
1. Les couleurs et fonds sont pilotés par des variables CSS.
2. Les composants utilisent les variables, jamais le thème en dur.
3. Le mode sombre redéfinit principalement les variables.
4. Les classes Athéna sont préfixées par .pti-
5. Les surcharges MediaWiki restent limitées et commentées.
Convention :
.pti-bandeau : bandeau institutionnel de page
.pti-grille : grille de tuiles
.pti-carte : tuile documentaire
.pti-encart : encart éditorial
.pti-accordeon : bloc repliable
.pti-etiquette : badge documentaire
.pti-meta : information secondaire
============================================================ */
/* ============================================================
1. VARIABLES GÉNÉRALES, MODE CLAIR
============================================================
Ces variables sont la source principale de l’identité Athéna.
Les composants graphiques ci-dessous doivent s’appuyer sur elles.
============================================================ */
:root {
/* Couleurs institutionnelles */
--pti-bleu-nuit: #111827;
--pti-bleu-profond: #1f2937;
--pti-bleu-lien: #245c9c;
--pti-bleu-lien-visite: #4b4f9c;
--pti-or: #b08d57;
--pti-or-clair: #d7bf8f;
--pti-or-fond: #f8f4ec;
--pti-vert: #3f7d5f;
--pti-vert-fond: #f3faf6;
--pti-rouge: #9f3a38;
--pti-rouge-fond: #fff5f5;
/* Fonds principaux */
--pti-fond-page: #f7f8fb;
--pti-fond-contenu: #ffffff;
--pti-fond-carte: #ffffff;
--pti-fond-encart: #fbfcfe;
--pti-fond-secondaire: #fafbfc;
/* Texte */
--pti-texte: #1f2933;
--pti-texte-secondaire: #5f6b7a;
--pti-texte-discret: #7b8794;
--pti-texte-inverse: #ffffff;
/* Bordures */
--pti-bordure: #d8dde6;
--pti-bordure-legere: #edf0f5;
/* Code */
--pti-code-fond: #f3f5f8;
--pti-code-bloc-fond: #f6f8fb;
--pti-code-bordure: #e1e5ec;
--pti-code-texte: #1f2937;
/* Tableaux */
--pti-table-entete-fond: var(--pti-bleu-nuit);
--pti-table-entete-texte: #ffffff;
--pti-table-ligne-paire: #fafbfc;
/* Ombres et rayons */
--pti-ombre-carte: 0 1px 3px rgba(17, 24, 39, 0.08);
--pti-ombre-carte-survol: 0 6px 18px rgba(17, 24, 39, 0.12);
--pti-rayon: 10px;
--pti-rayon-petit: 8px;
/* Teintes de sections de l’accueil */
--pti-section-entrees-fond: #fbf3e6;
--pti-section-entrees-fond-survol: #f8ead2;
--pti-section-entrees-bordure: #b08d57;
--pti-section-entrees-separateur: #e5cfaa;
--pti-section-referentiels-fond: #edf5ff;
--pti-section-referentiels-fond-survol: #e4f0fc;
--pti-section-referentiels-bordure: #6f9fca;
--pti-section-referentiels-separateur: #c7dced;
--pti-section-documents-fond: #f1f3f6;
--pti-section-documents-fond-survol: #e9edf2;
--pti-section-documents-bordure: #9aa6b5;
--pti-section-documents-separateur: #d4dae2;
--pti-section-espaces-fond: #edf9f1;
--pti-section-espaces-fond-survol: #e3f5e9;
--pti-section-espaces-bordure: #7fb891;
--pti-section-espaces-separateur: #c7e2cf;
--pti-section-pilotage-fond: #f4f0fb;
--pti-section-pilotage-fond-survol: #eee7f8;
--pti-section-pilotage-bordure: #9b86c6;
--pti-section-pilotage-separateur: #ddd3ef;
}
/* ============================================================
2. VARIABLES GÉNÉRALES, MODE SOMBRE
============================================================
MediaWiki / Vector peut appliquer le mode sombre de deux façons :
1. Mode sombre choisi explicitement :
html.skin-theme-clientpref-night
2. Mode automatique selon le système :
html.skin-theme-clientpref-os + prefers-color-scheme: dark
On redéfinit les variables, puis les composants suivent.
============================================================ */
html.skin-theme-clientpref-night {
color-scheme: dark;
--pti-bleu-nuit: #f3f6fb;
--pti-bleu-profond: #d8dee9;
--pti-bleu-lien: #8ab4f8;
--pti-bleu-lien-visite: #c6a7ff;
--pti-or: #d7bf8f;
--pti-or-clair: #e8d7ad;
--pti-or-fond: #2a2418;
--pti-vert: #8fd0a8;
--pti-vert-fond: #10251a;
--pti-rouge: #f2a3a3;
--pti-rouge-fond: #2a1414;
--pti-fond-page: #0f1117;
--pti-fond-contenu: #151922;
--pti-fond-carte: #1b202b;
--pti-fond-encart: #1b202b;
--pti-fond-secondaire: #181e29;
--pti-texte: #e5e7eb;
--pti-texte-secondaire: #c3cad6;
--pti-texte-discret: #9aa4b2;
--pti-texte-inverse: #ffffff;
--pti-bordure: #394150;
--pti-bordure-legere: #2b3340;
--pti-code-fond: #111827;
--pti-code-bloc-fond: #111827;
--pti-code-bordure: #374151;
--pti-code-texte: #e5e7eb;
--pti-table-entete-fond: #0b1220;
--pti-table-entete-texte: #ffffff;
--pti-table-ligne-paire: #181e29;
--pti-ombre-carte: 0 1px 3px rgba(0, 0, 0, 0.35);
--pti-ombre-carte-survol: 0 6px 18px rgba(0, 0, 0, 0.45);
--pti-section-entrees-fond: #2a2418;
--pti-section-entrees-fond-survol: #352c1d;
--pti-section-entrees-bordure: #d7bf8f;
--pti-section-entrees-separateur: #6f5630;
--pti-section-referentiels-fond: #111f32;
--pti-section-referentiels-fond-survol: #172944;
--pti-section-referentiels-bordure: #6f9fca;
--pti-section-referentiels-separateur: #315f96;
--pti-section-documents-fond: #202633;
--pti-section-documents-fond-survol: #252d3b;
--pti-section-documents-bordure: #9aa6b5;
--pti-section-documents-separateur: #465264;
--pti-section-espaces-fond: #10251a;
--pti-section-espaces-fond-survol: #173321;
--pti-section-espaces-bordure: #7fb891;
--pti-section-espaces-separateur: #285c3f;
--pti-section-pilotage-fond: #21182f;
--pti-section-pilotage-fond-survol: #2a1f3d;
--pti-section-pilotage-bordure: #9b86c6;
--pti-section-pilotage-separateur: #574177;
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
color-scheme: dark;
--pti-bleu-nuit: #f3f6fb;
--pti-bleu-profond: #d8dee9;
--pti-bleu-lien: #8ab4f8;
--pti-bleu-lien-visite: #c6a7ff;
--pti-or: #d7bf8f;
--pti-or-clair: #e8d7ad;
--pti-or-fond: #2a2418;
--pti-vert: #8fd0a8;
--pti-vert-fond: #10251a;
--pti-rouge: #f2a3a3;
--pti-rouge-fond: #2a1414;
--pti-fond-page: #0f1117;
--pti-fond-contenu: #151922;
--pti-fond-carte: #1b202b;
--pti-fond-encart: #1b202b;
--pti-fond-secondaire: #181e29;
--pti-texte: #e5e7eb;
--pti-texte-secondaire: #c3cad6;
--pti-texte-discret: #9aa4b2;
--pti-texte-inverse: #ffffff;
--pti-bordure: #394150;
--pti-bordure-legere: #2b3340;
--pti-code-fond: #111827;
--pti-code-bloc-fond: #111827;
--pti-code-bordure: #374151;
--pti-code-texte: #e5e7eb;
--pti-table-entete-fond: #0b1220;
--pti-table-entete-texte: #ffffff;
--pti-table-ligne-paire: #181e29;
--pti-ombre-carte: 0 1px 3px rgba(0, 0, 0, 0.35);
--pti-ombre-carte-survol: 0 6px 18px rgba(0, 0, 0, 0.45);
--pti-section-entrees-fond: #2a2418;
--pti-section-entrees-fond-survol: #352c1d;
--pti-section-entrees-bordure: #d7bf8f;
--pti-section-entrees-separateur: #6f5630;
--pti-section-referentiels-fond: #111f32;
--pti-section-referentiels-fond-survol: #172944;
--pti-section-referentiels-bordure: #6f9fca;
--pti-section-referentiels-separateur: #315f96;
--pti-section-documents-fond: #202633;
--pti-section-documents-fond-survol: #252d3b;
--pti-section-documents-bordure: #9aa6b5;
--pti-section-documents-separateur: #465264;
--pti-section-espaces-fond: #10251a;
--pti-section-espaces-fond-survol: #173321;
--pti-section-espaces-bordure: #7fb891;
--pti-section-espaces-separateur: #285c3f;
--pti-section-pilotage-fond: #21182f;
--pti-section-pilotage-fond-survol: #2a1f3d;
--pti-section-pilotage-bordure: #9b86c6;
--pti-section-pilotage-separateur: #574177;
}
}
/* ============================================================
3. AMBIANCE GÉNÉRALE MEDIAWIKI
============================================================ */
html,
body {
background: var(--pti-fond-page) !important;
color: var(--pti-texte) !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.mw-body,
.vector-body,
#content,
.mw-page-container,
.mw-page-container-inner {
background: var(--pti-fond-contenu) !important;
color: var(--pti-texte) !important;
}
.mw-parser-output {
color: var(--pti-texte) !important;
font-size: 1rem;
line-height: 1.55;
}
.mw-parser-output * {
box-sizing: border-box;
}
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output td {
color: var(--pti-texte) !important;
line-height: 1.6;
}
/* ============================================================
4. LOGO ET MARQUE DU WIKI
============================================================ */
.mw-logo-icon {
display: none !important;
}
.mw-logo-wordmark,
.mw-logo-tagline {
color: var(--pti-bleu-nuit) !important;
}
.mw-logo-container {
padding-left: 0.5rem !important;
}
.vector-header-container .mw-logo-wordmark {
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.vector-header-container .mw-logo-tagline {
color: var(--pti-texte-secondaire) !important;
}
/* ============================================================
5. TITRES ET HIÉRARCHIE ÉDITORIALE
============================================================ */
.firstHeading,
.mw-first-heading {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-weight: 650 !important;
color: var(--pti-bleu-nuit) !important;
letter-spacing: -0.02em !important;
}
.mw-body h1,
.mw-body h2,
.mw-body h3,
.vector-body h1,
.vector-body h2,
.vector-body h3,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
color: var(--pti-bleu-nuit) !important;
letter-spacing: -0.015em !important;
}
.mw-parser-output h2 {
border-bottom: 1px solid var(--pti-bordure) !important;
padding-bottom: 0.25em !important;
margin-top: 1.8em !important;
font-weight: 600 !important;
}
.mw-parser-output h3 {
font-weight: 650 !important;
margin-top: 1.4em !important;
}
/* ============================================================
6. LIENS
============================================================ */
.mw-parser-output a,
.vector-menu-content a,
#mw-panel a {
color: var(--pti-bleu-lien) !important;
}
.mw-parser-output a:visited {
color: var(--pti-bleu-lien-visite) !important;
}
.mw-parser-output a:hover,
.vector-menu-content a:hover,
#mw-panel a:hover {
color: var(--pti-bleu-nuit) !important;
text-decoration: underline !important;
}
/* ============================================================
7. BANDEAU INSTITUTIONNEL ATHÉNA
============================================================ */
.pti-bandeau {
border: 1px solid var(--pti-bordure) !important;
border-left: 6px solid var(--pti-or) !important;
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-or-fond) 100%) !important;
padding: 1.5rem 1.7rem !important;
margin: 1rem 0 1.5rem 0 !important;
border-radius: var(--pti-rayon) !important;
min-height: 120px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
box-shadow: var(--pti-ombre-carte) !important;
}
.pti-bandeau-titre {
font-size: 2.1rem !important;
line-height: 1.1 !important;
font-weight: 750 !important;
color: var(--pti-bleu-nuit) !important;
margin-bottom: 0.45rem !important;
letter-spacing: -0.025em !important;
}
.pti-bandeau-soustitre {
max-width: 950px !important;
font-size: 1.05rem !important;
color: var(--pti-texte-secondaire) !important;
line-height: 1.55 !important;
}
/* ============================================================
8. GRILLES ET TUILES
============================================================ */
.pti-grille {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
gap: 1rem !important;
margin: 1.2rem 0 1.4rem 0 !important;
}
.pti-carte {
border: 1px solid var(--pti-bordure) !important;
background: var(--pti-fond-carte) !important;
padding: 1rem !important;
border-radius: var(--pti-rayon) !important;
box-shadow: var(--pti-ombre-carte) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}
.pti-carte:hover {
transform: translateY(-2px) !important;
border-color: var(--pti-or) !important;
box-shadow: var(--pti-ombre-carte-survol) !important;
}
.pti-carte-titre {
font-size: 1.05rem !important;
font-weight: 720 !important;
color: var(--pti-bleu-nuit) !important;
border-bottom: 1px solid var(--pti-bordure-legere) !important;
padding-bottom: 0.45rem !important;
margin-bottom: 0.6rem !important;
letter-spacing: -0.01em !important;
}
.pti-carte-texte {
color: var(--pti-texte-secondaire) !important;
line-height: 1.45 !important;
}
.pti-carte-texte a {
text-decoration: none !important;
}
.pti-carte-texte a:hover {
text-decoration: underline !important;
}
.pti-carte-majeure {
border-left: 5px solid var(--pti-or) !important;
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-or-fond) 100%) !important;
}
/* ============================================================
9. ENCARTS DOCUMENTAIRES
============================================================ */
.pti-encart {
border: 1px solid var(--pti-bordure) !important;
border-left: 5px solid var(--pti-or) !important;
background: var(--pti-fond-encart) !important;
color: var(--pti-texte) !important;
padding: 1rem 1.1rem !important;
margin: 1rem 0 !important;
border-radius: var(--pti-rayon-petit) !important;
}
.pti-encart strong,
.pti-encart b {
color: var(--pti-bleu-nuit) !important;
}
.pti-note {
border-left-color: var(--pti-bleu-lien) !important;
background: var(--pti-section-referentiels-fond) !important;
}
.pti-attention {
border-left-color: var(--pti-or) !important;
background: var(--pti-or-fond) !important;
}
.pti-validation {
border-left-color: var(--pti-vert) !important;
background: var(--pti-vert-fond) !important;
}
.pti-danger {
border-left-color: var(--pti-rouge) !important;
background: var(--pti-rouge-fond) !important;
}
/* ============================================================
10. TABLEAUX
============================================================ */
.wikitable {
border: 1px solid var(--pti-bordure) !important;
background: var(--pti-fond-carte) !important;
border-collapse: collapse !important;
box-shadow: var(--pti-ombre-carte) !important;
max-width: 100% !important;
}
.wikitable th {
background: var(--pti-table-entete-fond) !important;
color: var(--pti-table-entete-texte) !important;
font-weight: 650 !important;
}
.wikitable td,
.wikitable th {
padding: 0.55rem 0.7rem !important;
border: 1px solid var(--pti-bordure) !important;
vertical-align: top !important;
}
.wikitable td {
background: var(--pti-fond-carte) !important;
color: var(--pti-texte) !important;
}
.wikitable tr:nth-child(even) td {
background: var(--pti-table-ligne-paire) !important;
}
/* ============================================================
11. CODE ET PRÉFORMATÉ
============================================================ */
code,
pre,
.mw-code {
font-family: "Cascadia Mono", "Consolas", "Liberation Mono", monospace !important;
}
code {
background: var(--pti-code-fond) !important;
border: 1px solid var(--pti-code-bordure) !important;
border-radius: 4px !important;
padding: 0.08rem 0.28rem !important;
color: var(--pti-code-texte) !important;
white-space: break-spaces !important;
}
pre {
background: var(--pti-code-bloc-fond) !important;
border: 1px solid var(--pti-code-bordure) !important;
border-left: 4px solid var(--pti-or) !important;
border-radius: var(--pti-rayon-petit) !important;
padding: 1rem !important;
color: var(--pti-code-texte) !important;
max-width: 100% !important;
overflow-x: auto !important;
white-space: pre-wrap !important;
}
/* ============================================================
12. MENUS, ONGLETS ET BLOCS MEDIAWIKI
============================================================ */
.vector-main-menu,
.vector-page-tools,
.vector-appearance-landmark {
color: var(--pti-texte) !important;
}
.vector-menu-heading,
.vector-pinnable-header-label {
color: var(--pti-bleu-nuit) !important;
font-weight: 700 !important;
}
.vector-menu-content-list li a {
border-radius: 4px !important;
}
.vector-menu-content-list li a:hover {
background: var(--pti-fond-secondaire) !important;
text-decoration: none !important;
}
.vector-page-titlebar-toc,
.vector-page-titlebar {
border-color: var(--pti-bordure) !important;
}
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
color: var(--pti-bleu-nuit) !important;
font-weight: 650 !important;
}
.vector-menu-tabs li a {
color: var(--pti-bleu-lien) !important;
}
/* ============================================================
13. SOMMAIRE
============================================================ */
.toc,
#toc,
.vector-toc {
border-color: var(--pti-bordure) !important;
background: var(--pti-fond-carte) !important;
border-radius: var(--pti-rayon-petit) !important;
}
.tocnumber {
color: var(--pti-texte-discret) !important;
}
.toctext {
color: var(--pti-bleu-lien) !important;
}
/* ============================================================
14. IMAGES ET FICHIERS
============================================================ */
.mw-parser-output img {
max-width: 100%;
height: auto;
}
.thumbinner {
border: 1px solid var(--pti-bordure) !important;
background: var(--pti-fond-carte) !important;
border-radius: var(--pti-rayon-petit) !important;
box-shadow: var(--pti-ombre-carte) !important;
}
.thumbcaption {
color: var(--pti-texte-secondaire) !important;
font-size: 0.92rem !important;
}
/* ============================================================
15. MESSAGES SYSTÈME MEDIAWIKI
============================================================ */
.warningbox,
.errorbox,
.successbox,
.mw-message-box {
border-radius: var(--pti-rayon-petit) !important;
border-color: var(--pti-bordure) !important;
}
.successbox {
border-left: 5px solid var(--pti-vert) !important;
}
.warningbox {
border-left: 5px solid var(--pti-or) !important;
}
.errorbox {
border-left: 5px solid var(--pti-rouge) !important;
}
/* ============================================================
16. FORMULAIRES ET CHAMPS
============================================================ */
input,
textarea,
select,
.mw-ui-input {
border-radius: 6px !important;
border-color: var(--pti-bordure) !important;
}
input:focus,
textarea:focus,
select:focus,
.mw-ui-input:focus {
border-color: var(--pti-or) !important;
box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.18) !important;
outline: none !important;
}
.mw-ui-button,
.oo-ui-buttonElement-button {
border-radius: 6px !important;
}
/* ============================================================
17. RESPONSIVE
============================================================ */
@media screen and (max-width: 900px) {
.pti-bandeau {
padding: 1.2rem 1.2rem !important;
min-height: auto !important;
}
.pti-bandeau-titre {
font-size: 1.8rem !important;
}
.pti-grille {
grid-template-columns: 1fr !important;
}
.mw-parser-output .wikitable {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
}
}
@media screen and (max-width: 600px) {
.pti-bandeau-titre {
font-size: 1.6rem !important;
}
.pti-bandeau-soustitre {
font-size: 0.98rem !important;
}
.pti-carte,
.pti-encart {
padding: 0.9rem !important;
}
.mw-parser-output {
font-size: 0.97rem !important;
}
}
/* ============================================================
18. TEINTES DES SECTIONS DE L’ACCUEIL
============================================================ */
.mw-parser-output .pti-section-entrees .pti-carte {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-entrees-fond) 100%) !important;
border-top: 4px solid var(--pti-section-entrees-bordure) !important;
}
.mw-parser-output .pti-section-entrees .pti-carte-titre {
border-bottom-color: var(--pti-section-entrees-separateur) !important;
}
.mw-parser-output .pti-section-referentiels .pti-carte {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-referentiels-fond) 100%) !important;
border-top: 4px solid var(--pti-section-referentiels-bordure) !important;
}
.mw-parser-output .pti-section-referentiels .pti-carte-titre {
border-bottom-color: var(--pti-section-referentiels-separateur) !important;
}
.mw-parser-output .pti-section-documents .pti-carte {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-documents-fond) 100%) !important;
border-top: 4px solid var(--pti-section-documents-bordure) !important;
}
.mw-parser-output .pti-section-documents .pti-carte-titre {
border-bottom-color: var(--pti-section-documents-separateur) !important;
}
.mw-parser-output .pti-section-espaces .pti-carte {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-espaces-fond) 100%) !important;
border-top: 4px solid var(--pti-section-espaces-bordure) !important;
}
.mw-parser-output .pti-section-espaces .pti-carte-titre {
border-bottom-color: var(--pti-section-espaces-separateur) !important;
}
.mw-parser-output .pti-section-pilotage .pti-carte {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-pilotage-fond) 100%) !important;
border-top: 4px solid var(--pti-section-pilotage-bordure) !important;
}
.mw-parser-output .pti-section-pilotage .pti-carte-titre {
border-bottom-color: var(--pti-section-pilotage-separateur) !important;
}
.mw-parser-output .pti-section-entrees .pti-carte-majeure {
border-left: 5px solid var(--pti-section-entrees-bordure) !important;
}
.mw-parser-output .pti-section-entrees .pti-carte:hover {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-entrees-fond-survol) 100%) !important;
border-color: var(--pti-section-entrees-bordure) !important;
}
.mw-parser-output .pti-section-referentiels .pti-carte:hover {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-referentiels-fond-survol) 100%) !important;
border-color: var(--pti-section-referentiels-bordure) !important;
}
.mw-parser-output .pti-section-documents .pti-carte:hover {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-documents-fond-survol) 100%) !important;
border-color: var(--pti-section-documents-bordure) !important;
}
.mw-parser-output .pti-section-espaces .pti-carte:hover {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-espaces-fond-survol) 100%) !important;
border-color: var(--pti-section-espaces-bordure) !important;
}
.mw-parser-output .pti-section-pilotage .pti-carte:hover {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-pilotage-fond-survol) 100%) !important;
border-color: var(--pti-section-pilotage-bordure) !important;
}
.mw-parser-output .pti-section-entrees .pti-carte:hover,
.mw-parser-output .pti-section-referentiels .pti-carte:hover,
.mw-parser-output .pti-section-documents .pti-carte:hover,
.mw-parser-output .pti-section-espaces .pti-carte:hover,
.mw-parser-output .pti-section-pilotage .pti-carte:hover {
box-shadow: var(--pti-ombre-carte-survol) !important;
}
/* ============================================================
19. ACCORDÉONS ATHÉNA
============================================================ */
.mw-parser-output .pti-accordeon {
border: 1px solid var(--pti-bordure) !important;
border-left: 5px solid var(--pti-or) !important;
background: var(--pti-fond-carte) !important;
color: var(--pti-texte) !important;
border-radius: var(--pti-rayon) !important;
margin: 1rem 0 !important;
box-shadow: var(--pti-ombre-carte) !important;
overflow: hidden !important;
}
.mw-parser-output .pti-accordeon-titre {
font-weight: 720 !important;
color: var(--pti-bleu-nuit) !important;
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-or-fond) 100%) !important;
padding: 0.85rem 1rem !important;
border-bottom: 1px solid var(--pti-bordure-legere) !important;
}
.mw-parser-output .pti-accordeon .mw-collapsible-content {
padding: 1rem !important;
background: var(--pti-fond-carte) !important;
color: var(--pti-texte) !important;
}
.mw-parser-output .pti-accordeon .mw-collapsible-toggle {
font-size: 0.9rem !important;
font-weight: 600 !important;
color: var(--pti-bleu-lien) !important;
margin: 0.85rem 1rem 0 0 !important;
}
.mw-parser-output .pti-accordeon .mw-collapsible-toggle:hover {
color: var(--pti-bleu-nuit) !important;
}
.mw-parser-output .pti-accordeon.pti-accordeon-note {
border-left-color: var(--pti-bleu-lien) !important;
}
.mw-parser-output .pti-accordeon.pti-accordeon-note .pti-accordeon-titre {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-section-referentiels-fond) 100%) !important;
}
.mw-parser-output .pti-accordeon.pti-accordeon-attention {
border-left-color: var(--pti-or) !important;
}
.mw-parser-output .pti-accordeon.pti-accordeon-attention .pti-accordeon-titre {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-or-fond) 100%) !important;
}
.mw-parser-output .pti-accordeon.pti-accordeon-validation {
border-left-color: var(--pti-vert) !important;
}
.mw-parser-output .pti-accordeon.pti-accordeon-validation .pti-accordeon-titre {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-vert-fond) 100%) !important;
}
.mw-parser-output .pti-accordeon.pti-accordeon-danger {
border-left-color: var(--pti-rouge) !important;
}
.mw-parser-output .pti-accordeon.pti-accordeon-danger .pti-accordeon-titre {
background: linear-gradient(135deg, var(--pti-fond-carte) 0%, var(--pti-rouge-fond) 100%) !important;
}
/* ============================================================
20. CLASSES DOCUMENTAIRES COMPLÉMENTAIRES
============================================================ */
.pti-bloc-sobre {
border: 1px solid var(--pti-bordure) !important;
background: var(--pti-fond-carte) !important;
color: var(--pti-texte) !important;
border-radius: var(--pti-rayon-petit) !important;
padding: 1rem !important;
margin: 1rem 0 !important;
}
.pti-bloc-secondaire {
border: 1px solid var(--pti-bordure-legere) !important;
background: var(--pti-fond-secondaire) !important;
color: var(--pti-texte) !important;
border-radius: var(--pti-rayon-petit) !important;
padding: 1rem !important;
margin: 1rem 0 !important;
}
.pti-etiquette {
display: inline-block !important;
padding: 0.18rem 0.45rem !important;
border-radius: 999px !important;
background: var(--pti-code-fond) !important;
border: 1px solid var(--pti-code-bordure) !important;
color: var(--pti-texte-secondaire) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
}
.pti-etiquette-validation {
background: var(--pti-vert-fond) !important;
border-color: var(--pti-vert) !important;
color: var(--pti-vert) !important;
}
.pti-etiquette-attention {
background: var(--pti-or-fond) !important;
border-color: var(--pti-or) !important;
color: var(--pti-or-clair) !important;
}
.pti-etiquette-note {
background: var(--pti-section-referentiels-fond) !important;
border-color: var(--pti-bleu-lien) !important;
color: var(--pti-bleu-lien) !important;
}
.pti-etiquette-danger {
background: var(--pti-rouge-fond) !important;
border-color: var(--pti-rouge) !important;
color: var(--pti-rouge) !important;
}
/* ============================================================
21. CLASSES UTILITAIRES
============================================================ */
.pti-discret {
color: var(--pti-texte-discret) !important;
}
.pti-centre {
text-align: center !important;
}
.pti-droite {
text-align: right !important;
}
.pti-separateur {
border-top: 1px solid var(--pti-bordure) !important;
margin: 1.5rem 0 !important;
}
.pti-meta {
color: var(--pti-texte-secondaire) !important;
font-size: 0.92rem !important;
}
.pti-largeur-lisible {
max-width: 980px !important;
}
.pti-espace-haut {
margin-top: 1.5rem !important;
}
.pti-espace-bas {
margin-bottom: 1.5rem !important;
}