/* picofasthtml — tokens projet + mapping Pico + composants de la librairie. * Chargé APRÈS pico.min.css. Ne jamais éditer Pico directement. * * Palette reprise de workflowy-replicate (valeurs relevées sur workflowy.com). */ :root { /* -- tokens projet -------------------------------------------------- */ --u-text: #2a3135; --u-muted: #868c90; --u-line: #eceef0; --u-halo: #dce0e2; --u-dot: #4b5155; --u-accent: #3d8bfd; --u-accent-hover: #2f7de8; --u-bg: #ffffff; --u-surface: #ffffff; --u-bar-h: 3.25rem; /* hauteur de la topbar */ --pfx-drawer-w: 17rem; /* largeur du menu latéral (bureau) — réécrite par picofasthtml.js au drag */ } /* Mapping vers les variables Pico. Le sélecteur reprend EXACTEMENT celui de * Pico (`:root:not([data-theme=dark])`) : à spécificité égale, c'est la * feuille chargée en dernier qui gagne — donc il faut cette forme, un simple * `:root` serait battu par Pico. L'app est verrouillée en thème clair * (voir dans assets.py). */ :root:not([data-theme="dark"]) { --pico-primary: var(--u-accent); --pico-primary-background: var(--u-accent); --pico-primary-border: var(--u-accent); --pico-primary-hover: var(--u-accent-hover); --pico-primary-hover-background: var(--u-accent-hover); --pico-primary-hover-border: var(--u-accent-hover); --pico-primary-focus: rgba(61, 139, 253, 0.25); --pico-primary-underline: rgba(61, 139, 253, 0.5); --pico-color: var(--u-text); --pico-background-color: var(--u-bg); --pico-muted-color: var(--u-muted); --pico-muted-border-color: var(--u-line); --pico-border-color: var(--u-line); --pico-border-radius: 6px; --pico-font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Pico applique son fond sur ; on garde la même teinte que wfreplicate. */ body { background: var(--u-bg); } /* ==================================================================== * pfx-bar — topbar horizontale collée en haut * ==================================================================== */ .pfx-bar { display: flex; align-items: center; gap: 0.25rem; min-height: var(--u-bar-h); /* même gouttière horizontale que le .container Pico, pour aligner la marque sur le

du contenu / padding-inline: var(--pico-spacing, 1rem); background: var(--u-surface); margin: 0; } .pfx-bar > { margin: 0; } /* `overflow` reste visible : le menu de page (.pfx-poppanel) déborde la barre sur bureau. Le scroll horizontal de page est bloqué plus haut, sur .pfx-shell (overflow-x: clip). / .pfx-bar--top { position: sticky; top: 0; / le menu de page (.pfx-poppanel, fixed) est peint dans le contexte d'empilement de la topbar ; il doit passer au-dessus de la barre d'actions. / z-index: 20; border-bottom: 1px solid var(--u-line); padding-top: env(safe-area-inset-top); } / marque / titre à gauche / .pfx-barbrand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--u-text); text-decoration: none; white-space: nowrap; } .pfx-barbrand:hover { color: var(--u-text); } .pfx-barbrand { flex-shrink: 0; } / pousse ce qui suit vers la droite / .pfx-barspacer { flex: 1 1 auto; min-width: 0.5rem; } / groupe d'actions (nav) à droite ; scroll horizontal si trop étroit. Mobile-first : masqué par défaut, repassé en `flex` à partir de 768px (voir le @media plus bas). Les propriétés flex ci-dessous ne servent donc qu'à partir de ce palier. / .pfx-baractions { display: none; align-items: center; gap: 0.25rem; list-style: none; padding: 0; margin: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pfx-baractions::-webkit-scrollbar { display: none; } .pfx-baractions li { list-style: none; flex-shrink: 0; } .pfx-baractions a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.6rem; border-radius: 6px; color: var(--u-muted); text-decoration: none; font-size: 0.875rem; white-space: nowrap; } .pfx-baractions a:hover { background: var(--u-halo); color: var(--u-text); } .pfx-baractions a[aria-current] { color: var(--u-text); font-weight: 600; } / ==================================================================== * pfx-iconbtn — bouton icône ≥ 44px (cible tactile iOS) * ==================================================================== / .pfx-iconbtn { --pico-background-color: transparent; --pico-border-color: transparent; --pico-color: var(--u-text); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--u-text); font-size: 1.05rem; line-height: 1; cursor: pointer; flex-shrink: 0; } .pfx-iconbtn:hover { background: var(--u-halo); } / glyphe = SVG inline (`currentColor`) plutôt qu'un caractère : rendu net et identique sur toutes plateformes, voir ux/picofasthtml/icons.py. / .pfx-iconbtn svg { width: 24px; height: 24px; display: block; pointer-events: none; } / ==================================================================== * Shell applicatif — topbar + contenu + barre d'actions en colonne plein écran * ==================================================================== / .pfx-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; / bloque tout débordement horizontal (barre d'actions, panneaux) sans créer de conteneur de défilement — `clip` (≠ `hidden`) ne casse pas le `position: sticky` des barres. / overflow-x: clip; } .pfx-shellmain { flex: 1 1 auto; width: 100%; } / padding vertical du contenu (le .container Pico gère l'horizontal) / .pfx-shellmain > .container { padding-block: 1.5rem 2.5rem; } / Inputs : 16px minimum pour éviter le zoom auto de Safari iOS au focus. / @media (max-width: 480px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; } } / ==================================================================== * Menu coulissant (drawer) façon appli mobile — voir drawer.py * Mécanique CSS pure : .pfx-menu-toggle (checkbox cachée) pilote l'état. * ==================================================================== / .pfx-menu-toggle, .pfx-menu-pin { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } / Bouton hamburger : visible en mobile uniquement. / .pfx-burger { display: inline-flex; } .pfx-drawer-root { position: fixed; inset: 0; z-index: 1000; pointer-events: none; } .pfx-drawerscrim { position: absolute; inset: 0; background: rgba(20, 24, 28, 0.38); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; cursor: pointer; } .pfx-drawer { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 20rem); display: flex; flex-direction: column; background: var(--u-surface); border-right: 1px solid var(--u-line); transform: translateX(-100%); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: auto; / le défilement est porté par body : l'en-tête et le pied restent fixes, et la poignée de resize (enfant absolu) ne défile pas avec le contenu. / padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); } / état ouvert. L'ombre ne vit QUE ici (pas sur `.pfx-drawer` de base) : tiroir fermé, `translateX(-100%)` amène son bord droit pile sur le bord gauche du viewport (x=0) — un box-shadow présent en permanence baverait donc sur ~40px de flou par-dessus le contenu visible. Le tiroir vit en plus dans `.pfx-drawer-root` (position: fixed), qui échappe au clip de `.pfx-shell` (overflow-x: clip), donc rien ne rognerait ce débordement. / .pfx-menu-toggle:checked ~ .pfx-drawer-root { pointer-events: auto; } .pfx-menu-toggle:checked ~ .pfx-drawer-root .pfx-drawerscrim { opacity: 1; pointer-events: auto; } .pfx-menu-toggle:checked ~ .pfx-drawer-root .pfx-drawer { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, 0.16); } / poignée de redimensionnement, sur le bord droit (bureau — voir picofasthtml.js) / .pfx-drawerresize { position: absolute; top: 0; right: 0; width: 11px; height: 100%; cursor: ew-resize; touch-action: none; z-index: 3; } .pfx-drawerresize::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: transparent; transition: background 0.15s ease; } .pfx-drawerresize:hover::after, .pfx-drawer-resizing .pfx-drawerresize::after { background: var(--u-accent); } .pfx-drawer-resizing, .pfx-drawer-resizing { user-select: none !important; cursor: ew-resize !important; } .pfx-drawer-resizing .pfx-drawer { transition: none; } @media (max-width: 767px) { .pfx-drawerresize { display: none; } } .pfx-drawerheader { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 0.75rem 0.5rem; border-bottom: 1px solid var(--u-line); } .pfx-drawercontrols { display: inline-flex; gap: 0.1rem; margin-left: auto; flex-shrink: 0; } .pfx-drawercontrols .pfx-iconbtn { width: 2.5rem; height: 2.5rem; font-size: 0.95rem; } .pfx-drawercontrols .pfx-iconbtn svg { width: 24px; height: 24px; } .pfx-drawerpin { display: none; } /* épinglage : bureau large uniquement / .pfx-draweraccount { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1; } .pfx-draweravatar { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--u-accent); color: #fff; font-weight: 700; font-size: 0.95rem; } .pfx-draweraccount-text { display: flex; flex-direction: column; min-width: 0; } .pfx-draweraccount-name { font-weight: 600; color: var(--u-text); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pfx-draweraccount-role { color: var(--u-muted); font-size: 0.75rem; text-transform: capitalize; } / Sélecteur d'arbre (admin) : liste déroulante Pico dans l'en-tête du tiroir. / .pfx-drawerswitch { flex: 1; min-width: 0; margin: 0; } .pfx-drawerswitch > summary { display: block; width: 100%; height: auto; padding: 0.15rem 1.4rem 0.15rem 0; border: 0; background: none; line-height: 1.2; overflow: hidden; } .pfx-drawerswitch > summary::after { top: 0.35rem; } .pfx-drawerswitch > summary .pfx-draweraccount-name, .pfx-drawerswitch > summary .pfx-draweraccount-role { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pfx-drawerswitch > summary .pfx-draweraccount-role { text-transform: none; } .pfx-drawerswitch > ul { max-height: min(60vh, 22rem); overflow-y: auto; z-index: 5; } .pfx-drawerswitch-item { display: block; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pfx-drawerswitch-item[aria-current] { background: var(--u-halo); font-weight: 600; } .pfx-drawerswitch-item--self { color: var(--u-accent); } .pfx-drawerswitch-item svg { width: 13px; height: 13px; vertical-align: -2px; } / Bandeau permanent « vous consultez l'arbre de … ». / .pfx-impersonate { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0.9rem; margin-bottom: 0.75rem; border-radius: 8px; background: #fff4d6; border: 1px solid #e8cf8a; color: #6b5010; font-size: 0.85rem; } .pfx-impersonateexit { font-weight: 600; white-space: nowrap; } / Champ « lien magique » de la page d'invitation : large, monospace, sélectionnable. / .pfx-invite-link { width: 100%; font-family: var(--pico-font-family-monospace, monospace); font-size: 0.85rem; } / --- Tableau d'administration des utilisateurs --- / .pfx-users { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pfx-userstable { width: 100%; min-width: 640px; font-size: 0.9rem; } .pfx-userstable th { white-space: nowrap; } .pfx-userstable td { vertical-align: middle; } .pfx-usersemail { font-weight: 600; } .pfx-userswhen { color: var(--u-muted); white-space: nowrap; } .pfx-userscount { text-align: right; font-variant-numeric: tabular-nums; } .pfx-usersoff td { opacity: 0.55; } .pfx-usersmagic { margin: 0.5rem 0 1rem; padding: 0.75rem 0.9rem; border-radius: 8px; background: #fff4d6; border: 1px solid #e8cf8a; } .pfx-usersmagic p { margin: 0 0 0.4rem; font-size: 0.85rem; } .pfx-usersacts { display: flex; flex-wrap: wrap; gap: 0.4rem; } .pfx-usersact { margin: 0; } .pfx-btn-sm { margin: 0; padding: 0.2rem 0.6rem; font-size: 0.8rem; white-space: nowrap; } .pfx-utag { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: 1px; } / Ces badges sont en 0.7rem : du texte normal au sens WCAG, donc 4.5:1 exigé. `--u-muted` sur `--u-halo` ne donnait que 2.56:1 — les teintes sont conservées, seule la luminosité descend. `--superadmin` passait déjà (4.67:1). / .pfx-utag--user { background: var(--u-halo); color: #565b5e; } .pfx-utag--admin { background: #e7f0ff; color: #1864ab; } .pfx-utag--superadmin { background: #ffe3e3; color: #c2255c; } .pfx-utag--off { background: #f1f3f5; color: #5f666d; } .pfx-drawerbody { flex: 1 1 auto; min-height: 0; padding: 0.5rem 0.5rem 1rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .pfx-drawersearch { margin: 0.5rem 0.25rem 0.75rem; } .pfx-drawersearch input { width: 100%; margin: 0; } .pfx-drawersection { margin-top: 0.75rem; } .pfx-drawersection:first-child { margin-top: 0; } .pfx-drawersection-label { padding: 0.25rem 0.75rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--u-muted); } .pfx-drawerlist { display: flex; flex-direction: column; } .pfx-draweritem { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0.35rem 0.75rem; border-radius: 8px; color: var(--u-text); text-decoration: none; font-size: 0.95rem; } .pfx-draweritem:hover { background: var(--u-halo); } .pfx-draweritem[aria-current] { background: var(--u-halo); font-weight: 600; } .pfx-drawericon { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--u-muted); } .pfx-drawericon svg { width: 24px; height: 24px; display: block; } .pfx-draweritem:hover .pfx-drawericon, .pfx-draweritem[aria-current] .pfx-drawericon { color: var(--u-text); } .pfx-drawerlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pfx-drawerfooter { padding: 0.75rem; border-top: 1px solid var(--u-line); color: var(--u-muted); font-size: 0.75rem; } .pfx-drawerstorage { margin-top: 0.5rem; } .pfx-drawerstorage-label { display: block; margin-bottom: 0.25rem; } .pfx-drawerstorage-bar { height: 4px; border-radius: 999px; background: var(--u-line); overflow: hidden; } .pfx-drawerstorage-fill { height: 100%; background: var(--u-accent, #3d8bfd); } / -------------------------------------------------------------------- * Bureau : largeur pilotée par --pfx-drawer-w (redimensionnable), et * possibilité d'épingler le tiroir (≥ 1024px) — il pousse le contenu. * ------------------------------------------------------------------ / @media (min-width: 768px) { .pfx-drawer { width: var(--pfx-drawer-w); max-width: 90vw; } } @media (min-width: 1024px) { .pfx-drawerpin { display: inline-flex; } / tiroir épinglé : plus de superposition, il occupe sa colonne / .pfx-menu-pin:checked ~ .pfx-drawer-root { pointer-events: none; } .pfx-menu-pin:checked ~ .pfx-drawer-root .pfx-drawer { pointer-events: auto; } .pfx-menu-pin:checked ~ .pfx-drawer-root .pfx-drawerscrim { display: none; } .pfx-menu-pin:checked ~ .pfx-drawer-root .pfx-drawer { transform: none; box-shadow: none; } .pfx-menu-pin:checked ~ .pfx-drawer-root .pfx-drawerclose { display: none; } .pfx-menu-pin:checked ~ .pfx-drawer-root .pfx-drawerpin { color: var(--u-accent); } / le contenu se décale de la largeur du tiroir / .pfx-menu-pin:checked ~ .pfx-bar--top, .pfx-menu-pin:checked ~ .pfx-shellmain, .pfx-menu-pin:checked ~ .pfx-actionbar-wrap { padding-left: calc(var(--pfx-drawer-w) + 0.75rem); } .pfx-menu-pin:checked ~ .pfx-bar--top .pfx-burger { display: none; } } / ==================================================================== * Menu de page « ••• » (pop-menu) — voir popmenu.py * mobile : feuille qui remonte du bas (bottom sheet) + voile * bureau : liste déroulante ancrée sous le bouton * ==================================================================== / .pfx-pop { position: relative; display: inline-flex; flex-shrink: 0; } .pfx-pop-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } / défense : rebat le `display` que Pico impose via `[type=checkbox] ~ label` (voir popmenu.py) si le déclencheur repassait après la case. / .pfx-pop .pfx-poptrigger { display: inline-flex; } / 3 points dessinés en CSS : parfaitement centrés dans le bouton, quelle que soit la police (un glyphe « ••• » ou « ⋯ » se décale verticalement). / .pfx-dots, .pfx-dots::before, .pfx-dots::after { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .pfx-dots { position: relative; display: block; color: inherit; / les points prennent la couleur du bouton porteur / } .pfx-dots::before, .pfx-dots::after { content: ""; position: absolute; top: 0; } .pfx-dots::before { left: -7px; } .pfx-dots::after { left: 7px; } .pfx-popscrim { position: fixed; inset: 0; z-index: 1090; background: rgba(20, 24, 28, 0.38); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; cursor: pointer; } .pfx-poppanel { position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: var(--u-surface); border-top: 1px solid var(--u-line); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18); padding: 0.25rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: auto; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; } / état ouvert / .pfx-pop-toggle:checked ~ .pfx-popscrim { opacity: 1; pointer-events: auto; } .pfx-pop-toggle:checked ~ .pfx-poppanel { transform: none; } .pfx-popgrip { width: 2.25rem; height: 0.25rem; border-radius: 999px; background: var(--u-halo); margin: 0.25rem auto 0.35rem; } .pfx-poptitle { padding: 0.1rem 0.7rem 0.25rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--u-muted); } .pfx-poplist { display: flex; flex-direction: column; } .pfx-popsep { height: 1px; background: var(--u-line); margin: 0.2rem 0.5rem; } .pfx-popitem { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 2.5rem; padding: 0.3rem 0.7rem; border: none; border-radius: 8px; background: transparent; color: var(--u-text); text-decoration: none; font-size: 0.95rem; font-family: inherit; text-align: left; cursor: pointer; } .pfx-popitem:hover { background: var(--u-halo); } .pfx-popitem--danger { color: #c0392b; } .pfx-popitem--danger:hover { background: rgba(192, 57, 43, 0.1); } .pfx-popicon { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--u-muted); } .pfx-popicon svg { width: 24px; height: 24px; display: block; } .pfx-popitem--danger .pfx-popicon { color: inherit; } .pfx-pop__label { flex: 1; min-width: 0; } / --- couleur du nœud, en tête de menu (voir pagemenu._color_row) --- / .pfx-popcolors { gap: 0.5rem; cursor: default; min-height: 0; padding-top: 0.3rem; padding-bottom: 0.3rem; } .pfx-popcolors:hover { background: transparent; } / sélecteur de couleur natif : Pico met les inputs à width:100% + hauteur de form-element + margin-bottom -> on rétablit une pastille compacte. / .pfx-popcolors .pfx-colorpick { flex: 1; width: auto; height: 2.1rem; min-width: 0; max-width: 9rem; margin: 0; padding: 0; border: 1px solid var(--u-line); border-radius: 6px; background: var(--u-surface); cursor: pointer; } .pfx-colorpick::-webkit-color-swatch-wrapper { padding: 3px; } .pfx-colorpick::-webkit-color-swatch { border: none; border-radius: 3px; } .pfx-colorpick::-moz-color-swatch { border: none; border-radius: 3px; } .pfx-popcolors .pfx-colorpickreset { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; margin: 0; padding: 0; border: 1px solid var(--u-line); border-radius: 6px; background: var(--u-surface); color: var(--u-muted); font-size: 0.9rem; line-height: 1; cursor: pointer; } .pfx-popcolors .pfx-colorpickreset:hover { color: var(--u-text); background: var(--u-halo); } / ==================================================================== * Bascule mobile / bureau — 768px * mobile : hamburger + drawer, menu de page en bottom sheet * bureau : hamburger + drawer AUSSI (comme Workflowy) + liens texte dans la * topbar, menu de page en liste déroulante * ==================================================================== / @media (min-width: 768px) { / le `display: none` de base est posé avec le reste de `.pfx-baractions` / .pfx-baractions { display: flex; } / menu de page : dropdown ancré sous le bouton, plus de feuille ni de voile / .pfx-popscrim { position: fixed; background: transparent; z-index: 1090; } .pfx-poppanel { position: absolute; left: auto; right: 0; top: calc(100% + 0.35rem); bottom: auto; width: max-content; min-width: 13rem; max-width: min(20rem, 90vw); max-height: min(70vh, 30rem); border: 1px solid var(--u-line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); padding: 0.2rem; transform: translateY(-0.4rem); opacity: 0; visibility: hidden; transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s; } .pfx-pop-toggle:checked ~ .pfx-poppanel { transform: none; opacity: 1; visibility: visible; } .pfx-popgrip, .pfx-poptitle { display: none; } / un pop-menu déclenché depuis la barre d'actions (bas d'écran, voir actionbar.py) doit s'ouvrir vers le HAUT : ancré sous le bouton comme ci-dessus, le panneau déborderait sous la fenêtre et agrandirait la page (scroll fantôme sous la barre d'actions). / .pfx-actionbar .pfx-pop__panel { top: auto; bottom: calc(100% + 0.35rem); transform: translateY(0.4rem); } } / ==================================================================== * Barre d'actions (« mobile-action-bar-wrap ») — voir actionbar.py * Rangée de raccourcis collée en bas. Visible à toutes les tailles ; * (à toutes les tailles). * ==================================================================== / .pfx-actionbar-wrap { position: sticky; bottom: 0; z-index: 15; background: var(--u-surface); border-top: 1px solid var(--u-line); padding-bottom: env(safe-area-inset-bottom); / [data-kbd-bar] : le maintien au-dessus du clavier virtuel (transform + classe `.is-kbd`, dont `padding-bottom: 0`) est géré par kbd-bar.js / kbd-bar.css — composant autonome. / } / Mobile : l'EditActionBar (collée en bas, tenue au-dessus du clavier par kbd-bar.js) est remplacée par la SelActionBar en pilule flottante — ancrée au texte, elle suit le clavier nativement (position: absolute + coordonnées page) sans dépendre du `.is-kbd` piloté par JS, pas fiable sur iOS (barre qui restait partiellement masquée par le clavier pendant le scroll). Sur bureau, pas de clavier virtuel à traquer : gabarit normal de l'ActionBar. / @media (max-width: 767px) { / Scopé à `.pfx-shell` (la vraie app) : un id nu masquerait aussi la démo de ce composant dans l'atelier (`/components`, rendue hors `.pfx-shell`, voir `ux/components/framework.py:_canvas`) dès qu'on la consulte sous 768px de large — précisément le cas d'usage pour vérifier ce composant. / .pfx-shell #pfx-edit-actionbar { display: none !important; } } .pfx-actionbar { display: flex; align-items: center; justify-content: space-around; gap: 0.25rem; min-height: 3.25rem; padding: 0.2rem 0.4rem; overflow-x: auto; scrollbar-width: none; } .pfx-actionbar::-webkit-scrollbar { display: none; } .pfx-actionbar__btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 3rem; min-height: 2.75rem; margin: 0; / Pico met `margin-bottom` sur