/* GovCheck and ClimatCheck on phones only (2026-11-15, owner: « correct web design problem on Mobile. Use CERC BrandKit.
   Mobile Friendly. »). Fixes of the phone audit; nothing here applies above 760 px.
   Brand kit tokens only (govcheck-brand.css): navy --c-navy #3b3a5e / --c-navy-dk #2c2b47, blue --drc-blue #4faac6,
   yellow --drc-yellow #eca327, orange --drc-red #ee7b42, green --c-green #368360, rule --c-rule, cream --bg-light;
   titles Draft Natural, text Barlow. */
@media (max-width: 760px) {
  /* The site follows the text size chosen in the phone's settings (cerc-site.css fixed the root at 16 px). */
  html:not(#_) { font-size: 100%; }

  /* ---- Navigation ---- */
  /* Bottom bar: larger labels and icons, the open page marked with the brand yellow. */
  html body:not(#_):not(#__) .ec-tabbar li:not(.ec-tabbar__report) > a { position: relative; gap: 4px; padding-top: 8px; font-size: .72rem !important; line-height: 1.15; letter-spacing: 0; color: var(--c-muted); }
  html body:not(#_):not(#__) .ec-tabbar a .fa-icon { width: 22px; height: 22px; }
  /* Five tabs share the whole width (GovCheck now has five, with « Signaler » in the centre, like ClimatCheck). */
  html body:not(#_):not(#__) .ec-tabbar > ul { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  html body:not(#_):not(#__) .ec-tabbar li:not(.ec-tabbar__report) > a.is-active { color: var(--c-navy-dk); font-weight: 700; }
  html body:not(#_):not(#__) .ec-tabbar li:not(.ec-tabbar__report) > a.is-active::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--drc-yellow); }
  html body:not(#_):not(#__) .ec-tabbar li.ec-tabbar__report > a > span:last-child { font-size: .8rem; }

  /* Menu: the highlighted entries stay lit (the blinking made them look switched off); every row alike. */
  html body:not(#_):not(#__) .ec-menu--mobile li.is-flash > a { animation: none !important; opacity: 1 !important; border: 1.5px solid var(--drc-yellow) !important; background: rgba(236, 163, 39, .18) !important; color: #fff !important; }
  html body:not(#_):not(#__) .ec-menu--mobile li > a { min-height: 48px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
  html body:not(#_):not(#__) .ec-menu--mobile li.is-active > a { border-color: #fff; background: rgba(255, 255, 255, .16); }

  /* Top bar and footer: every link large enough for a finger. */
  html body:not(#_):not(#__) header.header .lang-menu__toggle { min-height: 44px !important; }
  html body:not(#_):not(#__) :is(.hub-top__in > a, .sr-tabs__tab, .ec-footer__logo) { min-height: 44px !important; }
  html body:not(#_):not(#__) main :is(.hub-fig a, .cw-vig__go, .mc2-score a) { display: inline-flex; align-items: center; min-height: 44px; }
  html body:not(#_):not(#__) header.header .ec-logo--mobile { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  html body:not(#_):not(#__) footer.gcf2 :is(.ec-footer__links a, .gcf2__suite a, .ec-fcontact__mail, .ec-fcontact__form) { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__cta .btn { min-height: 48px; }
  html body:not(#_):not(#__) footer.gcf2 .ec-fcontact__social { gap: .6rem; }
  html body:not(#_):not(#__) footer.gcf2 .ec-fcontact__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

  /* ---- Touch targets inside the pages ---- */
  html body:not(#_):not(#__) main :is(.btn, button):not(.leaflet-control *) { min-height: 44px; }
  html body:not(#_):not(#__) .pl-nav__inner > a { min-height: 44px; display: inline-flex; align-items: center; }
  html body:not(#_):not(#__) .mc3__children a { display: flex !important; align-items: center; min-height: 44px !important; }
  html body:not(#_):not(#__) .ent-select select { min-height: 44px; font-size: 1rem; }
  html body:not(#_):not(#__) .leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
  html body:not(#_):not(#__) main details > summary { min-height: 44px; display: flex; align-items: center; gap: .4rem; cursor: pointer; }
  html body:not(#_):not(#__) main :is(a.mc2-link, a.ob-assess__method, .user-login-form a) { display: inline-flex; align-items: center; min-height: 44px; }
  html body:not(#_):not(#__) main :is(.cw__refresh, .pl-unfold-link, .mv-toggle, .mv-btn) { min-height: 44px; }
  /* Forms: big radio buttons and check boxes, 16 px fields (no zoom on iPhone). */
  html body:not(#_):not(#__) main :is(input[type="radio"], input[type="checkbox"]) { width: 22px !important; height: 22px !important; min-width: 22px; accent-color: var(--c-navy); vertical-align: middle; }
  html body:not(#_):not(#__) main :is(.form-type-radio, .form-type-checkbox) label { font-size: 1rem; padding: .35rem 0; }
  html body:not(#_):not(#__) main :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) { font-size: 16px !important; min-height: 48px; }

  /* ---- Text: nothing under 13 px ---- */
  html body:not(#_):not(#__) :is(.mc2-id__credit, .mc2-id__credit a, .cck-ent__row em) { font-size: .8125rem !important; }
  html body:not(#_):not(#__) :is(.gcd-src, .gcd-kpi__foot, .gcd-kicker, .gcd-chip, .gcd-maplegend li) { font-size: .8125rem; line-height: 1.5; }
  html body:not(#_):not(#__) [class*="gcd-"] small { font-size: .8125rem !important; }
  html body:not(#_):not(#__) .gcd-main svg text { font-size: 13px; }

  /* ---- Lists of reports: fewer rows before the first card, shorter cards ---- */
  html body:not(#_):not(#__) .grl__bar { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
  html body:not(#_):not(#__) .grl__bar > * { flex: 1 1 100%; min-width: 0; margin: 0; }
  html body:not(#_):not(#__) .grl__bar > .grl__search { flex: 1 1 0 !important; width: auto !important; }
  html body:not(#_):not(#__) .grl__bar > .msh-fold__btn { flex: 0 0 auto !important; width: auto !important; padding-inline: .9rem; }
  html body:not(#_):not(#__) .gtab > button { min-height: 44px; padding-block: .3rem; }
  html body:not(#_):not(#__) .grl-card__title { padding-top: .8rem; }
  html body:not(#_):not(#__) .grl-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html body:not(#_):not(#__) .grl-card__where { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-bottom: .7rem; }
  html body:not(#_):not(#__) .grl-card__hero { min-height: 0; }
  html body:not(#_):not(#__) .grl-card__foot { padding-block: .45rem .55rem; }

  /* ---- Request page: « Autres actions » as one compact row each ---- */
  html body:not(#_):not(#__) .sr-actions .sr-action { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; column-gap: .7rem; }
  html body:not(#_):not(#__) .sr-actions .sr-action__cta { width: auto; min-width: 5.5rem; margin: 0; }
  /* The disaster choice is already the third card at the top of the page. */
  html body:not(#_):not(#__) .sr-layout:has(.srg__choices) .sr-action--house-flood-water { display: none; }

  /* ---- Report and project pages ---- */
  /* The action buttons sit in their own bar above the tabs instead of floating over the text. */
  html body:not(#_):not(#__) .mact { left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); width: auto; margin: 0; padding: .45rem .75rem; gap: .5rem; background: rgba(247, 245, 242, .97); border-top: 1px solid var(--c-rule); box-shadow: 0 -4px 14px rgba(44, 43, 71, .08); }
  html body:not(#_):not(#__) .mact .mact__main { flex: 1 1 auto; min-width: 0; height: 46px; }
  html body:not(#_):not(#__) .mact .mact__icon { flex: 0 0 46px; width: 46px; height: 46px; box-shadow: none; border: 1px solid var(--c-rule); }
  html body:not(#_):not(#__):has(.mact) main { padding-bottom: 70px; }
  html body:not(#_):not(#__):has(.mact) .helper { bottom: calc(140px + env(safe-area-inset-bottom)); }
  /* The dark figures card: its two parts one under the other, nothing cut at the right edge. */
  html body:not(#_):not(#__) .srh__panel { flex-wrap: wrap; overflow: visible; }
  html body:not(#_):not(#__) .srh__panel > * { flex: 1 1 100%; min-width: 0; }

  /* ---- Rows that scroll sideways: a soft edge shows there is more ---- */
  html body:not(#_):not(#__) :is(.svp-tabs__inner, .pl-nav__inner, .clm-tabs, .gcw__hours, .hub-top__in, .gcd-tabs) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); padding-right: 34px; }
  /* Places of a vigilance notice: on several lines, none cut. */
  html body:not(#_):not(#__) .cw-vig__where { display: flex; flex-wrap: wrap; gap: .35rem; overflow: visible; }
  html body:not(#_):not(#__) .cw-vig__where > :is(em, a) { flex: 1 1 100%; }
}

/* Long pages on phones (js/m-fold.js): the top of each long block, then « Voir tout ». */
@media (max-width: 760px) {
  html body:not(#_):not(#__) .m-fold.is-shut { position: relative; max-height: 440px; overflow: hidden; }
  html body:not(#_):not(#__) .m-fold.is-shut::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to bottom, transparent, var(--m-fold-bg, #f7f5f2) 85%); pointer-events: none; }
  html body:not(#_):not(#__) .m-fold__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin: .5rem 0 1.25rem; padding: .4rem 1rem; border: 1.5px solid var(--c-navy); border-radius: 999px; background: #fff; color: var(--c-navy-dk); font: 700 1rem/1.2 Barlow, system-ui, sans-serif; }
  html body:not(#_):not(#__) .m-fold__btn[aria-expanded="true"] { border-color: var(--c-rule); color: var(--c-muted); }

  /* Last small targets of the audit. */
  html body:not(#_):not(#__) main :is(.hub-live a, .gdb-tiles a, .hub-fig a, .hub-figs a) { display: inline-flex; align-items: center; min-height: 44px; }
  html body:not(#_):not(#__) main .form-item > label { display: block; padding-block: .45rem; }
}

/* Last targets under 44 px (2026-11-15, owner « go ahead »). */
@media (max-width: 760px) {
  html body:not(#_):not(#__) main :is(.hub-head > a, .mv-brief__foot a, .ob-project__meta a, a.cwl-btn) { display: inline-flex; align-items: center; min-height: 44px; }
  html body:not(#_):not(#__) main :is(.hub-track > label, .form-item > label:not(.option), .form-item > label.option) { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  html body:not(#_):not(#__) main .form-item > label.option { display: inline-flex; }
}

/* Body text on phones as on cerc.cd: Barlow regular, not the medium weight (2026-11-15, owner: « Body text on mobile,
   Barlow but not bold, thin as for cerc.cd »). Titles, labels and buttons keep their weight. */
@media (max-width: 760px) {
  html body:not(#_):not(#__) { font-weight: 400; }
  html body:not(#_):not(#__) main :is(.hub-now span, .cw-vig__text span, dd.is-missing, label.option) { font-weight: 400; }
}

/* Text sizes on phones as on educheck.cd (2026-11-15, owner: « apply font size as for educheck.cd »): body 16 px,
   page title 24 px, section titles about 18 px, sub-titles 16 px, buttons 13 px bold. */
@media (max-width: 760px) {
  html body:not(#_):not(#__):not(#___) { font-size: 1rem !important; line-height: 1.5; }
  html body:not(#_):not(#__):not(#___) h1:not(.visually-hidden):not(#_) { font-size: 1.5rem !important; line-height: 1.1 !important; }
  html body:not(#_):not(#__) main h2 { font-size: 1.15rem; line-height: 1.15; }
  html body:not(#_):not(#__) main h3 { font-size: 1rem; line-height: 1.2; }
  html body:not(#_):not(#__) :is(main, footer.gcf2) .btn { font-size: .8125rem !important; font-weight: 700 !important; line-height: 1.2; }
  /* The centre « Signaler » button keeps its white sign on its own page (it turned navy on navy). */
  html body:not(#_):not(#__) .ec-tabbar li.ec-tabbar__report .ec-tabbar__fab, html body:not(#_):not(#__) .ec-tabbar li.ec-tabbar__report .ec-tabbar__fab .fa-icon { color: #fff !important; fill: currentColor; }
}

/* Footer end on phones: just enough room for the tab bar under the last line (there was a 154 px empty band). */
@media (max-width: 760px) {
  html body:not(#_):not(#__) footer.gcf2 { padding-bottom: 0 !important; }
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__bar { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}

/* Footer on phones: the three platform links on one line (they wrapped onto two on ClimatCheck). */
@media (max-width: 760px) {
  html body:not(#_):not(#__) footer.gcf2 .gcf2__suite { display: flex !important; flex-wrap: nowrap; justify-content: space-between; gap: .5rem; padding-left: 0; }
  html body:not(#_):not(#__) footer.gcf2 .gcf2__suite li { min-width: 0; margin: 0; }
  html body:not(#_):not(#__) footer.gcf2 .gcf2__suite a { gap: .3rem; font-size: .85rem; white-space: nowrap; }
}

/* Home on phones: « Gratuit · Anonyme si vous voulez · Réponse sous 48 heures » on one line (owner 2026-11-15). */
@media (max-width: 760px) {
  html body:not(#_):not(#__) .hub-eyebrow { display: block; max-width: 100%; padding-inline: .5rem; white-space: nowrap; font-size: min(.8125rem, 3.3vw) !important; letter-spacing: -.01em; text-align: center; }
}

/* Footer on phones (owner 2026-11-15, « remove in mobile … even social icons »): no links list, no e-mail and contact
   form line, no social icons; the last lines centred: rights, then the version on its own line. */
@media (max-width: 760px) {
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__cards { display: none !important; }
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__bar p { text-align: center; padding-inline: 0; }
  html body:not(#_):not(#__) footer.gcf2 :is(.gcf2__data, .gcf2__dot) { display: none; }
  html body:not(#_):not(#__) footer.gcf2 .gcf2__ver { display: block; }
}

/* Footer motto « Pesa Zetu, Haki Zetu » in place of the description (owner 2026-11-15, « well designed »):
   the display type of the brand, white then the brand yellow; on every screen. */
html body:not(#_):not(#__) footer.gcf2 .gcf2__motto { margin: 0; max-width: none; color: #fff; font: 700 1.6rem/1.1 "Draft Natural", Barlow, system-ui, sans-serif; letter-spacing: .01em; }
html body:not(#_):not(#__) footer.gcf2 .gcf2__motto span + span { color: var(--drc-yellow, #eca327); }
@media (max-width: 760px) {
  /* On phones: two centred lines. */
  html body:not(#_):not(#__) footer.gcf2 .gcf2__motto { width: 100%; text-align: center; font-size: 1.9rem; line-height: 1.12; }
  html body:not(#_):not(#__) footer.gcf2 .gcf2__motto span { display: block; }
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__bar p { width: 100%; max-width: none; }
}

/* « By CERC » under the name in the phone header is small (owner 2026-11-15: « By CERC on mobile on logo must small »). */
@media (max-width: 767.98px) {
  html body:not(#_):not(#__) header.header :is(.logo__tag, .ec-dock__tag) { font-size: .625rem !important; letter-spacing: .16em !important; font-weight: 700 !important; line-height: 1 !important; }
}

/* Phones: the motto on the logo's line, as on computers (owner 2026-11-15: « Moto on same line as logo footer on web
   and mobile »): logo at the left, the two centred lines of the motto at its right, the buttons under them. */
@media (max-width: 760px) {
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem; row-gap: .9rem; text-align: left; }
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) .gcf2__motto { width: auto; text-align: center; font-size: clamp(1.2rem, 6.4vw, 1.6rem); }
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) .ec-footer__cta { grid-column: 1 / -1; justify-content: center; justify-items: center; }
  /* The rights line stays on one line. */
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__bar p { font-size: min(.85rem, 3.25vw); }
  html body:not(#_):not(#__) footer.gcf2 .gcf2__rights { white-space: nowrap; }
}

/* « By CERC » under the name in the footer logo is small, on every screen (owner 2026-11-15: « By CERC small »). */
html body:not(#_):not(#__) footer.gcf2 .ec-footer__logo small { font-size: .625rem !important; letter-spacing: .16em !important; font-weight: 700 !important; line-height: 1 !important; }

/* Footer motto on two lines, 20 px from the logo, on every screen (owner 2026-11-15: « pesa zetu, haki zetu in two line, only 20px between logo and moto »). */
html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) { column-gap: 20px !important; }
html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) .gcf2__motto { width: auto; text-align: left; }
html body:not(#_):not(#__) footer.gcf2 .gcf2__motto span { display: block; }

/* Footer: the logo name and the motto in the same size (owner 2026-11-15: « Logo and Moto same size »). */
html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) :is(.ec-footer__logo .logo__name, .gcf2__motto) { font-size: 1.5rem !important; line-height: 1.1 !important; }
@media (max-width: 760px) {
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) :is(.ec-footer__logo .logo__name, .gcf2__motto) { font-size: clamp(1.1rem, 5.6vw, 1.35rem) !important; }
}

/* Footer on phones: the two buttons side by side on one line (owner 2026-11-15: « Signaler un problème, Devenir
   évaluateur same line on mobile »). */
@media (max-width: 760px) {
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__cta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; }
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__cta .btn { width: 100%; min-width: 0; justify-content: center; gap: .3rem; padding-inline: .35rem; white-space: nowrap; font-size: min(.8125rem, 3.3vw) !important; }
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__cta .btn .fa-icon { flex: none; width: .95em; height: .95em; }
}

/* Phones: no buttons in the GovCheck footer, the tab bar already has « Signaler » (owner 2026-11-15: « Remove footer buttons on mobile »). */
@media (max-width: 767.98px) {
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) .ec-footer__cta { display: none !important; }
}

/* Footer motto as tall as the logo: its two lines fit the height of « GovCheck · By CERC » (owner 2026-11-15: « Reduce again Pesa Zetu, Haki Zetu to meet footer logo size »). */
html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) p.gcf2__motto.gcf2__motto.gcf2__motto { font-size: 1.1rem !important; line-height: 1.08 !important; }
@media (max-width: 760px) {
  html body:not(#_):not(#__) footer.gcf2 .ec-footer__brand:has(.gcf2__motto) p.gcf2__motto.gcf2__motto.gcf2__motto { font-size: 1.05rem !important; }
}