/* Fenêtre du Mac (ui/desk/, maquette validée par Dylan le 28/09/2026, lot 1) : barre latérale | barre du haut sur toute
   la largeur | contenu qui défile seul | panneau de détail. Rien ne bouge sous la souris : la barre du haut couvre aussi
   le panneau, et le panneau prend sa place d'un coup (seul son contenu glisse). L'iPhone n'est pas concerné. */
@media (min-width: 900px) {
  body.desk { overflow: hidden; }
  .desk-app { height: 100dvh; display: grid; grid-template-columns: 236px minmax(0, 1fr) auto; grid-template-rows: 58px minmax(0, 1fr); background: var(--bg); position: relative; }

  /* Barre latérale */
  .dsb { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow: auto; padding: 16px 10px 12px; background: var(--bg-2); border-right: 1px solid var(--line); }
  .dsb-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 16px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
  .dsb-g { margin: 0; padding: 14px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-3); }
  .dsb-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: default; }
  .dsb-i svg { color: var(--text-2); flex: none; }
  .dsb-i:hover { background: var(--fill); }
  .dsb-i.on { background: var(--accent-soft); font-weight: 600; }
  .dsb-i.on svg { color: var(--accent); }
  .dsb-i > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dsb-i .n { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .dsb-i .n.red { color: var(--red); font-weight: 700; }
  .dsb-dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 4px; flex: none; }
  .dsb-sp { flex: 1; min-height: 12px; }
  .dsb-foot { display: flex; flex-direction: column; gap: 1px; padding-top: 8px; border-top: 1px solid var(--line); }
  .dsb-sync { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; color: var(--text-3); }
  .dsb-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--slate); }
  .dsb-sync i.tone-green { background: var(--green); } .dsb-sync i.tone-amber { background: var(--amber); } .dsb-sync i.tone-red { background: var(--red); } .dsb-sync i.tone-blue { background: var(--blue); }

  /* Barre du haut : titre, recherche, Ma journée, Nouvelle vente. Elle ne change jamais de forme. */
  .desk-bar { grid-column: 2 / 4; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 6; }
  .desk-title { min-width: 0; }
  .desk-title h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
  .desk-title p { margin: 0; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .desk-sp { flex: 1; }
  .desk-bar .btn { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; flex: none; }
  .desk-bar .btn.is-on { background: var(--accent-soft); color: var(--accent); }
  .kbd { display: inline-block; min-width: 20px; padding: 3px 6px; border-radius: 6px; background: var(--fill-2); color: var(--text-3); font: 600 11px/1 var(--font); text-align: center; }
  .btn-primary .kbd { background: rgba(255, 255, 255, 0.22); color: inherit; }

  /* Recherche : un vrai champ, les résultats juste dessous */
  .dsr { position: relative; display: flex; align-items: center; gap: 8px; width: 340px; height: 34px; padding: 0 8px 0 10px; border: 1px solid transparent; border-radius: 10px; background: var(--fill); color: var(--text-3); cursor: text; flex: none; }
  .dsr:hover { border-color: var(--line); }
  .dsr:focus-within { background: var(--card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .dsr:focus-within > .kbd { display: none; }
  .dsr input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 13.5px; outline: none; }
  .dsr input::placeholder { color: var(--text-3); }
  .dsr-list { position: absolute; right: -2px; top: 40px; width: 480px; max-height: min(480px, calc(100dvh - 90px)); overflow: auto; padding: 6px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-pop); color: var(--text); cursor: default; z-index: 60; }
  .dsr-g { margin: 0; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
  .dsr-i { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; font-size: 13.5px; }
  .dsr-i svg { color: var(--text-2); flex: none; }
  .dsr-i .row-icon { width: 28px; height: 28px; font-size: 14px; }
  .dsr-i.on { background: var(--accent-bg); color: var(--on-accent); }
  .dsr-i.on svg, .dsr-i.on .dsr-s { color: rgba(255, 255, 255, 0.85); }
  .dsr-i.on .kbd { background: rgba(255, 255, 255, 0.22); color: inherit; }
  .dsr-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dsr-s { color: var(--text-3); font-size: 12.5px; }
  .dsr-empty { margin: 0; padding: 20px; text-align: center; color: var(--text-3); font-size: 13px; }
  .dsr-f { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); }

  /* Contenu : il défile seul, la barre du haut reste en place */
  .desk-view { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; container-type: inline-size; }
  .desk-content { max-width: 1680px; margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-10); }
  .desk .screen-head { justify-content: flex-end; }
  .desk .screen-head > div:first-child { display: none; } /* le titre est dans la barre du haut */
  .desk .screen-head:not(:has(> :nth-child(2))) { display: none; }
  .desk .scope-select { display: none; } /* l'entreprise se choisit dans la barre latérale (M3) */

  /* Panneau de détail */
  .desk-panel { grid-column: 3; grid-row: 2; width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid transparent; }
  .desk-panel.open { width: 400px; border-left-color: var(--line); }
  .dpn-head { height: 50px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); }
  .dpn-head b { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dpn-head .btn-round { width: 32px; min-height: 32px; }
  .dpn-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; animation: dpnIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes dpnIn { from { transform: translateX(12px); opacity: 0; } }
  /* Fenêtre étroite, ou écran en tableau (Aujourd'hui, .desk-float) : le panneau se pose par-dessus le contenu au lieu
     de le resserrer, pour que rien ne change de place sous la souris. Placé dans la grille (ligne 2), le haut du panneau
     part déjà sous la barre du haut : top 0, pas 58 px (il descendait de 58 px de trop). */
  .desk-float .desk-panel.open { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: var(--shadow-pop); }
  @media (max-width: 1239px) {
    .desk-panel.open { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: var(--shadow-pop); }
  }

  /* Ta journée dans le panneau */
  .dp-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .dp-date { font-weight: 650; font-size: 14px; text-align: center; }
  .dp-date::first-letter { text-transform: uppercase; }
  .dp-cap { margin: 8px 2px 10px; }
  .dp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dp-cell { display: grid; justify-items: center; gap: 6px; padding: 10px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
  .dp-cell.pos { background: var(--green-soft); border-color: transparent; }
  .dp-cell.pos .eyebrow, .dp-cell.pos .num { color: var(--green); }
  .dp-sec { margin: 16px 2px 8px; }
  .dp-kv { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .dp-note { width: 100%; min-height: 76px; }
  .dp-foot { margin-top: 12px; }

  /* Menu du clic droit (DeskMenu.js) : au pointeur, verre, raccourcis à droite */
  .dmenu-layer { z-index: 96; }
  .dmenu-bg { position: absolute; inset: 0; }
  .dmenu { position: absolute; min-width: 230px; padding: 5px; border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
    box-shadow: var(--shadow-pop); transform-origin: top left; animation: dmenuIn 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
  @keyframes dmenuIn { from { transform: scale(0.94); opacity: 0; } }
  .dmi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: default; }
  .dmi svg { flex: none; color: var(--text-2); }
  .dmi .kbd { margin-left: auto; }
  .dmi:hover, .dmi:focus-visible { background: var(--accent-bg); color: #fff; outline: none; }
  .dmi:hover svg, .dmi:focus-visible svg { color: #fff; }
  .dmi:hover .kbd { background: rgba(255, 255, 255, 0.2); color: #fff; }
  .dmi.danger { color: var(--red); } .dmi.danger svg { color: var(--red); }
  .dmi.danger:hover { background: var(--red); color: #fff; } .dmi.danger:hover svg { color: #fff; }
  .dmenu-sep { height: 1px; margin: 4px 6px; background: var(--line); }

  /* Raccourcis */
  .keys-list { list-style: none; margin: 0; padding: 0; }
  .keys-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
}
@media (min-width: 900px) {
  .desk .sale-row.sel, .desk .sale-row.sel:hover { background: var(--accent-soft); }
}