/* 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: .82rem !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; }
html body :is(.grl-card__cat, .gpl-card__sector) { overflow: hidden; color: #fff !important; text-overflow: ellipsis; white-space: nowrap; }
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: .72rem !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: .86rem !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: .8rem !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: .8rem; 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: .85rem; }
  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; }