/* ===================================================================== OBLIQUE 4.3.0 E30 ESPACE PRIVÉ MOBILE Couche de présentation uniquement. Aucun effet desktop au-delà de 760 px. ===================================================================== */ @media (max-width: 760px) { /* --------------------------------------------------------------- E30.1 Accueil privé : l'arborescence devient l'explorateur. --------------------------------------------------------------- */ body[data-mobile-screen="home"] .tree-panel, body[data-mobile-screen="home"] #app.tree-collapsed .tree-panel { display: flex !important; flex-direction: column !important; position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; border: 0 !important; box-shadow: none !important; background: #fbfaf6 !important; } body[data-mobile-screen="home"] .workspace { display: none !important; } body[data-mobile-screen="home"] .app-body { display: block !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; } /* * Le panneau n'est plus traité comme la petite colonne desktop : * toute la largeur disponible appartient à la navigation privée. */ body[data-mobile-screen="home"] .tree-panel-header { flex: 0 0 auto !important; padding: 14px 14px 8px !important; background: #fbfaf6 !important; } body[data-mobile-screen="home"] .tree-search { min-height: 46px !important; margin: 0 12px 12px !important; padding: 0 14px !important; border: 1px solid rgba(17,17,17,.16) !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 2px 8px rgba(17,17,17,.035) !important; } body[data-mobile-screen="home"] .tree-search input { min-height: 44px !important; font-size: 16px !important; line-height: 1.2 !important; } /* * 16 px évite également le zoom automatique d'iOS lors du focus * sur le champ de recherche. */ body[data-mobile-screen="home"] .tree-search svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; } body[data-mobile-screen="home"] .element-tree, body[data-mobile-screen="home"] .board-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 2px 10px calc(92px + env(safe-area-inset-bottom)) !important; background: #fbfaf6 !important; } /* Sections principales de l'espace privé. */ body[data-mobile-screen="home"] .sidebar-section-label { margin: 18px 6px 7px !important; padding: 0 4px 7px !important; font-size: 10px !important; line-height: 1.2 !important; letter-spacing: .14em !important; } /* --------------------------------------------------------------- Lignes tactiles. --------------------------------------------------------------- */ body[data-mobile-screen="home"] .tree-row { grid-template-columns: 26px 30px minmax(0,1fr) 44px !important; gap: 5px !important; min-height: 54px !important; margin: 2px 0 !important; padding: 3px 2px 3px 4px !important; border: 1px solid transparent !important; border-radius: 11px !important; touch-action: manipulation; } body[data-mobile-screen="home"] .tree-row:hover { background: transparent; border-color: transparent; } body[data-mobile-screen="home"] .tree-row:active { background: rgba(17,17,17,.055) !important; } body[data-mobile-screen="home"] .tree-row.current { background: #fff !important; border-color: rgba(17,17,17,.13) !important; box-shadow: inset 3px 0 0 var(--accent), 0 2px 9px rgba(17,17,17,.035) !important; } /* Ouverture/fermeture de branche : cible tactile indépendante. */ body[data-mobile-screen="home"] .tree-expander { width: 26px !important; height: 44px !important; min-width: 26px !important; min-height: 44px !important; display: grid !important; place-items: center !important; font-size: 13px !important; touch-action: manipulation; } body[data-mobile-screen="home"] .tree-expander.empty { visibility: hidden !important; } body[data-mobile-screen="home"] .tree-node-icon { width: 30px !important; height: 44px !important; } body[data-mobile-screen="home"] .tree-node-icon svg { width: 22px !important; height: 22px !important; } /* * Sur mobile les noms doivent d'abord être lisibles : * taille augmentée, mais une seule ligne pour conserver un parcours * rapide de longues arborescences. */ body[data-mobile-screen="home"] .tree-node-label { font-size: 12px !important; line-height: 1.25 !important; letter-spacing: .045em !important; } body[data-mobile-screen="home"] .tree-node.board-root > .tree-row .tree-node-label { font-size: 13px !important; font-weight: 850 !important; letter-spacing: .06em !important; } body[data-mobile-screen="home"] .tree-node-kind { font-size: 8px !important; } /* * Sur desktop le menu apparaît au survol. * Le survol n'est pas une interaction fiable sur écran tactile : * E30 rend donc le bouton constamment disponible. */ body[data-mobile-screen="home"] .tree-row-menu { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; opacity: 1 !important; display: grid !important; place-items: center !important; border-radius: 10px !important; touch-action: manipulation; } body[data-mobile-screen="home"] .tree-row-menu:active { background: rgba(17,17,17,.07) !important; } /* --------------------------------------------------------------- Hiérarchie : visible mais moins encombrante que sur desktop. --------------------------------------------------------------- */ body[data-mobile-screen="home"] .tree-children { margin-left: 10px !important; padding-left: 10px !important; } body[data-mobile-screen="home"] .tree-children::before { left: 1px !important; border-left-color: rgba(17,17,17,.15) !important; } body[data-mobile-screen="home"] .tree-children > .tree-node::before { left: -9px !important; top: 27px !important; width: 8px !important; border-top-color: rgba(17,17,17,.15) !important; } /* * Les comportements de déplacement appartiennent au desktop. * E30 ne modifie aucune donnée et évite qu'un geste tactile ordinaire * ressemble visuellement à un drag. */ body[data-mobile-screen="home"] .tree-row.tree-draggable { cursor: pointer !important; } /* Le pied desktop n'apporte rien dans l'explorateur mobile. */ body[data-mobile-screen="home"] .tree-panel-footer { display: none !important; } }