/* Phone polish after a check of every page on a phone (2026-11-13, owner):
   status steps, back-to-top button, tab bar, list cards, « Suivi daté », small text, contrast.
   Loaded before sr-agent.css and m-app.css, hence the heavier selectors. Computers are not concerned. */
@media (max-width: 767.98px) {

  /* Status steps (Reçu, Pris en charge, Résolu; Prévu, En cours, Achevé):
     one circle per step, joined by a line, the label under its circle. */
  html.m-app body .srh__track { margin: .8rem 0 .95rem !important; }
  html body .srh__track.srh__track .srh__bar { display: none !important; }
  html body .srh__track.srh__track ol { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 !important; padding: 0 !important; font-size: .8125rem !important; }
  html body .srh__track.srh__track ol > li:nth-child(n) { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-self: stretch; gap: .35rem; padding: 0 .15rem; font-weight: 500; line-height: 1.2; text-align: center; }
  html body .srh__track.srh__track ol > li.is-done { font-weight: 700; }
  html body .srh__track.srh__track ol > li > span { position: relative; z-index: 1; box-sizing: border-box; width: 1.75rem; height: 1.75rem; border: 2px solid currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent); background: transparent; font-size: .875rem; line-height: 1; }
  html body .srh__track.srh__track ol > li.is-done > span { border-color: #5cbd91; background: #5cbd91; color: #2c2b47; }
  html body .srh__track.srh__track ol > li + li::before { content: ""; position: absolute; top: calc(.875rem - 1.5px); left: calc(-50% + 1.25rem); right: calc(50% + 1.25rem); height: 3px; border-radius: 3px; background: currentColor; opacity: .22; }
  html body .srh__track.srh__track ol > li + li.is-done::before { background: #5cbd91; opacity: 1; }

  /* Key figures under the steps: a card inside the margins, not a band cut by the screen edges;
     with two tiles only, they share the width and nothing is cut. */
  html.m-app body :is(.ob-pj__hero, .sr-pub__hero):not(#_) .srh__panel { margin: 0 !important; padding: .5rem !important; border-radius: 18px !important; }
  html.m-app body .srh__panel:not(:has(.srh__sig li)) > .srh__rule { flex: 1 1 8.5rem; max-width: none; }
  html.m-app body .srh__ring span { max-width: 6.4rem; font-size: .8125rem; }
  /* More tiles than the width: the right edge fades, to show that the row goes on. */
  html.m-app body .srh__panel:has(.srh__sig li) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.4rem), rgba(0, 0, 0, .15)); mask-image: linear-gradient(90deg, #000 calc(100% - 2.4rem), rgba(0, 0, 0, .15)); }
  html.m-app body .srh__panel:has(.srh__sig li)::after { content: ""; flex: none; width: 1.6rem; }

  /* Back to top: a small round button, above the floating buttons instead of behind them. */
  html body .helper { right: 12px; }
  html body .helper .to-top { width: 44px; height: 44px; border: 1px solid #e3e2ec; border-radius: 50%; background: #fff; color: #3b3a5e; box-shadow: 0 2px 10px rgba(44, 43, 71, .2); }
  html.m-app body .helper { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  html body:has(.hub-fab.is-on, .msh-mapfab, .mact) .helper { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  /* Without a visible main button, the round buttons stay under the thumb, on the right. */
  html body .mact:not(:has(.mact__main)), html body.is-city-account .mact:has(> .mact__main:is([href$="/demande-de-service"], [href*="/demande-de-service?"], [href*="/projets/signaler"], [href*="/signaler-une-pratique"])) { justify-content: flex-end; }
  /* The Beta label must not cover them either. */
  html body.gc-beta::after { top: 42%; right: auto; bottom: auto; left: 0; padding: .6rem .15rem; border-radius: 0 8px 8px 0; font-size: .7rem; writing-mode: vertical-rl; opacity: .9; pointer-events: none; }

  /* Tab bar: every icon on the same line, whatever the length of the label. */
  html body .ec-tabbar li:not(.ec-tabbar__report) > a { justify-content: flex-start; gap: 3px; padding: 9px 1px 0; font-size: clamp(.62rem, 2.6vw, .72rem); line-height: 1.12; letter-spacing: -.01em; }

  /* Side menu: the icons were dark on a dark button. */
  html body .nav-primary > ul.ec-menu > li > .ec-menu__btn .fa-icon { color: currentColor; opacity: .9; }

  /* List cards: no piece of a third line under the title or the place. */
  html body .grl .grl-card__text.grl-card__title.grl-card__title:not(#_) { padding-bottom: 0 !important; border-bottom: .4rem solid transparent !important; overflow: hidden; }
  html body .grl-card__hero > .grl-card__where.grl-card__where:not(#_) { padding-bottom: 0 !important; border-bottom: .9rem solid transparent !important; }

  /* « Suivi daté »: a line that visibly opens, not an empty box. */
  html body details.sr-did__more { border: 1px solid #dddce8 !important; border-radius: 12px; background: #fff; overflow: hidden; }
  html body details.sr-did__more > summary { display: flex !important; justify-content: space-between; gap: .6rem; min-height: 44px; padding: 0 .9rem !important; list-style: none; }
  html body details.sr-did__more > summary::-webkit-details-marker { display: none; }
  html body details.sr-did__more > summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-right: .15rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.12rem) rotate(45deg); transition: transform .2s; }
  html body details.sr-did__more[open] > summary::after { transform: translateY(.12rem) rotate(-135deg); }
  html body details.sr-did__more[open] > summary { margin-bottom: 0; border-bottom: 1px solid #eeedf4; }
  html body details.sr-did__more > .sr-timeline { margin: .8rem .9rem .9rem; }

  /* Nothing under 12 px, logo tag lines aside. */
  html body .gpl-card__progress small, html body .srh__rule small, html body .ob-pj__card dd small, html body .ob-pj__line > small, html body .cw-hot__name small, html body .svp-feed__side small, html body .cw-vig__where b { font-size: .8125rem !important; }
  html body .cw-strip :is(.cw-strip__s, .cw-strip__src, b), html body .cwh__ticks span { font-size: .75rem !important; }

  /* Intro of the forms: the text touched the coloured bar. */
  html body p.gc-member-form__intro:not(#_) { padding: .8rem .9rem !important; }

  /* Orange on white, or white on orange, was too pale to read. */
  html body .grl-tag.grl-tag--urgent:not(#_) { background: #b8470f !important; color: #fff !important; }
  html body .gpl-card__foot .is-late:not(#_) { color: #b8470f !important; }
  html body .hc-ab__kicker { color: #8f5d08 !important; }
}
/* Inbox of « Mon espace »: the list takes the whole width of the phone (it stopped at 340 px). */
@container (max-width: 759.98px) {
  html.gsc-outlook .gsc .gic:not(#_), html.gsc-outlook .gsc .gic.is-grid:not(#_) { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  html body details.sr-did__more > summary::after { transition: none; }
}