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

Dernière version du 5 juillet 2026 à 12:46

/* ============================================================
   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;
}