:root {
      --bg: #06100c;
      --bg-soft: #0a1712;
      --surface: #0e1d17;
      --surface-2: #12241c;
      --surface-3: #172b22;
      --text: #f5faf7;
      --muted: #91a69b;
      --muted-2: #6f8378;
      --line: rgba(180, 255, 214, .12);
      --accent: #8dff18;
      --accent-2: #b7ff63;
      --accent-soft: rgba(141, 255, 24, .12);
      --danger: #ff6262;
      --warning: #ffc857;
      --info: #57c9ff;
      --success: #62e89c;
      --shadow: 0 24px 70px rgba(0,0,0,.32);
      --radius: 20px;
      --radius-sm: 14px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 82% -10%, rgba(141,255,24,.09), transparent 34%),
        radial-gradient(circle at -10% 35%, rgba(87,201,255,.05), transparent 32%),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; }
    .hidden { display: none !important; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

    .app-shell { min-height: 100vh; padding-bottom: calc(94px + var(--safe-bottom)); }
    .topbar {
      position: sticky; top: 0; z-index: 30;
      display: flex; align-items: center; justify-content: space-between;
      min-height: 74px; padding: 12px 18px;
      background: rgba(6,16,12,.88); backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }
    .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .brand-mark {
      display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
      border-radius: 13px; background: var(--accent); color: #071007; font-weight: 950;
      box-shadow: 0 0 0 6px rgba(141,255,24,.07);
    }
    .brand-text { min-width: 0; }
    .brand-text strong { display: block; letter-spacing: -.02em; font-size: 17px; }
    .brand-text span { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .top-actions { display: flex; gap: 8px; }

    .icon-btn, .ghost-btn, .primary-btn, .secondary-btn, .danger-btn {
      border: 0; border-radius: 13px; min-height: 44px; display: inline-flex; align-items: center;
      justify-content: center; gap: 9px; font-weight: 800; letter-spacing: -.01em;
    }
    .icon-btn { width: 44px; padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--line); }
    .ghost-btn { padding: 0 14px; background: transparent; color: var(--muted); border: 1px solid var(--line); }
    .primary-btn { padding: 0 17px; background: var(--accent); color: #071007; box-shadow: 0 10px 30px rgba(141,255,24,.14); }
    .secondary-btn { padding: 0 17px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
    .danger-btn { padding: 0 17px; color: white; background: rgba(255,98,98,.16); border: 1px solid rgba(255,98,98,.3); }
    .icon-btn:active, .ghost-btn:active, .primary-btn:active, .secondary-btn:active, .danger-btn:active { transform: translateY(1px); }

    .content { width: min(1180px, 100%); margin: 0 auto; padding: 18px; }
    .view { display: none; }
    .view.active { display: block; animation: viewIn .18s ease-out; }
    @keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

    .hero {
      position: relative; overflow: hidden; padding: 22px; border-radius: 26px;
      border: 1px solid rgba(141,255,24,.18); background: linear-gradient(145deg, rgba(18,36,28,.97), rgba(8,20,14,.97));
      box-shadow: var(--shadow); margin-bottom: 18px;
    }
    .hero::after { content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; right: -90px; top: -110px; background: rgba(141,255,24,.12); filter: blur(6px); }
    .hero-meta { display: flex; align-items: center; gap: 8px; color: var(--accent-2); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
    .hero h1 { position: relative; z-index: 1; margin: 9px 0 7px; font-size: clamp(29px, 7vw, 52px); line-height: .98; letter-spacing: -.055em; max-width: 720px; }
    .hero p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 650px; }
    .future-language { position:relative; z-index:1; display:flex; align-items:flex-start; gap:10px; width:fit-content; max-width:100%; margin-top:13px; padding:10px 12px; border-radius:13px; border:1px solid rgba(141,255,24,.18); background:rgba(141,255,24,.07); }
    .future-language strong { color:var(--accent); font-size:11px; line-height:1.4; white-space:nowrap; }
    .future-language span { color:var(--muted); font-size:11px; line-height:1.4; }
    .hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
    .section-head h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
    .section-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

    .metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .metric { padding: 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); min-height: 112px; }
    .metric-label { color: var(--muted); font-size: 12px; }
    .metric-value { margin-top: 8px; font-size: 26px; font-weight: 900; letter-spacing: -.04em; }
    .metric-note { margin-top: 5px; color: #89a99a; font-size: 11px; }
    .metric.accent .metric-value { color: var(--accent); }

    .grid-2 { display: grid; gap: 12px; }
    .panel { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
    .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; gap: 12px; }
    .panel-head h3 { margin: 0; font-size: 15px; }
    .panel-body { padding: 0 16px 16px; }

    .quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .quick-action {
      text-align: left; min-height: 104px; padding: 15px; border-radius: 17px; border: 1px solid var(--line);
      background: linear-gradient(145deg, var(--surface-2), var(--surface)); color: var(--text);
    }
    .quick-action .qa-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); margin-bottom: 11px; }
    .quick-action strong { display: block; font-size: 14px; }
    .quick-action span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }

    .list { display: grid; gap: 9px; }
    .list-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px; border-radius: 15px; background: var(--surface-2); border: 1px solid rgba(180,255,214,.08); }
    .avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: rgba(141,255,24,.1); color: var(--accent); font-size: 15px; font-weight: 900; }
    .row-main { min-width: 0; }
    .row-main strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .row-main span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .row-side { text-align: right; font-size: 11px; color: var(--muted); }
    .row-side strong { display: block; font-size: 13px; color: var(--text); }

    .status { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; }
    .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .status.interessant, .status.confirme, .status.signe { color: var(--success); background: rgba(98,232,156,.11); }
    .status.negocier, .status.attente { color: var(--warning); background: rgba(255,200,87,.11); }
    .status.ecarter, .status.annule { color: var(--danger); background: rgba(255,98,98,.11); }
    .status.nouveau { color: var(--info); background: rgba(87,201,255,.11); }

    .empty { padding: 26px 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 16px; }
    .empty strong { color: var(--text); display: block; margin-bottom: 5px; }

    .toolbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
    .toolbar::-webkit-scrollbar { display: none; }
    .filter-btn { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; min-height: 39px; padding: 0 13px; font-weight: 750; white-space: nowrap; }
    .filter-btn.active { color: #071007; background: var(--accent); border-color: transparent; }

    .cards { display: grid; gap: 12px; }
    .supplier-card, .offer-card, .appointment-card { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
    .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .card-top h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
    .card-top p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
    .card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
    .mini-btn { min-height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-weight: 750; }
    .mini-btn.accent { background: var(--accent-soft); color: var(--accent); border-color: rgba(141,255,24,.2); }
    .mini-btn.danger { color: #ff8d8d; }

    .offer-media { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 15px; background: var(--surface-2); margin: 14px 0; border: 1px solid var(--line); }
    .offer-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .offer-kpi { padding: 11px; border-radius: 13px; background: var(--surface-2); border: 1px solid rgba(180,255,214,.07); }
    .offer-kpi span { display: block; color: var(--muted); font-size: 10px; }
    .offer-kpi strong { display: block; margin-top: 5px; font-size: 15px; }
    .offer-kpi.good strong { color: var(--accent); }

    .comparison-mobile { display: grid; gap: 11px; }
    .comparison-mobile-card { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
    .comparison-mobile-card h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
    .comparison-mobile-card > p { margin: 5px 0 13px; color: var(--muted); font-size: 12px; }
    .comparison-mobile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .comparison-mobile-kpi { padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid rgba(180,255,214,.07); }
    .comparison-mobile-kpi span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
    .comparison-mobile-kpi strong { display:block; margin-top:5px; font-size:14px; }
    .comparison-mobile-kpi.good strong { color:var(--accent); }
    .comparison-table-wrap { display:none; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
    table { width: 100%; border-collapse: collapse; min-width: 850px; background: var(--surface); }
    th, td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
    th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.015); }
    td strong { font-size: 13px; }
    td.good { color: var(--accent); font-weight: 850; }
    tr:last-child td { border-bottom: 0; }

    .trip-strip { display: grid; gap: 9px; }
    .trip-day { display: flex; gap: 13px; align-items: center; padding: 13px; background: var(--surface-2); border-radius: 15px; border: 1px solid rgba(180,255,214,.08); }
    .trip-date { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 900; line-height: 1; }
    .trip-date small { display: block; font-size: 9px; color: var(--accent-2); text-transform: uppercase; }
    .trip-day strong { display: block; font-size: 14px; }
    .trip-day span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

    .bottom-nav {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
      display: grid; grid-template-columns: repeat(5,1fr); gap: 2px;
      padding: 9px 8px calc(9px + var(--safe-bottom));
      background: rgba(6,16,12,.94); border-top: 1px solid var(--line); backdrop-filter: blur(20px);
    }
    .nav-btn { border: 0; background: transparent; color: var(--muted); min-width: 0; min-height: 58px; border-radius: 14px; font-size: 10px; font-weight: 750; display: grid; place-items: center; gap: 4px; padding: 5px 1px; overflow: hidden; }
    .nav-btn span { min-width: 0; max-width: 100%; font-size: clamp(8px, 2.25vw, 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nav-btn svg { width: 21px; height: 21px; }
    .nav-btn.active { background: var(--accent-soft); color: var(--accent); }

    .fab {
      position: fixed; right: 18px; bottom: calc(88px + var(--safe-bottom)); z-index: 45;
      width: 58px; height: 58px; border-radius: 18px; border: 0; background: var(--accent); color: #071007;
      box-shadow: 0 18px 40px rgba(0,0,0,.38), 0 0 0 7px rgba(141,255,24,.08);
      display: grid; place-items: center;
    }
    .fab svg { width: 28px; height: 28px; }


    .visit-launch {
      display: grid; gap: 12px; margin-bottom: 18px; padding: 18px; border-radius: 22px;
      border: 1px solid rgba(141,255,24,.22); background: linear-gradient(145deg, rgba(20,42,31,.98), rgba(9,24,17,.98));
      box-shadow: 0 18px 50px rgba(0,0,0,.2);
    }
    .visit-launch.active { border-color: rgba(141,255,24,.48); box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 0 0 1px rgba(141,255,24,.05); }
    .visit-launch-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .visit-launch h2 { margin:0; font-size:20px; letter-spacing:-.025em; }
    .visit-launch p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
    .visit-live-dot { display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
    .visit-live-dot::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(141,255,24,.09); }
    .visit-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .visit-fact { min-width:0; padding:11px; border-radius:13px; background:rgba(255,255,255,.025); border:1px solid var(--line); }
    .visit-fact span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
    .visit-fact strong { display:block; margin-top:5px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .visit-actions { display:grid; grid-template-columns:1.35fr 1fr; gap:9px; }
    .visit-actions.single { grid-template-columns:1fr; }
    .visit-captures { display:grid; gap:9px; }
    .capture-row { display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:11px; align-items:center; padding:12px; border-radius:15px; background:var(--surface-2); border:1px solid rgba(180,255,214,.08); }
    .capture-index { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--accent-soft); color:var(--accent); font-weight:950; }
    .capture-main { min-width:0; }
    .capture-main strong { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .capture-main span { display:block; margin-top:4px; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .capture-side { text-align:right; color:var(--muted); font-size:10px; }
    .capture-side strong { display:block; color:var(--text); font-size:13px; }
    .visit-summary { display:grid; gap:10px; }
    .summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .summary-card { padding:13px; border-radius:14px; background:var(--surface); border:1px solid var(--line); }
    .summary-card span { display:block; color:var(--muted); font-size:10px; }
    .summary-card strong { display:block; margin-top:5px; font-size:18px; }
    .field-note { color:var(--muted); font-size:11px; line-height:1.45; padding:11px 12px; border-radius:12px; background:rgba(141,255,24,.06); border:1px solid rgba(141,255,24,.12); }
    .visit-bar {
      position:fixed; left:10px; right:10px; bottom:calc(82px + var(--safe-bottom)); z-index:44;
      display:none; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:9px;
      border-radius:17px; background:rgba(10,23,18,.97); border:1px solid rgba(141,255,24,.28); box-shadow:var(--shadow); backdrop-filter:blur(18px);
    }
    .visit-bar.show { display:grid; }
    body.visit-active .fab { display:none; }
    body.visit-active .toast { bottom:calc(164px + var(--safe-bottom)); }
    .visit-bar-main { min-width:0; padding-left:4px; }
    .visit-bar-main strong { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .visit-bar-main span { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
    .visit-bar .mini-btn { min-height:42px; padding:0 11px; }

    .visit-bar { grid-template-columns:1fr; gap:8px; padding:9px 10px; }
    .visit-bar-main { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px; }
    .visit-bar-main span { margin-top:0; white-space:nowrap; }
    .visit-bar-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
    .visit-tool { min-width:0; min-height:47px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); display:grid; place-items:center; gap:2px; padding:4px 3px; font-size:9px; font-weight:850; }
    .visit-tool svg { width:19px; height:19px; }
    .visit-tool.accent { background:var(--accent); color:#071007; border-color:transparent; }
    body.visit-active .app-shell { padding-bottom:calc(166px + var(--safe-bottom)); }

    .capture-media-zone { margin-top:14px; padding:14px; border-radius:17px; background:rgba(255,255,255,.018); border:1px solid var(--line); }
    .capture-media-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:11px; }
    .capture-media-head strong { display:block; font-size:14px; }
    .capture-media-head span { display:block; margin-top:3px; color:var(--muted); font-size:10px; line-height:1.35; }
    .media-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .media-action { min-height:54px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--text); display:flex; align-items:center; gap:9px; padding:9px 10px; text-align:left; font-weight:800; font-size:11px; }
    .media-action svg { width:20px; height:20px; flex:0 0 auto; color:var(--accent); }
    .media-action small { display:block; margin-top:2px; color:var(--muted); font-size:9px; font-weight:650; }
    .media-action.recording { background:rgba(255,98,98,.13); border-color:rgba(255,98,98,.4); color:#fff; }
    .media-action.recording svg { color:var(--danger); }
    .record-status { display:none; align-items:center; gap:8px; margin:10px 0 0; padding:9px 11px; border-radius:12px; background:rgba(255,98,98,.09); color:#ffb5b5; font-size:11px; font-weight:800; }
    .record-status.show { display:flex; }
    .record-pulse { width:9px; height:9px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 5px rgba(255,98,98,.12); animation:recordPulse 1.1s infinite; }
    @keyframes recordPulse { 50% { opacity:.45; transform:scale(.82); } }
    .media-preview-grid { display:grid; gap:9px; margin-top:11px; }
    .media-empty { padding:13px; border-radius:12px; border:1px dashed var(--line); color:var(--muted); font-size:10px; text-align:center; }
    .media-tile { display:grid; grid-template-columns:78px minmax(0,1fr) 40px; gap:10px; align-items:center; min-height:78px; padding:8px; border-radius:14px; background:var(--surface); border:1px solid rgba(180,255,214,.08); }
    .media-visual { width:78px; height:62px; border-radius:10px; overflow:hidden; background:#07100c; display:grid; place-items:center; }
    .media-visual img, .media-visual video { width:100%; height:100%; object-fit:cover; }
    .media-visual audio { width:68px; max-width:68px; height:34px; }
    .media-icon { color:var(--accent); }
    .media-icon svg { width:26px; height:26px; }
    .media-info { min-width:0; }
    .media-info strong { display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .media-info span { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.35; }
    .media-delete { width:40px; height:40px; border-radius:11px; border:1px solid rgba(255,98,98,.24); background:rgba(255,98,98,.09); color:var(--danger); display:grid; place-items:center; }
    .media-delete svg { width:18px; height:18px; }
    .capture-row { width:100%; color:var(--text); text-align:left; cursor:pointer; }
    .capture-media-count { display:inline-flex; align-items:center; gap:4px; margin-top:4px; color:var(--accent); font-size:9px; font-weight:800; }

    .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-end; background: rgba(0,0,0,.68); backdrop-filter: blur(4px); }
    .modal-backdrop.open { display: flex; }
    .modal { width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 26px 26px 0 0; background: #0a1712; border: 1px solid var(--line); box-shadow: 0 -30px 80px rgba(0,0,0,.5); }
    .modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; background: rgba(10,23,18,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
    .modal-head h2 { margin: 0; font-size: 18px; }
    .modal-body { padding: 18px 18px calc(28px + var(--safe-bottom)); }

    .form-grid { display: grid; gap: 13px; }
    .field { display: grid; gap: 7px; }
    .field label { color: var(--muted); font-size: 11px; font-weight: 780; }
    .field input, .field select, .field textarea {
      width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 13px;
      min-height: 48px; padding: 11px 13px; outline: none;
    }
    .field textarea { min-height: 96px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(141,255,24,.55); box-shadow: 0 0 0 4px rgba(141,255,24,.07); }
    .two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .form-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 18px; }
    .hint { color: var(--muted-2); font-size: 10px; line-height: 1.4; }
    .photo-preview { display: none; width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }

    .toast { position: fixed; left: 50%; bottom: calc(105px + var(--safe-bottom)); z-index: 200; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px); padding: 12px 15px; border-radius: 13px; background: #eafeea; color: #071007; font-weight: 800; font-size: 12px; box-shadow: var(--shadow); transition: .2s ease; }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }

    .settings-block { padding: 17px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); margin-bottom: 12px; }
    .settings-block h3 { margin: 0 0 7px; font-size: 15px; }
    .settings-block p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .settings-actions { display: flex; gap: 9px; flex-wrap: wrap; }

    @media (min-width: 720px) {
      .content { padding: 26px; }
      .metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
      .grid-2 { grid-template-columns: 1.12fr .88fr; }
      .quick-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
      .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .offer-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
      .comparison-mobile { display:none; }
      .comparison-table-wrap { display:block; }
      .modal-backdrop { align-items: center; justify-content: center; padding: 24px; }
      .modal { max-width: 720px; border-radius: 26px; max-height: 88vh; }
      .form-grid.desktop-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .span-2 { grid-column: 1 / -1; }
      .bottom-nav { left: 50%; transform: translateX(-50%); width: min(680px, calc(100% - 34px)); bottom: 14px; border: 1px solid var(--line); border-radius: 21px; padding-bottom: 9px; box-shadow: var(--shadow); }
      .app-shell { padding-bottom: 112px; }
      .fab { right: max(24px, calc((100vw - 1180px)/2 + 24px)); bottom: 106px; }
      .visit-bar { left:50%; right:auto; width:min(650px, calc(100% - 42px)); transform:translateX(-50%); bottom:100px; }
    }

    @media print {
      body { background: white; color: black; }
      .topbar, .bottom-nav, .fab, .hero-actions, .toolbar, .card-actions, .top-actions { display: none !important; }
      .app-shell { padding: 0; }
      .view { display: none !important; }
      #view-comparison { display: block !important; }
      .content { max-width: none; width: 100%; padding: 0; }
      .comparison-table-wrap, table, .panel, .hero { border-color: #ddd; background: white; color: black; box-shadow: none; }
      th, td { color: black; border-color: #ddd; }
    }


    /* GATES 4–12 — capture, scan, métier, exports, transmission, route */
    .action-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
    .action-rail .primary-btn,.action-rail .secondary-btn{min-height:54px}
    .searchbar{display:flex;gap:8px;position:sticky;top:78px;z-index:12;padding:8px 0;background:linear-gradient(var(--bg) 70%,transparent)}
    .searchbar input{width:100%;min-height:48px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 14px;outline:none}
    .searchbar input:focus{border-color:rgba(141,255,24,.55);box-shadow:0 0 0 4px rgba(141,255,24,.07)}
    .segmented{display:flex;gap:7px;overflow:auto;padding-bottom:5px;scrollbar-width:none}.segmented::-webkit-scrollbar{display:none}
    .segmented button{min-height:40px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:800;white-space:nowrap}
    .segmented button.active{background:var(--accent);color:#071007;border-color:transparent}
    .entity-grid{display:grid;gap:12px;margin-top:12px}.entity-card{padding:15px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
    .entity-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.entity-head h3{margin:0;font-size:16px}.entity-head p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.4}
    .entity-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}.entity-kpi{padding:10px;border-radius:12px;background:var(--surface-2);border:1px solid rgba(180,255,214,.07)}.entity-kpi span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.entity-kpi strong{display:block;margin-top:4px;font-size:14px}
    .media-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.media-chip{padding:5px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:800}
    .scanner-shell{display:grid;gap:12px}.scanner-reader{min-height:250px;border-radius:18px;background:#020604;border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}.scanner-reader video{width:100%!important;height:auto!important}.scanner-status{padding:11px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:12px;line-height:1.45}
    .dropzone{display:grid;place-items:center;text-align:center;min-height:150px;padding:18px;border:1px dashed rgba(141,255,24,.35);border-radius:18px;background:rgba(141,255,24,.045)}.dropzone strong{display:block}.dropzone span{display:block;margin-top:6px;color:var(--muted);font-size:11px}
    .import-list{display:grid;gap:8px;margin-top:10px}.import-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:11px;border-radius:12px;background:var(--surface-2);font-size:11px}.import-row strong{display:block;font-size:12px}.import-row span{color:var(--muted)}
    .ocr-box{display:grid;gap:10px}.ocr-preview{width:100%;max-height:330px;object-fit:contain;background:#020604;border-radius:15px;border:1px solid var(--line)}.ocr-progress{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}.ocr-progress>span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
    .size-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.size-cell{padding:8px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line)}.size-cell label{font-size:9px;color:var(--muted)}.size-cell input{width:100%;margin-top:4px;background:transparent;border:0;color:var(--text);font-weight:850;outline:none}
    .export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.export-action{min-height:118px;text-align:left;padding:15px;border-radius:17px;background:linear-gradient(145deg,var(--surface-2),var(--surface));color:var(--text);border:1px solid var(--line)}.export-action strong{display:block;font-size:14px}.export-action span{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.4}
    .route-card{padding:13px;margin-top:12px;border-radius:14px;background:rgba(87,201,255,.06);border:1px solid rgba(87,201,255,.17)}.route-card strong{display:block;font-size:12px}.route-card p{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
    .compat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.compat-item{padding:10px;border-radius:12px;background:var(--surface-2);font-size:10px;color:var(--muted)}.compat-item strong{display:block;color:var(--text);font-size:12px;margin-bottom:3px}.compat-item.pass strong{color:var(--success)}.compat-item.warn strong{color:var(--warning)}
    .gate-table{display:grid;gap:7px}.gate-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border-radius:12px;background:var(--surface-2);font-size:11px}.gate-row strong{color:var(--accent)}
    .offline-banner{display:none;padding:8px 12px;text-align:center;background:#4a3000;color:#ffe3a1;font-size:11px;font-weight:800}.offline-banner.show{display:block}
    @media(min-width:760px){.action-rail{grid-template-columns:repeat(4,minmax(0,1fr))}.entity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.export-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.compat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.size-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}

  
    /* V1.2 — route, appareils, conteneurs et Linters */
    .v12-dashboard-route{margin:14px 0 0;padding:14px 15px;border:1px solid rgba(87,201,255,.22);background:linear-gradient(135deg,rgba(87,201,255,.10),rgba(141,255,24,.05));border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
    .v12-dashboard-route>div{display:grid;gap:4px}.v12-dashboard-route strong{font-size:14px}.v12-dashboard-route small{color:var(--muted);font-size:11px}
    .v12-operating-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.v12-operating-grid .quick-action{min-height:94px}
    .v12-route-live{border:1px solid rgba(87,201,255,.22);background:linear-gradient(145deg,rgba(87,201,255,.10),rgba(14,29,23,.98));border-radius:22px;padding:18px;box-shadow:var(--shadow)}
    .v12-route-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.v12-route-head h2{font-size:22px;margin:8px 0 4px}.v12-route-head p{color:var(--muted);font-size:12px;margin:0}.v12-eta{text-align:right;display:grid;gap:2px}.v12-eta span{color:var(--muted);font-size:11px}.v12-eta strong{font-size:30px;color:var(--accent)}
    .v12-route-facts,.v12-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}.v12-route-facts>div,.v12-kpi-grid>div{padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);display:grid;gap:4px}.v12-route-facts span,.v12-kpi-grid span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.v12-route-facts strong,.v12-kpi-grid strong{font-size:14px}
    .v12-route-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.v12-check{display:flex!important;gap:10px;align-items:flex-start!important;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--text)!important}.v12-check input{width:19px!important;height:19px!important;accent-color:var(--accent);flex:0 0 auto}
    .v12-tier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.v12-tier-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px}.v12-tier-card>div:first-child{display:grid;gap:4px;margin-bottom:10px}.v12-tier-card>div span{color:var(--muted);font-size:11px}.v12-tier-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0}.v12-tier-card dl div{padding:8px;background:rgba(255,255,255,.025);border-radius:10px}.v12-tier-card dt{color:var(--muted);font-size:9px;text-transform:uppercase}.v12-tier-card dd{margin:3px 0 0;font-size:12px;font-weight:800}
    .v12-category-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.v12-category-grid article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.02)}.v12-category-grid article strong{font-size:17px}.v12-category-grid article span{color:var(--muted);font-size:12px}
    .v12-device-current{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px;border:1px solid rgba(141,255,24,.2);background:var(--surface);border-radius:18px;margin-bottom:14px}.v12-device-current h3{margin:7px 0 3px}.v12-device-current p,.v12-device-current small{color:var(--muted);font-size:11px;margin:0}.v12-device-current>div:last-child{text-align:right;display:grid;gap:3px}.v12-device-current>div:last-child span{color:var(--muted);font-size:10px;text-transform:uppercase}
    .v12-control-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.v12-control-summary>div{padding:15px;border:1px solid var(--line);background:var(--surface);border-radius:16px;display:grid;gap:5px}.v12-control-summary span{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.05em}.v12-control-summary strong{font-size:16px}.v12-control-summary small{font-size:11px;color:var(--muted);line-height:1.4}
    .v12-definition{border-left:3px solid var(--accent);padding:10px 13px;background:rgba(141,255,24,.05);border-radius:0 12px 12px 0;margin:10px 0 14px}.v12-definition p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.v12-definition strong{color:var(--text)}
    .settings-block.warn{border-color:rgba(255,200,87,.3);background:rgba(255,200,87,.06)}
    @media(max-width:700px){.v12-route-columns,.v12-category-grid{grid-template-columns:1fr}.v12-control-summary{grid-template-columns:1fr}.v12-tier-grid{grid-template-columns:1fr}.v12-route-head{display:grid}.v12-eta{text-align:left}.v12-route-facts,.v12-kpi-grid{grid-template-columns:1fr 1fr}.v12-device-current{grid-template-columns:1fr}.v12-device-current>div:last-child{text-align:left}.v12-operating-grid{grid-template-columns:1fr 1fr}}


/* V1.3 preview — assistant d'appairage guidé */
.v13-pairing-entry { border-color: rgba(141,255,24,.25); }
.v13-pairing-state { margin-top: 12px; color: var(--muted); font-size: 13px; }
.v13-wizard { display: grid; gap: 16px; }
.v13-wizard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.v13-step { color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.v13-wizard h3 { margin: 4px 0 0; font-size: 22px; }
.v13-wizard p { margin: 0; color: var(--muted); line-height: 1.55; }
.v13-choice-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.v13-choice { width: 100%; text-align: left; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); color: var(--text); }
.v13-choice strong, .v13-choice span { display: block; }
.v13-choice span { color: var(--muted); margin-top: 5px; font-size: 13px; line-height: 1.4; }
.v13-choice.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.v13-code { display: grid; place-items: center; min-height: 94px; padding: 18px; border: 1px dashed rgba(141,255,24,.35); border-radius: 18px; background: #07150e; }
.v13-code strong { font-size: clamp(30px,9vw,48px); letter-spacing: .2em; margin-left: .2em; }
.v13-countdown { color: var(--warning); font-weight: 800; text-align: center; }
.v13-qr { width: min(260px, 80vw); height: min(260px, 80vw); margin: auto; padding: 10px; background: #fff; border-radius: 18px; display: block; }
.v13-callout { padding: 14px; border-radius: 14px; background: rgba(87,201,255,.08); border: 1px solid rgba(87,201,255,.18); }
.v13-warning { padding: 14px; border-radius: 14px; background: rgba(255,200,87,.08); border: 1px solid rgba(255,200,87,.22); }
.v13-danger { padding: 14px; border-radius: 14px; background: rgba(255,98,98,.08); border: 1px solid rgba(255,98,98,.2); }
.v13-progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.v13-progress > span { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
.v13-device-server { border-left: 3px solid var(--accent); }
.v13-device-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 12px 0; font-size: 12px; color: var(--muted); }
.v13-device-meta strong { display:block; color:var(--text); margin-top:3px; }
.v13-six-code { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.v13-six-code input { width:100%; min-width:0; text-align:center; font-size:24px; font-weight:850; padding:12px 2px; }
@media (min-width: 720px){ .v13-choice-grid { grid-template-columns: repeat(2,1fr); } }