/* =========================================================== CAM · Design tokens + shared layout Source de vérité: DESIGN.md à la racine. Système institutionnel calme: pill CTAs, rounded-xl cards, accent unique (CAM Blue #0052ff), Inter + JetBrains Mono. =========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ===== Surfaces ===== */ --canvas: #ffffff; --surface-soft: #f7f7f7; --surface-strong: #eef0f3; --surface-dark: #0a0b0d; --surface-dark-elevated: #1f2228; /* Cartes/topbar en dark mode (était #16181c, bumpé pour plus de contraste vs. surface-dark) */ --input-bg: #fafbfc; /* Très pâle, juste-pas-blanc · fond des inputs */ /* Aliases retro-compatibilité (anciens noms) */ --bg-app: var(--canvas); --bg-surface: var(--canvas); --bg-muted: var(--surface-soft); --bg-sidebar: var(--surface-dark); /* ===== Hairlines ===== */ --hairline: #dee1e6; --hairline-soft: #eef0f3; --border: var(--hairline); --border-soft: var(--hairline-soft); /* ===== Texte ===== */ --ink: #0a0b0d; --body: #5b616e; --body-strong: #0a0b0d; --muted: #7c828a; --muted-soft: #a8acb3; --on-primary: #ffffff; --on-dark: #ffffff; --on-dark-soft: #a8acb3; /* Aliases retro-compatibilité */ --text-strong: var(--ink); --text: var(--body); --text-muted: var(--muted); --text-subtle: var(--muted-soft); /* ===== Brand ===== */ --primary: #0052ff; --primary-active: #003ecc; --primary-disabled: #a8b8cc; --primary-soft: #e6edff; --primary-hover: var(--primary-active); --primary-fg: var(--primary); --accent-yellow: #f4b000; /* ===== Trading / status sémantiques ===== */ --semantic-up: #05b169; --semantic-down: #cf202f; --semantic-down-on-dark: #fca5a5; /* Rouge clair lisible sur surface-dark */ --ok: var(--semantic-up); --danger: var(--semantic-down); --warn: var(--accent-yellow); /* ===== Spacing (base 4px) ===== */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-base: 16px; --space-md: 20px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 96px; /* ===== Layout ===== */ --sidebar-w: 248px; --topbar-h: 56px; --content-max: 1200px; /* ===== Radius ===== */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 100px; --r-full: 9999px; /* ===== Shadows (un seul niveau) ===== */ --shadow-card: none; --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.04); /* ===== Fonts ===== */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace; --font: var(--font-body); } /* ============================================================ Dark mode · set [data-theme="dark"] sur . Seules les variables qui doivent changer avec le thème sont redéfinies. Tout le reste (--primary, --semantic-*, --surface-dark, --on-dark, --space-*, --r-*, --font-*) reste constant. Toutes les pages qui utilisent var(--canvas), var(--ink), etc. suivent automatiquement le thème · aucun refactor par page. ============================================================ */ [data-theme="dark"] { /* Surfaces (cartes et page) */ --canvas: var(--surface-dark-elevated); /* cartes #1f2228 (élevées vs. page) */ --surface-soft: var(--surface-dark); /* page bg #0a0b0d (plus sombre) */ --surface-strong: rgba(255,255,255,0.10); /* boutons secondaires, badges */ --input-bg: rgba(255,255,255,0.06); /* inputs (visible sur cartes) */ /* Hairlines (bordures plus marquées pour bien délimiter les blocs) */ --hairline: rgba(255,255,255,0.14); --hairline-soft: rgba(255,255,255,0.08); /* Texte */ --ink: #ffffff; --body: rgba(255,255,255,0.78); --muted: #a8acb3; --muted-soft: rgba(255,255,255,0.4); /* Brand soft variant · plus visible sur dark */ --primary-soft: rgba(0,82,255,0.22); } /* fix pour flash lorsque pas loggé */ body.auth-guard { display: flex; background-color: var(--canvas); font-family: var(--font-body); color: var(--body); display: flex; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ iOS Safari · empeche l'auto-zoom sur les form elements ============================================================ iOS Safari zoom AUTOMATIQUEMENT sur input/select/textarea avec font-size < 16px quand on tap dedans. Le zoom reste fige apres, causant · - "La page grossit" - "Ca balote d'un bord et de l'autre" (scroll horizontal apparait) - "La barre de menu en bas rentre plus dans le telephone" Regle globale · force 16px sur tous les form elements en mobile (< 769px). Le !important est necessaire pour battre les regles locales des pages (.form-control, .qty-input, etc.) qui sont souvent en 13-14px pour leur design desktop. Sur desktop · les regles locales s'appliquent normalement. */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } } body:not(.auth-guard) { background-color: #000000; } body:not(.auth-guard) > * { display: none; } a { color: inherit; text-decoration: none; } /* ===== Type display (poids 400, letter-spacing négatif) ===== */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 400; } h1 { font-size: 52px; line-height: 1.0; letter-spacing: -1.3px; } h2 { font-size: 36px; line-height: 1.11; letter-spacing: -0.5px; } h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.3px; } h4 { font-size: 18px; line-height: 1.33; font-weight: 600; letter-spacing: 0; } /* ===== SIDEBAR (dark, surface-dark) ===== */ .sidebar { width: var(--sidebar-w); background: var(--surface-dark); display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; } .sidebar-logo { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); } .sidebar-logo .logo-text { font-size: 16px; font-weight: 600; color: var(--on-dark); letter-spacing: -0.3px; } .sidebar-logo .logo-sub { font-size: 11px; font-weight: 500; color: var(--on-dark-soft); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; } .sidebar-nav { flex: 1; padding: 12px 8px; overflow-y: auto; } .nav-section-label { font-size: 11px; font-weight: 600; color: var(--on-dark-soft); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 12px 8px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); color: rgba(255,255,255,0.65); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; margin-bottom: 2px; /* Empeche le label de wrapper sur 2 lignes (ex 'Demande d estimation', 'Nouveau contrat'). La sidebar est assez large (--sidebar-w) pour les contenir sur une ligne. */ white-space: nowrap; } .nav-item:hover { background: rgba(255,255,255,0.06); color: var(--on-dark); } .nav-item.active { background: var(--primary); color: var(--on-primary); font-weight: 600; } .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; } .nav-item .badge { margin-left: auto; background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); font-family: var(--font-mono); } .nav-item.active .badge { background: rgba(255,255,255,0.2); } /* Compteur de fiches (peuplé par loadStageCounts) · style plus discret que .badge · juste un chiffre muted aligne a droite. */ .nav-item .nav-count { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted-soft); font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding: 0 4px; } .nav-item.active .nav-count { color: var(--on-primary); opacity: 0.85; } .sidebar-footer { padding: 12px 8px; border-top: 1px solid rgba(255,255,255,0.07); } .user-menu-wrap { position: relative; } .user-pill { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s; user-select: none; } .user-pill:hover { background: rgba(255,255,255,0.05); } .user-pill.open { background: rgba(255,255,255,0.08); } .user-pill-info { flex: 1; min-width: 0; } .user-pill-chev { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--on-dark-soft); transition: transform 0.2s; flex-shrink: 0; } .user-pill-chev svg { width: 14px; height: 14px; } .user-pill.open .user-pill-chev { transform: rotate(180deg); } .user-avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--on-primary); flex-shrink: 0; position: relative; } /* Point vert "en ligne" · pose en absolu sur les avatars (n'importe quels). Le selecteur :has rend automatiquement le parent position: relative. */ :has(> .presence-dot) { position: relative; } .presence-dot { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; background: var(--semantic-up); border: 2px solid var(--canvas); border-radius: var(--r-full); pointer-events: none; } [data-theme="dark"] .presence-dot { border-color: var(--canvas); } /* Variante quand l'avatar est dans le sidebar dark */ .user-pill .presence-dot, .sidebar .presence-dot { border-color: var(--surface-dark); } /* Petite variante pour mini-avatars (dropdowns) */ .mini-avatar { position: relative; } .mini-avatar .presence-dot { width: 8px; height: 8px; bottom: -1px; right: -1px; border-width: 1.5px; } .user-name { font-size: 13px; font-weight: 600; color: var(--on-dark); } .user-role { font-size: 11px; color: var(--on-dark-soft); } /* Menu deroulant qui apparait au-dessus de la pill */ .user-menu { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--surface-dark-elevated); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); padding: 4px; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .user-menu.open { display: block; } .user-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: transparent; border: none; border-radius: var(--r-sm); color: var(--on-dark); font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; width: 100%; text-align: left; transition: background 0.12s, color 0.12s; } .user-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; } .user-menu-item:hover { background: rgba(255,255,255,0.08); } .user-menu-item:hover svg { opacity: 1; } .user-menu-item.user-menu-danger { color: var(--semantic-down-on-dark); } .user-menu-item.user-menu-danger:hover { background: rgba(252,165,165,0.1); } .user-menu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; } /* ===== MAIN + TOPBAR ===== */ .main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; background: var(--canvas); } .topbar { background: var(--canvas); border-bottom: 1px solid var(--hairline); padding: 0 var(--space-xl); height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; } .topbar-title { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; } .topbar-breadcrumb { font-size: 13px; color: var(--muted); } .topbar-breadcrumb strong { color: var(--ink); font-weight: 600; } .topbar-left { display: flex; align-items: center; gap: var(--space-base); } .topbar-right { display: flex; align-items: center; gap: var(--space-sm); } /* Icon-only buttons (sidebar toggle, theme toggle) */ .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: var(--r-sm); transition: background 0.15s, color 0.15s; padding: 0; } .topbar-icon-btn:hover { background: var(--surface-strong); color: var(--ink); } .topbar-icon-btn svg { width: 18px; height: 18px; } /* Theme toggle · show moon en clair, soleil en sombre */ .theme-toggle .theme-icon-dark { display: none; } .theme-toggle .theme-icon-light { display: inline-flex; } [data-theme="dark"] .theme-toggle .theme-icon-light { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline-flex; } /* ===== Cloche de notifications ===== */ .notif-wrap { position: relative; } .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--semantic-down); color: #fff; border-radius: var(--r-full); font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; box-shadow: 0 0 0 2px var(--canvas); } [data-theme="dark"] .notif-badge { box-shadow: 0 0 0 2px var(--canvas); } .notif-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: 92vw; max-height: 70vh; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: 0 10px 40px rgba(0,0,0,0.12); z-index: 200; overflow: hidden; flex-direction: column; } .notif-panel.open { display: flex; } /* Sur mobile : panel sort en plein ecran (avec marges) au lieu d'etre ancre au coin droit de la cloche · evite que ca deborde a gauche. */ @media (max-width: 640px) { .notif-panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; max-width: none; max-height: 75vh; } } .notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--hairline-soft); } .notif-panel-title { font-size: 13px; font-weight: 600; color: var(--ink); } .notif-mark-all { background: transparent; border: none; color: var(--primary); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; } .notif-mark-all:hover { text-decoration: underline; } .notif-settings-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--muted); text-decoration: none; border-radius: var(--r-sm); transition: background 0.12s, color 0.12s; } .notif-settings-link:hover { background: var(--surface-soft); color: var(--ink); } .notif-settings-link svg { width: 14px; height: 14px; } .notif-panel-list { flex: 1; min-height: 0; overflow-y: auto; } .notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hairline-soft); text-decoration: none; color: inherit; transition: background 0.1s; position: relative; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--surface-soft); } .notif-item.unread { background: var(--primary-soft); } .notif-item.unread:hover { background: color-mix(in srgb, var(--primary-soft) 70%, var(--primary) 5%); } .notif-item-delete { position: absolute; top: 8px; right: 8px; background: transparent; border: none; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--muted-soft); opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; } .notif-item:hover .notif-item-delete { opacity: 1; } .notif-item-delete:hover { background: var(--surface-strong); color: var(--semantic-down); } .notif-item-delete svg { width: 14px; height: 14px; display: block; } .notif-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: transparent; margin-top: 6px; flex-shrink: 0; } .notif-item.unread .notif-dot { background: var(--primary); } .notif-body { flex: 1; min-width: 0; } .notif-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; line-height: 1.35; } .notif-snippet { font-size: 12px; color: var(--body); line-height: 1.45; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-context { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-bottom: 2px; } .notif-time { font-size: 10px; color: var(--muted); font-family: var(--font-mono); } .notif-panel-empty { padding: 32px 16px; text-align: center; display: none; } .notif-panel-list:empty + .notif-panel-empty { display: block; } /* ===== Toast popup quand une notif arrive en live ===== */ .notif-toast { position: fixed; top: 80px; right: 24px; width: 360px; max-width: calc(100vw - 48px); background: var(--canvas); border: 1px solid var(--hairline); border-left: 3px solid var(--primary); border-radius: var(--r-md); box-shadow: 0 10px 40px rgba(0,0,0,0.15); padding: 14px 14px 14px 16px; display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; z-index: 999; opacity: 0; transform: translateX(20px); transition: opacity 0.25s, transform 0.25s; cursor: pointer; } .notif-toast.show { opacity: 1; transform: translateX(0); } .notif-toast:hover { border-color: var(--primary); } .notif-toast-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); border-radius: var(--r-full); color: var(--primary); } .notif-toast-icon svg { width: 16px; height: 16px; } .notif-toast-body { flex: 1; min-width: 0; } .notif-toast-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: 2px; } .notif-toast-snippet { font-size: 12px; color: var(--body); line-height: 1.45; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-toast-context { font-size: 11px; color: var(--muted); font-family: var(--font-mono); } .notif-toast-close { background: transparent; border: none; color: var(--muted); width: 22px; height: 22px; border-radius: var(--r-full); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.12s, color 0.12s; } .notif-toast-close:hover { background: var(--surface-soft); color: var(--ink); } /* Empile plusieurs toasts si plusieurs arrivent en meme temps */ .notif-toast + .notif-toast { top: calc(80px + 100px); } .notif-toast + .notif-toast + .notif-toast { top: calc(80px + 200px); } /* ===== Boutons (pill geometry) ===== */ .btn, .topbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.15; cursor: pointer; border: 1px solid transparent; background: var(--surface-strong); color: var(--ink); transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .btn:hover, .topbar-btn:hover { background: var(--hairline); } .btn.primary, .topbar-btn.primary, .btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .btn.primary:hover, .topbar-btn.primary:hover, .btn-primary:hover { background: var(--primary-active); border-color: var(--primary-active); } .btn.outline-dark, .btn-outline-on-dark { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,0.4); } .btn-tertiary { background: transparent; color: var(--primary); height: auto; padding: 0; } /* Topbar btn variant compacte (héritage) */ .topbar-btn.sm { height: 32px; font-size: 13px; padding: 0 14px; } .content { padding: var(--space-xl); flex: 1; min-width: 0; } /* ===== Composants partagés ===== */ /* Feature card (carte produit/outil) */ .feature-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: var(--space-xl); transition: box-shadow 0.15s, transform 0.15s; display: block; } .feature-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); } /* Badge pill (étiquettes section / status) */ .badge-pill { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-strong); color: var(--ink); text-transform: uppercase; } .badge-pill.up { color: var(--semantic-up); background: var(--surface-strong); } .badge-pill.down { color: var(--semantic-down); background: var(--surface-strong); } /* Hairline divider */ .hairline { height: 1px; background: var(--hairline); border: 0; } /* Mono utility (chiffres tabulaires) */ .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ===== UTILITIES ===== */ .internal-only {} /* ===== Side drawer (panneau latéral droit) ===== Réutilisable: voir DESIGN.md. Utilisé par le modal Taux du Cost Sheet. */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: none; opacity: 0; transition: opacity 0.2s ease; } .drawer-overlay.open { display: block; opacity: 1; } .drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; width: clamp(640px, 50vw, 820px); background: var(--canvas); border-left: 1px solid var(--hairline); box-shadow: -20px 0 60px rgba(0,0,0,0.35); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; } .drawer-overlay.open .drawer-panel { transform: translateX(0); } @media (max-width: 768px) { .drawer-panel { width: 100vw; } } .drawer-head { padding: 18px 24px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .drawer-head-text h2 { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin: 0; } .drawer-head-text .drawer-sub { font-size: 13px; color: var(--muted); margin-top: 2px; } .drawer-close { background: none; border: none; font-size: 22px; color: var(--muted); cursor: pointer; padding: 4px 10px; line-height: 1; } .drawer-close:hover { color: var(--ink); } .drawer-body { padding: 22px 24px; overflow-y: auto; flex: 1 1 auto; } .drawer-foot { padding: 14px 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-soft); flex-shrink: 0; } .drawer-section { margin-bottom: 22px; } .drawer-section:last-child { margin-bottom: 0; } .drawer-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .drawer-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 720px) { .drawer-cols-2 { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ Sidebar collapse · set data-sidebar="hidden" sur (desktop) ou data-sidebar="open" sur (mobile, overlay). ============================================================ */ .sidebar { transition: transform 0.2s ease; } .main { transition: margin-left 0.2s ease; } /* Desktop: sidebar visible par défaut, masquée si data-sidebar="hidden" */ body[data-sidebar="hidden"] .sidebar { transform: translateX(-100%); } body[data-sidebar="hidden"] .main { margin-left: 0; } @media (max-width: 768px) { /* Mobile: sidebar masquée par défaut, visible si data-sidebar="open" */ .sidebar { transform: translateX(-100%); } .main { margin-left: 0; } body[data-sidebar="open"] .sidebar { transform: translateX(0); z-index: 200; box-shadow: 4px 0 24px rgba(0,0,0,0.3); } .content { padding: var(--space-lg); } h1 { font-size: 36px; letter-spacing: -0.5px; } h2 { font-size: 28px; } /* ===== Pages inventaire en mobile · les wrappers mountLayout n'ajoutent PAS de padding ni de chrome (topbar etc.). La page gere son layout interne. S'applique en standalone PWA ET en browser · pas dependant de @media display-mode (qui peut ne pas matcher si le PWA a ete installe avec un ancien scope). ===== */ body.has-inv-mobile-nav .topbar { display: none !important; } body.has-inv-mobile-nav .content { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; /* padding-bottom: 96px gere par inventaire-nav.js · pas touche */ } } /* ============================================================ PWA standalone · adapte le layout quand l'app est installée (Punch PWA notamment · l'user a quitté son scope /punch/ pour naviguer ailleurs, on veut un feel app pur sans sidebar/topbar). Détection · @media (display-mode: standalone) match si l'user a lancé via l'icône du home screen (iOS/Android/Chrome desktop). Si ouvert dans un onglet de navigateur · ne match pas, layout normal préservé. On cache la sidebar + topbar et on affiche un bouton "Punch" en haut à gauche pour revenir au shell principal du PWA. ============================================================ */ .pwa-back-to-punch { display: none; } @media (display-mode: standalone) { .sidebar { display: none !important; } .topbar { display: none !important; } .main { margin-left: 0 !important; } /* ===== Pages WITHOUT leur propre mobile-nav (ex. /cost/, /projets/, /employes/) · floating pill "← Punch" en haut a gauche pour revenir au punch. .content garde un padding-top qui reserve la place sous le pill. ===== */ body:not(.has-inv-mobile-nav) .content { padding-top: calc(var(--space-lg) + 56px + env(safe-area-inset-top, 0)) !important; } body:not(.has-inv-mobile-nav) .pwa-back-to-punch { display: inline-flex; align-items: center; gap: 6px; position: fixed; top: calc(var(--space-sm) + env(safe-area-inset-top, 0)); left: calc(var(--space-sm) + env(safe-area-inset-left, 0)); z-index: 300; height: 40px; padding: 0 14px 0 10px; background: var(--ink); color: var(--canvas); border-radius: var(--r-pill); font-family: var(--font-body); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.08s, background 0.15s; } body:not(.has-inv-mobile-nav) .pwa-back-to-punch:active { transform: scale(0.96); } body:not(.has-inv-mobile-nav) .pwa-back-to-punch svg { width: 16px; height: 16px; flex-shrink: 0; } /* ===== Pages AVEC leur propre mobile-nav (inventaire) · le pill flottant est cache · la page fournit son propre pill inline dans son header (ex. .accueil-to-punch dans le greeting). Evite le double element + le floating pill qui prend de la place verticale au-dessus du header de la page. ===== */ body.has-inv-mobile-nav .pwa-back-to-punch { display: none !important; } /* .content devient transparent sur l'inventaire · le wrapper .inv-page (cree par inventaire-nav.js) fournit deja le padding lateral. Sans ce reset, on doublait le padding (24px .content + 24px .inv-page = 48px sides) · le contenu etait pogne au milieu de l'ecran au lieu d'aller pleine largeur comme sur le punch. */ body.has-inv-mobile-nav .content { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; /* padding-bottom: 96px conserve · gere par inventaire-nav.js pour reserver la place de la floating bottom-nav. */ } }