/**
 * The residents' reports, smart and easy (js/reports-list.js, owner
 * 2026-11-11). Mobile first; the page's own list and filters hidden once
 * the smart list is drawn; the map behind « Carte ».
 */
html.grl-on .sr-pub-page > :not(.grl):not(.hc-map) { display: none !important; }
html.grl-on .sr-pub-page { display: block !important; }
html.grl-on:not(.grl-map-open) .sr-pub-page > .hc-map { display: none !important; }
html.grl-map-open .sr-pub-page > .hc-map { display: block; margin: 0 0 1.2rem; }
.grl { display: grid; gap: .9rem; margin-bottom: 1.2rem; min-width: 0; }
.grl__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.grl__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; flex: 1 1 420px; }
@media (min-width: 700px) { .grl__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grl-fig { display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: 14px; background: #fff; border: 1px solid #e1e7ed; }
.grl-fig b { font-size: 1.6rem; line-height: 1.1; color: #0b2a45; }
.grl-fig span { color: #5f6672; font-size: .78rem; font-weight: 600; }
.grl-fig--warn { border-top: 3px solid #eca327; } .grl-fig--info { border-top: 3px solid #0077be; } .grl-fig--ok { border-top: 3px solid #2e9e5b; } .grl-fig--alert { border-top: 3px solid #c8102e; } .grl-fig--alert b { color: #c8102e; }
.grl__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.grl__btn { display: inline-flex; align-items: center; gap: .4rem; }
.grl__h { margin: 0 0 .35rem; color: #5f6672; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.grl__bar { display: grid; gap: .5rem; padding: .7rem; border-radius: 16px; background: #fff; border: 1px solid #e1e7ed; }
@media (min-width: 800px) { .grl__bar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.grl__search { position: relative; display: block; }
.grl__search .fa-icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: #5f6672; }
.grl__search input, .grl__select select { width: 100%; min-height: 46px; padding: .5rem .8rem; border: 1px solid #c9d3dc; border-radius: 12px; background: #f8fafc; font: inherit; font-size: .95rem; }
.grl__search input { padding-left: 2.3rem; }
.grl__select select { background: #fff; }
.grl__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.grl__chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
@media (min-width: 1100px) { .grl__chips--scroll { flex-wrap: wrap; overflow: visible; } }
.grl-chip { display: inline-flex; flex: none; align-items: center; gap: .35rem; min-height: 38px; padding: .3rem .8rem; border: 1px solid #d5dee6; border-radius: 999px; background: #fff; color: #0b2a45; font: inherit; font-size: .84rem; cursor: pointer; white-space: nowrap; }
.grl-chip b { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: #eef3f7; font-size: .74rem; text-align: center; }
.grl-chip .fa-icon { color: #0077be; }
.grl-chip i { width: .55rem; height: .55rem; border-radius: 50%; background: #5f6672; }
.grl-chip--open i { background: #eca327; } .grl-chip--progress i { background: #0077be; } .grl-chip--resolved i { background: #2e9e5b; }
.grl-chip:hover, .grl-chip:focus-visible { border-color: #0077be; outline: 0; }
.grl-chip[aria-pressed="true"] { border-color: #003a63; background: #003a63; color: #fff; }
.grl-chip[aria-pressed="true"] .fa-icon { color: #fff; }
.grl-chip[aria-pressed="true"] b { background: rgba(255, 255, 255, .22); }
.grl__count { margin: 0; color: #33475b; }
.grl__reset { padding: 0; border: 0; background: none; color: #0077be; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.grl__grid { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .grl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .grl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grl-card > a { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1rem; border: 1px solid #e1e7ed; border-left: 4px solid #eca327; border-radius: 14px; background: #fff; color: #1f2937; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.grl-card--progress > a { border-left-color: #0077be; } .grl-card--resolved > a { border-left-color: #2e9e5b; }
.grl-card > a:hover, .grl-card > a:focus-visible { box-shadow: 0 8px 24px rgba(0, 58, 99, .12); transform: translateY(-2px); outline: 0; }
.grl-card__top { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.grl-card__icon { display: inline-grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: #eef4f9; color: #0077be; }
.grl-card__cat { flex: 1; min-width: 0; overflow: hidden; color: #003a63; font-size: .8rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.grl-tag { flex: none; padding: .05rem .45rem; border-radius: 6px; background: #eef1f4; color: #4b5563; font-size: .7rem; font-weight: 800; }
.grl-tag--urgent { background: #fde4e7; color: #9b0c22; }
.grl-card__text { display: -webkit-box; overflow: hidden; font-size: .92rem; line-height: 1.45; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.grl-card__where { color: #4d6478; font-size: .8rem; }
.grl-card__where .fa-icon { color: #c8102e; }
.grl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.grl-steps li { display: grid; gap: .25rem; }
.grl-steps li::before { content: ""; height: 5px; border-radius: 999px; background: #e3e8ee; }
.grl-steps li.is-done::before { background: #9fcbe6; }
.grl-steps li.is-now::before { background: #0077be; }
.grl-card--resolved .grl-steps li.is-now::before, .grl-card--resolved .grl-steps li.is-done::before { background: #2e9e5b; }
.grl-steps span { overflow: hidden; color: #8a94a3; font-size: .64rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.grl-steps li.is-now span { color: #0b2a45; }
.grl-card__foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .45rem; border-top: 1px solid #eef1f4; color: #6b7f92; font-size: .74rem; }
.grl__none { grid-column: 1 / -1; padding: 1.2rem; border: 1px dashed #c9cfd7; border-radius: 12px; background: #fafaf9; color: #4d6478; }
.grl__more { margin: .2rem 0 0; text-align: center; }
.grl__more .btn { min-width: 14rem; }
@media (prefers-reduced-motion: reduce) { .grl-card > a { transition: none; } .grl-card > a:hover { transform: none; } }

/* The map on top of the list (2026-11-11, owner), Sud-Kivu only (js/gov-map.js d.only). */
html.grl-on.grl-map-open .sr-pub-page { display: flex !important; flex-direction: column; }
html.grl-map-open .sr-pub-page > .hc-map { order: -1; }
.gc-map.is-only .hc-map__prov.is-faded { display: none; }
.gc-map.is-only [data-gc-map-mode], .gc-map.is-only .hc-map__crumbs > button:first-child, .gc-map.is-only .hc-map__crumbs > button:first-child + * { display: none !important; }
.gc-map.is-only [data-gc-map-mode]:only-child, .gc-map.is-only :has(> [data-gc-map-mode]) { display: none !important; }
.gc-map.is-only .hc-map__crumbs, .gc-map.is-only .hc-map__head { display: none !important; }
/* Computers: the map on the left, fixed while the list scrolls on the right
   (2026-11-11, owner: « map one side, reports the other side, map not
   scrolling, only the rebranded list »). */
@media (min-width: 1024px) {
  html.grl-on.grl-map-open .sr-pub-page { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 1.2rem; }
  html.grl-map-open .sr-pub-page > .hc-map { position: sticky; top: calc(var(--header-h, 72px) + 1rem); grid-column: 1; grid-row: 1 / span 20; margin: 0 !important; max-height: calc(100vh - var(--header-h, 72px) - 2rem); overflow: hidden; }
  html.grl-map-open .sr-pub-page > .hc-map .hc-map__legend, html.grl-map-open .sr-pub-page > .hc-map .hc-map__credit { display: none !important; }
  html.grl-map-open .sr-pub-page > .grl { grid-column: 2; min-width: 0; }
  html.grl-map-open .grl__figs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  html.grl-map-open .sr-pub-page > .grl .grl__grid { grid-template-columns: minmax(0, 1fr) !important; gap: .7rem !important; }
}
@media (min-width: 1500px) {
  html.grl-map-open .sr-pub-page > .grl .grl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Figures and actions in the blue header (2026-11-11, owner). */
.grl__top--hero { margin-top: 1rem; }
.grl__top--hero .grl-fig { border-color: rgba(255, 255, 255, .2) !important; background: rgba(255, 255, 255, .12); color: #fff; backdrop-filter: blur(4px); }
.grl__top--hero .grl-fig b { color: #fff; }
.grl__top--hero .grl-fig span { color: #d6e9f7; }
.grl__top--hero .grl-fig--alert b { color: #ffc2cc; }
.grl__top--hero .grl__btn.btn-outline { border-color: rgba(255, 255, 255, .7); background: transparent; color: #fff; }
.grl__top--hero .grl__btn.btn-outline:hover { background: rgba(255, 255, 255, .12); }
.grl__top--hero .grl__btn:not(.btn-outline) { background: #f2c200; border-color: #f2c200; color: #1f1300; }
html.grl-hero .page-hero .ec-phero__inner > :not(.grl__top) .btn { display: none !important; }
@media (min-width: 1024px) { .grl__top--hero .grl__figs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* Slim header: title, tabs, report button (2026-11-11, owner). */
html.grl-slim .page-hero { min-height: 0 !important; }
html.grl-slim .page-hero .ec-phero__inner { padding-block: .85rem !important; }
html.grl-slim .page-hero :is(.ec-phero__kicker, .ec-phero__lead, .gc-srh__meta, .grl__top, .ec-phero__kicker-icon) { display: none !important; }
html.grl-slim .page-hero .gc-srh__row { display: flex !important; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 0 !important; }
html.grl-slim .page-hero .gc-srh__row h1 { margin: 0 !important; font-size: 1.6rem !important; line-height: 1.15 !important; white-space: nowrap; }
html.grl-slim .page-hero .gc-srh__cta { margin-left: 0 !important; }
.sr-tabs.sr-tabs--hero { display: flex !important; flex: 0 1 auto; gap: .25rem; width: auto !important; max-width: none !important; margin: 0 auto 0 .5rem !important; padding: .25rem !important; border: 0 !important; border-radius: 999px !important; background: rgba(255, 255, 255, .14) !important; box-shadow: none !important; }
.sr-tabs--hero a { min-height: 36px !important; padding: 0 1rem !important; border-radius: 999px !important; background: none !important; color: #fff !important; font-size: .86rem !important; font-weight: 700 !important; white-space: nowrap; box-shadow: none !important; display: inline-flex !important; align-items: center; }
.sr-tabs--hero a:hover { background: rgba(255, 255, 255, .14) !important; }
.sr-tabs--hero a.is-active, .sr-tabs--hero a[aria-current] { background: #fff !important; color: #0067a6 !important; }
@media (max-width: 767.98px) {
  html.grl-slim .page-hero .gc-srh__row h1 { font-size: 1.3rem !important; white-space: normal; flex: 1; }
  .sr-tabs.sr-tabs--hero { order: 3; flex: 1 1 100%; margin: 0 !important; overflow-x: auto; scrollbar-width: none; }
  .sr-tabs--hero a { flex: 1 0 auto; justify-content: center; padding: 0 .75rem !important; font-size: .8rem !important; }
}
html.grl-slim .page-hero .ec-phero__text { display: flex !important; flex-wrap: wrap; align-items: center; gap: .7rem 1.2rem; }
html.grl-slim .page-hero .region-breadcrumb { display: block !important; margin: 0 !important; }
html.grl-slim .page-hero .region-breadcrumb > :not(.block-page-title-block) { display: none !important; }
html.grl-slim .page-hero .region-breadcrumb h1 { margin: 0 !important; color: #fff; font-size: 1.6rem !important; line-height: 1.15 !important; white-space: nowrap; }
html.grl-slim .page-hero .gc-srh__row { flex: 1 1 auto; }
@media (max-width: 767.98px) { html.grl-slim .page-hero .region-breadcrumb h1 { font-size: 1.3rem !important; white-space: normal; } }
