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

Version du 20 septembre 2026 à 21:20

/* 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;}}
.qmap-legende{max-width:820px;margin:10px auto 24px;font-size:.9em;color:#5a6672;text-align:center;line-height:1.4;}
html.skin-theme-clientpref-night .qmap-legende{color:#a2a9b1;}
@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .qmap-legende{color:#a2a9b1;}}
.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.

   Chaque portail reçoit son accent par la classe que MediaWiki pose sur
   le body, page-Portail_Xxx : le wikicode n'a donc aucune couleur à
   porter, pas même un nom de thème. Les deux variables sont celles de la
   page d'accueil, --ac (accent) et --ac-doux (fond teinté), si bien que
   la carte de l'accueil et le portail qu'elle ouvre sont de la même
   couleur.

   Le bandeau d'accueil et la barre des sept portails sont produits par le
   modèle {{Bandeau portail}} : ne pas les recopier à la main dans une
   page.
   ==================================================================== */

/* --- l'accent de chaque portail : une ligne, et c'est tout --- */
body.page-Portail_Vie_municipale                { --ac: #3366cc; --ac-doux: #eaf1fc; }
body.page-Portail_Histoire_et_patrimoine        { --ac: #9a6a10; --ac-doux: #faf3e3; }
body.page-Portail_Quartiers_de_Colombes         { --ac: #1f7a23; --ac-doux: #e9f5ea; }
body.page-Portail_Environnement                 { --ac: #11786a; --ac-doux: #e4f3f1; }
body.page-Portail_Transports_et_Mobilités       { --ac: #a8492f; --ac-doux: #fbeee9; }
body.page-Portail_Enfance_et_Éducation          { --ac: #6c3fa0; --ac-doux: #f2ecfa; }
body.page-Portail_Vie_associative_et_culturelle { --ac: #ad1457; --ac-doux: #fceaf1; }

/* --- le bandeau d'accueil --- */
.portail-entete {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    border: 1px solid #c8ccd1;
    border-left: 6px solid var( --ac, #2da831 );
    border-radius: 0 10px 10px 0;
    background: var( --ac-doux, #f6f9fc );
    padding: 20px 26px;
    margin-bottom: 10px;
}
.portail-embleme {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #ffffff;
    font-size: 2.1em;
    line-height: 1;
}
.portail-entete-texte {
    flex: 1 1 260px;
    min-width: 240px;
}
.portail-surtitre {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.75em;
    font-weight: bold;
    color: var( --ac, #54595d );
}
.portail-titre {
    display: block;
    margin-top: 2px;
    font-size: 1.9em;
    font-weight: bold;
    line-height: 1.2;
}
.portail-chapeau {
    display: block;
    margin-top: 8px;
    color: #54595d;
}

/* --- la barre des sept portails, identique partout --- */
.portail-nav {
    border-bottom: 1px solid #c8ccd1;
    padding: 0 4px 10px;
    margin-bottom: 20px;
    font-size: 0.95em;
    line-height: 2;
}
.portail-nav-label {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.78em;
    font-weight: bold;
    color: #54595d;
    margin-right: 6px;
}
.portail-nav .mw-selflink { color: var( --ac, #202122 ); }

/* --- les cartes --- */
.portail-grille {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
    gap: 16px;
    margin: 18px 0;
}
.portail-bloc {
    display: flex;
    flex-direction: column;
    border: 1px solid #c8ccd1;
    border-top: 4px solid var( --ac, #3366cc );
    border-radius: 0 0 8px 8px;
    background: #ffffff;
    padding: 2px 18px 16px;
}
.portail-bloc h3 {
    margin: 14px 0 0;
    padding: 0;
    border-bottom: 0;
    font-size: 1.18em;
    color: var( --ac, inherit );
}
.portail-puce { margin-right: 7px; }
.portail-bloc-chapeau {
    display: block;
    margin-top: 6px;
    color: #54595d;
    font-size: 0.95em;
}
.portail-bloc ul {
    margin: 0.6em 0 0;
    padding-left: 1.25em;
}
.portail-bloc li { margin: 0.3em 0; }

/* le renvoi calé en bas de carte, pour que les cartes s'alignent */
.portail-renvoi {
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.93em;
}

/* --- l'encadré des chantiers ouverts --- */
.portail-chantier {
    border: 1px dashed #a2a9b1;
    border-left: 4px solid var( --ac, #a2a9b1 );
    border-radius: 0 6px 6px 0;
    background: #fdf5e6;
    padding: 14px 20px;
    margin-top: 22px;
}
.portail-chantier h3 { margin-top: 4px; }

/* Mode sombre explicite */
html.skin-theme-clientpref-night .portail-entete,
html.skin-theme-clientpref-night .portail-nav { border-color: #54595d; }
html.skin-theme-clientpref-night .portail-embleme { background: #202122; }
html.skin-theme-clientpref-night .portail-bloc { background: #27292d; border-color: #54595d; }
html.skin-theme-clientpref-night .portail-chapeau,
html.skin-theme-clientpref-night .portail-bloc-chapeau,
html.skin-theme-clientpref-night .portail-nav-label { color: #a2a9b1; }
html.skin-theme-clientpref-night .portail-chantier { background: #2b2620; border-color: #72777d; }
html.skin-theme-clientpref-night body.page-Portail_Vie_municipale                { --ac: #88a9e8; --ac-doux: #1d2738; }
html.skin-theme-clientpref-night body.page-Portail_Histoire_et_patrimoine        { --ac: #d9a745; --ac-doux: #2e2717; }
html.skin-theme-clientpref-night body.page-Portail_Quartiers_de_Colombes         { --ac: #6cc970; --ac-doux: #1c2a1d; }
html.skin-theme-clientpref-night body.page-Portail_Environnement                 { --ac: #5cc4b4; --ac-doux: #172b28; }
html.skin-theme-clientpref-night body.page-Portail_Transports_et_Mobilités       { --ac: #e2917a; --ac-doux: #2e1f1a; }
html.skin-theme-clientpref-night body.page-Portail_Enfance_et_Éducation          { --ac: #b493db; --ac-doux: #241d2f; }
html.skin-theme-clientpref-night body.page-Portail_Vie_associative_et_culturelle { --ac: #e88bb0; --ac-doux: #2d1a23; }

/* Mode sombre suivant le réglage du système */
@media ( prefers-color-scheme: dark ) {
    html.skin-theme-clientpref-os .portail-entete,
    html.skin-theme-clientpref-os .portail-nav { border-color: #54595d; }
    html.skin-theme-clientpref-os .portail-embleme { background: #202122; }
    html.skin-theme-clientpref-os .portail-bloc { background: #27292d; border-color: #54595d; }
    html.skin-theme-clientpref-os .portail-chapeau,
    html.skin-theme-clientpref-os .portail-bloc-chapeau,
    html.skin-theme-clientpref-os .portail-nav-label { color: #a2a9b1; }
    html.skin-theme-clientpref-os .portail-chantier { background: #2b2620; border-color: #72777d; }
    html.skin-theme-clientpref-os body.page-Portail_Vie_municipale                { --ac: #88a9e8; --ac-doux: #1d2738; }
    html.skin-theme-clientpref-os body.page-Portail_Histoire_et_patrimoine        { --ac: #d9a745; --ac-doux: #2e2717; }
    html.skin-theme-clientpref-os body.page-Portail_Quartiers_de_Colombes         { --ac: #6cc970; --ac-doux: #1c2a1d; }
    html.skin-theme-clientpref-os body.page-Portail_Environnement                 { --ac: #5cc4b4; --ac-doux: #172b28; }
    html.skin-theme-clientpref-os body.page-Portail_Transports_et_Mobilités       { --ac: #e2917a; --ac-doux: #2e1f1a; }
    html.skin-theme-clientpref-os body.page-Portail_Enfance_et_Éducation          { --ac: #b493db; --ac-doux: #241d2f; }
    html.skin-theme-clientpref-os body.page-Portail_Vie_associative_et_culturelle { --ac: #e88bb0; --ac-doux: #2d1a23; }
}

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

/* ==== Actualités colombiennes : mois > semaines > tableaux ==============
   Barres repliables (Modèle mw-customtoggle), pastilles de thème,
   colonnes Date / Thème / Actualité / Sources.                          */

.actu-legende {
    border: 1px solid #c8ccd1;
    border-left: 4px solid #3366cc;
    background: #f8f9fa;
    padding: 10px 14px;
    margin: 0 0 1.4em;
    font-size: .93em;
    line-height: 1.6;
}
.actu-legende-t { font-weight: bold; margin-bottom: .4em; }

/* --- les barres cliquables --- */
.actu-bar {
    cursor: pointer;
    padding: 7px 12px 7px 30px;
    margin: 0 0 2px;
    border: 1px solid #c8ccd1;
    border-radius: 3px;
    position: relative;
    line-height: 1.45;
    -webkit-user-select: none;
    user-select: none;
}
.actu-bar:hover { border-color: #3366cc; }
.actu-bar::before {
    content: "▾";
    position: absolute;
    left: 11px;
    color: #54595d;
    font-size: .85em;
}
/* repliée : le chevron pointe vers la droite */
.actu-bar:has(+ .mw-collapsible.mw-collapsed)::before { content: "▸"; }

.actu-bar-mois {
    background: #eaf0f8;
    font-weight: bold;
    font-size: 1.04em;
    margin-top: .3em;
}
.actu-bar-sem {
    background: #f8f9fa;
    margin-left: 1.1em;
}
.actu-n { font-weight: normal; color: #54595d; font-size: .92em; }
.actu-cheval {
    font-size: .8em;
    color: #72777d;
    border: 1px solid #c8ccd1;
    border-radius: 9px;
    padding: 0 7px;
    white-space: nowrap;
}

/* le contenu d'une semaine, légèrement décalé sous sa barre */
.actu-bar-sem + .mw-collapsible { margin: 0 0 6px 1.1em; }

/* --- le tableau --- */
.actu-table { width: 100%; margin: 0 0 4px; }
.actu-table > * > tr > th { background: #eaecf0; }
.actu-table td { vertical-align: top; }
.actu-table .actu-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.actu-table .actu-src { font-size: .88em; line-height: 1.5; }
.actu-approx { color: #72777d; font-style: italic; }
.actu-marq { font-style: normal; }

/* --- pastilles de thème --- */
.actu-cat {
    display: inline-block;
    border-radius: 11px;
    padding: 1px 9px;
    font-size: .86em;
    line-height: 1.7;
    white-space: nowrap;
    border: 1px solid transparent;
}
.actu-cat-mun { background: #e8f0fb; color: #1c4587; border-color: #c3d6f0; }
.actu-cat-urb { background: #fbf0df; color: #7a5300; border-color: #eeddb8; }
.actu-cat-cul { background: #f2e9fb; color: #5b2a86; border-color: #ddcbf0; }
.actu-cat-aso { background: #fdeee0; color: #8a4b00; border-color: #f2d9bf; }
.actu-cat-spo { background: #e0f5f2; color: #0f5f57; border-color: #bce3dd; }
.actu-cat-env { background: #e6f4e6; color: #245c24; border-color: #c4e2c4; }
.actu-cat-sec { background: #eceff3; color: #45525f; border-color: #ccd4dd; }
.actu-cat-sol { background: #fbe9ee; color: #8a2a4a; border-color: #f0c9d5; }
.actu-cat-san { background: #e4f2f8; color: #14556e; border-color: #bedfec; }
.actu-cat-edu { background: #fcf5dd; color: #6e5500; border-color: #ece0b4; }
.actu-cat-tra { background: #e9eafb; color: #33389e; border-color: #ccceef; }
.actu-cat-com { background: #f5eee6; color: #6b4a2a; border-color: #e2d3c2; }
.actu-cat-loc { background: #eef0f2; color: #454d55; border-color: #d3d8dd; }

/* --- petits écrans : la colonne Sources passe sous le texte --- */
@media screen and ( max-width: 640px ) {
    .actu-bar { padding-left: 26px; }
    .actu-bar-sem, .actu-bar-sem + .mw-collapsible { margin-left: .4em; }
    .actu-table .actu-src { font-size: .82em; }
}

/* ==== Mode sombre ==== */
html.skin-theme-clientpref-night .actu-legende { background: #27292d; border-color: #54595d; border-left-color: #6a92d4; }
html.skin-theme-clientpref-night .actu-bar { background: #27292d; border-color: #54595d; }
html.skin-theme-clientpref-night .actu-bar-mois { background: #1b2740; }
html.skin-theme-clientpref-night .actu-bar::before,
html.skin-theme-clientpref-night .actu-n,
html.skin-theme-clientpref-night .actu-cheval,
html.skin-theme-clientpref-night .actu-approx { color: #a2a9b1; }
html.skin-theme-clientpref-night .actu-table > * > tr > th { background: #2e3136; }
html.skin-theme-clientpref-night .actu-cat-mun { background: #1d2738; color: #a8c6f0; border-color: #35496b; }
html.skin-theme-clientpref-night .actu-cat-urb { background: #2e2717; color: #ddbc73; border-color: #56482a; }
html.skin-theme-clientpref-night .actu-cat-cul { background: #2a1f38; color: #c9a8ea; border-color: #4a3766; }
html.skin-theme-clientpref-night .actu-cat-aso { background: #33240f; color: #e0b17a; border-color: #5c4324; }
html.skin-theme-clientpref-night .actu-cat-spo { background: #12302c; color: #85cfc5; border-color: #27564f; }
html.skin-theme-clientpref-night .actu-cat-env { background: #1c2a1d; color: #92cf94; border-color: #315036; }
html.skin-theme-clientpref-night .actu-cat-sec { background: #262a2f; color: #b3bdc7; border-color: #464f59; }
html.skin-theme-clientpref-night .actu-cat-sol { background: #331a24; color: #e2a0b6; border-color: #5c3243; }
html.skin-theme-clientpref-night .actu-cat-san { background: #152a34; color: #90c6dc; border-color: #2b4e5e; }
html.skin-theme-clientpref-night .actu-cat-edu { background: #2e2913; color: #d9c479; border-color: #554c26; }
html.skin-theme-clientpref-night .actu-cat-tra { background: #1e2038; color: #aeb2ee; border-color: #3a3e6b; }
html.skin-theme-clientpref-night .actu-cat-com { background: #2b241c; color: #cbaf92; border-color: #4d4133; }
html.skin-theme-clientpref-night .actu-cat-loc { background: #26292d; color: #b6bcc2; border-color: #454b52; }

@media ( prefers-color-scheme: dark ) {
    html.skin-theme-clientpref-os .actu-legende { background: #27292d; border-color: #54595d; border-left-color: #6a92d4; }
    html.skin-theme-clientpref-os .actu-bar { background: #27292d; border-color: #54595d; }
    html.skin-theme-clientpref-os .actu-bar-mois { background: #1b2740; }
    html.skin-theme-clientpref-os .actu-bar::before,
    html.skin-theme-clientpref-os .actu-n,
    html.skin-theme-clientpref-os .actu-cheval,
    html.skin-theme-clientpref-os .actu-approx { color: #a2a9b1; }
    html.skin-theme-clientpref-os .actu-table > * > tr > th { background: #2e3136; }
    html.skin-theme-clientpref-os .actu-cat-mun { background: #1d2738; color: #a8c6f0; border-color: #35496b; }
    html.skin-theme-clientpref-os .actu-cat-urb { background: #2e2717; color: #ddbc73; border-color: #56482a; }
    html.skin-theme-clientpref-os .actu-cat-cul { background: #2a1f38; color: #c9a8ea; border-color: #4a3766; }
    html.skin-theme-clientpref-os .actu-cat-aso { background: #33240f; color: #e0b17a; border-color: #5c4324; }
    html.skin-theme-clientpref-os .actu-cat-spo { background: #12302c; color: #85cfc5; border-color: #27564f; }
    html.skin-theme-clientpref-os .actu-cat-env { background: #1c2a1d; color: #92cf94; border-color: #315036; }
    html.skin-theme-clientpref-os .actu-cat-sec { background: #262a2f; color: #b3bdc7; border-color: #464f59; }
    html.skin-theme-clientpref-os .actu-cat-sol { background: #331a24; color: #e2a0b6; border-color: #5c3243; }
    html.skin-theme-clientpref-os .actu-cat-san { background: #152a34; color: #90c6dc; border-color: #2b4e5e; }
    html.skin-theme-clientpref-os .actu-cat-edu { background: #2e2913; color: #d9c479; border-color: #554c26; }
    html.skin-theme-clientpref-os .actu-cat-tra { background: #1e2038; color: #aeb2ee; border-color: #3a3e6b; }
    html.skin-theme-clientpref-os .actu-cat-com { background: #2b241c; color: #cbaf92; border-color: #4d4133; }
    html.skin-theme-clientpref-os .actu-cat-loc { background: #26292d; color: #b6bcc2; border-color: #454b52; }
}