User:Test987654/common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

:root{
  --r-white:#ffffff;
  --r-yellow:#ffd500;
  --r-orange:#ff6a00;
  --r-red:#d40000;
  --r-green:#009b48;
  --r-blue:#0051ba;
  --r-dark:#1b1b1b;
  --r-border:#d8d8d8;
  --r-soft:#fbfbfb;
}

/* N'applique les styles qu'au rendu pour l'utilisateur connecté */
body#mw-content-text, body.logged-in {}

/* Conteneur principal plus aéré pour TON affichage */
#content, .mw-body {
  max-width: 1100px;
  margin: 14px auto;
  padding: 0 14px;
  box-sizing: border-box;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.01));
}

/* Bandeau titre personnalisé */
#firstHeading {
  padding: 12px 16px;
  margin: 12px 0;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--r-dark);
  background: repeating-linear-gradient(90deg, var(--r-yellow) 0 33%, var(--r-orange) 33% 66%, var(--r-red) 66% 100%);
  border: 2px solid var(--r-border);
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.06);
}

/* Cartes rubik pour sections (utilise dans tes pages perso) */
.rubik-card {
  background: linear-gradient(180deg, var(--r-white), #fcfcfc);
  border: 2px solid var(--r-border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
  margin-bottom: 12px;
}

/* Titres de carte colorés */
.rubik-card .title { display:inline-block; padding:6px 10px; font-weight:700; border-radius:6px; color:#fff; margin-bottom:8px; }
.rubik-blue { background:var(--r-blue); }
.rubik-yellow { background:var(--r-yellow); color:#111; }
.rubik-orange { background:var(--r-orange); }

/* Petite grille 3x3 utile pour décor dans tes pages */
.rubik-grid { display:grid; grid-template-columns:repeat(3, 28px); gap:6px; align-items:center; }
.rubik-cell { width:28px; height:28px; border:1px solid rgba(0,0,0,0.06); border-radius:4px; box-shadow:0 2px 0 rgba(0,0,0,0.03); }
.r-white { background:var(--r-white); } .r-yellow { background:var(--r-yellow); } .r-orange { background:var(--r-orange); }
.r-red { background:var(--r-red); } .r-green { background:var(--r-green); } .r-blue { background:var(--r-blue); }

/* Boutons discrets pour ton usage (ajoute la classe au lien) */
.user-btn {
  display:inline-block;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid var(--r-border);
  background:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,0.03);
  text-decoration:none;
  color:var(--r-dark);
  font-weight:600;
}

/* Réduction mobile */
@media (max-width:720px) {
  #firstHeading { font-size:1.2rem; padding:10px; }
  .rubik-grid { grid-template-columns:repeat(3,22px); gap:4px; }
  .rubik-cell { width:22px; height:22px; }
}