/* =========================================================================
   mobile.css - Scout mobile research bar and sheets

   Loaded last. The chart remains the primary surface; the bottom bar exposes
   the mobile control loop: chart, strategy, tools, more.
   ========================================================================= */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --mobile-topbar-h: calc(66px + var(--safe-top));
  --mobile-tabbar-h: calc(72px + var(--safe-bottom));
}

/* [tools-panel-rescope-20260808] Le panneau d'outils du graphique est injecte par
   ensureMobileToolsPanel dans #rightToolsPanel -- le tiroir droit PARTAGE -- a toute
   largeur. Ces regles etaient enfermees dans @media (max-width: 639px), si bien que
   sur bureau les seize boutons tombaient sur le style natif du navigateur : fond gris
   clair, bord noir de 2px, coins droits, Arial 13.33px, sur fond quasi noir. Le meme
   piege annulait le space-between de .mobile-tools-head, d'ou les titres colles
   "Chart toolsWoodpecker style". Place AVANT le @media pour qu'une surcharge
   reellement mobile ajoutee plus tard continue de gagner. */
.mobile-tools-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(145, 160, 178, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}

.mobile-tools-section {
  display: grid;
  gap: 8px;
}

.mobile-tools-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mobile-tools-head strong {
  color: var(--text, #e7edf4);
  font: 800 12px/1.1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
}

.mobile-tools-head span {
  color: rgba(151, 166, 184, 0.82);
  font-size: 10px;
}

.mobile-tools-grid,
.mobile-indicator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mobile-tools-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mobile-tools-grid button,
.mobile-indicator-grid button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(145, 160, 178, 0.16);
  border-radius: var(--radius-md);
  background: rgba(3, 5, 8, 0.58);
  color: rgba(231, 237, 245, 0.86);
  font: 700 10px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.mobile-tools-grid button[aria-pressed="true"],
.mobile-indicator-grid button[aria-pressed="true"] {
  color: var(--accent-cyan, #6fe7ff);
  border-color: rgba(111, 231, 255, 0.28);
  background: rgba(111, 231, 255, 0.08);
}

@media (max-width: 639px) {
  /* [screener-mobile-univers-20260808] L'appartenance est deja dans le panneau de detail ;
     sur telephone sa colonne poussait la colonne triee hors de l'ecran.
     La piste correspondante est retiree cote JS, ces cellules doivent suivre. */
  .topbar-screener-row-meta,
  .topbar-screener-head-meta {
    display: none;
  }

  body:has(.app-shell.layout-scout),
  body:has(.app-shell.layout-analyst) {
    overflow: hidden;
  }

  .mobile-mode-nav,
  .mobile-mode-dots,
  .app-shell.layout-scout .mobile-mode-nav,
  .app-shell.layout-scout .mobile-mode-dots,
  .app-shell.layout-analyst .mobile-mode-nav,

  .mobile-tab-bar {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(8px, var(--safe-bottom));
    z-index: 2700;
    display: grid;
    grid-template-columns: repeat(var(--mobile-tab-count, 4), minmax(0, 1fr));
    gap: 3px;
    width: min(calc(100vw - 16px), 430px);
    height: 58px;
    padding: 5px;
    transform: translateX(-50%);
    border: 1px solid rgba(111, 231, 255, 0.18);
    border-radius: 18px;
    background: rgba(7, 10, 14, 0.86);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mobile-tab-bar[hidden] {
    display: none !important;
  }

  .mobile-tab-bar.is-sheet-open {
    background: rgba(7, 10, 14, 0.94);
    border-color: rgba(111, 231, 255, 0.28);
  }

  .mtab {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px 3px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: rgba(151, 166, 184, 0.92);
    display: grid;
    grid-template-rows: 23px 13px;
    align-items: center;
    justify-items: center;
    gap: 2px;
    font: 700 10px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
  }

  .mtab:focus-visible {
    outline: 2px solid rgba(111, 231, 255, 0.82);
    outline-offset: 2px;
  }

  .mtab-icon {
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
  }

  .mtab-icon svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  .mtab-label {
    max-width: 100%;
    overflow: hidden;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mtab[aria-current="true"] {
    color: var(--accent-cyan, #6fe7ff);
    border-color: rgba(111, 231, 255, 0.22);
    background: rgba(111, 231, 255, 0.075);
  }

  .mtab[data-action="more"] {
    color: rgba(231, 237, 245, 0.82);
  }

  .mtab[data-action="more"]:active {
    color: var(--accent-cyan, #6fe7ff);
    background: rgba(111, 231, 255, 0.09);
  }

  /* Scout mode renders with class layout-analyst (see uiModes.js); layout-scout
     is kept as an alias for safety. Show the tab bar only on the Scout stage. */
  .app.app-shell.layout-scout,
  .app.app-shell.layout-analyst {
    padding-bottom: var(--mobile-tabbar-h) !important;
  }

  .app.app-shell:not(.layout-scout):not(.layout-analyst) {
    padding-bottom: 0 !important;
  }

  .app.app-shell:not(.layout-scout):not(.layout-analyst) ~ .mobile-tab-bar,
  .app.app-shell:not(.layout-scout):not(.layout-analyst) ~ .mobile-more-panel {
    display: none !important;
  }

  .app-shell.layout-scout .chart-shell,
  .app-shell.layout-analyst .chart-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    bottom: 0 !important;
  }

  .app-shell.layout-scout .canvas-wrap,
  .app-shell.layout-analyst .canvas-wrap {
    inset: 0 0 var(--mobile-tabbar-h) 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--mobile-tabbar-h)) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    touch-action: none;
  }

  .app-shell.layout-scout #chartCanvas,
  .app-shell.layout-analyst #chartCanvas {
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
  }

  body:not([data-chart-tool]) .app-shell.layout-scout #chartCanvas,
  body[data-chart-tool=""] .app-shell.layout-scout #chartCanvas,
  body:not([data-chart-tool]) .app-shell.layout-analyst #chartCanvas,
  body[data-chart-tool=""] .app-shell.layout-analyst #chartCanvas {
    cursor: grab;
  }

  body:not([data-chart-tool]) .app-shell.layout-scout #chartCanvas:active,
  body[data-chart-tool=""] .app-shell.layout-scout #chartCanvas:active,
  body:not([data-chart-tool]) .app-shell.layout-analyst #chartCanvas:active,
  body[data-chart-tool=""] .app-shell.layout-analyst #chartCanvas:active {
    cursor: grabbing;
  }

  .app-shell.layout-scout .price-scale,
  .app-shell.layout-analyst .price-scale {
    display: block !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 28px !important;
    width: 58px !important;
    height: auto !important;
    z-index: 8;
  }

  .app-shell.layout-scout .time-scale,
  .app-shell.layout-analyst .time-scale {
    display: block !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 32px !important;
    z-index: 8;
  }

  .mobile-more-panel {
    position: fixed;
    left: 50%;
    bottom: calc(var(--mobile-tabbar-h) + 8px);
    z-index: 2680;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: min(calc(100vw - 16px), 430px);
    padding: 8px;
    transform: translateX(-50%);
    border: 1px solid rgba(111, 231, 255, 0.2);
    border-radius: var(--radius-xl);
    background: rgba(7, 10, 14, 0.92);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-more-panel[hidden] {
    display: none !important;
  }

  .mobile-more-panel button {
    appearance: none;
    -webkit-appearance: none;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(145, 160, 178, 0.16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(231, 237, 245, 0.84);
    font: 700 11px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
  }
}

@media (max-width: 639px) {
  .app-shell .ui-right-drawer,
  .app-shell.layout-scout .ui-right-drawer,
  .app-shell.layout-analyst .ui-right-drawer {
    display: grid !important;
    opacity: 1 !important;
    position: fixed;
    left: max(8px, var(--safe-left));
    right: max(8px, var(--safe-right));
    top: var(--mobile-topbar-h);
    bottom: var(--mobile-tabbar-h);
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: none;
    transform: translateY(110%);
    pointer-events: none;
    border: 1px solid rgba(145, 160, 178, 0.18);
    border-radius: 18px;
    background: rgba(7, 10, 14, 0.97);
    z-index: 2450;
    transition: transform 220ms ease;
  }

  .app-shell .ui-right-drawer.is-open,
  .app-shell.layout-scout .ui-right-drawer.is-open,
  .app-shell.layout-analyst .ui-right-drawer.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* [right-drawer-20260808] Jumeau exact du tiroir du bas, oublie lors de sa correction. Mesure a 390px
     en ETF_MAISON et en SCREENER : son bandeau "Engine Outils" tombait a top=844
     dans une fenetre de 844 -- un pixel de marge, garanti par rien. C'est la barre
     que l'operateur voyait encore apres la premiere correction.
     Ces deux modes declarent `right: "closed"` et n'hebergent aucun panneau
     d'outils ; la barre a onglets qui seule pourrait l'ouvrir sur telephone est
     cantonnee a SCOUT. Inatteignable : on le sort de ces deux modes. */
  .app-shell.layout-etf-maison .ui-right-drawer,
  .app-shell.layout-screener .ui-right-drawer {
    display: none !important;
  }

  /* Et partout ailleurs, la feuille fermee quitte l'arbre visuel une fois le
     glissement termine, plutot que de dependre de la proportion entre 110% et la
     hauteur de son contenu. `visibility` et non `display` : la geometrie doit rester
     mesurable pour drawers.js. */
  .app-shell .ui-right-drawer:not(.is-open) {
    visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }

  .app-shell .ui-right-drawer.is-open {
    visibility: visible;
    transition: transform 220ms ease, visibility 0s;
  }

  .app-shell .ui-bottom-drawer,
  .app-shell.layout-scout .ui-bottom-drawer,
  .app-shell.layout-analyst .ui-bottom-drawer {
    display: grid !important;
    position: fixed;
    left: max(8px, var(--safe-left));
    right: max(8px, var(--safe-right));
    top: var(--mobile-topbar-h);
    bottom: var(--mobile-tabbar-h);
    height: auto !important;
    max-height: none !important;
    transform: translateY(110%);
    border-radius: 18px;
    background: rgba(7, 10, 14, 0.97);
    z-index: 2450;
    transition: transform 220ms ease;
  }

  .app-shell .ui-bottom-drawer.is-open,
  .app-shell.layout-scout .ui-bottom-drawer.is-open,
  .app-shell.layout-analyst .ui-bottom-drawer.is-open {
    transform: translateY(0);
  }

  /* [sheet-icons-20260808] La feuille fermee ne sortait de l'ecran que par `translateY(110%)`, dont la
     marge depend de la seule proportion entre 110% et la hauteur du contenu :
     mesure a 390x844, le haut de la feuille fermee tombait a 842,6 dans une fenetre
     de 844, soit 1,4px encore dedans. Rien ne garantit ce pixel -- barre d'adresse
     retractee, safe-area, contenu plus court -- et c'est ainsi que le bandeau du
     tiroir a fini par depasser. On la retire de l'arbre visuel une fois le
     glissement termine, et on l'y remet des l'ouverture. `visibility` plutot que
     `display` : drawers.js lit la hauteur de la feuille, qui doit rester mesurable. */
  .app-shell .ui-bottom-drawer:not(.is-open) {
    visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }

  .app-shell .ui-bottom-drawer.is-open {
    visibility: visible;
    transition: transform 220ms ease, visibility 0s;
  }

  .ui-bottom-drawer[data-sheet-state] {
    height: auto !important;
    max-height: none !important;
  }

  .ui-bottom-drawer[data-sheet-state="collapsed"] .drawer-header,
  .ui-bottom-drawer[data-sheet-state="collapsed"] .drawer-body {
    opacity: 1;
    pointer-events: auto;
    content-visibility: auto;
  }

  .ui-bottom-drawer .bottom-resize-handle {
    display: none;
  }

  /* [bottom-bars-20260808] ETF_MAISON et SCREENER declarent `bottom: "closed"` et n'hebergent aucun
     panneau de tiroir ; la barre a onglets qui seule pourrait l'ouvrir sur telephone
     est cantonnee a SCOUT. Le tiroir y etait pourtant rendu en entier -- mesure a
     390px : h=706, bandeau "Workspace Confluence Trades Logs Exports" large de 442px
     dans un ecran de 390 -- parce que l'override "collapsed" ci-dessus lui rend la
     visibilite que drawers.css lui retire. Inatteignable et hors cadre : on le sort
     de ces deux modes. SCOUT garde le sien, ouvert par l'onglet "Strat". */
  .app-shell.layout-etf-maison .ui-bottom-drawer,
  .app-shell.layout-screener .ui-bottom-drawer {
    /* !important obligatoire : drawers.css:231 pose `display: grid !important` sur
       `.ui-bottom-drawer` sous 639px sans distinguer les modes. */
    display: none !important;
  }

  .ui-right-drawer .drawer-header,
  .ui-bottom-drawer .drawer-header {
    padding: 8px 10px;
  }

  .ui-bottom-drawer .drawer-header .tabs {
    display: flex;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ui-bottom-drawer .drawer-header .tabs::-webkit-scrollbar {
    display: none;
  }

  .ui-bottom-drawer .drawer-header .tab-btn {
    flex: 0 0 auto;
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-right-drawer .drawer-body,
  .ui-bottom-drawer .drawer-body {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sheet-overlay {
    z-index: 2440;
    background: rgba(3, 5, 8, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .app-shell .ui-right-drawer.is-open,
  .app-shell .ui-bottom-drawer.is-open {
    box-shadow:
      0 -16px 42px rgba(0, 0, 0, 0.56),
      0 1px 0 0 rgba(111, 231, 255, 0.46) inset;
  }

  .mobile-strategy-workspace {
    display: grid;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(145, 160, 178, 0.14);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
    box-sizing: border-box;
  }

  .mobile-strategy-head {
    min-width: 0;
  }

  .mobile-strategy-title {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .mobile-strategy-kicker,
  #mobileStrategyMeta {
    color: rgba(151, 166, 184, 0.92);
    font: 700 10px/1.1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  #mobileStrategyName {
    min-width: 0;
    color: var(--text, #e7edf4);
    font: 800 14px/1.2 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-strategy-grid {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .mobile-strategy-field {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
  }

  .mobile-strategy-field--solo {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .mobile-strategy-field span {
    color: rgba(151, 166, 184, 0.92);
    font: 700 10px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .mobile-strategy-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid rgba(145, 160, 178, 0.18);
    border-radius: var(--radius-md);
    background: rgba(3, 5, 8, 0.72);
    color: var(--text, #e7edf4);
    font: 700 12px/1.1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  }

  .mobile-strategy-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-stat-detail {
    min-width: 0;
    border: 1px solid rgba(145, 160, 178, 0.14);
    border-radius: var(--radius-md);
    background: rgba(3, 5, 8, 0.58);
    overflow: hidden;
  }

  .mobile-stat-detail summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    list-style: none;
  }

  .mobile-stat-detail summary::-webkit-details-marker,
  .mobile-template-detail summary::-webkit-details-marker {
    display: none;
  }

  .mobile-stat-label,
  .mobile-template-detail summary span {
    color: rgba(151, 166, 184, 0.92);
    font: 700 10px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .mobile-stat-value,
  .mobile-template-detail summary strong {
    color: var(--text, #e7edf4);
    font: 800 13px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  }

  .mobile-stat-body {
    display: grid;
    gap: 4px;
    padding: 0 10px 9px;
  }

  .mobile-stat-body div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: rgba(151, 166, 184, 0.86);
    font-size: 11px;
  }

  .mobile-stat-body strong {
    color: var(--text, #e7edf4);
    font-weight: 700;
  }

  .mobile-template-detail {
    border: 1px solid rgba(145, 160, 178, 0.14);
    border-radius: var(--radius-md);
    background: rgba(3, 5, 8, 0.58);
    overflow: hidden;
  }

  .mobile-template-detail summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 10px;
    list-style: none;
  }

  .mobile-template-pre {
    max-height: 220px;
    margin: 0;
    padding: 10px;
    overflow: auto;
    border-top: 1px solid rgba(145, 160, 178, 0.12);
    color: rgba(231, 237, 245, 0.86);
    font: 600 10px/1.45 "JetBrains Mono", ui-monospace, monospace;
    white-space: pre-wrap;
  }

  .mobile-chart-tool-hud {
    position: absolute;
    left: 8px;
    right: 72px;
    bottom: 32px;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    max-width: 310px;
    border: 1px solid rgba(145, 160, 178, 0.18);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(9, 13, 18, 0.94), rgba(3, 5, 8, 0.88));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
  }

  .mobile-chart-tool-hud[hidden] {
    display: none !important;
  }

  .mobile-chart-tool-editor {
    display: grid;
    gap: 7px;
    padding: 8px;
  }

  .mobile-chart-tool-editor[hidden],
  .mobile-chart-tool-row[hidden] {
    display: none !important;
  }

  .mobile-chart-tool-editor__head,
  .mobile-chart-tool-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .mobile-chart-tool-editor__head {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(145, 160, 178, 0.12);
  }

  .mobile-chart-tool-editor__identity {
    min-width: 0;
    display: grid;
    gap: 1px;
  }

  .mobile-chart-tool-editor__identity span,
  .mobile-chart-tool-row > span {
    min-width: 0;
    overflow: hidden;
    color: rgba(151, 166, 184, 0.9);
    font: 800 9px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chart-tool-editor__identity strong {
    min-width: 0;
    overflow: hidden;
    color: rgba(231, 237, 245, 0.96);
    font: 800 13px/1.05 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chart-tool-editor__actions,
  .mobile-chart-tool-swatches,
  .mobile-chart-tool-segments,
  .mobile-chart-tool-label-edit {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
  }

  .mobile-chart-tool-segments,
  .mobile-chart-tool-range,
  .mobile-chart-tool-label-edit {
    min-width: 0;
  }

  .mobile-chart-tool-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 6px;
  }

  .mobile-chart-tool-range input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: var(--accent-cyan, #6fe7ff);
  }

  .mobile-chart-tool-range output {
    color: rgba(231, 237, 245, 0.9);
    font: 800 9px/1 "JetBrains Mono", ui-monospace, monospace;
    text-align: right;
  }

  .mobile-chart-tool-label-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .mobile-chart-tool-label-edit input {
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(145, 160, 178, 0.16);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(231, 237, 245, 0.92);
    font: 700 10px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  }

  .mobile-chart-tool-hud button {
    min-width: 34px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(145, 160, 178, 0.16);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(231, 237, 245, 0.88);
    font: 800 9px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .mobile-chart-tool-hud .mobile-chart-tool-swatch {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }

  .mobile-chart-tool-hud button.is-danger {
    color: rgba(255, 148, 166, 0.96);
    border-color: rgba(255, 111, 145, 0.22);
    background: rgba(255, 111, 145, 0.08);
  }

  .mobile-chart-tool-hud .mobile-chart-tool-swatch[aria-pressed="true"],
  .mobile-chart-tool-segments button[aria-pressed="true"],
  .mobile-chart-tool-editor__actions button[aria-pressed="true"] {
    color: rgba(231, 237, 245, 0.96);
    border-color: rgba(231, 237, 245, 0.78);
    background: rgba(111, 231, 255, 0.11);
    box-shadow: 0 0 0 1px rgba(111, 231, 255, 0.22);
  }

  .mobile-chart-tool-hud button:disabled {
    opacity: 0.42;
  }

  .app-shell.layout-scout .operator-workbench__actions--quiet,
  .app-shell.layout-analyst .operator-workbench__actions--quiet {
    display: none !important;
  }
}

.dock-group-summary {
  display: none;
}

.dock-group-body {
  display: block;
}

@media (max-width: 639px) {
  .dock-group {
    border: 1px solid rgba(145, 160, 178, 0.14);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.015);
    overflow: hidden;
  }

  .dock-group + .dock-group {
    margin-top: var(--sp-2, 8px);
  }

  .dock-group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
  }

  .dock-group-summary::-webkit-details-marker {
    display: none;
  }

  .dock-group[open] > .dock-group-summary {
    border-bottom-color: rgba(145, 160, 178, 0.14);
    background: rgba(111, 231, 255, 0.04);
  }

  .dock-group-title {
    color: var(--text, #e7edf4);
    font: 700 13px/1.1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .dock-group-count {
    border: 1px solid rgba(145, 160, 178, 0.18);
    border-radius: var(--radius-pill);
    color: var(--muted, #8b95a7);
    font-size: 11px;
    padding: 2px 8px;
  }

  .dock-group-body {
    display: grid;
    gap: var(--sp-2, 8px);
    padding: var(--sp-2, 8px);
  }

  .dock-group:not([open]) > .dock-group-body {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HEADER / NAV POLISH — 2026-07-07
   Three targets:
     1. Compact the default mobile topbar (reclaim vertical space).
     2. Bottom-nav (.mobile-tab-bar) legibility — bigger labels, clearer
        active state.
     3. Glass-pill consistency (Scout/Analyst floating topbar + matched
        bottom-nav shadow language).
   mobile.css is loaded last; selectors intentionally match layout.css so
   equal specificity is won by source order. Revert: delete this block.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

  /* ── 1. Compact default mobile topbar (non-Scout/Analyst) ───────
     Tighter padding + gap, slimmer row-1 chrome (active-mode chip and
     burger menu). The primary control (symbol select) stays 44px so the
     most-used tap target keeps full ergonomics. */
  .topbar-main {
    min-height: 0;          /* was 96px — let content drive the height */
    gap: 4px;               /* was 6px */
    padding: 4px;           /* was 6px */
  }

  .topbar-main .mobile-active-mode,
  .topbar-main .topbar-mobile-menu > summary {
    min-height: 38px;       /* was forced 44px in row 1 */
    height: 38px;
  }

  /* ── 2. Bottom-nav (.mobile-tab-bar) legibility ─────────────────
     Bigger label (10 -> 11px) with more vertical room, slightly dimmer
     inactive state so the active tab pops, and a stronger active ring. */
  .mobile-tab-bar {
    height: 62px;           /* was 58px */
    gap: 4px;               /* was 3px */
    border-color: rgba(111, 231, 255, 0.20);
    background: rgba(7, 10, 14, 0.90);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.30);
  }

  .mtab {
    grid-template-rows: 22px 15px;          /* was 23px 13px — more label room */
    font-size: 11px;                         /* was 10px */
    color: rgba(166, 180, 197, 0.78);        /* slightly dimmer inactive */
  }

  .mtab[aria-current="true"] {
    border-color: rgba(111, 231, 255, 0.40); /* stronger active ring */
    background: rgba(111, 231, 255, 0.12);   /* stronger active fill */
    box-shadow: inset 0 0 0 1px rgba(111, 231, 255, 0.10);
  }

  /* ── 3. Glass-pill consistency (Scout/Analyst) ──────────────────
     Layered shadow (tight + ambient) and a subtle top inset highlight so
     the floating pills read as glass; border matches the bottom nav so
     the top + bottom pills form a matched pair. */
  .app-shell.layout-scout .topbar-main,
  .app-shell.layout-analyst .topbar-main {
    border-color: rgba(111, 231, 255, 0.20);
    background: rgba(8, 12, 20, 0.74);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 12px 30px rgba(0, 0, 0, 0.42),
      0 2px 6px rgba(0, 0, 0, 0.30);
  }

  .app-shell.layout-scout .mobile-tab-bar,
  .app-shell.layout-analyst .mobile-tab-bar {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 12px 30px rgba(0, 0, 0, 0.44),
      0 2px 6px rgba(0, 0, 0, 0.30);
  }

}

/* Bug fix 2026-08-05: the "show sidebar (search/univers/secteur) when
   .screener-mobile-filters is active" rule below is scoped to the
   max-width:639px block that follows, because on mobile that class is only
   ever set by the Résultats/Filtres sub-tabs. On desktop, "Filtres avances"
   in the "..." toolbar menu toggles #symbolAdvancedFilters via a completely
   separate aria-hidden mechanism that never touches this class or the
   sidebar -- so #symbolSearchInput (globally display:none via the
   [responsive-pc-20260712] sidebar purge below) had literally no reachable
   path on desktop. Unscoped duplicate so opening Filtres avances on any
   viewport also reveals the sidebar; symbolToggleAdvanced's click handler
   now sets the same class (see symbolScreenerEvents.js). */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-sidebar {
  display: block;
}

/* ─────────── SCREENER MODE (mobile): full-screen workspace + Résultats/Filtres sub-tabs ─────────── */
@media (max-width: 639px) {
  .app-shell.layout-screener .screener-subtabs {
    display: flex;
    gap: 4px;
    padding: 4px 2px 8px;
  }
  .app-shell.layout-screener .screener-subtabs[hidden] { display: flex; }
  .app-shell.layout-screener .screener-subtab {
    flex: 1;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted);
    font: 600 13px system-ui, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  }
  .app-shell.layout-screener .screener-subtab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
  }
  .app-shell.layout-screener .screener-subtab.is-active {
    background: rgba(111, 231, 255, 0.10);
    color: var(--accent-cyan);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(111, 231, 255, 0.28);
  }

  /* .tb-actions is display:none on mobile and wraps #symbolScreener; un-hide it in
     screener mode so the fixed panel can render, but hide its other children (cmd/settings). */
  .app-shell.layout-screener .tb-actions { display: flex !important; }
  .app-shell.layout-screener .tb-actions > :not(.topbar-screener) { display: none !important; }

  /* Panel fills between topbar (48px) and bottom tab bar (62px) */
  .app-shell.layout-screener .topbar-screener .topbar-screener-panel {
    top: 48px;
    bottom: 62px;
    padding: 8px;
  }

  /* DEFAULT sub-tab = Résultats: hide filter panes, show results */
  .app-shell.layout-screener .topbar-screener-sidebar,
  .app-shell.layout-screener .topbar-screener-section--advanced { display: none; }

  /* FILTRES sub-tab (.screener-mobile-filters on .topbar-screener-shell) */
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-results { display: none; }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-sidebar,
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-section--advanced {
    display: block;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Force the advanced section visible in Filtres view regardless of its aria-hidden toggle */
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-section--advanced[aria-hidden="true"] {
    display: block;
  }

  /* Full-width, comfortably tappable result rows */
  .app-shell.layout-screener .topbar-screener-row { min-height: 44px; }

  /* === [screener-redesign-20260711] mobile screener redesign === */
  /* Drop the global top bar in screener mode; float only the hamburger over
     the sub-tabs row so navigation back to Scout is preserved. */
  .app-shell.layout-screener .topbar-main {
    position: absolute; top: 8px; right: 8px; left: auto; bottom: auto;
    width: auto; min-height: 0; height: auto; padding: 0; gap: 0;
    background: none; border: none; box-shadow: none; display: block; z-index: 30;
  }
  .app-shell.layout-screener .topbar-main .tb-brand,
  .app-shell.layout-screener .topbar-main .mobile-active-mode { display: none !important; }
  .app-shell.layout-screener .topbar-main .topbar-mobile-menu { justify-self: end; position: relative; z-index: 10; }
  /* Reclaim the 48px the top bar used; reserve room so Filtres clears the hamburger. */
  .app-shell.layout-screener .topbar-screener .topbar-screener-panel { top: 0; bottom: 0; }
  .app-shell.layout-screener .screener-subtabs { padding-right: 44px; }
  /* Toolbar: one line, count left, actions right, no wrap. Drop the redundant
     "Resultats" label (the sub-tab already says it). */
  .app-shell.layout-screener .topbar-screener-toolbar { flex-wrap: nowrap; }
  .app-shell.layout-screener .topbar-screener-toolbar-copy { min-width: 0; }
  .app-shell.layout-screener .topbar-screener-toolbar-copy strong { display: none; }
  .app-shell.layout-screener .topbar-screener-toolbar-copy span {
    font-size: 12px; text-transform: none; letter-spacing: 0; white-space: nowrap;
  }
  .app-shell.layout-screener .topbar-screener-toolbar-actions {
    width: auto; flex-wrap: nowrap; justify-content: flex-end;
  }
  /* Filtres sub-tab: advanced pane is rendered but invisible on mobile (desktop
     slide-in leaves visibility:hidden + opacity:0). Force it visible. */
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-section--advanced {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto; padding: 12px;
  }
  /* The "x" close button is a desktop-modal control, redundant full-screen. */
  .app-shell.layout-screener .topbar-screener-inline-close { display: none; }
  /* Tight quickbar: Texte full width, Univers|Secteur, Industry full width. */
  .app-shell.layout-screener .topbar-screener-quickbar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .app-shell.layout-screener .topbar-screener-quickbar .symbol-search-field { grid-column: 1 / -1; }
  .app-shell.layout-screener .topbar-screener-quickbar > :nth-child(4) { grid-column: 1 / -1; }

}

/* ── Screener: customizable columns + sparkline ── */
.app-shell.layout-screener .topbar-screener-results { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.app-shell.layout-screener .topbar-screener-rows { min-width: max-content; }
.app-shell.layout-screener .topbar-screener-results-head { min-width: max-content; }
#symbolSparkBtn.is-active { background: rgba(111,231,255,0.14); color: var(--accent-cyan, #6fe7ff); border-color: rgba(111,231,255,0.45); }
.screener-columns-panel {
  display: none; position: absolute; z-index: 240; top: 100%; right: 8px;
  background: rgba(10,12,18,0.98); border: 1px solid rgba(145,160,178,0.22); border-radius: var(--radius-lg);
  padding: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); max-width: 260px;
  grid-template-columns: 1fr 1fr; gap: 4px 10px;
}
.screener-columns-panel.is-open { display: grid; }
.screener-columns-panel-head { grid-column: 1 / -1; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #8b95a7); margin-bottom: 4px; }
.screener-columns-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg, #e6e9f0); cursor: pointer; }
.screener-columns-row input { width: 14px; height: 14px; }
.topbar-screener-toolbar { position: relative; }

/* === [screener-redesign-20260711] '...' overflow menu base (desktop + mobile) === */
.screener-overflow { position: relative; }
.screener-overflow > .screener-overflow-summary { list-style: none; cursor: pointer; }
.screener-overflow > .screener-overflow-summary::-webkit-details-marker { display: none; }
.screener-overflow-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 240;
  min-width: 172px; display: grid; gap: 4px; padding: 8px;
  border: 1px solid rgba(145, 160, 178, 0.22); border-radius: var(--radius-lg);
  background: rgba(10, 12, 18, 0.98); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.screener-overflow:not([open]) .screener-overflow-menu { display: none; }
.screener-overflow-menu .btn { width: 100%; justify-content: flex-start; }

/* === [%screener-filtres-refactor-20260711] Profound mobile Filtres refactor === */
/* Advanced pane: flat scroll column of cards */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-section--advanced {
  gap: 8px;
  padding: 4px 2px;
  background: none;
  border: none;
  border-radius: 0;
}
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-section--advanced > .topbar-screener-section-head {
  padding: 2px 8px 4px;
}
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-section--advanced .topbar-screener-section-head strong {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-section--advanced .topbar-screener-section-head span { display: none; }

/* 'Recherche' quickbar as a card with a generated header */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-sidebar .topbar-screener-section:first-child {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.02);
}
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-sidebar .topbar-screener-section:first-child::before {
  content: "Filtres rapides";
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  padding: 0 0 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(145, 160, 178, 0.08);
}

/* Each filter group = a card */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-filter-group {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.02);
  gap: 10px;
}
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-filter-group + .screener-filter-group {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
/* Group title = accent-cyan header */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-filter-group-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-cyan);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(145, 160, 178, 0.08);
}

/* 2-col grids (was 3) for readability */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-grid,
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-grid--advanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
/* Tri select + range-pair fields = full width */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-grid--single,
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-grid--single .field,
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-grid:has(.screener-range-pair) .field-sm:has(.screener-range-pair),
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-grid--advanced .field-sm:has(.screener-range-pair) {
  grid-column: 1 / -1;
}

/* Toggles = neat 2-col grid of pills */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-toggle {
  width: 100%;
  height: 36px;
  justify-content: center;
  font-size: 11px;
}

/* Bigger tap targets, compact labels */
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .field input,
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .field select {
  min-height: 38px;
}
.app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .field > span {
  font-size: 10px;
}
/* === [screener-mobile-ui-20260711] base: mobile-only elements hidden on desktop === */
.screener-mobile-bar,
.screener-mobile-count,
.screener-mobile-sheet-head,
.screener-mobile-presets,
.screener-mobile-active { display: none; }

  /* Bug fix 2026-08-05: this whole [screener-mobile-ui-20260711] pass through
     [screener-tabletrim-20260711] below was missing its @media wrapper, so every
     rule in it (results-first layout, filters sheet, hamburger docking) applied
     UNconditionally at every viewport width — hiding .topbar-screener-toolbar
     (the only way to reach "Filtres avances") on desktop too. Re-added the
     boundary; the [responsive-pc-20260712] sidebar purge right after stays
     outside it on purpose (that one really is meant to apply everywhere). */
@media (max-width: 639px) {
  /* === [screener-mobile-ui-20260711] results-first mobile screener === */
  .app-shell.layout-screener .screener-subtabs,
  .app-shell.layout-screener .topbar-screener-toolbar { display: none !important; }
  .app-shell.layout-screener .topbar-screener-body { gap: 0; }
}
  /* [responsive-pc-20260712] épuration: la sidebar Vue Rapide (Univers/Secteur/Industry
     toujours visibles) est un reste desktop-only — le mobile y accède via la sheet Filtres
     (bouton Filtres → toggle .screener-mobile-filters, width-indépendant). On purge sur tous
     viewports pour unifier PC = mobile (results-first). Réversible. */
  .app-shell.layout-screener .topbar-screener-sidebar { display: none; }

@media (max-width: 639px) {
  /* ── RESULTS view ── */
  .app-shell.layout-screener .screener-mobile-bar {
    display: flex; align-items: center; gap: 6px; order: 0;
    position: sticky; top: 0; z-index: 6;
    padding: 8px; background: rgba(7, 8, 10, 0.96);
    border-bottom: 1px solid var(--line);
  }
  .app-shell.layout-screener .screener-mobile-search { flex: 1; min-width: 0; }
  .app-shell.layout-screener .screener-mobile-search input {
    width: 100%; height: 38px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03); color: var(--text); font-size: 14px;
  }
  .app-shell.layout-screener .screener-mobile-filters-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; white-space: nowrap;
    border: 1px solid rgba(111, 231, 255, 0.45); border-radius: var(--radius-lg);
    background: rgba(111, 231, 255, 0.10); color: var(--accent-cyan);
    font: 600 13px system-ui, sans-serif; cursor: pointer;
  }
  .app-shell.layout-screener .topbar-screener-content { order: 2; }

  /* ── FILTERS sheet view ── */
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-bar,
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; order: 0;
    position: sticky; top: 0; z-index: 6;
    padding: 10px 12px; background: rgba(7, 8, 10, 0.98); border-bottom: 1px solid var(--line);
  }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-sheet-head strong {
    font-size: 15px; letter-spacing: 0.02em; color: var(--text);
  }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-presets,
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-active {
    display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
  }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-presets { order: 1; }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-active { order: 2; }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-sidebar { order: 3; }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-content { order: 4; }
  .app-shell.layout-screener .screener-mobile-section-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  }
  .app-shell.layout-screener .screener-mobile-preset-chips,
  .screener-preset-chip.is-active {
    background: rgba(111, 231, 255, 0.14); color: var(--accent-cyan);
    border-color: rgba(111, 231, 255, 0.45);
  }

  /* Accordion groups */
  .app-shell.layout-screener .topbar-screener-section--advanced .screener-filter-group-title {
    cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px;
  }
  .app-shell.layout-screener .topbar-screener-section--advanced .screener-filter-group-title::before {
    content: "\25BE"; font-size: 10px; color: var(--muted);
  }
  .app-shell.layout-screener .topbar-screener-section--advanced .screener-filter-group[data-collapsed="true"] .screener-filter-group-title::before {
    content: "\25B8";
  }
  .app-shell.layout-screener .topbar-screener-section--advanced .screener-filter-group[data-collapsed="true"] > *:not(.screener-filter-group-title) {
    display: none;
  }

  /* === [screener-sheetfix-20260711] filters sheet = one scroll column, sticky header (no squeezed boxes) === */
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-sidebar,
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-section--advanced {
    flex: none;
    overflow: visible;
    min-height: 0;
    display: block;
  }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-content {
    flex: none;
    overflow: visible;
    min-height: 0;
  }

  /* === [screener-trim-20260711] hide duplicate Texte field; rename Recherche header === */
  .app-shell.layout-screener .topbar-screener-quickbar .symbol-search-field { display: none !important; }

  /* === [screener-dock-menu-20260711] dock hamburger into the bar line (top-right) === */
  /* reserve room so the Filtres button clears the docked hamburger */
  .app-shell.layout-screener .screener-mobile-bar { padding-right: 56px; }
  /* style the hamburger as a bar button */
  .app-shell.layout-screener .topbar-main .topbar-mobile-menu > summary {
    height: 38px; width: 38px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03); color: var(--text); font-size: 18px;
  }

  /* === [screener-dock-real-20260711] hamburger docked as an in-flow bar item === */
  /* revert the previously reserved gap (no longer needed) */
  .app-shell.layout-screener .screener-mobile-bar { padding-right: 8px; }
  /* the menu, now a child of the bar */
  .app-shell.layout-screener .screener-mobile-bar .topbar-mobile-menu {
    display: block; flex: 0 0 auto; margin-left: auto;
  }
  .app-shell.layout-screener .screener-mobile-bar .topbar-mobile-menu > summary {
    height: 38px; width: 38px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03); color: var(--text); font-size: 18px;
  }

  /* === [screener-badge-results-20260711] hide duplicate result-count line (badge now carries it) === */

  /* === [screener-tabletrim-20260711] trim header height + remove bottom gap === */
  .app-shell.layout-screener .topbar-screener-results-head {
    padding: 5px 10px 5px 8px;
  }
}

@media (max-width: 639px) {
  /* === [screener-colalign-20260711] one scroll container so header + rows stay aligned === */
  .app-shell.layout-screener .topbar-screener-results {
    overflow: auto;
    /* Same clearance as .screener-subtabs (line ~1003): the hamburger floats
       absolutely over this whole region. Unlike the subtabs (a flex row that
       reflows), this is a scrollable min-width:max-content grid, so padding
       on the scrolled content only adds trailing scroll room — it does not
       shrink the visible viewport. A margin on the viewport itself does. */
    margin-right: 44px;
  }
  .app-shell.layout-screener .topbar-screener-results-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(7, 8, 10, 0.98);
  }
  .app-shell.layout-screener .topbar-screener-rows {
    overflow: visible;
    flex: 0 1 auto;
  }
}

/* Bases bureau : ces deux sections n'existent que dans la feuille mobile, elles
   doivent rester masquees a toute autre largeur. */
.screener-mobile-columns { display: none; }
.screener-mobile-columns-panel { display: none; }

/* [screener-columns-rescope-20260807] These rules carried the indentation of an
   @media that closed 4 lines earlier, so they applied at every width. Reachable:
   symbolScreenerEvents.js sets .screener-mobile-filters on any viewport, which
   made a desktop 'Filtres avancés' reorder the screener with a phone sheet's
   order:1..5. Completes the rewrap begun on 2026-08-05 (see line ~1165). */
@media (max-width: 639px) {
  /* === [screener-columns-toggle-20260711] Colonnes section in filter sheet === */
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-columns {
    display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
    border-bottom: 1px solid var(--line);
  }
  .screener-mobile-columns-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  }
  .screener-mobile-columns-grid .screener-columns-row {
    display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); cursor: pointer;
  }
  .screener-mobile-columns-grid .screener-columns-row input { width: 18px; height: 18px; }
  /* sheet order: presets, colonnes, actifs, recherche, groups */
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-presets { order: 1; }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-columns { order: 2; }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-active { order: 3; }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-sidebar { order: 4; }
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .topbar-screener-content { order: 5; }

  /* === [screener-colsbtn-20260711] collapsible Colonnes panel + button active === */
  .app-shell.layout-screener .topbar-screener-shell.screener-mobile-filters .screener-mobile-columns-panel.is-open {
    display: block; order: 0; padding: 8px 12px;
    border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.25);
  }
  .app-shell.layout-screener #symbolMobileColumnsBtn.is-active {
    background: rgba(111, 231, 255, 0.14); color: var(--accent-cyan);
    border-color: rgba(111, 231, 255, 0.45);
  }
}

/* SCREENER-MOBILE-CSS-END */

/* Removed 2026-08-05 (was "Hygiene 2026-07-20"): this block rendered each
   screener result as a compact card on narrow viewports instead of a table
   row. Operator explicitly asked for the same dense, horizontally-scrolling
   table on mobile as on desktop -- the shared .topbar-screener-row rule in
   layout.css (with the grid-auto-flow:column fix) now applies unscoped, so
   mobile gets identical column layout + horizontal scroll instead of a
   separate card treatment. */