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

Version du 10 juin 2026 à 21:33

/* =====================================================================
   LES INTRÉPIDES — Thème MediaWiki, autonome (un seul fichier)
   ---------------------------------------------------------------------
   POSE : colle TOUT ce fichier dans UNE seule page →  MediaWiki:Common.css
          (droits admin / editinterface), Enregistre, puis purge le cache.
   → Rien d'autre à toucher. Il remplace les deux fichiers précédents :
     si tu avais déjà collé quelque chose dans MediaWiki:Citizen.css,
     vide cette page-là.

   Il fait tout : tokens du skin Citizen (accent, surfaces, polices)
   ET habillage du contenu (titres, liens, tableaux, infobox, code,
   citations, sommaire, recherche, vignettes). Le mode sombre est préservé
   (les fonds clairs sont scoppés au thème jour).
   Toute la charte est en haut — une couleur = une ligne.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300..800&display=swap');

/* — NAOKO (auto-hébergée, /fonts/ sur le VPS) — display/titres.
     Gamme : 300/350/400/500/700/800/900 (pas de 600 : une demande de
     SemiBold résoudra vers Bold). — */
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-01-light-webfont.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-01-light-italic-webfont.woff2') format('woff2');
  font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-02-semilight-webfont.woff2') format('woff2');
  font-weight:350; font-style:normal; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-02-semilight-italic-webfont.woff2') format('woff2');
  font-weight:350; font-style:italic; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-03-regular-webfont.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-03-regular-italic-webfont.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-04-medium-webfont.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-04-medium-italic-webfont.woff2') format('woff2');
  font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-05-bold-webfont.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-05-bold-italic-webfont.woff2') format('woff2');
  font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-06-extrabold-webfont.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-06-extrabold-italic-webfont.woff2') format('woff2');
  font-weight:800; font-style:italic; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-07-black-webfont.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Naoko'; src:url('/fonts/naoko-07-black-italic-webfont.woff2') format('woff2');
  font-weight:900; font-style:italic; font-display:swap; }

:root{
  /* — Charte (pour nos propres règles) — */
  --itr-marine:#103a4a;  --itr-marine-900:#0a2734;
  --itr-calanque:#1f9c92; --itr-calanque-600:#178a81; --itr-calanque-100:#e3f4f2;
  --itr-brass:#c2a15a;   --itr-brass-100:#f4ecda;  --itr-coral:#e3845f;
  --itr-sand:#f6f2ea;    --itr-surface:#ffffff;
  --itr-ink:#1d3036;     --itr-muted:#6f8086;
  --itr-line:#e8e1d4;    --itr-line-soft:#f0ebe1;
  --itr-font-ui:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --itr-font-display:"Naoko","Plus Jakarta Sans",sans-serif;

  /* — Tokens Citizen : couleur primaire turquoise (OKLCH, depuis #1f9c92) — */
  --color-progressive-oklch__l: 62.67%;
  --color-progressive-oklch__c: 0.1032;
  --color-progressive-oklch__h: 186.52;
  /* — Token Citizen : police de base (juste le nom, fallbacks gérés en aval) — */
  --font-family-citizen-base: 'Plus Jakarta Sans';
}

/* === Variables du thème CLAIR ============================================
   Couvre le mode Clair explicite (.day) ET le mode Automatique sur appareil
   clair (.os + media query) — sinon, en mode Auto, rien ne s'applique.
   Inclut les tokens Citizen (surfaces) ET Codex (rail, pages de config,
   pages spéciales — la couche design-system de MediaWiki).
   Le mode sombre reste intact (non ciblé).
   ------------------------------------------------------------------------ */
:root.skin-theme-clientpref-day{
  /* Surfaces Citizen */
  --color-surface-0:#f6f2ea;  --color-surface-1:#ffffff;  --color-surface-2:#fbf9f4;
  --color-surface-3:#f0ebe1;  --color-surface-4:#e8e1d4;
  /* Texte (commun Citizen + Codex) */
  --color-base:#1d3036;  --color-emphasized:#103a4a;  --color-subtle:#6f8086;  --color-link:#178a81;
  /* Tokens Codex — rail gauche & pages de config/spéciales */
  --background-color-base:#ffffff;
  --background-color-neutral-subtle:#f6f2ea;
  --background-color-neutral:#f0ebe1;
  --background-color-interactive-subtle:#f0ebe1;
  --border-color-base:#e8e1d4;  --border-color-subtle:#f0ebe1;
  --color-progressive:#1f9c92;  --color-progressive--hover:#178a81;  --color-progressive--active:#13716a;
}
@media screen and (prefers-color-scheme:light){
  :root.skin-theme-clientpref-os{
    --color-surface-0:#f6f2ea;  --color-surface-1:#ffffff;  --color-surface-2:#fbf9f4;
    --color-surface-3:#f0ebe1;  --color-surface-4:#e8e1d4;
    --color-base:#1d3036;  --color-emphasized:#103a4a;  --color-subtle:#6f8086;  --color-link:#178a81;
    --background-color-base:#ffffff;
    --background-color-neutral-subtle:#f6f2ea;
    --background-color-neutral:#f0ebe1;
    --background-color-interactive-subtle:#f0ebe1;
    --border-color-base:#e8e1d4;  --border-color-subtle:#f0ebe1;
    --color-progressive:#1f9c92;  --color-progressive--hover:#178a81;  --color-progressive--active:#13716a;
  }
}

/* ---------- Typographie (fallback tous skins) ---------- */
body{ background:var(--itr-sand); }
.mw-body, .mw-body-content, #content, .mw-parser-output{
  font-family:var(--itr-font-ui); color:var(--itr-ink); line-height:1.65;
}

/* ---------- Titres (Naoko étendue + filet laiton, tous skins) ---------- */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4,
#firstHeading, .mw-first-heading, .firstHeading, .citizen-page-heading{
  font-family:var(--itr-font-display); color:var(--itr-marine);
  font-weight:700; letter-spacing:0; font-size:92%;
}
.mw-body h1, .mw-body h2, #firstHeading, .mw-first-heading, .firstHeading{
  border-bottom:2px solid var(--itr-brass); padding-bottom:.2em;
}

/* ---------- Liens ---------- */
a, a:link{ color:var(--itr-calanque-600); }
a:hover{ color:var(--itr-calanque); }
a.new, a.new:visited{ color:var(--itr-coral); }
::selection{ background:var(--itr-calanque-100); }

/* ---------- Tableaux (wikitable) ---------- */
.wikitable{
  border:1px solid var(--itr-line) !important; border-radius:12px;
  border-collapse:separate; border-spacing:0; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,58,74,.05);
}
.wikitable > * > tr > th, .wikitable > tr > th{
  background:var(--itr-marine) !important; color:#eef4f5 !important;
  border-color:rgba(255,255,255,.15) !important;
}
.wikitable > * > tr:nth-child(even) > td{ background:var(--itr-sand); }

/* ---------- Infobox ---------- */
.infobox{
  background:var(--itr-surface); border:1px solid var(--itr-line-soft) !important;
  border-radius:14px; box-shadow:0 4px 14px rgba(16,58,74,.07); overflow:hidden;
}
.infobox caption, .infobox-title, .infobox > tbody > tr:first-child th{
  background:var(--itr-marine); color:#fff; font-family:var(--itr-font-display);
}

/* ---------- Citations ---------- */
blockquote{
  border-left:4px solid var(--itr-calanque); background:var(--itr-sand);
  border-radius:0 10px 10px 0; padding:.6em 1em; font-style:italic;
}

/* ---------- Code ---------- */
code, kbd, samp{ background:var(--itr-line-soft); border-radius:5px; padding:.1em .35em; font-size:.92em; }
pre, .mw-code{ background:#f1ece2; border:1px solid var(--itr-line); border-radius:10px; padding:.8em 1em; }

/* ---------- Sommaire (TOC) ---------- */
.toc, #toc, .vector-toc, .toccolours{
  background:var(--itr-surface); border:1px solid var(--itr-line-soft) !important;
  border-radius:12px; box-shadow:0 1px 2px rgba(16,58,74,.05);
}
.toctitle h2, .toc-title{ font-family:var(--itr-font-display); color:var(--itr-marine); border:none; }

/* ---------- Recherche ---------- */
#searchInput, .mw-searchInput, .cdx-text-input__input{
  border:1px solid var(--itr-line) !important; border-radius:9px !important;
}
#searchInput:focus, .cdx-text-input__input:focus{
  border-color:var(--itr-calanque) !important; box-shadow:0 0 0 3px var(--itr-calanque-100) !important; outline:none;
}

/* ---------- Boutons progressifs / vignettes / navboxes / catégories ---------- */
.mw-ui-button.mw-ui-progressive,
.cdx-button--action-progressive.cdx-button--weight-primary{
  background:var(--itr-calanque) !important; border-color:var(--itr-calanque) !important;
  color:#fff !important; border-radius:8px !important;
}
.thumbinner, figure.mw-default-size{
  background:var(--itr-surface); border:1px solid var(--itr-line-soft) !important;
  border-radius:12px; box-shadow:0 4px 14px rgba(16,58,74,.07);
}
.hatnote, .dablink{ background:var(--itr-sand); border-radius:8px; padding:.4em .8em; }
.navbox{ border:1px solid var(--itr-line) !important; border-radius:12px; overflow:hidden; }
.navbox-title, .navbox-group{ background:var(--itr-marine) !important; color:#fff !important; }
.catlinks{ background:var(--itr-sand) !important; border:1px solid var(--itr-line-soft) !important; border-radius:10px; }

/* ---------- (OPTIONNEL) En-tête marine — décommente pour tenter la barre ----------
.skin-theme-clientpref-day .citizen-header,
.skin-theme-clientpref-day .mw-header{ background-color:#103a4a; }
.skin-theme-clientpref-day .citizen-header a{ color:#eaf1f2; }
*/