/* GovCheck 2: the new interface of the whole web app (2026-11-11, owner:
   « refonte totale du Web App, nouvelle interface graphique », mobile
   friendly, for the DR Congo context). Loaded last on every page; one
   design system: tokens, type, buttons, fields, cards, page headers,
   tables, footer. Brand: Charte graphique RDC (flag blue, yellow, red),
   Cooper Hewitt for titles, Nunito for text (rounder, easy on small
   screens). */
/* CERC brand kit (2026-11-11, owner: « Redevelop GovCheck de A-Z with CERC
   brandkit »): Draft Natural for titles, Barlow for text, navy, amber,
   orange, blue, green, lilac, cream; pill buttons, as on cerc.cd. */
@font-face { font-family: "Draft Natural"; font-weight: 400; font-display: swap; src: url("../fonts/draft-natural/draft-natural-regular.woff2") format("woff2"); }
@font-face { font-family: "Draft Natural"; font-weight: 700; font-display: swap; src: url("../fonts/draft-natural/draft-natural-bold.woff2") format("woff2"); }

:root {
  --g2-navy: #2c2b47; --g2-blue: #3b3a5e; --g2-blue-dk: #2c2b47; --g2-sky: #4faac6; --g2-sky-50: #f6f5ef;
  --g2-yellow: #eca327; --g2-red: #ee7b42; --g2-red-dk: #b8470f; --g2-green: #2d6d50; --g2-green-50: #e3f4ec;
  --g2-ink: #1e1d33; --g2-muted: #5f6672; --g2-line: #dedeed; --g2-bg: #f5f5f9; --g2-card: #fff;
  --g2-radius: 16px; --g2-radius-sm: 12px;
  --g2-shadow: 0 1px 2px rgba(44, 43, 71, .06), 0 6px 20px -10px rgba(44, 43, 71, .22);
  --g2-font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g2-title: "Draft Natural", "Barlow", system-ui, sans-serif;
  --g2-lilac: #c671ba; --g2-cream: #efede5; --g2-orange: #ee7b42;
  --font-display: var(--g2-title);
  --font-body: var(--g2-font);
}

/* Base. */
html body { background: var(--g2-bg) !important; color: var(--g2-ink); font-family: var(--g2-font) !important; font-size: 16.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
html body :is(h1, h2, h3) { font-family: var(--g2-title) !important; font-weight: 700; font-synthesis: none; color: var(--g2-navy); letter-spacing: .01rem; }
html body h4 { font-family: var(--g2-font) !important; font-weight: 700; color: var(--g2-navy); }
html body { font-size: 17px !important; }
/* The wordmark as in the kit: « Gov » navy, « Check » CERC blue, Draft Natural. */
html body .logo__name { font-family: var(--g2-title) !important; font-weight: 700; color: #3b3a5e !important; letter-spacing: .01rem; }
html body .logo__name .ec-logo__accent { color: #4faac6 !important; }
html body :is(.logo__tag, .ec-dock__tag) { color: #6b6b75 !important; }
html body main h1 { font-weight: 700; line-height: 1.12; }
html body main h2 { font-weight: 700; line-height: 1.2; }
/* Links inside text only (buttons keep their own colours). */
html body main :is(p, li, dd, td, .text-formatted, .field__item) > a:not(.btn):not([class*="btn"]):not([class*="cta"]) { color: var(--g2-blue); text-underline-offset: .18em; text-decoration-thickness: .08em; }
html body :focus-visible { outline: 3px solid var(--g2-yellow) !important; outline-offset: 2px; }

/* Buttons: sentence case, big targets. */
html body .btn, html body button.btn, html body a.btn, html body input[type="submit"].button, html body .button.button--primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .6rem 1.25rem;
  border-radius: 2.25rem !important; border: 2px solid var(--g2-blue) !important; background: var(--g2-blue) !important; color: #fff !important;
  font-family: var(--g2-font) !important; font-size: 1rem !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.2;
  box-shadow: none !important; text-decoration: none !important; transition: background .15s, border-color .15s, transform .1s;
}
html body .btn:hover { background: var(--g2-blue-dk) !important; border-color: var(--g2-blue-dk) !important; }
html body .btn:active { transform: translateY(1px); }
html body .btn.btn-outline, html body .btn--ghost, html body .btn-secondary { background: #fff !important; color: var(--g2-blue) !important; }
html body .btn.btn-outline:hover { background: var(--g2-sky-50) !important; }
html body .btn.btn-sm { min-height: 40px; padding: .4rem .9rem; font-size: .92rem !important; }
/* The main citizen actions in flag yellow. */
html body :is(.gc-srh__cta, .ob-pj__primary, .srh__actions .btn:first-child, .nav-cta, .svp-btn--primary) { background: var(--g2-yellow) !important; border-color: var(--g2-yellow) !important; color: var(--g2-navy) !important; }

/* Fields. */
html body main :is(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], select, textarea) {
  min-height: 48px; padding: .6rem .9rem; border: 1.5px solid #cbcae2 !important; border-radius: var(--g2-radius-sm) !important; background-color: #fff !important;
  color: var(--g2-ink); font-family: var(--g2-font) !important; font-size: 1rem !important; box-shadow: none !important;
}
html body main textarea { min-height: 120px; line-height: 1.5; }
html body main :is(input, select, textarea):focus { border-color: var(--g2-blue) !important; outline: 3px solid rgba(59, 58, 94, .18) !important; outline-offset: 0; }
html body main label { color: var(--g2-navy); font-weight: 700; }
html body main .description, html body main .form-item__description { color: var(--g2-muted); font-size: .9rem; }

/* Page headers: one compact band (title, one sentence, actions). */
html body .page-hero.ec-phero { min-height: 0 !important; padding: 0 !important; background: linear-gradient(135deg, var(--g2-navy) 0%, #2b2a45 60%, var(--g2-blue) 100%) !important; }
html body .page-hero.ec-phero .ec-phero__inner { padding-block: 1.5rem 1.6rem !important; }
html body .page-hero.ec-phero :is(h1, .ec-phero__title) { color: #eca327 !important; font-size: clamp(1.6rem, 3.4vw, 2.3rem) !important; margin: 0 !important; }
html body .page-hero.ec-phero :is(.ec-phero__lead, p) { color: #edeade !important; font-size: 1.02rem; max-width: 46rem; }
html body .page-hero .ob-xhero__bg, html body .page-hero .ec-phero__art { display: none !important; }
html body .page-hero.ec-phero::after { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--g2-sky) 0 33.3%, var(--g2-yellow) 33.3% 66.6%, var(--g2-red) 66.6%); }

/* Cards. */
html body main :is(.ob-pj__card, .gc-card, .card, .ec-card, .mv-card, .sra, .gc-section, .as-card, .gdb-card, .gc-ws2__block) { border-radius: var(--g2-radius) !important; border-color: var(--g2-line) !important; box-shadow: var(--g2-shadow) !important; }

/* Tables. */
html body main table { border-collapse: separate; border-spacing: 0; width: 100%; overflow: hidden; border: 1px solid var(--g2-line); border-radius: var(--g2-radius-sm); background: #fff; }
html body main table :is(th, td) { padding: .7rem .8rem; border-bottom: 1px solid var(--g2-line); text-align: left; }
html body main table thead th { background: var(--g2-sky-50); color: var(--g2-navy); font-weight: 800; }
html body main table tbody tr:nth-child(even) td { background: #fafcfe; }
html body main table tbody tr:last-child td { border-bottom: 0; }

/* Status pills read the same everywhere. */
html body :is(.gsc-st, .sr-status, .ob-status, [class*="status-pill"]) { border-radius: 999px !important; font-weight: 800; }

/* Footer: compact, navy, tricolour line. */
html body footer.footer { background: var(--g2-navy) !important; }
html body footer.footer::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--g2-sky) 0 33.3%, var(--g2-yellow) 33.3% 66.6%, var(--g2-red) 66.6%); }

/* Phones: bigger text where it matters, nothing below 15 px. */
@media (max-width: 767.98px) {
  html body { font-size: 16px; }
  html body .btn { width: auto; }
  html body main :is(p, li) { line-height: 1.6; }
  html body .page-hero.ec-phero .ec-phero__inner { padding-block: 1.1rem 1.2rem !important; }
}

/* Report and project cards as on DevCheck (2026-11-11, owner: « inspire
   toi à 100 % de DevCheck »): a navy strip on top, a coloured banner with
   the title in white (no photo needed), a white footer with the facts in
   condensed capitals. Same markup (js/reports-list.js, js/projects-list.js). */
html body :is(.grl-card, .gpl-card) { border: 0 !important; border-radius: 6px !important; background: #fff !important; box-shadow: 0 2px 10px rgba(40, 39, 63, .14) !important; overflow: hidden; }
html body :is(.grl-card, .gpl-card)::before { display: none !important; }
html body :is(.grl-card, .gpl-card) > a { display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important; color: inherit !important; text-decoration: none !important; height: 100%; }
html body :is(.grl-card__top, .gpl-card__top) { display: flex !important; align-items: center; gap: .55rem; margin: 0 !important; padding: .6rem .9rem !important; background: #2c2b40 !important; color: #fff !important; font-family: "Barlow Semi Condensed", var(--g2-font) !important; font-weight: 800; font-size: .875rem !important; letter-spacing: .06em; text-transform: uppercase; }
html body :is(.grl-card__icon, .gpl-card__icon) { display: inline-grid !important; place-items: center; flex: none; width: 30px !important; height: 30px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
/* The sector is shown in full, on two lines when needed (2026-11-12, owner); every header keeps the height of two lines so the cards of a row stay level. */
html body :is(.grl-card__cat, .gpl-card__sector) { overflow: visible; color: #fff !important; line-height: 1.2; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
html body :is(.grl-card__top, .gpl-card__top) { min-height: calc(2.4em + 1.2rem); }
html body .gpl-card__top .gpl-status { margin-left: auto; padding: .15rem .55rem !important; border-radius: 3px !important; background: var(--g2-yellow) !important; color: var(--g2-navy) !important; font-size: .875rem !important; }
html body .grl-card__top .grl-card__urgent, html body .grl-card__top [class*="urgent"] { margin-left: auto; padding: .15rem .5rem; border-radius: 3px; background: var(--g2-red) !important; color: #fff !important; }
/* The banner: title in white over the colour. */
html body :is(.grl-card__text, .gpl-card__title) { display: -webkit-box !important; margin: 0 !important; padding: 1.1rem .95rem .3rem !important; overflow: hidden; background: linear-gradient(135deg, var(--g2-blue) 0%, #2b2a45 70%, var(--g2-navy) 100%); color: #fff !important; font-family: var(--g2-title) !important; font-size: 1.08rem !important; font-weight: 700 !important; line-height: 1.32 !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
html body :is(.grl-card__where, .gpl-card__place) { display: block !important; margin: 0 !important; padding: .1rem .95rem 1rem !important; background: linear-gradient(135deg, #2b2a45 0%, var(--g2-navy) 100%); color: #edeade !important; font-size: .875rem !important; }
html body :is(.grl-card__where, .gpl-card__place) svg { color: var(--g2-yellow) !important; }
html body :is(.grl-card__where, .gpl-card__place) span { color: #edeade !important; }
html body .gpl-card :is(.gpl-card__title, .gpl-card__place) { background: linear-gradient(135deg, color-mix(in srgb, var(--sc, #3b3a5e) 85%, #000) 0%, var(--g2-navy) 100%) !important; }
/* Footer: the facts. */
html body .grl-card .grl-steps { margin: .8rem .95rem .2rem !important; }
html body :is(.grl-card__foot, .gpl-card__foot) { display: flex !important; justify-content: space-between; gap: .6rem; margin: auto 0 0 !important; padding: .6rem .95rem .75rem !important; border-top: 1px solid var(--g2-line) !important; color: var(--g2-muted) !important; font-family: "Barlow Semi Condensed", var(--g2-font) !important; font-weight: 800; font-size: .875rem !important; letter-spacing: .06em; text-transform: uppercase; }
html body .gpl-card__money { display: block; margin: .8rem .95rem .2rem !important; color: var(--g2-navy) !important; font-family: "Barlow Semi Condensed", var(--g2-font) !important; font-weight: 800; font-size: .95rem !important; letter-spacing: .04em; text-transform: uppercase; }
html body .gpl-card__money--none { color: var(--g2-muted) !important; font-style: normal !important; }
html body .gpl-card__foot .is-late { color: var(--g2-red) !important; }
html body :is(.grl-card, .gpl-card):hover { box-shadow: 0 6px 20px rgba(40, 39, 63, .22) !important; }
html body :is(.grl-card, .gpl-card) > a:focus-visible { outline: 3px solid var(--g2-yellow); outline-offset: -3px; }
html body li.grl-card { padding: 0 !important; }
html body :is(.gpl__search, .grl__search, .ec-dock__search, .gic__search) input { padding-left: 2.6rem !important; }

/* Phones: the top bar as on DevCheck (navy, white name, yellow menu) and a
   floating « Carte » button on the lists (2026-11-11, owner). */
@media (max-width: 767.98px) {
  html.m-shell header.header { background: var(--g2-navy) !important; box-shadow: none !important; }
  html.m-shell header.header :is(.msh-title, .logo__name, .msh-back) { color: #fff !important; }
  html.m-shell header.header .ec-logo__accent { color: #abd7e3 !important; }
  html.m-shell header.header .logo__tag, html.m-shell header.header .ec-dock__tag { color: #b9d9e2 !important; }
  html.m-shell header.header .nav-handler { color: var(--g2-yellow) !important; }
  html.m-shell header.header .nav-handler :is(span, i, svg, .nav-handler__bar) { background-color: var(--g2-yellow) !important; color: var(--g2-yellow) !important; }
  html.m-shell header.header .lang-menu__toggle { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
  .msh-mapfab { position: fixed; z-index: 150; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; background: #fff; color: var(--g2-navy) !important; box-shadow: 0 4px 16px rgba(40, 39, 63, .28); font-family: "Barlow Semi Condensed", var(--g2-font); font-weight: 800; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; transform: translateX(-50%); }
  .msh-mapfab svg { color: var(--g2-blue); }
}

/* The request form (« Signaler / Demander un service ») made easy
   (2026-11-11, owner): named steps on a progress line, short intro, topics
   as big cards, the buttons always at hand on phones. */
html body .gc-member-form__intro { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: .8rem 1rem !important; border-left-width: 4px !important; border-radius: 0 12px 12px 0; font-size: .98rem; }
html body .srw-progress { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 !important; margin: 0 0 1.1rem !important; padding: 0 !important; list-style: none; counter-reset: none; }
html body .srw-progress li { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; padding: 0 .2rem !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: center; }
html body .srw-progress li::before { content: ""; position: absolute; z-index: 0; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--g2-line); }
html body .srw-progress li:first-child::before { display: none; }
html body .srw-progress li.is-done::before, html body .srw-progress li.is-current::before { background: var(--g2-green); }
html body .srw-progress li b { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--g2-line); background: #fff; color: var(--g2-muted); font-size: .95rem; font-weight: 900; }
html body .srw-progress li.is-current b { border-color: var(--g2-blue); background: var(--g2-blue); color: #fff; box-shadow: 0 0 0 5px rgba(59, 58, 94, .18); }
html body .srw-progress li.is-done b { border-color: var(--g2-green); background: var(--g2-green); color: #fff; }
html body .srw-progress li span { display: block !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: hidden; max-width: 100%; color: var(--g2-muted); font-size: .875rem; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
html body .srw-progress li.is-current span { color: var(--g2-navy); font-weight: 900; }
/* Topics as big cards. */
html body fieldset.sr-categories { border: 0 !important; padding: 0 !important; }
html body fieldset.sr-categories .fieldset-wrapper, html body fieldset.sr-categories > div:not(.form-item):not(legend) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
html body fieldset.sr-categories .form-type-radio { position: relative; margin: 0 !important; }
html body fieldset.sr-categories .form-type-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
html body fieldset.sr-categories .form-type-radio label { display: flex !important; align-items: center; min-height: 58px; height: 100%; padding: .7rem 1rem .7rem 2.8rem !important; border: 2px solid var(--g2-line); border-radius: 14px; background: #fff; color: var(--g2-ink) !important; font-weight: 700 !important; line-height: 1.3; cursor: pointer; transition: border-color .12s, background .12s; }
html body fieldset.sr-categories .form-type-radio label::before { content: ""; position: absolute; left: 1rem; top: 50%; width: 18px; height: 18px; border: 2px solid #a09fc5; border-radius: 50%; background: #fff; transform: translateY(-50%); }
html body fieldset.sr-categories .form-type-radio input:checked + label { border-color: var(--g2-blue); background: var(--g2-sky-50); }
html body fieldset.sr-categories .form-type-radio input:checked + label::before { border-color: var(--g2-blue); background: var(--g2-blue); box-shadow: inset 0 0 0 3px #fff; }
html body fieldset.sr-categories .form-type-radio input:focus-visible + label { outline: 3px solid var(--g2-yellow); }
html body .srw-nav { display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: .6rem; }
@media (max-width: 767.98px) {
  html body ol.sr-how { display: none !important; }
  html body .srw-progress li span { display: none !important; }
  html body .srw-progress li.is-current span { display: block !important; position: absolute !important; top: 44px; left: 50%; width: max-content !important; max-width: 60vw; transform: translateX(-50%); font-size: .875rem; }
  html body .srw-progress { margin-bottom: 2.2rem !important; }
  html body fieldset.sr-categories .fieldset-wrapper, html body fieldset.sr-categories > div:not(.form-item):not(legend) { grid-template-columns: 1fr; }
  html body .srw-nav { position: sticky; z-index: 30; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); margin: 1rem -1rem 0 !important; padding: .7rem 1rem !important; background: rgba(255, 255, 255, .96); box-shadow: 0 -6px 18px rgba(40, 39, 63, .12); }
  html body .srw-nav .btn { flex: 1 1 auto; }
}
html body p.gc-member-form__intro { display: block !important; max-height: calc(2 * 1.55em + 1.6rem); overflow: hidden !important; line-height: 1.55 !important; }

/* No hidden text (2026-11-11, owner: « texte caché » on the request page):
   the introduction in full, and button labels always readable. */
html body p.gc-member-form__intro { display: block !important; max-height: none !important; overflow: visible !important; -webkit-line-clamp: unset !important; font-size: .95rem; }
html body .btn:not(.btn-outline):not(.btn--ghost):not(.btn-secondary):not(.gc-srh__cta):not(.ob-pj__primary):not(.nav-cta):not(.svp-btn--primary):not(.sra__wa):not([class*="whatsapp"]):not([class*="--wa"]) { color: #fff !important; }
html body .btn:not(.btn-outline) :is(svg, .fa-icon) { color: currentColor !important; fill: currentColor; }
html body :is(.gc-srh__cta, .ob-pj__primary, .nav-cta, .svp-btn--primary), html body .srh__actions .btn:first-child { color: #2c2b47 !important; }

/* Project cards with the project's picture, two columns (2026-11-11, owner). */
html body .dv .gpl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .9rem !important; }
html body .gpl-card__img { position: relative; display: flex !important; flex-direction: column; justify-content: flex-end; min-height: 200px; background: #3b3a5e center / cover no-repeat; }
html body .gpl-card__img.is-drawing { background-position: center top; }
html body .gpl-card__img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44, 43, 71, 0) 25%, rgba(44, 43, 71, .55) 55%, rgba(44, 43, 71, .94) 100%); }
html body .gpl-card .gpl-card__img :is(.gpl-card__title, .gpl-card__place) { position: relative; z-index: 1; background: none !important; }
html body .gpl-card .gpl-card__img .gpl-card__title { padding: .8rem .95rem .25rem !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
html body .gpl-card .gpl-card__img .gpl-card__place { padding: 0 .95rem .85rem !important; }
@media (max-width: 767.98px) { html body .gpl-card__img { min-height: 170px; } }

/* Maps: territory names, town names, the layer switch; legend and credits readable. */
.dv-terr span { display: inline-block; color: #3b3a5e; font: 800 12px/1 "Barlow", sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; transform: translate(-50%, -50%); pointer-events: none; }
.leaflet-tooltip.dv-town { padding: 0; border: 0; background: none; box-shadow: none; color: #2c2b47; font: 800 13px/1 "Barlow", sans-serif; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; }
.leaflet-tooltip.dv-town::before { display: none; }
.leaflet-tooltip.dv-tip { font: 700 13px "Barlow", sans-serif; }
.dv .leaflet-control-layers { border: 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(44, 43, 71, .25); font: 600 14px "Barlow", sans-serif; }
html body .gc-map :is(.hc-map__legend li, .hc-map__panel p, .hc-map__credit, .hc-map__credit a, .hc-map__scale li, .hc-map__head span) { font-size: .875rem !important; }
/* Neighbours stay visible on the drawn maps too. */
html body .gc-map .hc-map__mask { display: none !important; }
html body .gc-map.is-only .hc-map__prov.is-faded { display: inline !important; opacity: .45; }

/* Rounded cards; readable titles on any picture; no stray margin. */
html body :is(.grl-card, .gpl-card) { border-radius: 18px !important; }
html body .dv .grl-card, html body .dv .grl-card > a { padding: 0 !important; }
html body .gpl-card__img::before { background: linear-gradient(180deg, rgba(44, 43, 71, .05) 0%, rgba(44, 43, 71, .5) 42%, rgba(44, 43, 71, .96) 100%) !important; }
html body .gpl-card__img.is-drawing::before { background: linear-gradient(180deg, rgba(44, 43, 71, .25) 0%, rgba(44, 43, 71, .78) 45%, rgba(44, 43, 71, .97) 100%) !important; }

/* One header design for every page (2026-11-11, owner: « all heroes are not
   well designed »): cream, two soft brand shapes, a large navy title, pill
   buttons, white figure cards, the five-colour CERC line underneath. */
html body :is(.page-hero.ec-phero, .mc2-hero, .ob-pj__hero, .sr-pub__hero):not(#_) {
  position: relative; min-height: 0 !important; overflow: hidden; color: #414141 !important;
  background: radial-gradient(circle at 97% -60px, rgba(236, 163, 39, .38) 0 190px, transparent 191px), radial-gradient(circle at calc(100% + 40px) 78%, rgba(79, 170, 198, .28) 0 130px, transparent 131px), #efede5 !important;
}
html body :is(.page-hero.ec-phero, .mc2-hero, .ob-pj__hero, .sr-pub__hero):not(#_)::after {
  content: "" !important; position: absolute !important; inset: auto 0 0 0 !important; display: block !important; height: 6px !important;
  background: linear-gradient(90deg, #eca327 0 20%, #ee7b42 20% 40%, #4faac6 40% 60%, #5ab78d 60% 80%, #c671ba 80%) !important;
}
html body :is(.page-hero, .mc2-hero, .ob-pj__hero, .sr-pub__hero):not(#_) :is(.ob-xhero__bg, .mc2-hero__bg, .ob-pj__media) { display: none !important; }
html body :is(.page-hero.ec-phero, .mc2-hero, .ob-pj__hero, .sr-pub__hero):not(#_) :is(h1, .ec-phero__title, .mc2-hero__name, .ob-pj__title) {
  color: #3b3a5e !important; font-family: var(--g2-title) !important; font-weight: 700 !important; font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important; line-height: 1.08 !important; text-shadow: none !important;
}
html body :is(.page-hero.ec-phero, .ob-pj__hero, .sr-pub__hero):not(#_) > .container, html body .page-hero.ec-phero:not(#_) .ec-phero__inner { padding-block: 1.8rem 2rem !important; }
/* Plain page headers. */
html body .page-hero.ec-phero:not(#_) :is(p, .ec-phero__lead, dd, dt, li) { color: #414141 !important; }
html body .page-hero.ec-phero:not(#_) .ec-phero__kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 0 !important; border-radius: 2.25rem; background: #fff !important; color: #3b3a5e !important; }
html body .page-hero.ec-phero:not(#_) :is(.ec-phero__figures, .ec-phero__figure) { border: 0 !important; background: #fff !important; color: #3b3a5e !important; box-shadow: var(--g2-shadow); }
html body .page-hero.ec-phero:not(#_) :is(.ec-phero__figure, .ec-phero__figures) :is(dt, dd, strong, b, span) { color: #3b3a5e !important; }
/* Entity and service headers. */
html body .mc2-hero:not(#_) .mc2-hero__intro, html body .mc2-hero:not(#_) .mc2-hero__intro :is(h1, p, li, strong, b, em, dt, dd, small):not(.btn) { color: #3b3a5e !important; }
html body .mc2-hero:not(#_) :is(.mc2-facts li, .mv-tile, .mc2-res__kpis > div) { border-color: transparent !important; background: #fff !important; box-shadow: var(--g2-shadow); }
html body .mc2-hero:not(#_) .mc2-res { border: 0 !important; background: #fff !important; box-shadow: 0 1px 2px rgba(59, 58, 94, .08), 0 16px 40px -18px rgba(59, 58, 94, .45) !important; }
html body .mc2-hero:not(#_) :is(.btn-outline, .svp-btn--ghost, .mv-cta__ghost) { border-color: #3b3a5e !important; background: #fff !important; color: #3b3a5e !important; }
/* Report and project headers: light, the AI panel as a navy card. */
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .srh__main :is(p, span, li, a, small, strong) { color: #3b3a5e; }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .ob-pj__kicker { color: #6b6b75 !important; }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .ob-pj__summary { border-color: #eca327 !important; background: #fff !important; color: #414141 !important; }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .ob-pj__summary a { color: #3b3a5e !important; }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) :is(.ob-pj__back, .srh__ref) { border-color: #3b3a5e !important; background: #fff !important; color: #3b3a5e !important; }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .srh__bar { background: #d9d6ca !important; }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .srh__track li { color: #3b3a5e !important; }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .srh__actions .btn-outline { border-color: #3b3a5e !important; background: #fff !important; color: #3b3a5e !important; }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .srh__panel { border: 0 !important; background: #3b3a5e !important; color: #fff !important; box-shadow: 0 16px 40px -18px rgba(59, 58, 94, .7); }
html body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .srh__panel :is(p, span, b, li, small) { color: #fff; }

/* Body text one step thicker (2026-11-11, owner: « body text est trop
   mince »): Barlow Medium (OFL), bold stays bold. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow/barlow-500-latin.woff2") format("woff2"); }
html body { font-weight: 500; color: #414141; }
html body :is(p, li, dd, td, label, input, select, textarea, small, span, a, button) { font-weight: inherit; }
html body :is(strong, b, th, h4, dt, .btn, button.btn, label, legend, summary) { font-weight: 700; }

/* Weather cards of the three zones (Uvira, Fizi, Kalemie), redesigned
   (2026-11-11, owner: « not well designed »): one card per zone with a
   coloured head (zone and vigilance level), the temperature large, three
   facts as tiles, the 16-day rain as a clean bar chart with its scale. */
html body .cwz { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem !important; margin: 0 0 1.2rem !important; }
html body .cwz__card { display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important; overflow: hidden; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(59, 58, 94, .08), 0 14px 34px -18px rgba(59, 58, 94, .45) !important; }
html body .cwz__card > header { display: flex !important; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 !important; padding: .85rem 1.1rem !important; background: #3b3a5e; color: #fff; }
html body .cwz__card > header h3 { margin: 0 !important; color: #fff !important; font-size: 1.45rem !important; line-height: 1.1; }
html body .cwz__lvl { flex: none; padding: .3rem .75rem !important; border-radius: 2.25rem !important; background: #5ab78d !important; color: #1d3a2c !important; font-size: .875rem !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; }
html body .cwz--1 > header { background: #b07a12; } html body .cwz--1 .cwz__lvl { background: #eca327 !important; color: #2c2b47 !important; }
html body .cwz--2 > header { background: #b8470f; } html body .cwz--2 .cwz__lvl { background: #ee7b42 !important; color: #2c2b47 !important; }
html body .cwz--3 > header { background: #8e2d08; } html body .cwz--3 .cwz__lvl { background: #fff !important; color: #8e2d08 !important; }
html body .cwz__now { display: flex !important; align-items: center; gap: .9rem; margin: 0 !important; padding: 1rem 1.1rem .8rem !important; }
html body .cwz__now strong { color: #3b3a5e !important; font-family: var(--g2-title) !important; font-size: 3.4rem !important; line-height: 1 !important; }
html body .cwz__now span { display: grid; gap: .15rem; color: #3b3a5e !important; font-size: 1.1rem !important; font-weight: 700 !important; }
html body .cwz__now small { color: #6b6b75 !important; font-size: .9rem !important; font-weight: 500 !important; }
html body .cwz__facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem !important; margin: 0 !important; padding: 0 1.1rem 1rem !important; }
html body .cwz__facts > div { display: grid; gap: .15rem; padding: .6rem .7rem !important; border: 0 !important; border-radius: 14px !important; background: #f6f6f4 !important; }
html body .cwz__facts dt { color: #6b6b75 !important; font-size: .875rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body .cwz__facts dd { margin: 0 !important; color: #3b3a5e !important; font-size: 1.12rem !important; font-weight: 800 !important; line-height: 1.2; }
html body .cwz__facts dd small { color: #6b6b75 !important; font-size: .875rem !important; font-weight: 600 !important; }
html body .cwz__facts .is-storm { background: #fdeee6 !important; }
html body .cwz__facts .is-storm :is(dt, dd) { color: #b8470f !important; }
html body .cwz__h { display: flex; align-items: center; justify-content: space-between; margin: 0 !important; padding: .7rem 1.1rem .4rem !important; border-top: 1px solid #ebe8de; color: #3b3a5e !important; font-size: .95rem !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body .cwz__h::after { content: "mm / jour"; color: #6b6b75; font-size: .875rem; font-weight: 600; }
html body .cwz__bars { display: flex !important; align-items: flex-end; gap: 4px !important; height: 92px !important; margin: 0 1.1rem 1.1rem !important; padding: 6px 6px 0 !important; border-radius: 12px; background: linear-gradient(#f6f6f4, #f6f6f4) padding-box, repeating-linear-gradient(180deg, transparent 0 22px, #e3e0d6 22px 23px) !important; background-color: #f6f6f4 !important; }
html body .cwz__bars i { flex: 1 1 0; min-height: 4px; border-radius: 5px 5px 0 0 !important; background: #4faac6 !important; }
html body .cwz__bars i.cw-l1 { background: #eca327 !important; }
html body .cwz__bars i.cw-l2 { background: #ee7b42 !important; }
html body .cwz__bars i.cw-l3 { background: #b8470f !important; }
html body .cwz__bars i:first-child { box-shadow: inset 0 0 0 2px #3b3a5e; }
@media (max-width: 1100px) { html body .cwz { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
  html body .cwz { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1rem !important; padding: 0 1rem .4rem; scrollbar-width: none; }
  html body .cwz__card { flex: 0 0 86%; scroll-snap-align: center; }
  html body .cwz__now strong { font-size: 2.8rem !important; }
}

/* Weather cards in a narrow column: the level under the name if needed,
   the facts as rows. */
html body .cwz__card > header { flex-wrap: wrap; }
html body .cwz__lvl { white-space: normal; }
html body .cwz__facts { grid-template-columns: 1fr !important; gap: .35rem !important; }
html body .cwz__facts > div { display: flex !important; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .5rem .8rem !important; }
html body .cwz__facts dd { text-align: right; white-space: nowrap; }

/* Projects without a map: the list on the full width, two columns of
   picture cards (owner). */
html body .gpl { max-width: 1240px; margin-inline: auto; }
html body .gpl .gpl__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.1rem !important; }
html body .gpl .gpl-card__img { min-height: 250px; }
html body .gpl .gpl-card__title { font-size: 1.25rem !important; }
@media (max-width: 767.98px) { html body .gpl .gpl__grid { grid-template-columns: 1fr !important; } html body .gpl .gpl-card__img { min-height: 190px; } }

/* Reports and projects: one page, two tabs (2026-11-11, owner). */
.gtab { display: flex; gap: .4rem; width: min(1240px, 100% - 2rem); margin: 1.2rem auto 1rem; padding: .35rem; border-radius: 2.25rem; background: #fff; box-shadow: var(--g2-shadow); }
.gtab > * { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: 0 1rem; border: 0; border-radius: 2.25rem; background: none; color: #3b3a5e !important; font: 800 1.08rem "Barlow", sans-serif; text-decoration: none !important; cursor: pointer; }
.gtab > *:hover { background: #efede5; }
.gtab > [aria-selected="true"] { background: #3b3a5e; color: #fff !important; }
.gtab b { padding: .1rem .55rem; border-radius: 2.25rem; background: #eca327; color: #2c2b47; font-size: .9rem; }
.gtab b:empty { display: none; }
html body #obp-list.gtab__panel[hidden], html body .sr-pub-page[hidden] { display: none !important; }
.gtab__panel { width: min(1240px, 100% - 2rem); margin-inline: auto; }
.gtab__wait { padding: 3rem 1rem; color: #6b6b75; text-align: center; font-size: 1.1rem; }
/* Reports without a map: the cards only, two columns. */
html body .grl { max-width: 1240px; margin-inline: auto; }
html body .grl :is(.grl__top, .grl__bar) { display: none !important; }
html body .grl .grl__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.1rem !important; }
html body .grl .grl-card__text { min-height: 5.6rem; font-size: 1.15rem !important; }
@media (max-width: 767.98px) { html body .grl .grl__grid { grid-template-columns: 1fr !important; } .gtab > * { min-height: 46px; font-size: .98rem; } }
/* The three request tabs are readable on the light header (owner: « some
   buttons do not show »). */
html body .sr-tabs.sr-tabs--hero { background: #fff !important; box-shadow: var(--g2-shadow) !important; }
html body .sr-tabs--hero a { color: #3b3a5e !important; }
html body .sr-tabs--hero a:hover { background: #efede5 !important; }
html body .sr-tabs--hero a:is(.is-active, [aria-current]) { background: #3b3a5e !important; color: #fff !important; }
html body .page-hero .gc-srh__row h1, html body.grl-slim .page-hero h1, html.grl-slim body .page-hero .region-breadcrumb h1 { color: #3b3a5e !important; }

/* Entity header, simple and readable (2026-11-11, owner): the name, who is
   in charge, three actions, four plain figures. */
html body .mc2-hero:not(#_) .mc2-hero__inner { padding-block: 1.6rem 1.9rem !important; gap: 1.6rem 2rem !important; align-items: start !important; }
html body .mc2-hero:not(#_) .mc3__top { margin-bottom: .9rem !important; }
html body .mc2-hero:not(#_) .mc3__leader { margin: .5rem 0 1rem !important; font-size: 1.1rem !important; }
html body .mc2-hero:not(#_) .mc3__leader * { font-size: inherit !important; letter-spacing: 0 !important; text-transform: none !important; }
html body .mc2-hero:not(#_) .mv-cta { gap: .6rem !important; margin-bottom: 1.1rem !important; }
html body .mc2-hero:not(#_) .mv-cta > :is(a, button) { min-height: 50px; padding-inline: 1.3rem !important; border-radius: 2.25rem !important; font-size: 1rem !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; }
html body .mc2-hero:not(#_) .mv-cta__primary { background: #eca327 !important; border-color: #eca327 !important; color: #2c2b47 !important; }
html body .mc2-hero:not(#_) .mv-tiles { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem !important; }
html body .mc2-hero:not(#_) .mv-tile { display: flex !important; flex-direction: column-reverse; justify-content: flex-end; gap: .15rem; padding: .8rem .9rem !important; border-radius: 16px !important; border-left: 0 !important; }
html body .mc2-hero:not(#_) .mv-tile dd { margin: 0 !important; color: #3b3a5e !important; font-size: 1.9rem !important; font-weight: 800 !important; line-height: 1.1 !important; }
html body .mc2-hero:not(#_) .mv-tile dt { color: #6b6b75 !important; font-size: .95rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.25 !important; }
html body .mc2-hero:not(#_) .mv-tile .mv-ring { display: none !important; }
html body .mc2-hero:not(#_) .gc-wa--line { display: none !important; }
html body .mc2-hero:not(#_) .mc3__children a { min-height: 40px; border: 0 !important; background: #fff !important; font-size: .95rem !important; }
html body .mc2-hero:not(#_) .mc2-res :is(li, span, a, p) { font-size: 1rem; }
@media (max-width: 767.98px) { html body .mc2-hero:not(#_) .mv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body .mc2-hero:not(#_) .mv-tile dd { font-size: 1.6rem !important; } }
/* Entity header: no blurred photo behind the text; the share icon visible. */
html body .mc2-hero:not(#_)::before, html body .mc2-hero:not(#_) > :is(picture, img, .mc2-hero__photo, .mv-hero__bg) { display: none !important; }
html body .mc2-hero:not(#_) { background-image: radial-gradient(circle at 97% -60px, rgba(236, 163, 39, .38) 0 190px, transparent 191px), radial-gradient(circle at calc(100% + 40px) 78%, rgba(79, 170, 198, .28) 0 130px, transparent 131px) !important; background-color: #efede5 !important; }
html body .mc2-hero:not(#_) .mv-cta > :is(a, button):not(.mv-cta__primary):not(.mv-cta__wa) { border: 2px solid #3b3a5e !important; background: #fff !important; color: #3b3a5e !important; }
html body .mc2-hero:not(#_) .mv-cta :is(svg, .fa-icon) { color: currentColor !important; fill: currentColor !important; }

/* Two pages as one page with two tabs (js/tabpage.js): climate resilience
   and rain alerts (2026-11-11, owner). */
main.gtab-b > :not(.gtab):not(.gtab__ext) { display: none !important; }
main:not(.gtab-b) > .gtab__ext { display: none; }
.gtab--page { margin-top: 1rem; }
/* One menu entry for the pair. */
html body .ec-dock__list li:has(> a[href$="/alertes-climat"]) { display: none !important; }
/* Budget transparency is one page of its own (owner): no « Projets |
   Transparence budgétaire » switch (the projects are in « Suivi citoyen »). */
html body nav.sr-tabs:has(a[href$="/projets"]) { display: none !important; }

/* Text size (2026-11-11, owner: after trying cerc.cd's sizes, « reapply
   your font size but a little bigger »): GovCheck's own scale, one step up:
   every rem-based size 6 % larger on computers (17 px base), running text
   18 px on a 1.55 line; phones 16.5 px. The agents' inbox keeps 16 px. */
@media (min-width: 768px) { html { font-size: 106.25%; } html.gsc-takeover { font-size: 100%; } }
html body { font-size: 18px !important; line-height: 1.55; }
html.gsc-takeover body { font-size: 16px !important; line-height: 1.4; }
html body :is(.page-hero.ec-phero, .mc2-hero, .ob-pj__hero, .sr-pub__hero):not(#_) :is(h1, .ec-phero__title, .mc2-hero__name, .ob-pj__title) { font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.08 !important; }
@media (max-width: 767.98px) { html body { font-size: 16.5px !important; } }

/* Text on the navy bands is light (owner: the partners text did not show). */
.hub .hub-partners p { color: #e9e8f1 !important; }

/* Entity headers with few buttons (2026-11-11, owner: « I see many
   buttons »): the entity list without « Voir », one main action, WhatsApp,
   « Suivre ma demande » as a plain link; no share button, no second row of
   buttons on the Province; the communes as quiet links. */
html body .mc2-hero:not(#_) .ent-select__row .btn { display: none !important; }
html body .mc2-hero:not(#_) .ent-select__row select { min-width: 16rem; border-radius: 2.25rem !important; font-weight: 700; }
html body .mc2-hero:not(#_) :is(.ent-select, .ent-select__row, .mc3__top form) { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
html body .mc2-hero:not(#_) .mv-cta__share, html body .mc2-hero:not(#_) .prov-hero__actions { display: none !important; }
html body .mc2-hero:not(#_) .mv-cta > a.mv-cta__ghost { min-height: 0 !important; padding: 0 .4rem !important; border: 0 !important; background: none !important; color: #2b6f84 !important; text-decoration: underline !important; text-underline-offset: .2em; }
html body .mc2-hero:not(#_) .mv-cta { align-items: center; }
html body .mc2-hero:not(#_) .mc3__children { margin-top: .9rem; }
html body .mc2-hero:not(#_) .mc3__children a { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: #2b6f84 !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: .2em; }
html body .mc2-hero:not(#_) .mc3__children :is(svg, .fa-icon) { display: none !important; }
html body .mc2-hero:not(#_) .mc3__children ul { gap: .3rem 1.2rem !important; }

/* The language as a menu entry. */
@media (min-width: 992px) {
  html body .ec-dock__langli { position: relative; }
  html body .ec-dock .ec-dock__langli .ec-dock__lang { display: flex; flex: 1; margin: 1px 0 !important; width: auto !important; }
  html body .ec-dock .ec-dock__langli .lang-menu__toggle { display: flex !important; flex: 1; align-items: center; justify-content: flex-start !important; gap: .85rem !important; width: 100% !important; min-height: 0 !important; height: auto; padding: 0 0 0 17px !important; border: 0 !important; border-radius: 12px !important; background: none !important; color: #6b6b75 !important; overflow: hidden; }
  html body .ec-dock .ec-dock__langli .lang-menu__toggle:hover { background: #f1f1f5 !important; }
  html body .ec-dock .ec-dock__langli .lang-menu__toggle svg:first-child { flex: none; width: 22px; height: 22px; }
  html body .ec-dock .ec-dock__langli .lang-menu__code, html body .ec-dock .ec-dock__langli .lang-menu__toggle svg:not(:first-child) { display: none !important; }
  html body .ec-dock .ec-dock__langli .lang-menu__list { position: fixed !important; z-index: 200; left: calc(var(--dock-w) + .6rem) !important; right: auto !important; top: auto !important; bottom: 5.5rem !important; min-width: 200px; }
  html body .ec-dock:is(:hover, :focus-within) .ec-dock__langli .lang-menu__list { left: 280px !important; }
}

/* « Près de chez vous »: the problem in the resident's words, two lines. */
.hub-near__feed strong, .hub-solved strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 700; }
/* No « Projets » entry in the menus: the projects are a tab of « Suivi
   citoyen » (2026-11-11, owner). */
html body .ec-dock__list li:has(> a[href$="/projets"]) { display: none !important; }
/* Province header: its one main action stays; « Suivre ma demande » is a plain link. */
html body .mc2-hero:not(#_) .prov-hero__actions { display: flex !important; margin: .9rem 0 0 !important; }
html body .mc2-hero:not(#_) .prov-hero__actions .btn-outline { display: none !important; }
html body .mc2-hero:not(#_) .prov-hero__actions .prov-hero__primary { background: #eca327 !important; border-color: #eca327 !important; color: #2c2b47 !important; }
html body .mc2-hero:not(#_) .mv-cta > a.mv-cta__ghost:not(#_) { border: 0 !important; box-shadow: none !important; outline: 0; }

/* « Près de chez vous »: the whole problem, one at a time, with its level. */
.hub-near__feed { position: relative; display: block !important; min-height: 11.5rem; }
.hub-near__feed .hub-slide { display: none; border: 0 !important; animation: hub-in .35s ease; }
.hub-near__feed .hub-slide.is-on { display: block; }
@keyframes hub-in { from { opacity: 0; transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .hub-near__feed .hub-slide { animation: none; } }
.hub-near__feed .hub-slide a { gap: .4rem; padding: .2rem 0 .4rem; }
.hub-near__feed .hub-slide strong { display: block !important; max-height: 9.4em; overflow-y: auto; -webkit-line-clamp: unset !important; font-size: 1.02rem; font-weight: 600; line-height: 1.45; }
.hub-lv { justify-self: start; padding: .15rem .7rem; border-radius: 2.25rem; font-style: normal; font-weight: 800; font-size: .82rem; }
.hub-lv--hot { background: #b8470f; color: #fff; }
.hub-lv--mid { background: #eca327; color: #2c2b47; }
.hub-lv--ok { background: #5ab78d; color: #173526; }
.hub-near__nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0 0 .7rem; color: #6b6b75; font-weight: 700; font-size: .9rem; }
.hub-near__nav[hidden] { display: none; }
.hub-near__nav button { width: 40px; height: 40px; border: 2px solid #3b3a5e; border-radius: 50%; background: #fff; color: #3b3a5e; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.hub-near__nav button:hover { background: #efede5; }

/* Home title on two lines (2026-11-11, owner): the question, then the call. */
.hub .hub-hero .hub-hero__title:not(#_) { font-size: clamp(1.55rem, 2.75vw, 2.3rem) !important; line-height: 1.15 !important; }
@media (min-width: 900px) { .hub .hub-hero__title b { display: table; margin-top: .15em; white-space: nowrap; } }

/* The zones' weather as one comparison table (2026-11-11, owner). */
.cwt-wrap { margin: 0 0 1.2rem; overflow-x: auto; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(59, 58, 94, .08), 0 14px 34px -18px rgba(59, 58, 94, .45); }
html body main table.cwt { width: 100%; min-width: 0; border: 0; border-radius: 0; border-collapse: collapse; table-layout: fixed; background: none; }
html body main table.cwt :is(th, td) { padding: .65rem .8rem; border: 0; border-bottom: 1px solid #ebe8de; background: none !important; text-align: center; vertical-align: middle; font-size: 1rem; }
html body main table.cwt thead th { padding-block: .85rem; background: #3b3a5e !important; color: #fff; font-family: var(--g2-title); font-size: 1.3rem; font-weight: 700; }
html body main table.cwt thead th:first-child { font-family: var(--g2-font); font-size: .9rem; font-weight: 600; color: #cfcfe0; }
html body main table.cwt tbody th { width: 30%; background: #f6f6f4 !important; color: #3b3a5e; font-size: .95rem; font-weight: 700; text-align: left; }
html body main table.cwt tbody td { color: #3b3a5e; }
html body main table.cwt tbody tr:last-child :is(th, td) { border-bottom: 0; }
.cwt b { font-weight: 800; }
.cwt small { color: #6b6b75; font-size: .875rem; }
.cwt .cwt-temp { font-family: var(--g2-title); font-size: 2rem; line-height: 1; }
.cwt-lv { display: inline-block; padding: .25rem .7rem; border-radius: 2.25rem; background: #5ab78d; color: #173526; font-size: .875rem; font-weight: 800; line-height: 1.25; }
.cwt-lv--1 { background: #eca327; color: #2c2b47; }
.cwt-lv--2 { background: #ee7b42; color: #2c2b47; }
.cwt-lv--3 { background: #b8470f; color: #fff; }
html body main table.cwt td.is-top { background: #fdf3e2 !important; box-shadow: inset 0 -3px 0 #eca327; }
html body main table.cwt td.is-storm { background: #fdeee6 !important; color: #b8470f; font-weight: 800; }
html body .cwt .cwz__bars { height: 64px !important; margin: 0 !important; }
@media (max-width: 767.98px) {
  html body main table.cwt :is(th, td) { padding: .55rem .35rem; font-size: .9rem; }
  html body main table.cwt thead th { font-size: 1.05rem; }
  html body main table.cwt tbody th { width: 27%; font-size: .82rem; }
  .cwt .cwt-temp { font-size: 1.5rem; }
  .cwt-lv { padding: .2rem .4rem; font-size: .75rem; }
  html body .cwt .cwz__bars { height: 48px !important; gap: 1px !important; padding: 3px 2px 0 !important; }
}

/* Home (2026-11-11, owner): no amber line under « Signalez-le en 2
   minutes. »; each figure of « Près de chez vous » on one line. */
.hub .hub-hero__title b { background: none !important; }
.hub .hub-near__figs { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)) !important; }
.hub .hub-near__figs li { display: flex !important; align-items: baseline; gap: .4rem; padding: .55rem .75rem !important; white-space: nowrap; }
.hub .hub-near__figs b { font-size: 1.3rem !important; }
.hub .hub-near__figs span { font-size: .875rem !important; }

/* « Près de chez vous »: each problem as an alert (2026-11-11, owner): a
   tinted box with a thick bar and a sign, by level. */
.hub-near__feed .hub-slide a { gap: .5rem !important; padding: .85rem .95rem .9rem !important; border-left: 7px solid #eca327; border-radius: 6px 16px 16px 6px; background: #fdf3e2; }
.hub-near__feed .hub-slide:has(.hub-lv--hot) a { border-left-color: #b8470f; background: #fdeee6; }
.hub-near__feed .hub-slide:has(.hub-lv--ok) a { border-left-color: #5ab78d; background: #e9f5ef; }
.hub-near__feed .hub-slide strong { color: #2c2b47 !important; }
.hub-near__feed .hub-slide span { color: #414141 !important; font-weight: 600; }
.hub-lv { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .8rem .25rem .6rem !important; font-size: .9rem !important; letter-spacing: .04em; text-transform: uppercase; }
.hub-lv::before { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--lv-icon) center / contain no-repeat; mask: var(--lv-icon) center / contain no-repeat; --lv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E"); }
.hub-lv--hot::before { --lv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm1 15h-2v-2h2zm0-4h-2V9h2z'/%3E%3C/svg%3E"); }
.hub-lv--ok::before { --lv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E"); }
.hub-near__feed .hub-slide:has(.hub-lv--hot) .hub-lv { animation: hub-alert 1.8s ease-in-out infinite; }
@keyframes hub-alert { 50% { box-shadow: 0 0 0 5px rgba(184, 71, 15, .22); } }
@media (prefers-reduced-motion: reduce) { .hub-near__feed .hub-slide:has(.hub-lv--hot) .hub-lv { animation: none; } }

/* The header menu of every page, the language at its right end
   (2026-11-11, owner). Computers; the home page's own row gives way to it. */
.gtop { position: sticky; z-index: 90; top: 0; order: -10; background: rgba(255, 255, 255, .97); border-bottom: 1px solid #e3e0d6; backdrop-filter: blur(6px); }
.gtop__in { display: flex; align-items: center; gap: .2rem; width: min(1240px, 100% - 2rem); min-height: 60px; margin-inline: auto; }
.gtop a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border-radius: 2.25rem; color: #3b3a5e !important; font-weight: 700; font-size: .95rem; text-decoration: none !important; white-space: nowrap; }
.gtop a:hover { background: #efede5; }
.gtop a.is-active { box-shadow: inset 0 -3px 0 #eca327; border-radius: 0; }
.gtop a.gtop__main { margin-right: .4rem; background: #eca327; color: #2c2b47 !important; border-radius: 2.25rem; box-shadow: none; }
.gtop a.gtop__main:hover { background: #d9931d; }
.gtop__lang { position: relative; margin-left: auto; }
html body .gtop .lang-menu__toggle { display: inline-flex !important; align-items: center; gap: .4rem; min-height: 40px !important; padding: 0 .8rem !important; border: 2px solid #3b3a5e !important; border-radius: 2.25rem !important; background: #fff !important; color: #3b3a5e !important; font-weight: 800; font-size: .9rem !important; }
html body .gtop .lang-menu__toggle .ec-dock__short { display: none; }
html body .gtop .lang-menu__list { position: absolute !important; z-index: 200; top: calc(100% + .4rem) !important; right: 0 !important; left: auto !important; bottom: auto !important; min-width: 210px; }
@media (min-width: 992px) { body:has(.gtop) .hub-top { display: none !important; } }
@media (max-width: 1200px) { .gtop a { padding: 0 .55rem; font-size: .88rem; } }

/* Project and report page headers at half their height (2026-11-11, owner): back link and
   sector on one line, a two-line title, the place on one line, status and
   progress on one line, compact buttons and a compact AI panel. */
@media (min-width: 768px) {
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero:not(#_) > .container { padding-block: .9rem 1.1rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh { align-items: start !important; gap: 1.5rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__main { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45rem .9rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__main > * { grid-column: 1 / -1; margin: 0 !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__main > .ob-pj__back { grid-column: 1; min-height: 30px; padding-block: .15rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__main > .ob-pj__kicker { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero:not(#_) .ob-pj__title { display: -webkit-box; overflow: hidden; font-size: clamp(1.35rem, 2.1vw, 1.75rem) !important; line-height: 1.15 !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .ob-pj__summary { overflow: hidden; padding: .3rem .7rem !important; font-size: .9rem !important; text-overflow: ellipsis; white-space: nowrap; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__main > .ob-pj__chips { grid-column: 1; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__main > .srh__track { grid-column: 2; max-width: 30rem; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__track ol { font-size: .875rem; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__actions { margin-top: .2rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__actions .btn { min-height: 40px !important; padding: .3rem 1rem !important; font-size: .92rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__panel { padding: .7rem .8rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__live { margin: 0 0 .4rem !important; font-size: .875rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__ring { display: flex !important; align-items: center; gap: .6rem; margin: 0 0 .5rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__ring b { width: 40px !important; height: 40px !important; font-size: .9rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__sig { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem !important; margin: 0 !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__sig li { padding: .35rem .5rem !important; border-radius: 10px !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__sig li b { font-size: .95rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__sig li span { font-size: .875rem !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.15; }
}

@media (min-width: 768px) {
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero:not(#_) > .container { padding-block: .7rem .9rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__main > .srh__ref { grid-column: 1; justify-self: start; min-height: 0; padding: .2rem .7rem !important; font-size: .875rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__live { display: none !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__rule { margin: 0 0 .4rem !important; padding: .3rem .6rem !important; font-size: .875rem !important; }
  html body .ob-pj__hero.ob-pj__hero.ob-pj__hero .srh__sig li { padding: .25rem .45rem !important; }
}

/* The vigilance alert as a clear card (2026-11-11, owner). */
html body .cw-vig { display: flex !important; align-items: center; gap: 1rem; margin: 0 0 1.1rem !important; padding: 1rem 1.2rem !important; border: 0 !important; border-left: 8px solid #5ab78d !important; border-radius: 8px 20px 20px 8px !important; background: #e9f5ef !important; color: #2c2b47 !important; box-shadow: 0 1px 2px rgba(59, 58, 94, .08); }
html body .cw-vig--1 { border-left-color: #eca327 !important; background: #fdf3e2 !important; }
html body .cw-vig--2 { border-left-color: #ee7b42 !important; background: #fdeee6 !important; }
html body .cw-vig--3 { border-left-color: #b8470f !important; background: #fbe3d6 !important; }
.cw-vig__sign { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #5ab78d; color: #fff; font: 900 1.7rem/1 "Barlow", sans-serif; }
.cw-vig--1 .cw-vig__sign { background: #eca327; color: #2c2b47; }
.cw-vig--2 .cw-vig__sign { background: #ee7b42; color: #2c2b47; }
.cw-vig--3 .cw-vig__sign { background: #b8470f; animation: hub-alert 1.8s ease-in-out infinite; }
.cw-vig__text { display: grid; gap: .25rem; flex: 1; min-width: 0; }
html body .cw-vig .cw-vig__text > strong { color: #2c2b47 !important; font-family: var(--g2-title); font-size: 1.35rem !important; line-height: 1.1; }
html body .cw-vig .cw-vig__text > span { color: #414141 !important; font-size: 1.02rem !important; font-weight: 500; line-height: 1.45; }
.cw-vig__where { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .2rem 0 0 !important; }
.cw-vig__where em { margin-right: .2rem; color: #6b6b75; font-style: normal; font-weight: 700; font-size: .9rem; }
.cw-vig__where b { padding: .15rem .7rem; border-radius: 2.25rem; background: #fff; color: #3b3a5e; font-size: .9rem; font-weight: 800; box-shadow: inset 0 0 0 1.5px #3b3a5e; }
.cw-vig__go { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 2.25rem; background: #3b3a5e; color: #fff !important; font-weight: 800; font-size: .95rem; text-decoration: none !important; white-space: nowrap; }
.cw-vig__go:hover { background: #2c2b47; }
@media (max-width: 767.98px) { html body .cw-vig { flex-wrap: wrap; } .cw-vig__go { flex: 1 1 100%; justify-content: center; } .cw-vig__sign { width: 44px; height: 44px; font-size: 1.4rem; } }

/* Home: everything of the first screen visible without scrolling on a
   laptop (2026-11-11, owner: « see all on first hero »): a tighter hero,
   the eight topics on one row, the follow box on one line, a compact
   « Près de chez vous »; the problem text smaller. */
.hub-near__feed .hub-slide strong { font-size: .9rem !important; line-height: 1.4 !important; max-height: 7em !important; }
@media (min-width: 900px) {
  .hub .hub-hero { padding: .8rem 0 .7rem !important; }
  .hub .hub-hero__in { gap: 1.5rem; }
  .hub .hub-eyebrow { margin-bottom: .4rem; padding: .2rem .7rem; font-size: .82rem; }
  .hub .hub-hero .hub-hero__title:not(#_) { margin-bottom: .35rem !important; font-size: clamp(1.4rem, 2.35vw, 1.95rem) !important; }
  .hub .hub-hero__lead { margin-bottom: .55rem; font-size: .97rem; line-height: 1.4; }
  .hub .hub-start__q { margin-bottom: .3rem; font-size: .95rem; }
  .hub .hub-topics { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; max-width: none; margin-bottom: .6rem; }
  .hub .hub-topics a { padding: .45rem .1rem .4rem; border-radius: 12px; font-size: .82rem; }
  .hub .hub-topics svg { width: 1.1rem; height: 1.1rem; }
  .hub .hub-start__go { margin-bottom: .6rem; }
  .hub .hub-hero .hub-cta { min-height: 46px; padding: 0 1.2rem; font-size: 1rem; }
  .hub .hub-track { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; max-width: none; padding: .5rem .8rem; }
  .hub .hub-track label { flex: none; margin: 0; font-size: .9rem; }
  .hub .hub-track__row { flex: 1 1 14rem; }
  .hub .hub-track input, .hub .hub-track button { min-height: 40px; }
  .hub .hub-track__last { flex: 1 1 100%; margin: 0; font-size: .9rem; }
  .hub .hub-near { padding: .8rem 1rem .85rem; }
  .hub .hub-near__head { margin-bottom: .5rem; }
  .hub .hub-near__head h2 { font-size: 1.2rem; }
  .hub .hub-near__pick { margin-bottom: .5rem; }
  .hub .hub-near__pick select, .hub .hub-near__geo { min-height: 40px; }
  .hub .hub-near__figs { gap: .35rem; margin-bottom: .5rem; }
  .hub .hub-near__figs li { padding: .3rem .6rem !important; }
  .hub .hub-near__feed { min-height: 0; margin-bottom: .4rem; }
  .hub .hub-near__feed .hub-slide a { padding: .55rem .8rem .6rem !important; }
  .hub .hub-near__nav { margin-bottom: .35rem; }
  .hub .hub-near__nav button { width: 34px; height: 34px; }
  .hub .hub-now { margin-top: .6rem; font-size: .9rem; }
  .gtop__in { min-height: 54px; }
}

/* The home hero does not move (2026-11-11, owner): the alert box keeps one
   size whatever the length of the problem; only its content changes (a long
   text scrolls inside), with a fade and no sliding. */
.hub .hub-near__feed:not(#_) { height: 13.2rem; min-height: 0; overflow: hidden; }
.hub .hub-near__feed .hub-slide { height: 100%; animation: hub-fade .3s ease; }
@keyframes hub-fade { from { opacity: 0; } }
.hub .hub-near__feed .hub-slide a { display: flex !important; flex-direction: column; height: 100%; box-sizing: border-box; }
.hub .hub-near__feed .hub-slide .hub-lv { align-self: flex-start; flex: none; }
.hub .hub-near__feed .hub-slide strong { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; scrollbar-width: thin; }
.hub .hub-near__feed .hub-slide span { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub .hub-near__feed .is-empty { height: 100%; display: grid; place-items: center; text-align: center; }
.hub .hub-near__more { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Buttons always in view (2026-11-11, owner): on a laptop screen the alert
   box is shorter so ‹ › and the link under it stay above the fold; the
   arrows are solid; the four figures keep two columns. */
.hub .hub-near__figs:not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.hub .hub-near__figs li { min-width: 0; }
.hub .hub-near__figs span { overflow: hidden; text-overflow: ellipsis; }
.hub .hub-near__nav button { border-color: #3b3a5e; background: #3b3a5e; color: #fff; font-weight: 800; }
.hub .hub-near__nav button:hover { background: #2c2b47; }
@media (min-width: 900px) {
  .hub .hub-near__feed:not(#_) { height: 10.4rem; }
  .hub .hub-near__nav { margin: .1rem 0 .3rem; }
}
@media (min-width: 900px) and (max-height: 600px) {
  .hub .hub-hero__lead { display: none; }
  .hub .hub-near__feed:not(#_) { height: 9.2rem; }
  .gtop__in { min-height: 48px; }
}

/* Header menu on the right, beside the language (2026-11-11, owner). */
.gtop__in { justify-content: flex-end; }
.gtop__lang { margin-left: .5rem; }
.gtop a.gtop__main { margin-right: .2rem; }
.gtop a.gtop__main { margin: 0 0 0 .4rem; }
.gtop a.gtop__main.is-active { box-shadow: none; border-radius: 2.25rem; }

/* Home title 10 % larger (2026-11-11, owner). */
.hub .hub-hero .hub-hero__title:not(#_):not(#__) { font-size: clamp(1.7rem, 3.02vw, 2.53rem) !important; }
@media (min-width: 900px) { .hub .hub-hero .hub-hero__title:not(#_):not(#__) { font-size: clamp(1.54rem, 2.59vw, 2.15rem) !important; } }

/* Reports as sentences: « Le problème « … » signalé à … a été pris en charge le … ». */
.hub .hub-near__feed .hub-slide strong { font-weight: 500 !important; color: #414141 !important; }
.hub .hub-near__feed .hub-slide strong em { color: #2c2b47; font-style: italic; font-weight: 700; }
.hub .hub-near__feed .hub-slide span { color: #6b6b75 !important; font-size: .875rem; }

/* Entity page: a profile hero (2026-11-12, owner: « Entity hero drastically
   reduced. Left: entity profile and three buttons on one row. Right: map »).
   Markup: templates/misc/openbudget-my-city.html.twig; map: js/entity-hero.js. */
html body .mc2-hero.eh:not(#_) { min-height: 0 !important; padding: 0 !important; }
.eh__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: .9rem 1.5rem; align-items: stretch; padding-block: 1rem 1.1rem; }
.eh__profile { display: flex; flex-direction: column; min-width: 0; }
.eh__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin-bottom: .45rem; }
html body .mc2-hero.eh:not(#_) .eh__kind { margin: 0; color: #6b6b75 !important; font-size: .95rem; font-weight: 700; }
.eh__kind a { color: #2b6f84 !important; }
.eh__top .ent-select label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html body .mc2-hero.eh:not(#_) .ent-select__row select { min-width: 0; max-width: 15rem; min-height: 38px; font-size: .95rem; }
html body .mc2-hero.eh:not(#_) .mc2-hero__name.mc2-hero__name { display: flex; align-items: center; gap: .7rem; margin: 0 0 .7rem !important; font-size: clamp(1.6rem, 2.7vw, 2.25rem) !important; line-height: 1.1 !important; }
html body .mc2-hero.eh:not(#_) .mc2-hero__logo { flex: none; width: 52px; height: 52px; margin: 0; border-radius: 14px; background: #fff; object-fit: contain; box-shadow: var(--g2-shadow); }
.eh__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: 0 0 .8rem; }
.eh__facts > div { min-width: 0; padding: .45rem .7rem .5rem; border-radius: 12px; background: #fff; box-shadow: var(--g2-shadow); }
html body .mc2-hero.eh:not(#_) .eh__facts dt { color: #6b6b75 !important; font-size: .875rem; font-weight: 600; line-height: 1.25; }
html body .mc2-hero.eh:not(#_) .eh__facts dd { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
html body .mc2-hero.eh:not(#_) .eh__facts dd.is-missing { color: #6b6b75 !important; font-weight: 500; font-style: italic; }
.eh__facts a { color: #2b6f84 !important; text-decoration: none; }
.eh__facts a:hover { text-decoration: underline; }
.eh__actions { display: flex; gap: .5rem; margin: auto 0 0; }
html body .mc2-hero.eh:not(#_) a.eh__btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 0; min-height: 46px; padding: 0 .5rem; border: 2px solid #3b3a5e; border-radius: 2.25rem; background: #fff; color: #3b3a5e !important; font-size: .9rem; white-space: nowrap; font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none !important; }
html body .mc2-hero.eh:not(#_) a.eh__btn--ask { background: #3b3a5e; color: #fff !important; }
html body .mc2-hero.eh:not(#_) a.eh__btn--report { border-color: #eca327; background: #eca327; color: #2c2b47 !important; }
html body .mc2-hero.eh:not(#_) a.eh__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(59, 58, 94, .6); }
.eh__btn svg { flex: none; color: currentColor !important; fill: currentColor !important; }
html body .mc2-hero.eh:not(#_) .mc2-hero__edit { margin: .5rem 0 0; font-size: .9rem; }
html body .mc2-hero.eh:not(#_) .mv-cta { display: none !important; }
.eh__map { position: relative; z-index: 0; isolation: isolate; min-height: 290px; border-radius: 18px; overflow: hidden; background: #dfe6e4; box-shadow: 0 1px 2px rgba(59, 58, 94, .08), 0 16px 40px -18px rgba(59, 58, 94, .45); }
.eh__legend { display: flex; gap: .8rem; padding: .3rem .65rem; border-radius: 2.25rem; background: rgba(255, 255, 255, .94); color: #3b3a5e; font: 700 14px/1.3 Barlow, system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.eh__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.eh__legend i { width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
html body .mc2-hero.eh:not(#_) .mc3__children { grid-column: 1 / -1; margin: 0; }
html body .mc2-hero.eh:not(#_) .mc3__children h2 { display: inline; margin: 0 .6rem 0 0; color: #6b6b75 !important; font-family: inherit; font-size: .95rem; font-weight: 700; }
html body .mc2-hero.eh:not(#_) .mc3__children ul { display: inline-flex !important; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.eh__keep { display: none !important; }
html body .mc2-body > .mv-tiles:not(#_) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; grid-column: 1 / -1; order: -1; margin: 1.1rem 0 .2rem; }
html body .mc2-body > .mv-tiles:not(#_) .mv-tile { min-height: 0; padding: .7rem .9rem; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--g2-shadow); }
html body .mc2-body > .mv-tiles:not(#_) dd { color: #3b3a5e; font-size: 1.7rem; }
html body .mc2-body > .mv-tiles:not(#_) dt { color: #6b6b75; font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
html body .mc2-body > .mv-tiles:not(#_) :is(.mv-ring, .mv-tile-empty) { display: none !important; }
@media (max-width: 899.98px) {
  .eh__in { grid-template-columns: minmax(0, 1fr); }
  .eh__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eh__actions { flex-direction: column; margin-top: 0; }
  html body .mc2-hero.eh:not(#_) a.eh__btn { flex: none; width: 100%; }
  .eh__map { min-height: 0; height: 240px; }
}

/* Home (2026-11-12, owner): the eight topics all visible on two rows; the
   hero 10 % longer, the room goes to the alert box. */
.hub .hub-topics:not(#_) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .hub .hub-topics:not(#_) { gap: .4rem; margin-bottom: .7rem; }
  .hub .hub-topics a { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; min-height: 44px; padding: .3rem .7rem; font-size: .92rem; text-align: left; }
  .hub .hub-near__feed:not(#_) { height: 13.5rem; }
}
@media (min-width: 900px) and (max-height: 600px) {
  .hub .hub-near__feed:not(#_) { height: 12.3rem; }
}

/* « Résolu récemment » in three columns (2026-11-12, owner): the problem
   and when it was reported, how it was solved, the situation now. */
.hub .hub-solved ul:not(#_) { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.hub .hub-fix > a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--g2-shadow, 0 1px 3px rgba(59, 58, 94, .15)); }
.hub .hub-fix__col { display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .9rem 1.1rem 1rem; border-top: 5px solid #ee7b42; color: #414141; font-size: 1rem; line-height: 1.45; }
.hub .hub-fix__col + .hub-fix__col { border-left: 1px solid #e6e3d8; border-top-color: #4faac6; }
.hub .hub-fix__col--now { border-top-color: #5ab78d !important; background: #e9f5ef; }
.hub .hub-fix__col b { color: #3b3a5e; font-size: 1.05rem; font-weight: 800; }
.hub .hub-fix__col small { color: #6b6b75; font-size: .875rem; font-weight: 600; }
.hub .hub-fix__col > span { color: #414141; font-size: 1rem; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.hub .hub-fix__col i { margin-top: auto; padding-top: .4rem; color: #2d6d50; font-style: normal; font-weight: 800; }
@media (max-width: 767.98px) {
  .hub .hub-fix > a { grid-template-columns: minmax(0, 1fr); }
  .hub .hub-fix__col + .hub-fix__col { border-left: 0; }
}

/* « À retenir » (About, 2026-11-12, owner: « icon not aligned »): each icon
   in a fixed round box, centred on its line. */
html body .hc-ab__cerc ul:not(#_) { display: grid; gap: .7rem; margin: .3rem 0 0; padding: 0; list-style: none; }
html body .hc-ab__cerc ul:not(#_) > li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: .75rem; margin: 0; padding: 0; line-height: 1.35; }
html body .hc-ab__cerc ul:not(#_) > li::before, html body .hc-ab__cerc ul:not(#_) > li::marker { content: none; display: none; }
html body .hc-ab__cerc ul:not(#_) > li > span:first-child { position: static; float: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); line-height: 1; }
html body .hc-ab__cerc ul:not(#_) > li > span:first-child svg { display: block; width: 1.05rem; height: 1.05rem; margin: 0; vertical-align: 0; }

/* First question of the report form (2026-11-12, owner): a problem on a
   public project (monitor account + Android app) or another problem in the
   neighbourhood (the form). js/sr-gate.js. */
.srg-wait > form { display: none !important; }
.srg { margin: 0 0 1.2rem; padding: 1.2rem 1.3rem 1.3rem; border-radius: 18px; background: #fff; box-shadow: var(--g2-shadow, 0 1px 3px rgba(59, 58, 94, .15)); }
.srg h2 { margin: 0 0 .25rem; color: #3b3a5e; font-size: 1.5rem; line-height: 1.2; }
.srg__lead { margin: 0 0 .9rem; color: #414141; }
.srg__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.srg__choice { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .2rem .8rem; padding: .9rem 1rem; border: 2px solid #e6e3d8; border-radius: 16px; background: #faf9f5; color: #414141; font: inherit; text-align: left; cursor: pointer; }
.srg__choice:hover, .srg__choice:focus-visible { border-color: #eca327; background: #fdf3e2; outline: 0; }
.srg__icon { grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #3b3a5e; color: #fff; }
.srg__choice[data-srg="other"] .srg__icon { background: #eca327; color: #2c2b47; }
.srg__icon svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.srg__choice strong { align-self: end; color: #3b3a5e; font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
.srg__choice small { align-self: start; color: #6b6b75; font-size: .92rem; line-height: 1.35; }
.srg__project h3 { margin: 0 0 .4rem; color: #3b3a5e; font-size: 1.25rem; }
.srg__project p { margin: 0 0 .7rem; }
.srg__project ol { display: grid; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: srg; }
.srg__project ol li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .7rem; counter-increment: srg; font-weight: 600; }
.srg__project ol li::before { content: counter(srg); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #eca327; color: #2c2b47; font-weight: 800; }
.srg__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 .8rem; }
.srg__btns a.srg__btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.2rem; border-radius: 2.25rem; background: #3b3a5e; color: #fff !important; font-weight: 800; text-decoration: none !important; }
.srg__btns a.srg__btn--main { background: #eca327; color: #2c2b47 !important; }
.srg__btns a.srg__link, .srg__back { color: #2b6f84 !important; font-weight: 700; }
.srg__back { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 767.98px) { .srg__choices { grid-template-columns: minmax(0, 1fr); } .srg__btns a.srg__btn { flex: 1 1 100%; justify-content: center; } }

/* /projets: three cards per row on a wide screen (2026-11-12, owner). */
@media (min-width: 1000px) { html body .gpl .gpl__grid:not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* Home, « Près de chez vous »: the link under the alerts is a real button
   (2026-11-12, owner: « Ouvrir la page de Ville d’Uvira → redesign »). */
.hub .hub-near a.hub-near__more:not(#_) { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; border: 2px solid #3b3a5e; border-radius: 2.25rem; background: #fff; color: #3b3a5e !important; font-size: 1rem; font-weight: 800; text-decoration: none !important; transition: background .15s, color .15s; }
.hub .hub-near a.hub-near__more:not(#_):hover, .hub .hub-near a.hub-near__more:not(#_):focus-visible { background: #3b3a5e; color: #fff !important; }

/* Home, the live line in CERC colours (2026-11-12, owner: « rebrand »): a
   navy band, the figures in amber. */
.hub p.hub-now:not(#_) { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: .9rem; padding: .7rem 1.4rem; border-radius: 2.25rem; background: #3b3a5e; color: #fff !important; font-size: 1.05rem; font-weight: 500; line-height: 1.35; box-shadow: 0 14px 30px -18px rgba(59, 58, 94, .8); }
.hub p.hub-now:not(#_) span { color: #fff !important; }
.hub p.hub-now:not(#_) b { margin: 0 .1em; color: #eca327 !important; font-family: "Draft Natural", Barlow, sans-serif; font-size: 1.45em; font-weight: 700; line-height: 1; }
.hub p.hub-now:not(#_) i { width: 11px; height: 11px; background: #5ab78d; box-shadow: 0 0 0 4px rgba(90, 183, 141, .3); }
@media (max-width: 767.98px) { .hub p.hub-now:not(#_) { border-radius: 18px; font-size: 1rem; justify-content: flex-start; } }

/* The live line sits under the follow box, in the left column of the hero
   (2026-11-12, owner). */
.hub .hub-hero__main p.hub-now:not(#_) { justify-content: flex-start; margin: .8rem 0 0; padding: .65rem 1.2rem; border-radius: 18px; font-size: 1rem; }
.srg__project h3:focus { outline: 0; }

/* Service pages (climate centre…): the six figures on one line under the
   hero's two columns (2026-11-12, owner: « same line »). */
html body .mc2-hero:not(#_) dl.svp-kpis { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin: 0; }
html body .mc2-hero:not(#_) dl.svp-kpis > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .1rem; min-width: 0; padding: .6rem .8rem .7rem; border-radius: 14px; }
html body .mc2-hero:not(#_) dl.svp-kpis dd { margin: 0; color: #3b3a5e; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
html body .mc2-hero:not(#_) dl.svp-kpis dt { color: #6b6b75; font-size: .9rem; font-weight: 600; line-height: 1.25; }
html body .mc2-hero:not(#_) dl.svp-kpis .is-alert dd { color: #b8470f; }
@media (max-width: 899.98px) { html body .mc2-hero:not(#_) dl.svp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { html body .mc2-hero:not(#_) dl.svp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reports of one entity, the figures of the header (2026-11-12, owner:
   « rebrand: 4 affichés · 3 en cours · 0 résolus »): three chips in CERC
   colours instead of white figures on cream. */
html body .gc-srh__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin: 0; }
html body .gc-srh__figs:not(#_) { display: inline-flex; flex-wrap: wrap; gap: .45rem; }
html body .gc-srh__fig { display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .85rem .35rem; border-radius: 2.25rem; background: #fff; color: #414141; font-size: .95rem; font-weight: 600; line-height: 1.3; box-shadow: var(--g2-shadow, 0 1px 3px rgba(59, 58, 94, .15)); }
html body .gc-srh__figs:not(#_) .gc-srh__fig b { color: #3b3a5e; font-size: 1.25rem; font-weight: 800; }
html body .gc-srh__figs:not(#_) .gc-srh__fig--prog { background: #fdf3e2; }
html body .gc-srh__figs:not(#_) .gc-srh__fig--prog b { color: #b8470f; }
html body .gc-srh__figs:not(#_) .gc-srh__fig--done { background: #e9f5ef; }
html body .gc-srh__figs:not(#_) .gc-srh__fig--done b { color: #2d6d50; }

/* Home figures open their details (2026-11-12, owner): the whole card is
   the link. */
.hub .hub-figs li { position: relative; transition: transform .15s, box-shadow .15s; }
.hub .hub-figs li:hover, .hub .hub-figs li:focus-within { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(59, 58, 94, .55); }
.hub .hub-figs a.hub-figs__go { margin-top: .3rem; color: #2b6f84 !important; font-size: .95rem; font-weight: 800; text-decoration: none !important; }
.hub .hub-figs a.hub-figs__go::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.hub .hub-figs a.hub-figs__go:focus-visible { outline: 0; }
.hub .hub-figs li:focus-within { outline: 3px solid #eca327; outline-offset: 2px; }

/* Reports of one entity (2026-11-12, owner: « what about this page? »): the
   filter in force is named, one « Signaler » button (the header's), a map
   that fits the screen. */
html body .gem__filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .1rem 0 .55rem; }
html body .gem__filter span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .9rem; border-radius: 2.25rem; background: #3b3a5e; color: #fff; font-weight: 800; }
html body .gem__filter a { color: #2b6f84 !important; font-weight: 700; }
html body .gem__actions .btn:not(.btn-outline) { display: none !important; }
@media (min-width: 900px) {
  html body .gem__map:not(#_) { height: 460px; min-height: 0; }
  html body .gem__side:not(#_) { max-height: 460px; }
}

/* Entity page (2026-11-12, owner):
   - the figures under the hero: number and label on the same line;
   - « Pilotage provincial » figures, in CERC colours;
   - « Contacts » as a clean list;
   - the two page layouts share the same main and side widths. */
html body .mc2-body > .mv-tiles:not(#_) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
html body .mc2-body > .mv-tiles:not(#_) .mv-tile { flex-direction: row-reverse !important; align-items: baseline; justify-content: flex-end; gap: .55rem; padding: .65rem .9rem; }
html body .mc2-body > .mv-tiles:not(#_) dd { flex: none; font-size: 1.6rem; white-space: nowrap; }
html body .mc2-body > .mv-tiles:not(#_) dt { min-width: 0; line-height: 1.2; }
@media (max-width: 767.98px) { html body .mc2-body > .mv-tiles:not(#_) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

html body .pl .cw-tiles { gap: .7rem; margin: 1rem 0; }
html body .pl .cw-tile { gap: .1rem; padding: .8rem 1rem .85rem; border: 0; border-top: 5px solid #3b3a5e; border-radius: 16px; background: #fff; box-shadow: var(--g2-shadow, 0 1px 3px rgba(59, 58, 94, .15)); }
html body .pl .cw-tile:nth-child(2) { border-top-color: #ee7b42; }
html body .pl .cw-tile:nth-child(3) { border-top-color: #eca327; }
html body .pl .cw-tile:nth-child(4) { border-top-color: #5ab78d; }
html body .pl .cw-tile span { color: #6b6b75; font-size: .95rem; font-weight: 600; line-height: 1.25; }
html body .pl .cw-tile strong { color: #3b3a5e; font-size: 2rem; font-weight: 800; line-height: 1.15; }
html body .pl .cw-tile em { color: #6b6b75; font-size: .9rem; }
html body .pl .cw-tile.is-bad { background: #fff; }
html body .pl .cw-tile.is-bad strong { color: #b8470f; }
html body .pl .cw-tile:nth-child(4) strong { color: #2d6d50; }

html body .prov-contacts .mc3__contacts:not(#_) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; margin: .4rem 0 0; }
html body .prov-contacts .mc3__contacts:not(#_) > div { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .8rem; align-items: center; padding: .65rem 0; border: 0; border-top: 1px solid #ece9df; border-radius: 0; background: none; box-shadow: none; }
html body .prov-contacts .mc3__contacts:not(#_) > div:first-child { border-top: 0; }
html body .prov-contacts .mc3__contacts:not(#_) dt { display: contents; }
html body .prov-contacts .mc3__contacts:not(#_) dt > svg { grid-row: 1 / span 2; grid-column: 1; box-sizing: content-box; width: 1.05rem; height: 1.05rem; padding: .7rem; border-radius: 50%; background: #efede5; color: #3b3a5e; fill: currentColor; }
html body .prov-contacts .mc3__contacts:not(#_) dt > span { grid-column: 2; align-self: end; color: #6b6b75; font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; }
html body .prov-contacts .mc3__contacts:not(#_) dd { grid-column: 2; align-self: start; margin: 0; color: #3b3a5e; font-size: 1.05rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
html body .prov-contacts .mc3__contacts:not(#_) dd a { color: #2b6f84 !important; text-decoration: none; }
html body .prov-contacts .mc3__contacts:not(#_) dd a:hover { text-decoration: underline; }
html body .prov-contacts .mc3__contacts:not(#_) .gc-wa dt > svg { background: #25d366; color: #fff; }
html body .prov-contacts .mc3__contacts:not(#_) .gc-wa dd { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
html body .prov-contacts .mc3__contacts:not(#_) .gc-wa dd a { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #128c7e !important; font-weight: 800; box-shadow: none; }
html body .prov-contacts .mc3__contacts:not(#_) .gc-wa__soon { padding: .1rem .6rem; border: 1px dashed #c9c6ba; border-radius: 2.25rem; color: #6b6b75; font-size: .875rem; font-weight: 600; }

@media (min-width: 1024px) {
  html body .mc2-body > .prov-cards:not(#_), html body .mc2-body > .mc2-layout:not(#_) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; gap: 1.1rem !important; }
}

/* Service and division pages (2026-11-12, owner: « redesign service and
   division layout »): a readable, shorter header; the figures as one line
   of chips; the other services on three columns under the page. */
html body .svp .svp-crumbs:not(#_) { margin: 0 0 .6rem; font-size: .95rem; font-weight: 600; }
html body .svp .svp-crumbs:not(#_), html body .svp .svp-crumbs:not(#_) span { color: #6b6b75 !important; }
html body .svp .svp-crumbs:not(#_) a { color: #2b6f84 !important; text-decoration: none; }
html body .svp .svp-crumbs:not(#_) a:hover { text-decoration: underline; }
html body .svp .mc2-hero:not(#_) .mc2-chip { border: 0 !important; background: #3b3a5e !important; color: #fff !important; font-size: .875rem !important; letter-spacing: .04em; }
html body .svp .mc2-hero.svp-hero:not(#_) .mc2-hero__inner { padding-block: 1.1rem 1.2rem !important; gap: 1rem 2rem !important; }
html body .svp .mc2-hero:not(#_) .svp-hero__name.svp-hero__name { font-size: clamp(1.6rem, 2.7vw, 2.25rem) !important; }
html body .svp .mc2-hero:not(#_) .svp-id__icon { width: 52px; height: 52px; border-radius: 14px; background: #eca327; color: #2c2b47; box-shadow: none; }
html body .svp .mc2-hero:not(#_) .svp-hero__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
html body .svp .mc2-hero:not(#_) .svp-hero__actions .btn { min-height: 46px; border-radius: 2.25rem; font-size: .95rem; white-space: nowrap; }
html body .mc2-hero:not(#_) dl.svp-kpis > div { flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: .5rem; padding: .55rem .8rem; background: #fff; box-shadow: var(--g2-shadow, 0 1px 3px rgba(59, 58, 94, .15)); }
html body .mc2-hero:not(#_) dl.svp-kpis dd { flex: none; font-size: 1.45rem; white-space: nowrap; }
html body .mc2-hero:not(#_) dl.svp-kpis dt { font-size: .875rem; line-height: 1.2; }
html body .svp .svp-contact .svp-dl > div { padding: .5rem 0; border-top: 1px solid #ece9df; }
html body .svp .svp-contact .svp-dl > div:first-child { border-top: 0; }
html body .svp .svp-contact .svp-dl dt { color: #6b6b75; font-size: .9rem; font-weight: 600; }
html body .svp .svp-contact .svp-dl dd { color: #3b3a5e; font-weight: 700; }
html body .svp .svp-others--wide { margin-top: 1.1rem; }
html body .svp .svp-others--wide h2 { margin-bottom: .7rem; }
html body .svp .svp-others--wide ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem .6rem; margin: 0; padding: 0; list-style: none; }
html body .svp .svp-others--wide li { margin: 0; }
html body .svp .svp-others--wide li a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .55rem; height: 100%; padding: .45rem .7rem; border-radius: 12px; background: #f6f6f4; color: #3b3a5e !important; font-size: .95rem; font-weight: 600; line-height: 1.25; text-decoration: none !important; }
html body .svp .svp-others--wide li a:hover { background: #fdf3e2; }
html body .svp .svp-others--wide li a > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; color: #3b3a5e; }
html body .svp .svp-others--wide li.is-agency a > span { background: #fdf3e2; color: #b8470f; }
@media (max-width: 899.98px) { html body .svp .svp-others--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { html body .svp .svp-others--wide ul { grid-template-columns: minmax(0, 1fr); } }

/* Entity profile (2026-11-12, owner: « one row », « email must contain
   all »): the six facts on one row under the profile and the map, each as
   wide as its text; the buttons wrap when the column is narrow. */
html body .mc2-hero.eh:not(#_) .eh__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
html body .mc2-hero.eh:not(#_) .eh__facts > div { flex: 1 1 auto; }
html body .mc2-hero.eh:not(#_) .eh__facts dd { white-space: nowrap; overflow-wrap: normal; }
.eh__map { min-height: 230px; }
.eh__actions { flex-wrap: wrap; margin-top: auto; padding-top: .6rem; }
html body .mc2-hero.eh:not(#_) a.eh__btn { flex: 1 1 auto; }
@media (max-width: 599.98px) {
  html body .mc2-hero.eh:not(#_) .eh__facts > div { flex: 1 1 40%; }
  html body .mc2-hero.eh:not(#_) .eh__facts dd { white-space: normal; overflow-wrap: anywhere; }
}

/* Home, the live line on two lines at most on a laptop (2026-11-12, owner). */
@media (min-width: 900px) {
  .hub .hub-hero__main p.hub-now:not(#_) { padding: .6rem 1.1rem; font-size: .95rem; }
  .hub .hub-hero__main p.hub-now:not(#_) span { line-height: 1.5; }
  .hub .hub-hero__main p.hub-now:not(#_) b { font-size: 1.35em; }
}

/* Language menu of the header (2026-11-12, owner: « improve language change
   dropdown »): a white card, each language with its code and its full name,
   readable and large enough to tap. */
html body .gtop .lang-menu { position: relative; }
html body .gtop .lang-menu__list:not(#_) { min-width: 13.5rem; margin: 0; padding: .45rem !important; border: 1px solid #e6e3d8 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 2px 4px rgba(59, 58, 94, .08), 0 22px 44px -18px rgba(59, 58, 94, .55) !important; list-style: none; }
html body .gtop .lang-menu__list:not(#_)::before { content: ""; position: absolute; top: -7px; right: 26px; width: 12px; height: 12px; border-top: 1px solid #e6e3d8; border-left: 1px solid #e6e3d8; background: #fff; transform: rotate(45deg); }
html body .gtop .lang-menu__list:not(#_) > li { position: relative; display: flex !important; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: .75rem; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 12px; background: none !important; }
html body .gtop .lang-menu__list:not(#_) > li::before { content: none !important; }
html body .gtop .lang-menu__list:not(#_) > li:hover, html body .gtop .lang-menu__list:not(#_) > li:focus-within { background: #fdf3e2 !important; }
html body .gtop .lang-menu__list:not(#_) .lang-menu__link { flex: 1 1 auto; display: flex !important; align-items: center; min-height: 48px; padding: 0 .9rem 0 0 !important; border: 0 !important; background: none !important; color: #3b3a5e !important; font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-decoration: none !important; text-transform: none !important; }
html body .gtop .lang-menu__list:not(#_) .lang-menu__link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
html body .gtop .lang-menu__list:not(#_) .lang-menu__badge { flex: none; display: grid !important; place-items: center; width: 2.3rem; height: 2.3rem; margin: 0 0 0 .45rem !important; padding: 0 !important; border-radius: 50%; background: #3b3a5e !important; color: #fff !important; font-size: .875rem !important; font-weight: 800 !important; letter-spacing: .02em; }
html body .gtop .lang-menu__list:not(#_) > li:hover .lang-menu__badge { background: #eca327 !important; color: #2c2b47 !important; }
html body .gtop .lang-menu__toggle[aria-expanded="true"] { background: #3b3a5e !important; color: #fff !important; }

/* Climate centre: its two figures and the six of the service on one line
   (2026-11-12, owner: « same line »): eight columns, the number above its
   label so that every label fits. */
html body .mc2-hero:not(#_) dl.svp-kpis--eight { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; }
html body .mc2-hero:not(#_) dl.svp-kpis--eight > div { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: .1rem; padding: .55rem .7rem .6rem; }
html body .mc2-hero:not(#_) dl.svp-kpis--eight dd { font-size: 1.5rem; }
html body .mc2-hero:not(#_) dl.svp-kpis--eight dt { font-size: .875rem; line-height: 1.2; overflow-wrap: anywhere; }
html body .mc2-hero:not(#_) dl.svp-kpis--eight > .is-climate { border-top: 4px solid #4faac6; }
html body .mc2-hero:not(#_) dl.svp-kpis--eight > .is-climate dd { color: #2b6f84 !important; }
@media (max-width: 1023.98px) { html body .mc2-hero:not(#_) dl.svp-kpis--eight { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { html body .mc2-hero:not(#_) dl.svp-kpis--eight { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Climate centre: its three buttons on one line (2026-11-12, owner). */
@media (min-width: 900px) {
  html body .svp .mc2-hero:not(#_) .svp-hero__actions--climate { flex-wrap: nowrap; gap: .4rem; }
  html body .svp .mc2-hero:not(#_) .svp-hero__actions--climate .btn { flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 0 .8rem !important; gap: .35rem; font-size: .9rem !important; }
}

/* Service pages, the row of figures redesigned (2026-11-12, owner): one
   navy band, the figures in amber, a thin rule between them; the figure that
   needs attention in orange. */
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis { gap: 0 !important; padding: .35rem .3rem; overflow: hidden; border-radius: 20px; background: #3b3a5e; box-shadow: 0 16px 34px -20px rgba(59, 58, 94, .9); }
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis > div { flex-direction: column-reverse !important; align-items: flex-start; justify-content: flex-end; gap: .15rem; padding: .6rem .85rem .65rem !important; border: 0 !important; border-left: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis > div:first-child { border-left: 0 !important; }
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis dd { margin: 0; color: #eca327 !important; font-family: "Draft Natural", Barlow, sans-serif; font-size: 1.9rem !important; font-weight: 700; line-height: 1; white-space: nowrap; }
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis dt { color: rgba(255, 255, 255, .92) !important; font-size: .9rem !important; font-weight: 600; line-height: 1.25; }
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis > .is-climate dd { color: #8fd3e6 !important; }
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis > .is-alert { background: rgba(238, 123, 66, .22) !important; }
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis > .is-alert dd { color: #ffb48a !important; }
@media (max-width: 1023.98px) {
  html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis > div { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .12) !important; }
}

/* Service pages (2026-11-12, owner): the figures centred in their cells;
   the climate buttons keep their text inside on a laptop (a wider text
   column, buttons that do not shrink). */
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis > div { align-items: center; text-align: center; }
html body .mc2-hero:not(#_) dl.svp-kpis.svp-kpis dt { text-wrap: balance; }
@media (min-width: 900px) {
  html body .svp .mc2-hero.svp-hero:not(#_) .mc2-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important; }
  html body .svp .mc2-hero:not(#_) .svp-hero__actions--climate .btn { flex: 0 0 auto; padding: 0 .85rem !important; font-size: .88rem !important; }
}
@media (min-width: 900px) { html body .svp .mc2-hero:not(#_) .svp-hero__actions--climate { margin-left: 0 !important; } }

/* Report page, the agent's panel (2026-11-12, owner): status and « Urgent » as CERC badges, the other facts as
   quiet boxes; « Signaler le même problème » and « Partager sur WhatsApp » on one line. */
html body .sra__chips { align-items: stretch; gap: .5rem; margin: .9rem 0 1rem; }
html body .sra-chip { justify-content: center; gap: .05rem; padding: .45rem .9rem .5rem; border: 0; border-radius: 14px; background: #f6f6f4; }
html body .sra-chip span { color: #6b6b75; font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
html body .sra-chip b { color: #3b3a5e; font-size: 1rem; font-weight: 800; }
html body .sra-chip--ok, html body .sra-chip--mid, html body .sra-chip--bad { flex-direction: row; align-items: center; gap: .5rem; padding: .45rem 1.1rem; border-radius: 2.25rem; }
html body .sra-chip--ok { background: #5ab78d; }
html body .sra-chip--mid { background: #eca327; }
html body .sra-chip--bad { background: #b8470f; }
html body .sra-chip--ok span, html body .sra-chip--ok b { color: #fff; }
html body .sra-chip--mid span, html body .sra-chip--mid b { color: #2c2b47; }
html body .sra-chip--bad span, html body .sra-chip--bad b { color: #fff; }
html body :is(.sra-chip--ok, .sra-chip--mid, .sra-chip--bad) span { font-size: .9rem; opacity: .9; }
html body .sra-chip--ok b::before { content: "✓ "; }
html body .sra-chip--flag b { letter-spacing: .04em; text-transform: uppercase; }
html body .sra-chip--flag b::before { content: "▲ "; font-size: .8em; }
html body .sra__act { flex-wrap: nowrap; gap: .5rem; }
html body .sra__act .btn { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 46px; padding: 0 .6rem; border-radius: 2.25rem; font-size: .92rem; font-weight: 800; line-height: 1.15; text-align: center; }
html body .sra__act:not(#_):not(#__):not(#___) a.btn:not(.sra__wa) { border: 2px solid #eca327 !important; background: #eca327 !important; color: #2c2b47 !important; }
html body .sra__act:not(#_):not(#__):not(#___) a.btn.sra__wa { border: 2px solid #25d366 !important; background: #25d366 !important; color: #fff !important; }

/* Reports list: three cards per row on a wide screen (2026-11-12, owner). */
@media (min-width: 1000px) { html body .grl .grl__grid:not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* Report cards (2026-11-12, owner): the photo when there is one, the picture of the category otherwise, the title and a summary of the
   description, each with a fixed number of lines so that every card has the same size; four step bars and the current step written in full, so that nothing is cut in a card of
   three per row. */
html body .grl-card__photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #2c2b40; }
html body .grl-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .grl-card__hero { display: flex; flex: 1 1 auto; flex-direction: column; background: linear-gradient(135deg, var(--g2-blue) 0%, #2b2a45 70%, var(--g2-navy) 100%); }
html body .grl-card__hero > span:not(#_) { background: none !important; }
html body .grl-card__photo--illus { background: #f4f2eb; }
html body .grl .grl-card__text.grl-card__title:not(#_) { box-sizing: content-box; flex: none; height: calc(2 * 1.3 * 1.1rem); min-height: 0; padding-bottom: .4rem !important; font-size: 1.1rem !important; line-height: 1.3 !important; -webkit-line-clamp: 2; }
html body .grl-card__desc { display: -webkit-box; overflow: hidden; margin: 0 .95rem .6rem; padding: 0; color: #edeade; font-size: .875rem; font-weight: 400; line-height: 1.45; flex: none; height: calc(4 * 1.45 * .875rem); -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
html body .grl-card__hero > .grl-card__where:not(#_) { display: -webkit-box !important; box-sizing: content-box; flex: none; height: calc(2 * 1.4 * .875rem); margin-top: auto !important; padding: .1rem .95rem .9rem !important; overflow: hidden; line-height: 1.4 !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html body .grl-card .grl-steps:not(#_) { flex: none; margin: .8rem .95rem 0 !important; }
html body .grl-card__step { display: block; flex: none; padding: .4rem .95rem .7rem; color: var(--g2-muted, #6c6b92); font-size: .875rem; line-height: 1.3; }
html body .grl-card__step b { color: #2c2b47; font-weight: 800; }
html body .grl-card--resolved .grl-card__step b { color: #2f7a58; }
/* The public report page: the description under the title. */
html body .sr-pub__desc { display: -webkit-box; max-width: 46rem; margin: .2rem 0 .7rem; overflow: hidden; font-size: 1.05rem; line-height: 1.5; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
/* The plain list (no JavaScript, entity pages): title above the description. */
html body .sr-pub-card__title { display: block; margin-bottom: .15rem; color: #2c2b47; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
/* The report form: common problems to pick as the title. */
html body .sr-title-pick { margin: -.4rem 0 1rem; }
html body .sr-title-pick__label { margin: 0 0 .4rem; color: #4e4d78; font-size: .9rem; font-weight: 700; }
html body .sr-title-pick__list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
html body .sr-title-pick__list button { min-height: 40px; padding: .35rem .85rem; border: 1px solid #c9c9d7; border-radius: 999px; background: #fff; color: #2c2b47; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; }
html body .sr-title-pick__list button:hover, html body .sr-title-pick__list button:focus-visible { border-color: #eca327; background: #fdf4e3; outline: 0; }
html body .sr-title-pick__list button[aria-pressed="true"] { border-color: #eca327; background: #eca327; color: #2c2b47; }

/* ---- Climat: alert card, « Lieux concernés » (owner, 2026-11-13: « arrange boutons », « button one line »,
   « Recevoir les alertes aligné sur les boutons de lieux ») ----
   The label sits on its own line; the places stay on ONE line under it and « Recevoir les alertes » follows them on
   the same line (climate-watch.js puts the link inside the paragraph). On a phone the button takes the next line,
   from the first place's left edge to the last one's right edge. */
html body .cw-vig__text { grid-template-columns: minmax(0, 1fr); }
html body .cw-vig__where { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
html body .cw-vig__where em { flex: 1 1 100%; margin: 0; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
html body .cw-vig__where b { flex: none; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: .2rem .75rem; text-align: center; line-height: 1.15; white-space: nowrap; }
html body .cw-vig__where .cw-vig__go { flex: none; min-height: 38px; margin: 0; padding: 0 1rem; font-size: .9rem; }
@media (max-width: 767px) {
  /* sign beside the title, at the top; the places use the full width of the card */
  html body .cw-vig { align-items: flex-start; gap: .8rem; }
  html body .cw-vig__where { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: .25rem; margin: .5rem 0 0 calc(-44px - .8rem) !important; overflow-x: auto; scrollbar-width: none; }
  html body .cw-vig__where em { grid-column: 1 / -1; }
  html body .cw-vig__where b { min-height: 32px; padding: .15rem .42rem; font-size: .74rem; }
  html body .cw-vig__where .cw-vig__go { grid-column: 1 / -1; justify-content: center; min-height: 46px; margin: .45rem 0 0; font-size: .95rem; }
  html body .cw-vig .cw-vig__text > span { margin-left: calc(-44px - .8rem); margin-top: .35rem; }
  html body .cw-vig .cw-vig__text > strong { display: flex; align-items: center; min-height: 44px; }
}
@media (max-width: 380px) {
  html body .cw-vig { padding-inline: .85rem !important; }
  html body .cw-vig__where { gap: .2rem; }
  html body .cw-vig__where b { padding: .15rem .32rem; font-size: .68rem; }
}

/* ---- Climat: the three buttons of the top section start where the summary paragraph starts, after the
   orange icon (owner, 2026-11-13: « aligne sur paragraphe Prévision »). On a phone the icon is hidden. ---- */
@media (min-width: 768px) { html body .svp .mc2-hero:not(#_) .svp-hero__actions.svp-hero__actions--climate { margin-left: calc(52px + 15.3px) !important; } }
@media (min-width: 900px) and (max-width: 1279.98px) { html body .svp .mc2-hero:not(#_) .svp-hero__actions.svp-hero__actions--climate { flex-wrap: wrap !important; } }

/* ---- Home, « Ça avance, et c’est public »: the figure and its label on ONE line (« 30 demandes reçues »),
   the link under them (owner, 2026-11-13). A long label wraps beside the figure. ---- */
html body .hub .hub-figs li { grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; align-items: baseline; align-content: start; }
html body .hub .hub-figs li > b { white-space: nowrap; }
html body .hub .hub-figs li > span { line-height: 1.25; }
html body .hub .hub-figs li > a.hub-figs__go { grid-column: 1 / -1; align-self: end; }
@media (max-width: 767px) {
  html body .hub .hub-figs { gap: .6rem; }
  html body .hub .hub-figs li { padding: .85rem .6rem; column-gap: .35rem; }
  html body .hub .hub-figs li > b { font-size: 1.35rem; }
  html body .hub .hub-figs li > span { font-size: .8rem; letter-spacing: -.01em; }
  html body .hub .hub-figs a.hub-figs__go { font-size: .88rem; }
}

/* ---- ClimatCheck logo « By CERC » above the title of the two climate pages (owner, 2026-11-13).
   Centred, in the CERC brand kit (owner, same day: « logo au milieu avec CERC Brand kit »): kit mark, name in
   Draft Natural, « Climat » in green (kit green #5ab78d darkened to #2f7d5b to stay readable), « Check » in navy #3b3a5e, amber #eca327 rule before « By CERC » in Barlow. ---- */
html body .cck { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; margin: 0 0 .8rem; padding: 0; line-height: 1; }
html body .cck__mark { flex: none; width: 38px; height: 38px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(59, 58, 94, .12); }
html body .cck__text { display: grid; gap: .2rem; justify-items: start; }
html body .cck__name { color: #2f7d5b; font: 700 1.5rem/.95 var(--g2-title, "Draft Natural", "Barlow", sans-serif); letter-spacing: .01em; }
html body .cck__name > span { color: #3b3a5e; }
html body .cck__tag { padding-left: .45rem; border-left: 2px solid #eca327; color: #5c5b73; font: 600 .68rem/1 "Barlow", system-ui, sans-serif; letter-spacing: .2em; white-space: nowrap; }
html body .cck--light .cck__name { color: #8fd6b4; }
html body .cck--light .cck__name > span { color: #fff; }
html body .cck--light .cck__tag { color: #d9d8ea; }
@media (max-width: 767px) { html body .cck { margin-bottom: .7rem; } html body .cck__mark { width: 34px; height: 34px; } html body .cck__name { font-size: 1.35rem; } }

/* ---- ClimatCheck (climat.cerc.cd, owner 2026-11-13): the site's own name in the header and the side menu.
   « Climat » green, « Check » navy, as on the logo of the climate pages. The footer keeps its light colours. ---- */
html body.is-climatcheck .header .logo__name, html body.is-climatcheck .ec-dock .logo__name { color: #2f7d5b; font-family: var(--g2-title, "Draft Natural", "Barlow", sans-serif); font-weight: 700; letter-spacing: .01em; }
html body.is-climatcheck .header .logo .ec-logo__accent, html body.is-climatcheck .ec-dock .ec-logo__accent { color: #3b3a5e; }

/* ---- Alerts page: the figures of the top section in the CERC brand kit (owner, 2026-11-13: « rebrand ») —
   one navy band, as on the climate centre: figures in Draft Natural and kit colours, labels in white. ---- */
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figures { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none !important; gap: 0 !important; padding: .35rem !important; border: 0 !important; border-radius: 20px !important; background: #3b3a5e !important; box-shadow: 0 14px 28px -18px rgba(59, 58, 94, .75) !important; overflow: hidden; }
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure { display: flex !important; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: .15rem; margin: 0 !important; padding: .85rem .6rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; }
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure + .ec-phero__figure { border-left: 1px solid rgba(255, 255, 255, .16) !important; }
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure dd { margin: 0 !important; color: #7fc6dc !important; font: 700 2.1rem/1.05 var(--g2-title, "Draft Natural", "Barlow", sans-serif) !important; }
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure dt { margin: 0 !important; color: #fff !important; font: 600 .95rem/1.25 "Barlow", system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; text-wrap: balance; }
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure--green dd { color: #7fd0a9 !important; }
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure--amber dd { color: #eca327 !important; }
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure--red dd { color: #f39a6b !important; }
html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure:nth-child(3) dd { font-size: 1.5rem !important; line-height: 1.15 !important; }
@media (max-width: 767px) {
  html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure { padding: .75rem .35rem !important; }
  html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure dd { font-size: 1.7rem !important; }
  html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure:nth-child(3) dd { font-size: 1.15rem !important; }
  html body .page-hero.ec-phero:has(.cck):not(#_):not(#__) .ec-phero__figure dt { font-size: .8rem !important; }
}
/* The ClimatCheck logo at the left of the title « Alertes pluie et inondations » (owner, 2026-11-13): beside it on
   a computer, above it and left-aligned on a phone. */
html body .page-hero.ec-phero:has(.cck):not(#_) .cck { justify-content: flex-start; width: auto; }
@media (min-width: 768px) {
  html body .page-hero.ec-phero:has(.cck):not(#_) .ec-phero__text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; align-items: center; }
  html body .page-hero.ec-phero:has(.cck):not(#_) .ec-phero__text > .cck { grid-column: 1; margin: 0; padding-right: 1.1rem; border-right: 2px solid rgba(59, 58, 94, .18); }
  html body .page-hero.ec-phero:has(.cck):not(#_) .ec-phero__text > .region-breadcrumb { grid-column: 2; }
  html body .page-hero.ec-phero:has(.cck):not(#_) .ec-phero__text > :not(.cck):not(.region-breadcrumb) { grid-column: 1 / -1; }
}