User:Test987654/common.css: Difference between revisions

/* Palette */
:root{
  --rubik-white:#ffffff;
  --rubik-yellow:#ffd500;
  --rubik-orange:#ff6a00;
  --rubik-red:#d40000;
  --rubik-green:#009b48;
  --rubik-blue:#0051ba;
  --rubik-dark:#1b1b1b;
  --rubik-border:#d8d8d8;
  --rubik-surface:#fbfbfb;
  --rubik-soft-shadow:rgba(0,0,0,0.04);
  --rubik-max-width:1150px;
}

/* Base safe */
body { background: var(--rubik-surface); color:var(--rubik-dark); font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Centre le contenu principal */
#content, .mw-body { max-width:var(--rubik-max-width); margin:18px auto; padding:0 16px; box-sizing:border-box; }

/* Titre de page — transformé en bandeau Rubik */
#firstHeading {
  margin:18px 0 12px 0;
  padding:14px 18px;
  font-weight:700;
  font-size:1.55rem;
  color:var(--rubik-dark);
  background:repeating-linear-gradient(90deg, var(--rubik-yellow) 0 33%, var(--rubik-orange) 33% 66%, var(--rubik-red) 66% 100%);
  border:2px solid var(--rubik-border);
  border-left:10px solid var(--rubik-blue);
  border-right:10px solid var(--rubik-green);
  border-radius:8px;
  box-shadow:0 4px 0 var(--rubik-soft-shadow);
}

/* Si le titre est dans un skin différent */
.mw-page-title, .page-header__title { display:block; padding:12px; }

/* Tentative automatique pour structurer trois sections principales.
   On cible les premiers h2/h3 visibles afin de les transformer en "cartes".
   Le CSS marche mieux si les sections ont des id ou titres standards. */
.rubik-autogrid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:18px;
}
@media (max-width:980px){ .rubik-autogrid { grid-template-columns:1fr; } }

/* Création dynamique : on stylise les éléments h2 + bloc suivant (parsé visuellement) */
#mw-content-text > h2, #mw-content-text > h3 {
  margin-top:18px;
  padding:0;
  font-weight:700;
}
#mw-content-text > h2 + div, #mw-content-text > h3 + div,
#mw-content-text > h2 + p, #mw-content-text > h3 + p {
  /* convertit le bloc suivant en "carte" visuelle */
  background:linear-gradient(180deg,var(--rubik-white),#fcfcfc);
  border:2px solid var(--rubik-border);
  border-radius:8px;
  padding:12px;
  box-shadow:0 3px 0 var(--rubik-soft-shadow);
  margin-bottom:8px;
}

/* Si la page contient trois sections en tête, on force l'affichage en grille :
   on applique la grille quand on trouve exactement 3 premiers blocs structurés. */
#mw-content-text > h2:nth-of-type(1),
#mw-content-text > h2:nth-of-type(2),
#mw-content-text > h2:nth-of-type(3) {
  /* marqueurs visuels — rien de disruptif */
}
@supports (display:grid){
  /* Wrapper visuel: on crée l'apparence en ciblant les trois premières sections si elles existent */
  #mw-content-text > h2:nth-of-type(1),
  #mw-content-text > h2:nth-of-type(2),
  #mw-content-text > h2:nth-of-type(3) {
    /* conservé pour compatibilité ; le layout réel se fait via le parent s'il existe */
  }
}

/* Titres de section "sticker" — coloriage automatique selon l'ordre */
#mw-content-text > h2:nth-of-type(1)::before { content:""; display:inline-block; width:12px; height:12px; background:var(--rubik-blue); margin-right:8px; vertical-align:middle; border-radius:2px;}
#mw-content-text > h2:nth-of-type(2)::before { content:""; display:inline-block; width:12px; height:12px; background:var(--rubik-yellow); margin-right:8px; vertical-align:middle; border-radius:2px;}
#mw-content-text > h2:nth-of-type(3)::before { content:""; display:inline-block; width:12px; height:12px; background:var(--rubik-orange); margin-right:8px; vertical-align:middle; border-radius:2px;}

/* Liens / boutons — styles discrets */
.mw-body-content a, a.external, #p-views a { color:var(--rubik-blue); text-decoration:none; border-bottom:1px dotted rgba(0,0,0,0.06); }
.mw-body-content a:hover { color:var(--rubik-red); text-decoration:underline; }

/* Liste des langues (générique : interlanguage links ou portlet) */
#p-lang, .interlanguage-link-target, .langlist, .mw-langlist {
  display:block;
}
.rubik-langlist {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  margin-top:12px;
}
.rubik-langlist a, .mw-langlist a {
  display:block;
  padding:8px 10px;
  background:var(--rubik-white);
  border:1px solid var(--rubik-border);
  border-radius:6px;
  text-decoration:none;
  color:var(--rubik-dark);
  box-shadow:0 2px 0 var(--rubik-soft-shadow);
  margin-bottom:4px;
}

/* Tentative : transformer le bloc #p-lang en grille visuelle (si présent) */
#p-lang .body, #p-lang ul, #p-lang { padding:0; }
#p-lang ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; list-style:none; padding-left:0; margin:0; }
#p-lang ul li a { display:block; padding:6px 8px; background:var(--rubik-white); border:1px solid var(--rubik-border); border-radius:6px; }

/* Mini face 3x3 utilitaire (si tu veux l'insérer manuellement plus tard) */
.rubik-grid { display:grid; grid-template-columns:repeat(3,26px); gap:6px; }
.rubik-cell { width:26px;height:26px;border:1px solid rgba(0,0,0,0.06); border-radius:3px; box-shadow:0 2px 0 rgba(0,0,0,0.03); }
.rubik-white{background:var(--rubik-white);} .rubik-yellow{background:var(--rubik-yellow);} .rubik-orange{background:var(--rubik-orange);}
.rubik-red{background:var(--rubik-red);} .rubik-green{background:var(--rubik-green);} .rubik-blue{background:var(--rubik-blue);}

/* Footer léger */
#footer { margin-top:18px; padding:12px 0; border-top:1px solid var(--rubik-border); color:#333; font-size:.95rem; }

/* Réactivité : empilement sur petit écran */
@media (max-width:980px){
  #firstHeading { font-size:1.3rem; padding:12px; }
  #p-lang ul { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }
  .rubik-grid { grid-template-columns:repeat(3,22px); gap:4px; }
  .rubik-cell{ width:22px; height:22px; }
}