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

Version du 4 juillet 2026 à 11:44

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


/* ============================================================
   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 #245c9c !important;
  background: #f5f8fc !important;
}

.pti-attention {
  border-left: 5px solid #b08d57 !important;
  background: #fbf7ef !important;
}

.pti-validation {
  border-left: 5px solid #3f7d5f !important;
  background: #f3faf6 !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;
}

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

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

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


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

.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 #3f7d5f !important;
}

.warningbox {
  border-left: 5px solid var(--pti-or) !important;
}

.errorbox {
  border-left: 5px solid #9f3a38 !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-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;
}


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

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