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

Version du 5 juillet 2026 à 12:43

/* ============================================================
   Athéna, identité visuelle Prométhée Technologies & Ingénierie
   Feuille commune du wiki
   Page cible : MediaWiki:Common.css
   ============================================================ */


/* ============================================================
   1. Variables graphiques générales
   ============================================================ */

:root {
  --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;

  --pti-fond-page: #f7f8fb;
  --pti-fond-contenu: #ffffff;
  --pti-fond-carte: #ffffff;
  --pti-fond-encart: #fbfcfe;

  --pti-texte: #1f2933;
  --pti-texte-secondaire: #5f6b7a;
  --pti-texte-discret: #7b8794;

  --pti-bordure: #d8dde6;
  --pti-bordure-legere: #edf0f5;

  --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;
}


/* ============================================================
   2. Ambiance générale
   ============================================================ */

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;
}

/* Zone principale de contenu */
.mw-body,
.vector-body,
#content,
.mw-page-container,
.mw-page-container-inner {
  background: var(--pti-fond-contenu) !important;
}

/* Corps de page */
.mw-parser-output {
  color: var(--pti-texte) !important;
  font-size: 1rem;
  line-height: 1.55;
}

/* Paragraphes */
.mw-parser-output p {
  color: var(--pti-texte) !important;
  line-height: 1.6;
}

/* Meilleure gestion des débordements */
.mw-parser-output * {
  box-sizing: border-box;
}


/* ============================================================
   3. Logo et marque du wiki
   ============================================================ */

/* Masquage provisoire du logo MediaWiki par défaut */
.mw-logo-icon {
  display: none !important;
}

/* Amélioration du bloc marque en haut à gauche */
.mw-logo-wordmark,
.mw-logo-tagline {
  color: var(--pti-bleu-nuit) !important;
}

.mw-logo-container {
  padding-left: 0.5rem !important;
}

/* Titre du wiki dans l’en tête */
.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;
}


/* ============================================================
   4. Titres et hiérarchie éditoriale
   ============================================================ */

/* Titre principal de page */
.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;
}

/* Titres internes */
.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;
}

/* Titres de niveau 2 */
.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;
}

/* Titres de niveau 3 */
.mw-parser-output h3 {
  font-weight: 650 !important;
  margin-top: 1.4em !important;
}


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


/* ============================================================
   6. 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, #ffffff 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: 0 1px 3px rgba(17, 24, 39, 0.06) !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;
}


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

/* Variante de tuile plus importante, utilisable ponctuellement */
.pti-carte-majeure {
  border-left: 5px solid var(--pti-or) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fbfaf7 100%) !important;
}


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

/* Encarts spécialisés */
.pti-note {
  border-left: 5px solid var(--pti-bleu-lien) !important;
  background: #f5f8fc !important;
}

.pti-attention {
  border-left: 5px solid var(--pti-or) !important;
  background: #fbf7ef !important;
}

.pti-validation {
  border-left: 5px solid var(--pti-vert) !important;
  background: var(--pti-vert-fond) !important;
}

.pti-danger {
  border-left: 5px solid var(--pti-rouge) !important;
  background: var(--pti-rouge-fond) !important;
}


/* ============================================================
   9. Tableaux
   ============================================================ */

.wikitable {
  border: 1px solid var(--pti-bordure) !important;
  background: #ffffff !important;
  border-collapse: collapse !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
  max-width: 100% !important;
}

.wikitable th {
  background: var(--pti-bleu-nuit) !important;
  color: #ffffff !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 tr:nth-child(even) td {
  background: #fafbfc !important;
}


/* ============================================================
   10. Code, préformaté et éléments techniques
   ============================================================ */

code,
pre,
.mw-code {
  font-family: "Cascadia Mono", "Consolas", "Liberation Mono", monospace !important;
}

code {
  background: #f3f5f8 !important;
  border: 1px solid #e1e5ec !important;
  border-radius: 4px !important;
  padding: 0.08rem 0.28rem !important;
  color: #1f2937 !important;
  white-space: break-spaces !important;
}

pre {
  background: #f6f8fb !important;
  border: 1px solid var(--pti-bordure) !important;
  border-left: 4px solid var(--pti-or) !important;
  border-radius: var(--pti-rayon-petit) !important;
  padding: 1rem !important;
  color: #1f2937 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
}


/* ============================================================
   11. Menus latéraux 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: #f2f5f9 !important;
  text-decoration: none !important;
}


/* ============================================================
   12. Onglets et actions de page MediaWiki
   ============================================================ */

.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: #ffffff !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: #ffffff !important;
  border-radius: var(--pti-rayon-petit) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05) !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. Petites classes utilitaires pour les pages Athéna
   ============================================================ */

.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;
}


/* ============================================================
   18. 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 {
    padding: 0.9rem !important;
  }

  .pti-encart {
    padding: 0.9rem !important;
  }

  .mw-parser-output {
    font-size: 0.97rem !important;
  }
}


/* ============================================================
   19. Teintes sobres par section de l’accueil
   Version renforcée et plus lisible
   ============================================================ */


/* ------------------------------------------------------------
   19.1 Portes d’entrée principales
   Or institutionnel
   ------------------------------------------------------------ */

.mw-parser-output .pti-section-entrees .pti-carte {
  background: linear-gradient(135deg, #ffffff 0%, #fbf3e6 100%) !important;
  border-top: 4px solid #b08d57 !important;
}

.mw-parser-output .pti-section-entrees .pti-carte-titre {
  border-bottom-color: #e5cfaa !important;
}


/* ------------------------------------------------------------
   19.2 Référentiels et capital intellectuel
   Bleu technique
   ------------------------------------------------------------ */

.mw-parser-output .pti-section-referentiels .pti-carte {
  background: linear-gradient(135deg, #ffffff 0%, #edf5ff 100%) !important;
  border-top: 4px solid #6f9fca !important;
}

.mw-parser-output .pti-section-referentiels .pti-carte-titre {
  border-bottom-color: #c7dced !important;
}


/* ------------------------------------------------------------
   19.3 Documents et fonctionnement interne
   Gris documentaire
   ------------------------------------------------------------ */

.mw-parser-output .pti-section-documents .pti-carte {
  background: linear-gradient(135deg, #ffffff 0%, #f1f3f6 100%) !important;
  border-top: 4px solid #9aa6b5 !important;
}

.mw-parser-output .pti-section-documents .pti-carte-titre {
  border-bottom-color: #d4dae2 !important;
}


/* ------------------------------------------------------------
   19.4 Espaces de travail
   Vert discret
   ------------------------------------------------------------ */

.mw-parser-output .pti-section-espaces .pti-carte {
  background: linear-gradient(135deg, #ffffff 0%, #edf9f1 100%) !important;
  border-top: 4px solid #7fb891 !important;
}

.mw-parser-output .pti-section-espaces .pti-carte-titre {
  border-bottom-color: #c7e2cf !important;
}


/* ------------------------------------------------------------
   19.5 Pilotage du wiki
   Mauve neutre
   ------------------------------------------------------------ */

.mw-parser-output .pti-section-pilotage .pti-carte {
  background: linear-gradient(135deg, #ffffff 0%, #f4f0fb 100%) !important;
  border-top: 4px solid #9b86c6 !important;
}

.mw-parser-output .pti-section-pilotage .pti-carte-titre {
  border-bottom-color: #ddd3ef !important;
}


/* ------------------------------------------------------------
   19.6 Harmonisation des cartes majeures
   Les portes d’entrée gardent une présence supérieure
   ------------------------------------------------------------ */

.mw-parser-output .pti-section-entrees .pti-carte-majeure {
  border-left: 5px solid #b08d57 !important;
  border-top: 4px solid #b08d57 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fbf0dd 100%) !important;
}


/* ------------------------------------------------------------
   19.7 Survol
   Le survol renforce la carte sans effacer sa famille visuelle
   ------------------------------------------------------------ */

.mw-parser-output .pti-section-entrees .pti-carte:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f8ead2 100%) !important;
  border-color: #b08d57 !important;
}

.mw-parser-output .pti-section-referentiels .pti-carte:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e4f0fc 100%) !important;
  border-color: #6f9fca !important;
}

.mw-parser-output .pti-section-documents .pti-carte:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e9edf2 100%) !important;
  border-color: #9aa6b5 !important;
}

.mw-parser-output .pti-section-espaces .pti-carte:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e3f5e9 100%) !important;
  border-color: #7fb891 !important;
}

.mw-parser-output .pti-section-pilotage .pti-carte:hover {
  background: linear-gradient(135deg, #ffffff 0%, #eee7f8 100%) !important;
  border-color: #9b86c6 !important;
}


/* ------------------------------------------------------------
   19.8 Ombre commune au survol
   ------------------------------------------------------------ */

.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: 0 6px 18px rgba(17, 24, 39, 0.12) !important;
}


/* ============================================================
   20. Accordéons Athéna
   Sections repliables et dépliables
   ============================================================ */

.mw-parser-output .pti-accordeon {
  border: 1px solid var(--pti-bordure) !important;
  border-left: 5px solid var(--pti-or) !important;
  background: #ffffff !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, #ffffff 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: #ffffff !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;
}


/* ------------------------------------------------------------
   20.1 Variantes d’accordéons
   ------------------------------------------------------------ */

.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, #ffffff 0%, #f5f8fc 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, #ffffff 0%, #fbf7ef 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, #ffffff 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, #ffffff 0%, var(--pti-rouge-fond) 100%) !important;
}


/* ============================================================
   21. Classes documentaires complémentaires
   ============================================================ */

.pti-bloc-sobre {
  border: 1px solid var(--pti-bordure) !important;
  background: #ffffff !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: #fafbfc !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: #f3f5f8 !important;
  border: 1px solid #e1e5ec !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: #c7e2cf !important;
  color: var(--pti-vert) !important;
}

.pti-etiquette-attention {
  background: #fbf7ef !important;
  border-color: #e5cfaa !important;
  color: #7a5a2b !important;
}

.pti-etiquette-note {
  background: #f5f8fc !important;
  border-color: #c7dced !important;
  color: var(--pti-bleu-lien) !important;
}

.pti-etiquette-danger {
  background: var(--pti-rouge-fond) !important;
  border-color: #efc7c7 !important;
  color: var(--pti-rouge) !important;
}

/* ============================================================
   22. Mode sombre Athéna
   Compatibilité avec le mode sombre MediaWiki / Vector
   ============================================================ */


/* ------------------------------------------------------------
   22.1 Variables Athéna en mode sombre explicite
   ------------------------------------------------------------ */

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-texte: #e5e7eb;
  --pti-texte-secondaire: #c3cad6;
  --pti-texte-discret: #9aa4b2;

  --pti-bordure: #394150;
  --pti-bordure-legere: #2b3340;

  --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);
}


/* ------------------------------------------------------------
   22.2 Variables Athéna en mode sombre automatique système
   ------------------------------------------------------------ */

@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-texte: #e5e7eb;
    --pti-texte-secondaire: #c3cad6;
    --pti-texte-discret: #9aa4b2;

    --pti-bordure: #394150;
    --pti-bordure-legere: #2b3340;

    --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);
  }
}


/* ------------------------------------------------------------
   22.3 Fonds généraux en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night,
html.skin-theme-clientpref-night body {
  background: var(--pti-fond-page) !important;
  color: var(--pti-texte) !important;
}

html.skin-theme-clientpref-night .mw-body,
html.skin-theme-clientpref-night .vector-body,
html.skin-theme-clientpref-night #content,
html.skin-theme-clientpref-night .mw-page-container,
html.skin-theme-clientpref-night .mw-page-container-inner {
  background: var(--pti-fond-contenu) !important;
  color: var(--pti-texte) !important;
}

html.skin-theme-clientpref-night .mw-parser-output {
  color: var(--pti-texte) !important;
}

html.skin-theme-clientpref-night .mw-parser-output p,
html.skin-theme-clientpref-night .mw-parser-output li,
html.skin-theme-clientpref-night .mw-parser-output td {
  color: var(--pti-texte) !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os,
  html.skin-theme-clientpref-os body {
    background: var(--pti-fond-page) !important;
    color: var(--pti-texte) !important;
  }

  html.skin-theme-clientpref-os .mw-body,
  html.skin-theme-clientpref-os .vector-body,
  html.skin-theme-clientpref-os #content,
  html.skin-theme-clientpref-os .mw-page-container,
  html.skin-theme-clientpref-os .mw-page-container-inner {
    background: var(--pti-fond-contenu) !important;
    color: var(--pti-texte) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output {
    color: var(--pti-texte) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output p,
  html.skin-theme-clientpref-os .mw-parser-output li,
  html.skin-theme-clientpref-os .mw-parser-output td {
    color: var(--pti-texte) !important;
  }
}


/* ------------------------------------------------------------
   22.4 Titres et liens en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night .firstHeading,
html.skin-theme-clientpref-night .mw-first-heading,
html.skin-theme-clientpref-night .mw-parser-output h1,
html.skin-theme-clientpref-night .mw-parser-output h2,
html.skin-theme-clientpref-night .mw-parser-output h3 {
  color: var(--pti-bleu-nuit) !important;
  border-bottom-color: var(--pti-bordure) !important;
}

html.skin-theme-clientpref-night .mw-parser-output a,
html.skin-theme-clientpref-night .vector-menu-content a,
html.skin-theme-clientpref-night #mw-panel a {
  color: var(--pti-bleu-lien) !important;
}

html.skin-theme-clientpref-night .mw-parser-output a:visited {
  color: var(--pti-bleu-lien-visite) !important;
}

html.skin-theme-clientpref-night .mw-parser-output a:hover,
html.skin-theme-clientpref-night .vector-menu-content a:hover,
html.skin-theme-clientpref-night #mw-panel a:hover {
  color: #ffffff !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .firstHeading,
  html.skin-theme-clientpref-os .mw-first-heading,
  html.skin-theme-clientpref-os .mw-parser-output h1,
  html.skin-theme-clientpref-os .mw-parser-output h2,
  html.skin-theme-clientpref-os .mw-parser-output h3 {
    color: var(--pti-bleu-nuit) !important;
    border-bottom-color: var(--pti-bordure) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output a,
  html.skin-theme-clientpref-os .vector-menu-content a,
  html.skin-theme-clientpref-os #mw-panel a {
    color: var(--pti-bleu-lien) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output a:visited {
    color: var(--pti-bleu-lien-visite) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output a:hover,
  html.skin-theme-clientpref-os .vector-menu-content a:hover,
  html.skin-theme-clientpref-os #mw-panel a:hover {
    color: #ffffff !important;
  }
}


/* ------------------------------------------------------------
   22.5 Bandeau, cartes et grilles en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night .pti-bandeau {
  background: linear-gradient(135deg, #1b202b 0%, #2a2418 100%) !important;
  border-color: var(--pti-bordure) !important;
  border-left-color: var(--pti-or) !important;
  box-shadow: var(--pti-ombre-carte) !important;
}

html.skin-theme-clientpref-night .pti-bandeau-titre {
  color: var(--pti-bleu-nuit) !important;
}

html.skin-theme-clientpref-night .pti-bandeau-soustitre {
  color: var(--pti-texte-secondaire) !important;
}

html.skin-theme-clientpref-night .pti-carte,
html.skin-theme-clientpref-night .mw-parser-output .pti-carte {
  background: var(--pti-fond-carte) !important;
  border-color: var(--pti-bordure) !important;
  color: var(--pti-texte) !important;
}

html.skin-theme-clientpref-night .pti-carte:hover,
html.skin-theme-clientpref-night .mw-parser-output .pti-carte:hover {
  border-color: var(--pti-or) !important;
  box-shadow: var(--pti-ombre-carte-survol) !important;
}

html.skin-theme-clientpref-night .pti-carte-titre {
  color: var(--pti-bleu-nuit) !important;
  border-bottom-color: var(--pti-bordure-legere) !important;
}

html.skin-theme-clientpref-night .pti-carte-texte {
  color: var(--pti-texte-secondaire) !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pti-bandeau {
    background: linear-gradient(135deg, #1b202b 0%, #2a2418 100%) !important;
    border-color: var(--pti-bordure) !important;
    border-left-color: var(--pti-or) !important;
    box-shadow: var(--pti-ombre-carte) !important;
  }

  html.skin-theme-clientpref-os .pti-bandeau-titre {
    color: var(--pti-bleu-nuit) !important;
  }

  html.skin-theme-clientpref-os .pti-bandeau-soustitre {
    color: var(--pti-texte-secondaire) !important;
  }

  html.skin-theme-clientpref-os .pti-carte,
  html.skin-theme-clientpref-os .mw-parser-output .pti-carte {
    background: var(--pti-fond-carte) !important;
    border-color: var(--pti-bordure) !important;
    color: var(--pti-texte) !important;
  }

  html.skin-theme-clientpref-os .pti-carte:hover,
  html.skin-theme-clientpref-os .mw-parser-output .pti-carte:hover {
    border-color: var(--pti-or) !important;
    box-shadow: var(--pti-ombre-carte-survol) !important;
  }

  html.skin-theme-clientpref-os .pti-carte-titre {
    color: var(--pti-bleu-nuit) !important;
    border-bottom-color: var(--pti-bordure-legere) !important;
  }

  html.skin-theme-clientpref-os .pti-carte-texte {
    color: var(--pti-texte-secondaire) !important;
  }
}


/* ------------------------------------------------------------
   22.6 Encarts en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night .pti-encart {
  background: var(--pti-fond-encart) !important;
  border-color: var(--pti-bordure) !important;
  border-left-color: var(--pti-or) !important;
  color: var(--pti-texte) !important;
}

html.skin-theme-clientpref-night .pti-note {
  background: #111f32 !important;
  border-left-color: var(--pti-bleu-lien) !important;
}

html.skin-theme-clientpref-night .pti-attention {
  background: #2a2418 !important;
  border-left-color: var(--pti-or) !important;
}

html.skin-theme-clientpref-night .pti-validation {
  background: var(--pti-vert-fond) !important;
  border-left-color: var(--pti-vert) !important;
}

html.skin-theme-clientpref-night .pti-danger {
  background: var(--pti-rouge-fond) !important;
  border-left-color: var(--pti-rouge) !important;
}

html.skin-theme-clientpref-night .pti-encart strong,
html.skin-theme-clientpref-night .pti-encart b {
  color: var(--pti-bleu-nuit) !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pti-encart {
    background: var(--pti-fond-encart) !important;
    border-color: var(--pti-bordure) !important;
    border-left-color: var(--pti-or) !important;
    color: var(--pti-texte) !important;
  }

  html.skin-theme-clientpref-os .pti-note {
    background: #111f32 !important;
    border-left-color: var(--pti-bleu-lien) !important;
  }

  html.skin-theme-clientpref-os .pti-attention {
    background: #2a2418 !important;
    border-left-color: var(--pti-or) !important;
  }

  html.skin-theme-clientpref-os .pti-validation {
    background: var(--pti-vert-fond) !important;
    border-left-color: var(--pti-vert) !important;
  }

  html.skin-theme-clientpref-os .pti-danger {
    background: var(--pti-rouge-fond) !important;
    border-left-color: var(--pti-rouge) !important;
  }

  html.skin-theme-clientpref-os .pti-encart strong,
  html.skin-theme-clientpref-os .pti-encart b {
    color: var(--pti-bleu-nuit) !important;
  }
}


/* ------------------------------------------------------------
   22.7 Tableaux en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night .wikitable {
  background: var(--pti-fond-carte) !important;
  border-color: var(--pti-bordure) !important;
  color: var(--pti-texte) !important;
}

html.skin-theme-clientpref-night .wikitable th {
  background: #0b1220 !important;
  color: #ffffff !important;
  border-color: var(--pti-bordure) !important;
}

html.skin-theme-clientpref-night .wikitable td {
  background: var(--pti-fond-carte) !important;
  color: var(--pti-texte) !important;
  border-color: var(--pti-bordure) !important;
}

html.skin-theme-clientpref-night .wikitable tr:nth-child(even) td {
  background: #181e29 !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .wikitable {
    background: var(--pti-fond-carte) !important;
    border-color: var(--pti-bordure) !important;
    color: var(--pti-texte) !important;
  }

  html.skin-theme-clientpref-os .wikitable th {
    background: #0b1220 !important;
    color: #ffffff !important;
    border-color: var(--pti-bordure) !important;
  }

  html.skin-theme-clientpref-os .wikitable td {
    background: var(--pti-fond-carte) !important;
    color: var(--pti-texte) !important;
    border-color: var(--pti-bordure) !important;
  }

  html.skin-theme-clientpref-os .wikitable tr:nth-child(even) td {
    background: #181e29 !important;
  }
}


/* ------------------------------------------------------------
   22.8 Code et préformaté en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night code {
  background: #111827 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

html.skin-theme-clientpref-night pre {
  background: #111827 !important;
  border-color: #374151 !important;
  border-left-color: var(--pti-or) !important;
  color: #e5e7eb !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os code {
    background: #111827 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
  }

  html.skin-theme-clientpref-os pre {
    background: #111827 !important;
    border-color: #374151 !important;
    border-left-color: var(--pti-or) !important;
    color: #e5e7eb !important;
  }
}


/* ------------------------------------------------------------
   22.9 Accordéons en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night .mw-parser-output .pti-accordeon {
  background: var(--pti-fond-carte) !important;
  border-color: var(--pti-bordure) !important;
  border-left-color: var(--pti-or) !important;
  color: var(--pti-texte) !important;
  box-shadow: var(--pti-ombre-carte) !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-accordeon-titre {
  color: var(--pti-bleu-nuit) !important;
  background: linear-gradient(135deg, #1b202b 0%, #2a2418 100%) !important;
  border-bottom-color: var(--pti-bordure-legere) !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-accordeon .mw-collapsible-content {
  background: var(--pti-fond-carte) !important;
  color: var(--pti-texte) !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-accordeon .mw-collapsible-toggle {
  color: var(--pti-bleu-lien) !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-accordeon.pti-accordeon-note .pti-accordeon-titre {
  background: linear-gradient(135deg, #1b202b 0%, #111f32 100%) !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-accordeon.pti-accordeon-attention .pti-accordeon-titre {
  background: linear-gradient(135deg, #1b202b 0%, #2a2418 100%) !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-accordeon.pti-accordeon-validation .pti-accordeon-titre {
  background: linear-gradient(135deg, #1b202b 0%, #10251a 100%) !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-accordeon.pti-accordeon-danger .pti-accordeon-titre {
  background: linear-gradient(135deg, #1b202b 0%, #2a1414 100%) !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .mw-parser-output .pti-accordeon {
    background: var(--pti-fond-carte) !important;
    border-color: var(--pti-bordure) !important;
    border-left-color: var(--pti-or) !important;
    color: var(--pti-texte) !important;
    box-shadow: var(--pti-ombre-carte) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-accordeon-titre {
    color: var(--pti-bleu-nuit) !important;
    background: linear-gradient(135deg, #1b202b 0%, #2a2418 100%) !important;
    border-bottom-color: var(--pti-bordure-legere) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-accordeon .mw-collapsible-content {
    background: var(--pti-fond-carte) !important;
    color: var(--pti-texte) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-accordeon .mw-collapsible-toggle {
    color: var(--pti-bleu-lien) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-accordeon.pti-accordeon-note .pti-accordeon-titre {
    background: linear-gradient(135deg, #1b202b 0%, #111f32 100%) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-accordeon.pti-accordeon-attention .pti-accordeon-titre {
    background: linear-gradient(135deg, #1b202b 0%, #2a2418 100%) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-accordeon.pti-accordeon-validation .pti-accordeon-titre {
    background: linear-gradient(135deg, #1b202b 0%, #10251a 100%) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-accordeon.pti-accordeon-danger .pti-accordeon-titre {
    background: linear-gradient(135deg, #1b202b 0%, #2a1414 100%) !important;
  }
}


/* ------------------------------------------------------------
   22.10 Teintes des sections d’accueil en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night .mw-parser-output .pti-section-entrees .pti-carte {
  background: linear-gradient(135deg, #1b202b 0%, #2a2418 100%) !important;
  border-top-color: var(--pti-or) !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-section-referentiels .pti-carte {
  background: linear-gradient(135deg, #1b202b 0%, #111f32 100%) !important;
  border-top-color: #6f9fca !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-section-documents .pti-carte {
  background: linear-gradient(135deg, #1b202b 0%, #202633 100%) !important;
  border-top-color: #9aa6b5 !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-section-espaces .pti-carte {
  background: linear-gradient(135deg, #1b202b 0%, #10251a 100%) !important;
  border-top-color: #7fb891 !important;
}

html.skin-theme-clientpref-night .mw-parser-output .pti-section-pilotage .pti-carte {
  background: linear-gradient(135deg, #1b202b 0%, #21182f 100%) !important;
  border-top-color: #9b86c6 !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .mw-parser-output .pti-section-entrees .pti-carte {
    background: linear-gradient(135deg, #1b202b 0%, #2a2418 100%) !important;
    border-top-color: var(--pti-or) !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-section-referentiels .pti-carte {
    background: linear-gradient(135deg, #1b202b 0%, #111f32 100%) !important;
    border-top-color: #6f9fca !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-section-documents .pti-carte {
    background: linear-gradient(135deg, #1b202b 0%, #202633 100%) !important;
    border-top-color: #9aa6b5 !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-section-espaces .pti-carte {
    background: linear-gradient(135deg, #1b202b 0%, #10251a 100%) !important;
    border-top-color: #7fb891 !important;
  }

  html.skin-theme-clientpref-os .mw-parser-output .pti-section-pilotage .pti-carte {
    background: linear-gradient(135deg, #1b202b 0%, #21182f 100%) !important;
    border-top-color: #9b86c6 !important;
  }
}


/* ------------------------------------------------------------
   22.11 Classes complémentaires en mode sombre
   ------------------------------------------------------------ */

html.skin-theme-clientpref-night .pti-bloc-sobre,
html.skin-theme-clientpref-night .pti-bloc-secondaire {
  background: var(--pti-fond-carte) !important;
  border-color: var(--pti-bordure) !important;
  color: var(--pti-texte) !important;
}

html.skin-theme-clientpref-night .pti-meta,
html.skin-theme-clientpref-night .pti-discret {
  color: var(--pti-texte-discret) !important;
}

html.skin-theme-clientpref-night .pti-etiquette {
  background: #111827 !important;
  border-color: #374151 !important;
  color: var(--pti-texte-secondaire) !important;
}

html.skin-theme-clientpref-night .pti-etiquette-validation {
  background: var(--pti-vert-fond) !important;
  border-color: #285c3f !important;
  color: var(--pti-vert) !important;
}

html.skin-theme-clientpref-night .pti-etiquette-attention {
  background: #2a2418 !important;
  border-color: #6f5630 !important;
  color: var(--pti-or-clair) !important;
}

html.skin-theme-clientpref-night .pti-etiquette-note {
  background: #111f32 !important;
  border-color: #315f96 !important;
  color: var(--pti-bleu-lien) !important;
}

html.skin-theme-clientpref-night .pti-etiquette-danger {
  background: var(--pti-rouge-fond) !important;
  border-color: #7f2d2d !important;
  color: var(--pti-rouge) !important;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pti-bloc-sobre,
  html.skin-theme-clientpref-os .pti-bloc-secondaire {
    background: var(--pti-fond-carte) !important;
    border-color: var(--pti-bordure) !important;
    color: var(--pti-texte) !important;
  }

  html.skin-theme-clientpref-os .pti-meta,
  html.skin-theme-clientpref-os .pti-discret {
    color: var(--pti-texte-discret) !important;
  }

  html.skin-theme-clientpref-os .pti-etiquette {
    background: #111827 !important;
    border-color: #374151 !important;
    color: var(--pti-texte-secondaire) !important;
  }

  html.skin-theme-clientpref-os .pti-etiquette-validation {
    background: var(--pti-vert-fond) !important;
    border-color: #285c3f !important;
    color: var(--pti-vert) !important;
  }

  html.skin-theme-clientpref-os .pti-etiquette-attention {
    background: #2a2418 !important;
    border-color: #6f5630 !important;
    color: var(--pti-or-clair) !important;
  }

  html.skin-theme-clientpref-os .pti-etiquette-note {
    background: #111f32 !important;
    border-color: #315f96 !important;
    color: var(--pti-bleu-lien) !important;
  }

  html.skin-theme-clientpref-os .pti-etiquette-danger {
    background: var(--pti-rouge-fond) !important;
    border-color: #7f2d2d !important;
    color: var(--pti-rouge) !important;
  }
}