/* ═══════════════════════════════════════════════════════════════════════════════ N3D SANITATION — Mobile CSS v3 Capacitor iOS / Android — iPhone + iPad Activé via class .is-mobile sur (injectée par mobile-nav.js) ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Variables & Safe-areas ──────────────────────────────────────────────────── */ :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); --nav-height: 60px; --header-h: 56px; --accent: #2E8C3C; --accent-dark: #246b30; --accent-bright: #4ade80; --navy: #1A3828; --bg: #f0f4f2; --mob-pad: 16px; --radius-card: 16px; --shadow-card: 0 2px 12px rgba(0,0,0,.07); --shadow-up: 0 -1px 0 rgba(0,0,0,.08); --white: #fff; --border-light: #e2e8f0; --text-muted: #94a3b8; --text-light: #64748b; --error: #ef4444; --warn-color: #f59e0b; --warn-dark: #92400e; --info-color: #3b82f6; } /* ── Reset mobile ───────────────────────────────────────────────────────────── */ body.is-mobile { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior: none; font-size: 15px; background: var(--bg); } body.is-mobile * { -webkit-user-select: none; user-select: none; } body.is-mobile input, body.is-mobile textarea, body.is-mobile select, body.is-mobile [contenteditable] { -webkit-user-select: text; user-select: text; } /* ── Layout : masquer sidebar desktop ───────────────────────────────────────── */ body.is-mobile #sidebar, body.is-mobile aside.sidebar { display: none !important; } body.is-mobile #main { margin-left: 0 !important; width: 100% !important; } body.is-mobile #content { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 20px) !important; overflow-x: hidden; background: var(--bg); } /* ── Header mobile ───────────────────────────────────────────────────────────── */ body.is-mobile #header { position: sticky !important; top: 0 !important; z-index: 900 !important; padding-top: var(--safe-top) !important; height: calc(var(--header-h) + var(--safe-top)) !important; min-height: 56px; display: flex !important; align-items: center !important; padding-left: 14px !important; padding-right: 14px !important; background: var(--navy) !important; border-bottom: none !important; box-shadow: 0 2px 16px rgba(0,0,0,.25) !important; gap: 8px; } body.is-mobile .header-title { font-size: 16px !important; font-weight: 700 !important; color: #fff !important; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.is-mobile .menu-btn { color: #fff !important; width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 10px !important; background: rgba(255,255,255,.1) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } body.is-mobile #btn-refresh-app { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.2) !important; color: rgba(255,255,255,.7) !important; border-radius: 8px !important; padding: 5px 10px !important; font-size: 11px !important; } /* ── Vues : padding uniforme ─────────────────────────────────────────────────── */ body.is-mobile [id^="view-"] { padding: var(--mob-pad) !important; min-height: calc(100vh - var(--header-h) - var(--nav-height) - var(--safe-top) - var(--safe-bottom)); } /* ── Bottom tab bar ─────────────────────────────────────────────────────────── */ #n3d-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-height) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: rgba(255,255,255,.97); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 0.5px solid rgba(0,0,0,.1); display: flex; align-items: stretch; z-index: 1000; box-shadow: var(--shadow-up); } #n3d-bottom-nav .bn-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; border: none; background: transparent; padding: 6px 2px; position: relative; -webkit-tap-highlight-color: transparent; min-height: 44px; transition: opacity .12s, transform .1s; } #n3d-bottom-nav .bn-tab:active { opacity: .5; transform: scale(.93); } #n3d-bottom-nav .bn-icon { font-size: 23px; line-height: 1; color: var(--text-muted); transition: transform .2s cubic-bezier(.34,1.56,.64,1), color .15s; display: block; } #n3d-bottom-nav .bn-label { font-size: 10px; font-weight: 600; letter-spacing: .2px; color: var(--text-muted); transition: color .15s; } #n3d-bottom-nav .bn-tab.active { position: relative; } #n3d-bottom-nav .bn-tab.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; } #n3d-bottom-nav .bn-tab.active .bn-icon { color: var(--accent); transform: scale(1.1) translateY(-1px); } #n3d-bottom-nav .bn-tab.active .bn-label { color: var(--accent); font-weight: 700; } #n3d-bottom-nav .bn-badge { position: absolute; top: 4px; right: calc(50% - 20px); background: var(--error); color: var(--white); font-size: 9px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--white); animation: badgePop .2s cubic-bezier(.34,1.56,.64,1); } @keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} } /* ── Tablette : sidebar icon-only en paysage ─────────────────────────────────── */ @media (min-width: 768px) and (orientation: landscape) { body.is-mobile #n3d-bottom-nav { display: none !important; } body.is-mobile #n3d-tablet-sidebar { display: flex !important; } body.is-mobile #main { margin-left: 72px !important; padding-bottom: 0 !important; } body.is-mobile #content { padding-bottom: 20px !important; } body.is-mobile [id^="view-"] { padding: 20px 24px !important; } } #n3d-tablet-sidebar { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 72px; background: var(--navy); flex-direction: column; align-items: center; padding: calc(var(--safe-top) + 8px) 0 var(--safe-bottom); z-index: 1000; gap: 4px; overflow-y: auto; } #n3d-tablet-sidebar .ts-logo { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; flex-shrink: 0; } #n3d-tablet-sidebar .ts-item { width: 52px; height: 52px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: background .15s; color: rgba(255,255,255,.45); border: none; background: transparent; font-size: 9px; flex-shrink: 0; } #n3d-tablet-sidebar .ts-item:hover, #n3d-tablet-sidebar .ts-item.active { background: rgba(255,255,255,.14); color: #fff; } /* ── Tableaux → scroll horizontal ───────────────────────────────────────────── */ body.is-mobile .table-wrapper, body.is-mobile [class*="-table"], body.is-mobile .clients-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } body.is-mobile table { min-width: 560px; font-size: 13px !important; } body.is-mobile th, body.is-mobile td { padding: 10px 12px !important; white-space: nowrap; } body.is-mobile .mob-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--mob-pad)); padding: 0 var(--mob-pad); } /* ── Dashboard KPI grid ──────────────────────────────────────────────────────── */ body.is-mobile .db-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.is-mobile .db-kpi { padding: 14px 12px !important; border-radius: 14px !important; } body.is-mobile .db-kpi-value { font-size: 22px !important; } body.is-mobile .db-kpi-label { font-size: 10px !important; } body.is-mobile .db-section-title { font-size: 13px !important; margin-bottom: 10px !important; } body.is-mobile .db-card { border-radius: 14px !important; padding: 14px !important; } body.is-mobile .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.is-mobile .stat-card { padding: 12px !important; border-radius: 12px !important; } body.is-mobile .stat-value { font-size: 20px !important; } /* ── Grilles génériques ──────────────────────────────────────────────────────── */ body.is-mobile .detail-grid { grid-template-columns: 1fr !important; } body.is-mobile .scoring-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } body.is-mobile .risk-grid { grid-template-columns: 1fr 1fr !important; } /* ── Formulaires ─────────────────────────────────────────────────────────────── */ body.is-mobile input, body.is-mobile select, body.is-mobile textarea { font-size: 16px !important; border-radius: 10px !important; padding: 12px 14px !important; width: 100% !important; box-sizing: border-box !important; min-height: 48px; } body.is-mobile .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; } body.is-mobile .form-group, body.is-mobile .form-group.full { grid-column: 1 !important; } body.is-mobile .form-label { font-size: 13px !important; } /* ── Boutons touch-friendly ──────────────────────────────────────────────────── */ body.is-mobile button { min-height: 44px; } body.is-mobile .btn { font-size: 14px; padding: 12px 20px; border-radius: 11px; min-height: 44px; } body.is-mobile .btn-sm { font-size: 13px; padding: 9px 16px; min-height: 38px; border-radius: 9px; } body.is-mobile .btn-lg { font-size: 16px; padding: 14px 28px; min-height: 52px; border-radius: 13px; } body.is-mobile .btn-icon { padding: 10px; min-height: 44px; width: 44px; border-radius: 11px; } body.is-mobile .btn-icon.btn-sm { padding: 8px; min-height: 38px; width: 38px; } /* Désactiver le hover lift sur tactile (évite le flash) */ @media (hover: none) { .btn:hover { transform: none !important; } } /* ── Modales → bottom sheet sur mobile ───────────────────────────────────────── */ body.is-mobile .modal-overlay { align-items: flex-end !important; padding: 0 !important; } body.is-mobile .modal-overlay.open { align-items: flex-end !important; } body.is-mobile .modal { border-radius: 24px 24px 0 0 !important; max-height: 88vh !important; height: auto !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; padding-bottom: calc(var(--safe-bottom) + 16px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } body.is-mobile .modal-header { position: sticky; top: 0; background: var(--white); z-index: 10; padding: 16px 20px 14px !important; border-bottom: 0.5px solid var(--border-light); } body.is-mobile .modal-header::before { content: ''; display: block; width: 36px; height: 4px; background: var(--border-light); border-radius: 2px; margin: 0 auto 14px; } body.is-mobile .modal-title { font-size: 16px !important; } body.is-mobile .modal-body { padding: 16px 20px !important; } body.is-mobile .modal-footer { padding: 14px 20px !important; flex-direction: column-reverse !important; gap: 10px !important; } body.is-mobile .modal-footer .btn { width: 100% !important; justify-content: center !important; } /* ── Search bar ──────────────────────────────────────────────────────────────── */ body.is-mobile .search-bar, body.is-mobile .search-wrap { position: sticky !important; top: calc(var(--header-h) + var(--safe-top)) !important; z-index: 80 !important; background: var(--bg) !important; padding: 8px 0 8px !important; } body.is-mobile .search-input { font-size: 16px !important; border-radius: 12px !important; padding: 12px 16px !important; width: 100% !important; } /* ── Clients liste ───────────────────────────────────────────────────────────── */ body.is-mobile .client-row { display: flex !important; align-items: center !important; padding: 12px 14px !important; border-radius: 12px !important; background: #fff; box-shadow: var(--shadow-card); margin-bottom: 8px; gap: 12px; } body.is-mobile .client-row td, body.is-mobile .client-row th { padding: 0 !important; border: none !important; } /* ── Pipeline ────────────────────────────────────────────────────────────────── */ body.is-mobile .pipeline-board { flex-direction: column !important; gap: 14px !important; } body.is-mobile .pipeline-col { width: 100% !important; min-width: unset !important; } /* ── Calendrier ──────────────────────────────────────────────────────────────── */ body.is-mobile .cal-week-grid { overflow-x: auto !important; } /* ── KPI direction ───────────────────────────────────────────────────────────── */ body.is-mobile .dash-grid { grid-template-columns: 1fr !important; gap: 12px !important; } /* ── Info rows ───────────────────────────────────────────────────────────────── */ body.is-mobile .info-row { flex-direction: column !important; gap: 6px !important; } body.is-mobile .info-key { font-size: 11px !important; } body.is-mobile .info-val { font-size: 13px !important; } /* ── Client detail ───────────────────────────────────────────────────────────── */ body.is-mobile .client-detail-header { flex-direction: column !important; align-items: flex-start !important; } body.is-mobile .client-detail-actions { flex-wrap: wrap !important; gap: 8px !important; margin-top: 10px !important; } /* ── Images & SVG ────────────────────────────────────────────────────────────── */ body.is-mobile img, body.is-mobile svg { max-width: 100% !important; } /* ── Scroll momentum iOS ─────────────────────────────────────────────────────── */ body.is-mobile #content, body.is-mobile [id^="view-"] { -webkit-overflow-scrolling: touch; } /* ── FAB — Bouton action flottant ────────────────────────────────────────────── */ .n3d-fab { position: fixed; bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px); right: 18px; width: 56px; height: 56px; border-radius: 28px; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); color: #fff; border: none; box-shadow: 0 4px 20px rgba(46,140,60,.5), 0 1px 4px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; z-index: 950; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .15s; -webkit-tap-highlight-color: transparent; animation: fabIn .35s cubic-bezier(.34,1.56,.64,1) both; } @keyframes fabIn { from{transform:scale(0) rotate(-30deg);opacity:0} to{transform:none;opacity:1} } .n3d-fab:active { transform: scale(0.88); box-shadow: 0 2px 10px rgba(46,140,60,.3); } .n3d-fab-mini { width: 44px; height: 44px; border-radius: 22px; font-size: 20px; } /* ── Live tracking pill ──────────────────────────────────────────────────────── */ #n3d-tracking-pill { position: fixed; top: calc(var(--safe-top) + var(--header-h) + 8px); left: 50%; transform: translateX(-50%); background: var(--accent-dark); color: var(--white); border-radius: 20px; padding: 6px 14px 6px 10px; font-size: 12px; font-weight: 700; z-index: 850; display: none; align-items: center; gap: 7px; box-shadow: 0 2px 16px rgba(36,107,48,.5); white-space: nowrap; cursor: pointer; } #n3d-tracking-pill.active { display: flex; animation: pillIn .3s cubic-bezier(.34,1.56,.64,1); } @keyframes pillIn { from{transform:translateX(-50%) translateY(-12px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} } #n3d-tracking-pill .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: dotBlink 1.2s ease-in-out infinite; } @keyframes dotBlink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.8)} } /* ── Offline pill ────────────────────────────────────────────────────────────── */ #n3d-offline-banner { position: fixed; top: calc(var(--safe-top) + var(--header-h)); left: 0; right: 0; background: var(--warn-dark); color: var(--white); font-size: 12px; font-weight: 700; text-align: center; padding: 8px; z-index: 840; display: none; } #n3d-offline-banner.visible { display: block; animation: bannerIn .25s ease; } @keyframes bannerIn { from{transform:translateY(-100%)} to{transform:translateY(0)} } /* ── Splash screen ───────────────────────────────────────────────────────────── */ #n3d-splash { position: fixed; inset: 0; z-index: 9999; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transition: opacity .5s ease; } #n3d-splash.hidden { opacity: 0; pointer-events: none; } #n3d-splash .sp-wordmark { color: #fff; font-size: 36px; font-weight: 900; letter-spacing: -1px; animation: spBounce .55s cubic-bezier(.34,1.56,.64,1) both; line-height: 1; } #n3d-splash .sp-wordmark span { color: var(--accent-bright); } #n3d-splash .sp-sub { color: rgba(255,255,255,.35); font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; margin-top: 6px; animation: spFade .6s ease .2s both; } #n3d-splash .sp-divider { width: 32px; height: 2px; background: rgba(255,255,255,.15); border-radius: 1px; margin: 20px auto; animation: spFade .6s ease .3s both; } #n3d-splash .sp-dots { display: flex; gap: 7px; animation: spFade .5s ease .35s both; } #n3d-splash .sp-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); animation: spDot 1.3s ease-in-out infinite both; } #n3d-splash .sp-dot:nth-child(2) { animation-delay: .18s; } #n3d-splash .sp-dot:nth-child(3) { animation-delay: .36s; } @keyframes spDot { 0%,100%{opacity:.25;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} } @keyframes spFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } @keyframes spBounce { from{transform:scale(.75) translateY(10px);opacity:0} 70%{transform:scale(1.05)} to{transform:scale(1);opacity:1} } /* ── More sheet ──────────────────────────────────────────────────────────────── */ #n3d-more-sheet { animation: sheetFadeIn .2s ease; } @keyframes sheetFadeIn { from{opacity:0} to{opacity:1} } /* ── Mobile dashboard ────────────────────────────────────────────────────────── */ #n3d-mob-dashboard { padding: 0 !important; background: var(--bg); min-height: 100%; } /* Hero */ .mob-hero { background: linear-gradient(155deg, #07160d 0%, #12271d 30%, #1A3828 60%, #246b30 85%, #2E8C3C 100%); padding: var(--mob-pad) var(--mob-pad) 28px; position: relative; overflow: hidden; } .mob-hero::before { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); pointer-events: none; } .mob-hero::after { content: ''; position: absolute; left: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(46,140,60,.3) 0%, transparent 70%); pointer-events: none; } .mob-hero-top { display: flex; align-items: flex-start; justify-content: space-between; } .mob-hero-greeting { color: rgba(255,255,255,.55); font-size: 13px; margin-bottom: 2px; } .mob-hero-name { color: #fff; font-size: 22px; font-weight: 900; line-height: 1.1; } .mob-hero-date { color: rgba(255,255,255,.4); font-size: 11px; margin-top: 4px; } .mob-hero-logo { color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 1px; opacity: .35; text-align: right; margin-top: 2px; } .mob-kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 18px; position: relative; z-index: 1; } .mob-kpi { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 11px 8px; text-align: center; cursor: pointer; transition: background .15s; } .mob-kpi:active { background: rgba(255,255,255,.18); } .mob-kpi-val { color: #fff; font-size: 20px; font-weight: 900; line-height: 1; } .mob-kpi-lbl { color: rgba(255,255,255,.45); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; } /* Next intervention highlight */ .mob-next-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 12px 14px; margin-top: 10px; display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; z-index: 1; } .mob-next-card:active { background: rgba(255,255,255,.18); } .mob-next-time { color: var(--accent-bright); font-size: 18px; font-weight: 900; white-space: nowrap; } .mob-next-meta { flex: 1; min-width: 0; } .mob-next-client { color: #fff; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mob-next-tech { color: rgba(255,255,255,.5); font-size: 11px; margin-top: 2px; } .mob-next-label { color: rgba(255,255,255,.3); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; } /* Quick actions */ .mob-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px var(--mob-pad); background: #fff; border-bottom: 0.5px solid #edf0ed; } .mob-qa { display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: transparent; cursor: pointer; padding: 10px 4px; border-radius: 12px; -webkit-tap-highlight-color: transparent; transition: background .12s, transform .12s; } .mob-qa:active { background: #f0f4f2; transform: scale(.92); } .mob-qa-icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 23px; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .mob-qa-lbl { font-size: 11px; font-weight: 700; color: #1A3828; text-align: center; line-height: 1.2; } /* Section header */ .mob-section { padding: 14px var(--mob-pad) 0; } .mob-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mob-section-title { font-size: 12px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .8px; } .mob-section-link { font-size: 12px; font-weight: 600; color: var(--accent); border: none; background: transparent; cursor: pointer; padding: 0; } /* Today card */ .mob-today-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 10px; border: 0.5px solid rgba(0,0,0,.04); } .mob-today-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 0.5px solid #f1f5f9; cursor: pointer; transition: background .12s; -webkit-tap-highlight-color: transparent; } .mob-today-item:last-child { border-bottom: none; } .mob-today-item:active { background: #f8fafc; } .mob-today-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .mob-today-time { font-size: 11px; font-weight: 800; color: #64748b; width: 40px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .mob-today-client { font-size: 13px; font-weight: 700; color: #1A3828; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mob-today-tech { font-size: 11px; color: #94a3b8; margin-top: 1px; } /* Alert card */ .mob-alert { background: #fff; border-radius: var(--radius-card); padding: 13px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-card); margin-bottom: 8px; cursor: pointer; border-left: 3px solid transparent; -webkit-tap-highlight-color: transparent; border: 0.5px solid rgba(0,0,0,.04); border-left-width: 3px; } .mob-alert.danger { border-left-color: var(--error); background: #fff9f9; } .mob-alert.warn { border-left-color: var(--warn-color); background: #fffcf5; } .mob-alert.info { border-left-color: var(--info-color); background: #f8fbff; } .mob-alert-icon { font-size: 24px; flex-shrink: 0; } .mob-alert-title { font-size: 13px; font-weight: 700; color: #1A3828; } .mob-alert-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; } .mob-alert-val { font-size: 15px; font-weight: 900; color: #1A3828; margin-left: auto; flex-shrink: 0; } /* Empty state */ .mob-empty-state { text-align: center; padding: 32px 16px; color: #94a3b8; } .mob-empty-state-icon { font-size: 40px; margin-bottom: 10px; opacity: .5; } .mob-empty-state-text { font-size: 13px; font-weight: 600; } .mob-empty-state-sub { font-size: 11px; margin-top: 4px; color: #cbd5e1; } /* Animations entrée */ @keyframes mobSlideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } .mob-anim { animation: mobSlideUp .35s cubic-bezier(.22,1,.36,1) both; } .mob-anim-1 { animation-delay: .05s; } .mob-anim-2 { animation-delay: .10s; } .mob-anim-3 { animation-delay: .15s; } .mob-anim-4 { animation-delay: .20s; } .mob-anim-5 { animation-delay: .25s; } /* Search overlay (mobile-nav.js) */ #mob-search-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15,25,20,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; padding: calc(var(--safe-top) + 12px) 16px 20px; animation: overlayIn .2s ease; } @keyframes overlayIn { from{opacity:0} to{opacity:1} } #mob-search-overlay .search-bar-row { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; } #mob-search-overlay .search-field { flex: 1; display: flex; align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 12px 16px; gap: 10px; } #mob-search-overlay .search-field:focus-within { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); } #mob-search-input { border: none !important; outline: none !important; flex: 1; font-size: 16px !important; background: transparent !important; color: #fff !important; padding: 0 !important; min-height: 0 !important; width: auto !important; border-radius: 0 !important; } #mob-search-input::placeholder { color: rgba(255,255,255,.35) !important; } #mob-search-results { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mob-result-group-title { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .8px; padding: 12px 4px 6px; } .mob-result-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.92); border-radius: 14px; margin-bottom: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .1s; } .mob-result-item:active { background: rgba(255,255,255,.75); } .mob-result-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; } .mob-result-label { font-size: 13px; font-weight: 700; color: #1A3828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mob-result-sub { font-size: 11px; color: #64748b; margin-top: 1px; } .mob-search-empty { text-align: center; color: rgba(255,255,255,.3); font-size: 13px; padding: 50px 0; } .mob-search-empty-icon { font-size: 36px; margin-bottom: 10px; opacity: .5; } /* Suggestions rapides (avant frappe) */ .mob-suggestion-row { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; } .mob-suggestion-chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 7px 14px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s; } .mob-suggestion-chip:active { background: rgba(255,255,255,.2); } /* More sheet search */ #n3d-more-search-input { width: 100% !important; box-sizing: border-box; border: 1.5px solid var(--border-light) !important; border-radius: 12px !important; padding: 10px 14px !important; font-size: 15px !important; outline: none !important; background: #f8fafc !important; color: var(--navy) !important; margin: 8px 0 !important; } #n3d-more-search-input:focus { border-color: var(--accent) !important; background: #fff !important; } /* Misc */ body.is-mobile .meta-chip { font-size: 11px !important; padding: 3px 9px !important; } body.is-mobile .back-btn { min-height: 44px !important; padding: 10px 16px !important; font-size: 14px !important; } body.is-mobile .section-label { font-size: 11px !important; padding: 8px 0 4px !important; } /* Pull-to-refresh */ #n3d-pull-indicator { will-change: transform; user-select: none; -webkit-user-select: none; } /* Responsive ultra petit */ @media (max-width: 370px) { .mob-kpi-val { font-size: 17px; } .mob-quick-actions { gap: 8px; } .mob-qa-icon { width: 44px; height: 44px; font-size: 20px; } :root { --mob-pad: 12px; } } /* View transition */ @keyframes n3d-view-in { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none} } body.is-mobile [id^="view-"].view-entering { animation: n3d-view-in .28s cubic-bezier(.22,1,.36,1) both; } /* Grilles spécifiques inline → CSS override */ body.is-mobile #view-geolocalisation [style*="grid-template-columns:1fr 1fr"], body.is-mobile #view-sync-auto [style*="grid-template-columns:1fr 1fr"] { display: flex !important; flex-direction: column !important; gap: 12px !important; } body.is-mobile #view-sync-auto [style*="repeat(3,1fr)"] { grid-template-columns: 1fr 1fr !important; } body.is-mobile #view-kpi-direction [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; } body.is-mobile #view-kpi-direction [style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; } body.is-mobile #view-facturation [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; } body.is-mobile #view-techniciens [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } body.is-mobile #view-finance [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; } /* iPad portrait */ @media (min-width: 768px) and (orientation: portrait) { :root { --mob-pad: 20px; } .mob-kpi-row { grid-template-columns: repeat(4, 1fr); } .mob-quick-actions { grid-template-columns: repeat(6, 1fr); } body.is-mobile .db-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; } body.is-mobile .form-grid { grid-template-columns: 1fr 1fr !important; } body.is-mobile .form-group.full { grid-column: 1 / -1 !important; } body.is-mobile .modal { max-width: 560px !important; margin: 0 auto !important; border-radius: 20px !important; } body.is-mobile .modal-overlay { align-items: center !important; } } /* ── Clavier virtuel iOS — ajustement dynamique via JS ──────────────────────── */ body.is-mobile.keyboard-open .modal { max-height: 50vh !important; } body.is-mobile.keyboard-open #content { padding-bottom: 0 !important; } /* Évite que le focus scrolle hors champ sur iOS */ body.is-mobile input:focus, body.is-mobile textarea:focus, body.is-mobile select:focus { scroll-margin-top: 80px; } /* Dark mode natif */ @media (prefers-color-scheme: dark) { body.is-mobile:not(.force-light) { --bg: #111827; --card: #1f2937; --border: #374151; --text: #f9fafb; --text-light: #9ca3af; --white: #1f2937; } }