/* Les listes déroulantes des fenêtres de l'espace (src/menu-liste.js, 17/10/2026) : le style des menus du site.
   Préfixe :is(html, html[data-theme]) :is(.page-app, body) et classe doublée : les feuilles des fenêtres (.pg button, .pg-champ…)
   posent leurs règles à forte spécificité ; sans lui, le bouton prenait leur dessin (chevron de 118 px, mesuré le 17/10). */
select.ml-cache { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ml-bouton { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--h-bouton); padding: 0 10px 0 12px; border: 0; border-radius: var(--r-bouton); background: var(--champ); box-shadow: inset 0 0 0 1px var(--filet); color: var(--encre); font: inherit; font-size: var(--t-14); text-align: left; cursor: pointer; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ml-bouton:hover { background: var(--actif); }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ml-bouton:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ml-bouton span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ml-bouton svg { flex: none; width: 12px; height: 12px; opacity: .7; transition: transform .15s; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ml-bouton:disabled { opacity: .45; cursor: default; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-menu { position: fixed; z-index: 2000; max-width: min(420px, calc(100vw - 16px)); max-height: min(420px, 60vh); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 6px; border-radius: var(--r-carte); background: var(--verre-plein); box-shadow: var(--menu-ombre), var(--verre-filet), 0 0 0 1px var(--filet); animation: surgir .14s ease-out; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-menu button { display: block; width: 100%; min-height: 30px; padding: 5px 10px 5px 28px; border: 0; border-radius: var(--r-bouton); background: none; color: var(--encre); font: inherit; font-size: var(--t-13); text-align: left; cursor: pointer; position: relative; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-menu button:hover, :is(html, html[data-theme]) :is(.page-app, body) .ml-menu button:focus-visible { background: var(--actif); outline: none; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-menu button[aria-selected="true"] { font-weight: 600; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-menu button[aria-selected="true"]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 5px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-70%) rotate(-45deg); }
:is(html, html[data-theme]) :is(.page-app, body) .ml-menu button:disabled { opacity: .4; cursor: default; }

/* Au doigt (01/11/2026, Henri : « tous les menus déroulants sont trop grossiers ») : le déclencheur reste compact, la liste est une
   feuille qui monte du bas, coins arrondis, lignes de 46 px, coche à gauche du choix. Mouvement réduit : sans glissement. */
@media (pointer: coarse) {
  :is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ml-bouton { min-height: calc(var(--h-bouton) + 10px); font-size: 15px; border-radius: 10px; padding: 0 12px; }
  :is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ml-bouton svg { width: 11px; height: 11px; opacity: .55; }
  .ml-voile { position: fixed; inset: 0; z-index: 1999; background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .2s ease; }
  .ml-voile.on { opacity: 1; }
  :is(html, html[data-theme]) :is(.page-app, body) .ml-menu.ml-feuille { box-sizing: border-box; animation: none; left: 0; right: 0; bottom: 0; top: auto; max-width: none; width: 100%; min-width: 0; max-height: min(70vh, 520px);
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom)); gap: 0; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; }
  :is(html, html[data-theme]) :is(.page-app, body) .ml-menu.ml-feuille.on { transform: none; }
  .ml-poignee { flex: none; align-self: center; width: 36px; height: 4px; margin: 4px 0 6px; border-radius: 2px; background: currentColor; opacity: .22; }
  .ml-titre { flex: none; margin: 0; padding: 2px 12px 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .55; }
  :is(html, html[data-theme]) :is(.page-app, body) .ml-menu.ml-feuille button { min-height: calc(var(--h-bouton) + 16px); padding: 0 14px 0 34px; font-size: 16px; border-radius: 10px; }
  :is(html, html[data-theme]) :is(.page-app, body) .ml-menu.ml-feuille button[aria-selected="true"]::before { left: 13px; }
  @media (prefers-reduced-motion: reduce) { :is(html, html[data-theme]) :is(.page-app, body) .ml-menu.ml-feuille, .ml-voile { transition: none; } }
}