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

Dernière version du 14 septembre 2026 à 21:51

/* Le CSS placé ici sera appliqué à tous les habillages. */

/* Masquer Politique de confidentialité (FR et EN) */
#footer-places-privacy, 
#footer-places-confidentialite {
    display: none !important;
}

/* Masquer Avertissements (FR et EN) */
#footer-places-disclaimer, 
#footer-places-disclaimers,
#footer-places-avertissements {
    display: none !important;
}
/* Redimensionnement forcé du logo dans la barre latérale */
.mw-wiki-logo {
    background-size: contain; /* L'image s'adapte au cadre */
    width: 200px;
    height: 200px;
}

/* Pour le nouveau skin Vector 2022 */
.mw-logo-icon {
    width: 200px !important;
    height: auto !important;
}

/* Boîte à outils allégée : ne garder que Téléverser, Pages spéciales, Version imprimable, Informations sur la page */
#t-whatlinkshere,
#t-recentchangeslinked,
#t-permalink {
    display: none !important;
}

/* Masquer le nom du site en texte (wordmark) à côté du logo dans l'en-tête Vector 2022 : redondant et mal intégré visuellement */
.mw-logo-wordmark {
    display: none !important;
}

/* ==== Carte cliquable des quartiers - Portail:Quartiers de Colombes ==== */
/* Geometrie generee a partir du contour officiel de la commune (geo.api.gouv.fr). */
.qmap{position:relative;width:100%;max-width:820px;margin:0 auto;}
.qmap::before{content:"";display:block;padding-bottom:90.86%;}
.qmap-base{position:absolute;top:0;right:0;bottom:0;left:0;background:#dfe6ec;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));clip-path:polygon(0.00% 53.84%,4.85% 48.70%,6.92% 46.49%,7.95% 45.37%,12.00% 40.79%,14.07% 38.37%,18.65% 33.20%,20.30% 31.30%,21.45% 30.20%,23.83% 28.01%,27.47% 24.84%,29.65% 22.87%,31.12% 21.84%,32.65% 20.69%,34.92% 19.20%,40.38% 15.10%,42.03% 13.31%,43.65% 11.31%,44.97% 9.59%,45.69% 8.78%,48.13% 5.66%,50.77% 3.25%,51.33% 2.79%,51.86% 5.55%,52.38% 8.87%,52.83% 11.51%,52.91% 11.89%,54.07% 9.94%,54.94% 8.60%,55.90% 7.49%,57.49% 5.93%,57.86% 5.61%,58.37% 5.56%,60.30% 5.14%,61.96% 4.67%,62.48% 4.61%,63.23% 4.15%,64.15% 3.15%,65.99% 2.29%,68.91% 0.40%,70.90% 0.15%,71.22% 0.00%,71.87% 0.97%,73.25% 2.68%,74.48% 4.03%,79.08% 8.70%,79.53% 6.85%,83.51% 8.35%,85.79% 8.89%,88.42% 9.44%,92.59% 10.64%,96.11% 11.86%,96.56% 11.68%,97.41% 11.09%,98.25% 11.21%,99.47% 11.98%,99.39% 12.83%,98.91% 16.95%,99.05% 16.99%,98.70% 21.67%,98.43% 25.67%,98.25% 28.78%,97.15% 31.19%,98.78% 32.13%,99.26% 32.61%,100.00% 34.10%,98.86% 34.76%,95.11% 36.82%,94.69% 37.07%,90.24% 39.53%,89.48% 39.84%,90.00% 39.96%,93.32% 41.02%,91.16% 46.37%,91.50% 46.52%,89.85% 51.41%,90.54% 51.71%,88.36% 57.35%,84.68% 54.62%,83.55% 58.39%,80.85% 55.12%,80.27% 57.50%,79.57% 59.11%,79.35% 59.53%,79.66% 60.34%,79.25% 62.57%,78.52% 64.99%,78.27% 66.26%,78.21% 66.81%,78.14% 68.49%,77.97% 73.59%,77.76% 75.16%,76.10% 75.05%,73.49% 74.99%,72.44% 74.99%,70.06% 75.13%,69.94% 76.16%,68.27% 76.01%,67.53% 75.98%,66.26% 76.03%,61.82% 76.88%,60.31% 77.30%,58.55% 77.86%,55.83% 78.92%,51.02% 81.24%,49.89% 81.81%,47.48% 83.12%,45.12% 84.59%,45.07% 84.47%,40.64% 86.90%,40.56% 87.09%,37.40% 88.59%,36.02% 89.31%,32.15% 91.55%,31.66% 91.95%,27.36% 95.01%,22.75% 97.29%,16.44% 100.00%,14.27% 94.01%,16.53% 92.70%,11.79% 80.87%,11.28% 81.09%,9.89% 77.86%,10.15% 77.66%,6.50% 71.20%,6.74% 70.97%,5.23% 69.08%,3.24% 66.89%,4.37% 65.28%,5.24% 64.16%,5.98% 63.29%,7.08% 62.15%,3.30% 57.76%,0.00% 53.84%);}
.qz{position:absolute;top:0;right:0;bottom:0;left:0;transition:filter .15s ease;}
.qz a{display:block;width:100%;height:100%;text-indent:-9999px;overflow:hidden;white-space:nowrap;}
.qz:hover{filter:brightness(1.08) saturate(1.25);}
.qlabels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;}
.qlab{position:absolute;transform:translate(-50%,-50%);font-family:sans-serif;font-size:13px;font-weight:700;color:#16212c;text-align:center;line-height:1.15;text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 5px rgba(255,255,255,.8);}
@media(max-width:600px){.qlab{font-size:10px;}}
.qz-stade{background:#8fb3d1;clip-path:polygon(37.75% 17.13%,40.59% 15.02%,48.33% 5.77%,51.46% 2.99%,53.07% 11.72%,55.07% 8.80%,57.73% 5.81%,62.29% 4.74%,63.96% 3.28%,68.72% 0.52%,69.56% 0.42%,68.59% 22.67%,43.65% 22.66%);}
.qz-fosses{background:#e0824a;clip-path:polygon(69.94% 0.43%,71.40% 0.14%,73.43% 2.82%,79.29% 8.77%,79.70% 7.00%,83.48% 8.59%,95.89% 11.83%,97.19% 11.06%,99.25% 11.95%,98.34% 24.36%,69.05% 22.51%);}
.qz-agent{background:#b4c48f;clip-path:polygon(90.27% 52.15%,68.97% 37.13%,69.06% 22.80%,98.39% 24.73%,98.10% 28.96%,96.99% 31.36%,98.61% 32.27%,99.80% 34.20%,89.62% 39.66%,93.15% 40.87%,91.14% 46.13%,91.47% 46.28%,89.86% 51.17%,90.54% 51.46%);}
.qz-centre{background:#ccd357;clip-path:polygon(68.60% 23.01%,68.53% 37.09%,55.65% 48.53%,50.10% 47.59%,43.67% 22.99%);}
.qz-europe{background:#f2b559;clip-path:polygon(14.75% 37.78%,20.52% 31.33%,24.02% 28.13%,29.71% 23.10%,37.47% 17.45%,43.33% 22.99%,49.80% 47.64%,38.86% 56.47%);}
.qz-vallees{background:#a897c9;clip-path:polygon(77.77% 74.92%,73.91% 74.77%,55.83% 48.85%,68.85% 37.33%,90.07% 52.49%,88.14% 57.36%,84.49% 54.74%,83.33% 58.39%,80.71% 55.30%,79.21% 59.35%,79.54% 60.15%,78.27% 66.01%);}
.qz-greves{background:#ecb1bf;clip-path:polygon(0.19% 53.96%,14.53% 38.08%,38.71% 56.75%,37.87% 63.44%,9.87% 76.83%,6.65% 71.02%,6.89% 70.79%,3.44% 66.80%,7.30% 62.15%);}
.qz-garenne{background:#f0a188;clip-path:polygon(73.64% 74.93%,69.86% 75.03%,69.74% 76.05%,66.08% 75.89%,60.22% 77.07%,55.86% 78.67%,47.73% 82.86%,38.30% 63.51%,39.12% 56.83%,50.06% 48.02%,55.64% 49.01%);}
.qz-basch{background:#bdd8a2;clip-path:polygon(16.53% 99.78%,14.43% 93.84%,16.68% 92.53%,12.00% 80.97%,11.49% 81.18%,10.00% 77.19%,37.96% 63.64%,47.38% 83.08%,31.95% 91.43%,27.25% 94.81%);}
.ql-stade{left:57.50%;top:12.66%;}
.ql-fosses{left:81.00%;top:13.76%;}
.ql-agent{left:80.00%;top:33.02%;}
.ql-centre{left:57.50%;top:33.02%;}
.ql-europe{left:36.50%;top:39.62%;}
.ql-vallees{left:70.00%;top:50.08%;}
.ql-greves{left:23.50%;top:59.98%;}
.ql-garenne{left:53.00%;top:64.38%;}
.ql-basch{left:30.50%;top:77.59%;}

/* ==== Livre Blanc : suivi des propositions ==== */
.lb-table{border-collapse:collapse;}
.lb-table > caption{text-align:left;font-weight:bold;background:#eef7ee;border:1px solid #a2a9b1;padding:7px 12px;color:#2a3b2a;}
.lb-table.mw-collapsed > caption{border-radius:3px;}
/* ligne "Avancees et realisations" : rattachee visuellement a la proposition du dessus */
.lb-table td[colspan="4"]{background:#f7faf7 !important;border-left:4px solid #9ec49e !important;color:#46554a !important;font-size:.94em;padding-top:6px !important;padding-bottom:6px !important;}
/* trait epais de separation entre deux propositions */
.lb-table tr:has(> td[colspan="4"]) + tr > td{border-top:3px solid #8ea7c0 !important;}
/* petit rappel visuel de l etat dans la colonne N */
.lb-table td:first-child:not([colspan]){white-space:nowrap;}

/* ==== Bandeau de portail en bas d'article (Modèle:Portail) ==== */
.bandeau-portail {
    clear: both;
    margin: 1.5em 0 0.5em;
    padding: 0.6em 1em;
    border: 1px solid #c8ccd1;
    border-left: 4px solid #3366cc;
    border-radius: 0 3px 3px 0;
    background: #f8f9fa;
    font-size: 0.95em;
    line-height: 1.6;
}
.bandeau-portail-label {
    font-weight: bold;
    color: #54595d;
}
.bandeau-portail-label::after { content: " :"; }

/* Mode sombre explicite */
html.skin-theme-clientpref-night .bandeau-portail {
    background: #27292d;
    border-color: #54595d;
}
html.skin-theme-clientpref-night .bandeau-portail-label { color: #a2a9b1; }

/* Mode sombre suivant le réglage du système */
@media ( prefers-color-scheme: dark ) {
    html.skin-theme-clientpref-os .bandeau-portail {
        background: #27292d;
        border-color: #54595d;
    }
    html.skin-theme-clientpref-os .bandeau-portail-label { color: #a2a9b1; }
}

/* ==== Arborescence CategoryTree ==== */
/* L'absence de triangle signale déjà une branche terminale : le message est redondant. */
.CategoryTreeNotice { display: none; }
.CategoryTreeTag { margin: 0.5em 0 1em; line-height: 1.7; }

/* ==== Portails thématiques ==========================================
   Classes réutilisables par toutes les pages Portail:. Les couleurs sont
   définies ici et nulle part ailleurs, pour que le mode sombre reste géré
   en un seul endroit. Ne pas coder de couleur en dur dans les pages.
   ==================================================================== */
.portail-entete {
    border: 1px solid #c8ccd1;
    border-left: 6px solid #2da831;
    border-radius: 0 8px 8px 0;
    background: #f6f9fc;
    padding: 18px 24px;
    margin-bottom: 20px;
}
.portail-titre {
    display: block;
    font-size: 1.9em;
    font-weight: bold;
    line-height: 1.2;
}
.portail-chapeau {
    display: block;
    margin-top: 8px;
    color: #54595d;
}
.portail-grille {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 290px, 1fr ) );
    gap: 16px;
    margin: 18px 0;
}
.portail-bloc {
    border: 1px solid #c8ccd1;
    border-top: 3px solid #3366cc;
    border-radius: 0 0 4px 4px;
    background: #ffffff;
    padding: 4px 16px 14px;
}
.portail-bloc h3 {
    margin: 12px 0 0;
    padding: 0;
    border-bottom: 0;
    font-size: 1.1em;
}
.portail-bloc ul {
    margin: 0.5em 0 0;
}
.portail-chantier {
    border: 1px dashed #a2a9b1;
    border-radius: 4px;
    background: #fdf5e6;
    padding: 14px 18px;
    margin-top: 22px;
}

/* Mode sombre explicite */
html.skin-theme-clientpref-night .portail-entete { background: #202122; border-color: #54595d; }
html.skin-theme-clientpref-night .portail-bloc { background: #27292d; border-color: #54595d; }
html.skin-theme-clientpref-night .portail-chapeau { color: #a2a9b1; }
html.skin-theme-clientpref-night .portail-chantier { background: #2b2620; border-color: #72777d; }

/* Mode sombre suivant le réglage du système */
@media ( prefers-color-scheme: dark ) {
    html.skin-theme-clientpref-os .portail-entete { background: #202122; border-color: #54595d; }
    html.skin-theme-clientpref-os .portail-bloc { background: #27292d; border-color: #54595d; }
    html.skin-theme-clientpref-os .portail-chapeau { color: #a2a9b1; }
    html.skin-theme-clientpref-os .portail-chantier { background: #2b2620; border-color: #72777d; }
}

/* ==== Page d accueil ================================================
   Une carte par portail, chacune avec sa couleur propre. Toutes les
   couleurs sont definies ici : ne rien coder en dur dans le wikicode.
   Chaque theme pose deux variables : --ac (accent) et --ac-doux (fond).
   ==================================================================== */
.accueil-entete {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    border: 1px solid #c8ccd1;
    border-radius: 14px;
    background: #f6f9fc;
    padding: 24px 32px;
    margin-bottom: 14px;
}
.accueil-entete-texte {
    flex: 1 1 300px;
    min-width: 260px;
    border-left: 4px solid #2da831;
    padding-left: 24px;
}
.accueil-surtitre {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1.2em;
    color: #54595d;
}
.accueil-baseline {
    display: block;
    margin-top: 12px;
    font-size: 1.1em;
}
.accueil-bandeau {
    border: 1px solid #c8ccd1;
    border-left: 5px solid #3366cc;
    border-radius: 0 6px 6px 0;
    background: #eaf3ff;
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 1.08em;
}

/* --- la grille de cartes --- */
.ac-grille {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
    gap: 18px;
    margin: 18px 0 28px;
}
.ac-carte {
    display: flex;
    flex-direction: column;
    border: 1px solid #c8ccd1;
    border-top: 4px solid var( --ac );
    border-radius: 8px;
    background: #ffffff;
    padding: 16px 18px 16px;
    font-size: 1.08em;
    line-height: 1.55;
}
.ac-carte-tete {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.ac-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    background: var( --ac-doux );
    font-size: 1.15em;
}
.ac-carte-titre {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.15;
}
.ac-carte-titre a,
.ac-carte-titre a:visited { color: var( --ac ); }
.ac-carte-desc {
    margin: 0 0 2px;
    color: #54595d;
}
.ac-carte ul {
    margin: 0.5em 0 1em;
    padding-left: 1.3em;
}
.ac-carte li { margin: 0.25em 0; }

/* le zoom, calé en bas de carte pour que toutes s'alignent */
.ac-zoom {
    margin-top: auto;
    border-left: 3px solid var( --ac );
    border-radius: 0 6px 6px 0;
    background: var( --ac-doux );
    padding: 9px 13px;
    font-size: 0.97em;
}
.ac-zoom-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.78em;
    font-weight: bold;
    color: var( --ac );
    margin-bottom: 2px;
}

/* --- les sept thèmes --- */
.ac-municipale  { --ac: #3366cc; --ac-doux: #eaf1fc; }
.ac-histoire    { --ac: #9a6a10; --ac-doux: #faf3e3; }
.ac-quartiers   { --ac: #1f7a23; --ac-doux: #e9f5ea; }
.ac-environnement { --ac: #11786a; --ac-doux: #e4f3f1; }
.ac-transports  { --ac: #a8492f; --ac-doux: #fbeee9; }
.ac-enfance     { --ac: #6c3fa0; --ac-doux: #f2ecfa; }
.ac-associatif  { --ac: #ad1457; --ac-doux: #fceaf1; }
.ac-reperes     { --ac: #54595d; --ac-doux: #eff1f3; }

/* --- participer --- */
.ac-participer {
    border: 1px solid #c8ccd1;
    border-radius: 10px;
    background: #f8f9fa;
    padding: 20px 24px 24px;
}
.ac-actions {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
    gap: 14px;
    margin-top: 14px;
}
.ac-action {
    border: 1px solid #c8ccd1;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px 16px;
    font-size: 1.05em;
}
.ac-action-icone {
    display: block;
    font-size: 1.7em;
    line-height: 1;
    margin-bottom: 6px;
}
.ac-action-titre {
    display: block;
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 4px;
}

/* ==== Mode sombre ==== */
html.skin-theme-clientpref-night .accueil-entete,
html.skin-theme-clientpref-night .ac-participer { background: #202122; border-color: #54595d; }
html.skin-theme-clientpref-night .accueil-surtitre,
html.skin-theme-clientpref-night .ac-carte-desc { color: #a2a9b1; }
html.skin-theme-clientpref-night .accueil-bandeau { background: #1b2740; border-color: #54595d; }
html.skin-theme-clientpref-night .ac-carte,
html.skin-theme-clientpref-night .ac-action { background: #27292d; border-color: #54595d; }
html.skin-theme-clientpref-night .ac-municipale  { --ac: #88a9e8; --ac-doux: #1d2738; }
html.skin-theme-clientpref-night .ac-histoire    { --ac: #d9a745; --ac-doux: #2e2717; }
html.skin-theme-clientpref-night .ac-quartiers   { --ac: #6cc970; --ac-doux: #1c2a1d; }
html.skin-theme-clientpref-night .ac-environnement { --ac: #5cc4b4; --ac-doux: #172b28; }
html.skin-theme-clientpref-night .ac-transports  { --ac: #e2917a; --ac-doux: #2e1f1a; }
html.skin-theme-clientpref-night .ac-enfance     { --ac: #b493db; --ac-doux: #241d2f; }
html.skin-theme-clientpref-night .ac-associatif  { --ac: #e88bb0; --ac-doux: #2d1a23; }
html.skin-theme-clientpref-night .ac-reperes     { --ac: #a2a9b1; --ac-doux: #2a2c2f; }

@media ( prefers-color-scheme: dark ) {
    html.skin-theme-clientpref-os .accueil-entete,
    html.skin-theme-clientpref-os .ac-participer { background: #202122; border-color: #54595d; }
    html.skin-theme-clientpref-os .accueil-surtitre,
    html.skin-theme-clientpref-os .ac-carte-desc { color: #a2a9b1; }
    html.skin-theme-clientpref-os .accueil-bandeau { background: #1b2740; border-color: #54595d; }
    html.skin-theme-clientpref-os .ac-carte,
    html.skin-theme-clientpref-os .ac-action { background: #27292d; border-color: #54595d; }
    html.skin-theme-clientpref-os .ac-municipale  { --ac: #88a9e8; --ac-doux: #1d2738; }
    html.skin-theme-clientpref-os .ac-histoire    { --ac: #d9a745; --ac-doux: #2e2717; }
    html.skin-theme-clientpref-os .ac-quartiers   { --ac: #6cc970; --ac-doux: #1c2a1d; }
    html.skin-theme-clientpref-os .ac-environnement { --ac: #5cc4b4; --ac-doux: #172b28; }
    html.skin-theme-clientpref-os .ac-transports  { --ac: #e2917a; --ac-doux: #2e1f1a; }
    html.skin-theme-clientpref-os .ac-enfance     { --ac: #b493db; --ac-doux: #241d2f; }
    html.skin-theme-clientpref-os .ac-associatif  { --ac: #e88bb0; --ac-doux: #2d1a23; }
    html.skin-theme-clientpref-os .ac-reperes     { --ac: #a2a9b1; --ac-doux: #2a2c2f; }
}