/* Refonte D2, écran Carte (lot 2, 25/10/2026) : le panneau flottant (Couches · Filtres · Sélection · Fond), les commandes,
 * la frise des ventes, les étiquettes de la carte et la recherche en palette, copiés de la maquette D2-bureau validée par Henri
 * (« je veux exactement la maquette validée en tous points »). Mesures : celles de la maquette (scratchpad refonte/maquettes).
 * Jetons : src/jetons.css (classe .jt). Bureau seulement (900 px et plus) : le téléphone garde l'écran actuel.
 * Aucun halo ni contour blanc autour d'un texte (FINESSE.md) ; étiquettes de carte à taille fixe (marqueurs HTML en px).
 */
@media (min-width: 900px) {
  /* ── ce que la refonte remplace : caché, le code reste ── */
  html.d2-on body.page-app > .commandes, html.d2-on body.page-app > .panneau-ouvrir, html.d2-on body.page-app > .legende-carte,
  html.d2-on body.page-app > #carte .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none !important; }
  html.d2-on.d2-sans-feuille body.page-app > .feuille { visibility: hidden !important; pointer-events: none !important; }
  /* la recherche reste focalisable (⌘K, entrée Recherche de la barre) : hors de l'écran tant que la palette est fermée */
  html.d2-on body.page-app > .haut { position: absolute !important; left: -10000px !important; top: 0 !important; opacity: 0; }
  html.d2-on body.page-app > .haut.d2-palette { display: block !important; z-index: 41; left: 50% !important; top: 120px !important; right: auto !important; width: 560px !important; max-width: none !important; margin: 0; padding: 0 !important; transform: translateX(-50%); opacity: 1; }
  html.d2-on body.page-app > .haut.d2-palette .puces { display: none !important; }
  html.d2-on body.page-app > .haut.d2-palette .recherche { width: 100%; height: 48px; border-radius: var(--r-panneau); background: var(--verre-plein); box-shadow: 0 20px 50px rgba(0, 0, 0, .25), var(--verre-filet); border: 0; }
  html.d2-on body.page-app > .haut.d2-palette input { font-size: var(--t-15); }
  .d2-voile { position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, .3); display: none; }
  html.d2-on .d2-voile.ouvert { display: block; }
  html.d2-on body.page-app .maplibregl-ctrl-attrib { background: var(--etiquette-fond) !important; color: var(--attenue) !important; font-size: var(--t-10) !important; }
  html.d2-on body.page-app .maplibregl-ctrl-attrib a { color: var(--attenue) !important; }
  html.d2-on body.page-app > #carte .maplibregl-ctrl-bottom-right { right: calc(var(--fiche) + 2 * var(--marge)); transition: right .2s ease; }
  html.d2-on.d2-sans-fiche body.page-app > #carte .maplibregl-ctrl-bottom-right { right: var(--marge); }
}
.d2 { font: 400 var(--t-13)/var(--interligne) var(--police); color: var(--encre); -webkit-font-smoothing: antialiased; letter-spacing: 0; text-align: left; }
.d2 :where(*), .d2 :where(*)::before, .d2 :where(*)::after { box-sizing: border-box; }
.d2 :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; margin: 0; min-width: 0; min-height: 0; box-shadow: none; text-transform: none; letter-spacing: 0; }
.d2 :where(input) { font: inherit; color: inherit; }
.d2 .tab { font-variant-numeric: tabular-nums; }
.d2 svg.i { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.d2 .ech { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-fin); flex: none; }
.d2-verre { background: var(--verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); border-radius: var(--r-panneau); box-shadow: var(--verre-ombre), var(--verre-filet); }
.d2-cache { display: none !important; }
@media (max-width: 899px) { .d2-bureau { display: none !important; } }

/* ── panneau Kepler ── */
.d2-kp { position: absolute; left: var(--marge); top: var(--marge); width: var(--kepler); max-height: calc(100% - 2 * var(--marge)); z-index: 5; display: flex; flex-direction: column; overflow: hidden; }
.d2-kp-tete { display: flex; align-items: center; gap: 8px; padding: 14px 12px 2px 16px; }
.d2-kp-tete h2 { margin: 0; flex: 1; min-width: 0; font-size: var(--t-13); font-weight: 600; line-height: var(--interligne); color: var(--encre); letter-spacing: 0; }
.d2-kp-tete small { display: block; font-size: var(--t-12); font-weight: 400; color: var(--attenue); margin-top: 1px; }
.d2-btn-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-bouton); color: var(--attenue); flex: none; }
.d2-btn-ic:hover { background: var(--survol); color: var(--encre); }
.d2-kp-onglets { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 12px 0; border-bottom: 1px solid var(--filet); }
.d2-kp-onglet { height: 46px; display: grid; place-items: center; align-content: center; gap: 3px; color: var(--attenue); font-size: var(--t-12); position: relative; }
.d2-kp-onglet:hover { color: var(--encre); }
.d2-kp-onglet[aria-selected="true"] { color: var(--encre); }
.d2-kp-onglet[aria-selected="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 1.5px; border-radius: 1px; background: var(--encre); }
.d2-kp.reduit .d2-kp-tete, .d2-kp.reduit .d2-kp-corps { display: none; }
.d2-kp.reduit .d2-kp-onglets { border-bottom: 0; padding: 2px 12px; }
.d2-kp.reduit .d2-kp-onglet[aria-selected="true"] { color: var(--attenue); }
.d2-kp.reduit .d2-kp-onglet[aria-selected="true"]::after { display: none; }
.d2-kp-corps { flex: 0 1 auto; overflow-y: auto; padding: 10px 10px 14px; scrollbar-width: thin; }
.d2-kp-vue { display: none; } .d2-kp-vue.vu { display: block; }
.d2-kp-lib { font-size: var(--t-11); font-weight: 500; color: var(--attenue); margin: 12px 6px 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.d2-kp-lib:first-child { margin-top: 2px; }
.d2-couche { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 5px 6px 5px 8px; border-radius: var(--r-moyen); cursor: pointer; }
.d2-couche:hover { background: var(--survol); }
.d2-couche .pas { width: 10px; height: 10px; border-radius: var(--r-fin); flex: none; }
.d2-couche .nom { flex: 1; min-width: 0; }
.d2-couche .nom b { display: block; font-weight: 400; font-size: var(--t-13); color: var(--encre); }
.d2-couche .nom span { display: block; font-size: var(--t-12); color: var(--attenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d2-couche.eteinte .nom b { color: var(--attenue); } .d2-couche.eteinte .pas { opacity: .35; }
.d2-oeil { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-bouton); color: var(--attenue); }
.d2-legende { display: flex; flex-wrap: wrap; gap: 3px 10px; padding: 0 6px 8px 29px; font-size: var(--t-11); color: var(--attenue); }
.d2-legende span { display: inline-flex; align-items: center; gap: 5px; }
.d2-legende .trait { display: inline-block; width: 14px; border-radius: 1px; }
.d2-leg-pprn { list-style: none; margin: 0 6px 4px 29px; padding: 0; font-size: var(--t-11); color: var(--attenue); line-height: 1.3; }
.d2-leg-pprn li { display: grid; grid-template-columns: 10px 12px 1fr; gap: 6px; align-items: start; padding: 2px 0; }
.d2-leg-pprn i { width: 10px; height: 10px; margin-top: 1px; border-radius: var(--r-fin); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.d2-leg-pprn b { font-weight: 500; color: var(--texte); font-variant-numeric: tabular-nums; }
.d2-op-pprn { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 6px 6px 6px 29px; font-size: var(--t-11); color: var(--attenue); }
.d2-op-pprn input { width: 100%; accent-color: var(--encre); margin: 0; }
.d2-op-pprn em { font-style: normal; color: var(--texte); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.d2-depot { margin: 12px 4px 0; border: 1px dashed var(--filet-fort); border-radius: var(--r-moyen); padding: 10px 12px; display: flex; gap: 10px; align-items: center; color: var(--texte); cursor: pointer; font-size: var(--t-13); width: calc(100% - 8px); text-align: left; }
.d2-depot span { display: block; font-size: var(--t-12); color: var(--attenue); }
.d2-histo svg { display: block; width: 100%; height: 64px; }
.d2-curseur { position: relative; height: 20px; }
.d2-curseur .rail { position: absolute; left: 0; right: 0; top: 9.5px; height: 1px; background: var(--filet-fort); }
.d2-curseur .plage { position: absolute; top: 9.5px; height: 1px; background: var(--attenue); }
.d2-curseur .poignee { position: absolute; top: 4.5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--encre); cursor: ew-resize; touch-action: none; }
.d2-champs2 { display: flex; gap: 8px; align-items: center; margin: 8px 6px 0; color: var(--attenue); font-size: var(--t-12); }
.d2-champ { flex: 1; height: 28px; border-radius: var(--r-bouton); background: var(--champ); display: flex; align-items: center; padding: 0 10px; color: var(--encre); justify-content: space-between; font-size: var(--t-13); }
.d2-champ small { color: var(--attenue); font-size: var(--t-11); }
.d2-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 6px; }
.d2-puce { min-height: 26px; padding: 0 10px !important; border-radius: var(--r-bouton); background: var(--champ) !important; color: var(--attenue) !important; font-size: var(--t-12) !important; }
.d2-puce[aria-pressed="true"] { background: var(--actif) !important; color: var(--encre) !important; }
.d2-ligne-reglage { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 6px; font-size: var(--t-13); color: var(--encre); }
.d2-inter { width: 30px; height: 18px; border-radius: var(--r-moyen); background: var(--filet-fort) !important; position: relative; flex: none; }
.d2-inter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.d2-inter[aria-checked="true"] { background: var(--encre) !important; }
.d2-inter[aria-checked="true"]::after { transform: translateX(12px); background: var(--fond-app); box-shadow: none; }
.d2-fond-opt { display: flex; align-items: center; gap: 10px; padding: 6px !important; border-radius: var(--r-moyen); text-align: left; width: 100%; font-size: var(--t-13); color: var(--encre); }
.d2-fond-opt:hover { background: var(--survol) !important; }
.d2-fond-opt[aria-pressed="true"] { background: var(--actif) !important; }
.d2-fond-opt .vig { width: 48px; height: 34px; border-radius: var(--r-pastille); flex: none; }
.d2-fond-opt span span { display: block; font-size: var(--t-12); color: var(--attenue); }
.d2-note { margin: 8px 6px; font-size: var(--t-12); color: var(--attenue); line-height: 1.45; }

/* ── commandes de carte ── */
.d2-cmd { position: absolute; top: var(--marge); right: calc(var(--fiche) + 2 * var(--marge)); z-index: 5; display: grid; gap: 1px; padding: 3px; border-radius: var(--r-moyen); transition: right .2s ease; }
.d2-cmd button { width: 28px; height: 28px; border-radius: var(--r-bouton); color: var(--texte); display: grid; place-items: center; }
.d2-cmd button:hover, .d2-cmd button[aria-pressed="true"] { background: var(--actif); }
.d2-cmd svg.i { width: 14px; height: 14px; }
.d2-cmd hr { width: 14px; border: 0; border-top: 1px solid var(--filet); margin: 2px auto; }

/* ── frise des ventes ── */
.d2-frise { position: absolute; left: var(--marge); right: calc(var(--fiche) + 2 * var(--marge)); bottom: var(--marge); z-index: 5; padding: 10px 16px; transition: left .2s ease, right .2s ease; }
.d2-frise-tete { display: flex; align-items: center; gap: 12px; font-size: var(--t-12); white-space: nowrap; color: var(--encre); }
.d2-frise-tete b { font-size: var(--t-13); font-weight: 500; }
.d2-frise-tete .leg { display: inline-flex; align-items: center; gap: 5px; color: var(--attenue); }
.d2-frise-tete .leg em { font-style: normal; color: var(--encre); font-variant-numeric: tabular-nums; }
.d2-frise-tete .esp { flex: 1; }
.d2-frise svg { display: block; width: 100%; height: 48px; margin-top: 6px; }
.d2-frise .ans { display: flex; justify-content: space-between; font-size: var(--t-11); color: var(--attenue); margin-top: 2px; }
.d2-frise .vide { color: var(--attenue); font-size: var(--t-12); padding: 14px 0 6px; }

/* ── étiquettes de la carte : texte plein sur fond plein du thème, sans bordure ni halo, taille fixe ── */
.d2-etq { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: var(--r-pastille); background: var(--etiquette-fond); color: var(--etiquette-texte); font-size: var(--t-12); font-weight: 500; line-height: 20px; white-space: nowrap; pointer-events: none; letter-spacing: 0; }
.d2-etq span { font-weight: 400; color: var(--etiquette-texte); opacity: .8; }
.d2-etq .ech { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-fin); flex: none; }
.d2-num { padding: 1px 5px; border-radius: var(--r-pastille); background: var(--d2-num-fond, rgba(14, 14, 14, .62)); color: var(--d2-cad-pci, #D9D9D9); font-size: var(--t-11); font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; pointer-events: none; letter-spacing: 0; }
.d2-num.ame { color: var(--d2-cad-ame, #E8BC80); }
.d2-num.sel { font-size: var(--t-12); font-weight: 600; padding: 2px 7px; }
body.page-app { --d2-cad-pci: #D9D9D9; --d2-cad-ame: #E8BC80; --d2-num-fond: rgba(14, 14, 14, .62); }
body.page-app.d2-fond-clair { --d2-cad-pci: #3a3a3c; --d2-cad-ame: #A3471F; --d2-num-fond: rgba(255, 255, 255, .8); }
.d2-infobulle { position: absolute; z-index: 8; pointer-events: none; padding: 9px 11px; min-width: 170px; font-size: var(--t-12); display: none; }
.d2-infobulle b { display: block; font-size: var(--t-13); font-weight: 500; margin-bottom: 3px; }
.d2-infobulle .kv { display: flex; justify-content: space-between; gap: 14px; color: var(--attenue); line-height: 1.6; }
.d2-infobulle .kv i { font-style: normal; color: var(--encre); font-variant-numeric: tabular-nums; }

/* ── menus (⋯ de la fiche) et carte d'une source ── */
.d2-menu { position: fixed; z-index: 2150; min-width: 240px; padding: 6px; border-radius: var(--r-carte); background: var(--verre-plein); box-shadow: var(--menu-ombre), var(--verre-filet); display: none; font-size: var(--t-13); }
.d2-menu.ouvert { display: block; }
.d2-menu .mi { min-height: 30px; display: flex; align-items: center; gap: 9px; padding: 0 8px !important; border-radius: var(--r-bouton); color: var(--texte) !important; cursor: pointer; width: 100%; text-align: left; text-decoration: none; }
.d2-menu .mi:hover { background: var(--actif) !important; }
.d2-menu .mi svg { color: var(--attenue); }
.d2-menu hr { border: 0; border-top: 1px solid var(--filet); margin: 5px 4px; }
.d2-carte-src { position: fixed; z-index: 2150; width: 290px; padding: 10px 12px; font-size: var(--t-12); display: none; border-radius: var(--r-moyen); background: var(--verre-plein); box-shadow: 0 8px 24px rgba(0, 0, 0, .16), var(--verre-filet); }
.d2-carte-src b { display: block; font-size: var(--t-13); font-weight: 500; margin-bottom: 3px; color: var(--encre); }
.d2-carte-src span { color: var(--attenue); }

/* ── écran « Ajouter des données » ── */
.d2-dialogue { position: absolute; z-index: 41; left: 50%; top: 120px; width: 440px; transform: translateX(-50%); padding: 18px 20px 16px; border-radius: var(--r-panneau); background: var(--verre-plein); box-shadow: 0 20px 50px rgba(0, 0, 0, .25), var(--verre-filet); display: none; }
.d2-dialogue.ouvert { display: block; }
.d2-dialogue h2 { margin: 0 0 6px; font-size: var(--t-15); font-weight: 600; color: var(--encre); }
.d2-dialogue p { margin: 0 0 10px; font-size: var(--t-13); line-height: var(--interligne-texte); color: var(--texte); }
.d2-dialogue .pied { display: flex; justify-content: flex-end; gap: 4px; margin-top: 12px; }
.d2-bt { min-height: var(--h-bouton); border-radius: var(--r-bouton); padding: 0 10px !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--t-13); color: var(--texte) !important; white-space: nowrap; text-decoration: none !important; }
.d2-bt:hover { background: var(--survol) !important; color: var(--encre) !important; }
.d2-bt.prim { background: var(--plein) !important; color: var(--plein-texte) !important; font-weight: 500; padding: 0 14px !important; }
.d2-bt.prim:hover { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .d2-kp, .d2-frise, .d2-cmd, .d2-inter::after { transition: none !important; } }

/* ── la visite guidée (src/d2-visite.js) : un trou sur la commande, une bulle de verre à côté ── */
.d2-visite { position: fixed; inset: 0; z-index: 200; }
.d2-visite-trou { position: fixed; border-radius: var(--r-panneau); box-shadow: 0 0 0 1.5px var(--encre), 0 0 0 9999px rgba(0, 0, 0, .55); pointer-events: none; transition: left .3s cubic-bezier(.2, .8, .2, 1), top .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1); }
.d2-visite-bulle { position: fixed; padding: 16px 16px 12px; border-radius: var(--r-panneau); background: var(--verre-plein); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: var(--menu-ombre), var(--verre-filet); color: var(--encre); transition: left .3s cubic-bezier(.2, .8, .2, 1), top .3s cubic-bezier(.2, .8, .2, 1); }
.d2-visite-bulle.centree { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px 20px 14px; }
.d2-visite-bulle .compte { margin: 0 0 4px; color: var(--discret); font-size: var(--t-11); }
.d2-visite-bulle h2 { margin: 0; font-size: var(--t-15); font-weight: 600; letter-spacing: -.01em; }
.d2-visite-bulle.centree h2 { font-size: var(--t-17); }
.d2-visite-bulle .texte { margin: 6px 0 0; color: var(--texte); font-size: var(--t-13); line-height: var(--interligne-texte); }
.d2-visite-bulle kbd { font: inherit; font-size: var(--t-11); padding: 1px 5px; border-radius: var(--r-pastille); background: var(--actif); color: var(--attenue); }
.d2-visite-bulle .actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 14px; }
.d2-visite-bulle .actions .lien { margin-right: auto; color: var(--discret) !important; padding: 0 4px !important; }
html.d2-tel .d2-visite-bulle .d2-bt { min-height: 44px; font-size: var(--t-15); }
@media (prefers-reduced-motion: reduce) { .d2-visite-trou, .d2-visite-bulle { transition: none; } }

/* ── la frise : gestes (src/d2-frise.js) ── */
.d2-fr-zone { position: relative; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.d2-fr-guide { display: none; position: absolute; top: 6px; bottom: 0; width: 1px; margin-left: -.5px; background: var(--filet-fort); pointer-events: none; }
.d2-frise [data-cur-temps] { cursor: grab; touch-action: pan-y; }
.d2-frise [data-cur-temps]:active { cursor: grabbing; }
.d2-frise .plage { height: 3px !important; top: 8.5px !important; border-radius: var(--r-fin); }
.d2-frise .ans { display: grid !important; grid-template-columns: repeat(5, 1fr); }
.d2-frise .ans button { justify-self: center; padding: 2px 8px; border-radius: var(--r-pastille); color: var(--discret); font-size: var(--t-11); font-variant-numeric: tabular-nums; }
.d2-frise .ans button.touche { color: var(--texte); }
.d2-frise .ans button.dedans { color: var(--encre); font-weight: 500; }
.d2-frise .ans button:hover { background: var(--survol); color: var(--encre); }
.d2-fr-tout { margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pastille); background: var(--actif); color: var(--texte); font-size: var(--t-11); }
.d2-fr-tout:hover { color: var(--encre); }
/* Ordre et transparence des couches (src/d2-kp.js, Henri 25/10/2026) */
.d2-c-bloc.tire { position: relative; z-index: 2; background: var(--fond-verre, var(--fond)); border-radius: var(--r-moyen); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.d2-poignee { width: 14px; height: 26px; margin: 0 -6px 0 -4px; display: grid; place-items: center; flex: none; color: var(--attenue); cursor: grab; touch-action: none; border-radius: var(--r-pastille); opacity: .55; }
.d2-poignee.vide { cursor: default; }
.d2-couche:hover .d2-poignee:not(.vide), .d2-poignee:focus-visible { opacity: 1; }
.d2-c-bloc.tire .d2-poignee { cursor: grabbing; }
.d2-op-c { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 0 6px 4px 37px; font-size: var(--t-11); color: var(--attenue); }
.d2-op-c input { width: 100%; accent-color: var(--encre); margin: 0; }
.d2-op-c em { font-style: normal; color: var(--texte); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }