:root {
    --orange:#E0742C; --orange-texte:#A84A18; --encre:#1A1916; --encre-2:#5b574f; --papier:#FBF9F4; --filet:#D4CDB8; --tuile:#26262E;
    --verre:rgba(251,249,244,.80); --verre-bord:rgba(255,255,255,.78); --ombre:0 24px 60px rgba(0,0,0,.24);
    --r:10px; --rc:16px;
  }
  * { box-sizing:border-box; }
  html, body { margin:0; height:100%; background:#b9cbd9; overflow:hidden; font-family:Inter, "Segoe UI", system-ui, sans-serif; color:var(--encre); -webkit-font-smoothing:antialiased; }
  canvas#vue { display:block; touch-action:none; }
  .verre { background:var(--verre); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border:1px solid var(--verre-bord); box-shadow:var(--ombre); }
  @media (prefers-reduced-transparency: reduce) { .verre { backdrop-filter:none; background:#FBF9F4; } }
  button { font:inherit; color:inherit; }
  button:focus-visible, input:focus-visible, select:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(224,116,44,.35); }

  /* carte titre */
  #titre { position:fixed; left:16px; top:16px; border-radius:var(--rc); padding:12px 16px; max-width:min(360px, calc(100vw - 32px)); }
  #titre h1 { font-size:15px; font-weight:600; margin:0 0 2px; letter-spacing:-.01em; }
  #titre p { margin:0; font-size:12.5px; color:var(--encre-2); }
  #titre .badge { display:inline-block; margin-top:8px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--tuile); color:#fff; }
  #titre .badge.client { background:#7A4B2A; }

  /* barre d'outils = la palette */
  #barre { position:fixed; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:stretch; gap:4px;
    border-radius:18px; padding:6px 8px; max-width:calc(100vw - 20px); overflow-x:auto; scrollbar-width:none; }
  #barre::-webkit-scrollbar { display:none; }
  .groupe { display:flex; flex-direction:column; align-items:stretch; padding:0 4px; }
  .groupe + .groupe { border-left:1px solid rgba(26,25,22,.10); }
  .groupe .nomg { font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#8a8478; text-align:center; margin:2px 0 3px; white-space:nowrap; }
  .groupe .btns { display:flex; gap:2px; }
  .outil { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:52px; height:54px; padding:4px 4px; border:0; background:transparent;
    border-radius:12px; cursor:pointer; color:var(--encre); transition:background .15s, color .15s; }
  .outil svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
  .outil span { font-size:10px; font-weight:500; white-space:nowrap; }
  .outil:hover { background:rgba(26,25,22,.06); }
  .outil.actif { background:var(--orange); color:#fff; }
  /* 01/10/2026 : « Qualité » et « Photo réaliste » en plus : jusqu'à 1 600 px, boutons et libellés un peu plus serrés
     (la palette débordait de 58 px à 1 440 px) */
  @media (max-width: 1600px) { .outil { min-width:46px; padding:4px 2px; } .outil span { font-size:9.5px; letter-spacing:-.01em; } .groupe { padding:0 2px; } }
  @media (max-width: 1320px) { .outil { min-width:44px; height:44px; padding:3px; } .outil span { display:none; } .groupe .nomg { font-size:9px; margin:1px 0 1px; } }
  @media (max-width: 760px) { .outil { min-width:46px; height:46px; } .outil span, .groupe .nomg { display:none; } #barre { border-radius:16px; } }

  /* panneaux */
  .panneau { position:fixed; border-radius:var(--rc); display:none; flex-direction:column; max-height:calc(100vh - 150px); overflow:hidden; z-index:5; }
  .panneau.ouvert { display:flex; }
  .panneau header { display:flex; align-items:center; gap:8px; padding:12px 12px 8px 16px; }
  .panneau header h2 { font-size:14px; font-weight:600; margin:0; flex:1; }
  .panneau .corps { overflow:auto; padding:4px 16px 16px; font-size:13px; }
  .fermer { border:0; background:transparent; width:30px; height:30px; border-radius:8px; cursor:pointer; display:grid; place-items:center; }
  .fermer:hover { background:rgba(26,25,22,.07); }
  .fermer svg { width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; }
  #pArbre { left:16px; top:118px; width:320px; max-height:calc(100vh - 230px); }
  #pInfo { right:16px; top:16px; width:340px; }
  .flottant { left:50%; bottom:98px; transform:translateX(-50%); width:min(420px, calc(100vw - 24px)); }
  @media (max-width: 760px) {
    #pArbre, #pInfo, .flottant { left:8px; right:8px; width:auto; transform:none; top:auto; bottom:74px; max-height:52vh; }
    #titre { padding:8px 12px; } #titre p { display:none; }
  }

  .ligne { display:flex; align-items:center; gap:10px; margin:10px 0; }
  .ligne label { flex:0 0 96px; color:var(--encre-2); font-size:12.5px; }
  .ligne input[type=range] { flex:1; accent-color:var(--orange); }
  .ligne output { width:64px; text-align:right; font-variant-numeric:tabular-nums; font-size:12.5px; }
  .choix { display:flex; flex-wrap:wrap; gap:6px; }
  .choix button, .bouton { border:1px solid var(--filet); background:#fff; border-radius:999px; padding:7px 12px; font-size:12.5px; cursor:pointer; }
  .choix button.actif { background:var(--orange); border-color:var(--orange); color:#fff; }
  .bouton.plein { background:var(--tuile); color:#fff; border-color:var(--tuile); }
  .sous { font-size:11.5px; color:#8a8478; margin:6px 0 0; }
  .note { font-size:11.5px; color:#8a8478; margin-top:12px; font-style:italic; }

  /* arborescence */
  #recherche { width:100%; border:1px solid var(--filet); border-radius:var(--r); padding:8px 10px; font:inherit; font-size:13px; background:#fff; margin-bottom:8px; }
  .noeud { display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:8px; cursor:pointer; }
  .noeud:hover { background:rgba(26,25,22,.05); }
  .noeud.sel { background:rgba(224,116,44,.14); }
  .noeud .pli { width:16px; text-align:center; color:#8a8478; font-size:11px; }
  .noeud .nom { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .noeud .cpt { font-size:11px; color:#8a8478; }
  .noeud .oeil { border:0; background:transparent; width:26px; height:26px; border-radius:6px; cursor:pointer; opacity:.7; display:grid; place-items:center; }
  .noeud .oeil svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .noeud .oeil.off { opacity:.3; }
  .enf { margin-left:14px; }

  /* informations */
  .puces { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
  .puce { font-size:11px; padding:3px 8px; border-radius:999px; background:#EFEAE0; color:#4a463e; }
  table.props { width:100%; border-collapse:collapse; }
  table.props td { padding:6px 0; border-bottom:1px solid rgba(26,25,22,.07); vertical-align:top; font-size:12.5px; }
  table.props td:first-child { color:var(--encre-2); width:42%; padding-right:10px; }
  .actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }

  /* finitions */
  .famille { margin:12px 0 4px; font-size:12px; font-weight:600; color:#4a463e; }
  .pastilles { display:flex; flex-wrap:wrap; gap:8px; }
  .pastille { width:34px; height:34px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); cursor:pointer; position:relative; }
  .pastille.actif { box-shadow:0 0 0 2px var(--orange); }
  .pastille[title]::after { content:none; }

  /* divers */
  #bulle { position:fixed; pointer-events:none; padding:5px 9px; border-radius:8px; background:rgba(26,25,22,.86); color:#fff; font-size:12px; display:none; z-index:9; white-space:nowrap; }
  #toast { position:fixed; left:50%; top:18px; transform:translateX(-50%); padding:9px 14px; border-radius:12px; font-size:13px; display:none; z-index:10; }
  .etiquette { position:fixed; transform:translate(-50%, -140%); padding:3px 8px; border-radius:7px; background:var(--tuile); color:#fff; font-size:12px; font-weight:500; pointer-events:none; white-space:nowrap; z-index:4; }
  #charge { position:fixed; inset:0; display:grid; place-items:center; background:#dfe7ec; z-index:20; font-size:14px; transition:opacity .6s; }
  #charge .boite { width:260px; text-align:center; }
  #charge .rail { height:4px; border-radius:4px; background:rgba(0,0,0,.08); margin-top:12px; overflow:hidden; }
  #charge .rail i { display:block; height:100%; width:0; background:var(--orange); transition:width .2s; }
  #joystick { position:fixed; left:24px; bottom:96px; width:120px; height:120px; border-radius:50%; display:none; z-index:6; touch-action:none; }
  #joystick i { position:absolute; left:40px; top:40px; width:40px; height:40px; border-radius:50%; background:var(--orange); opacity:.85; }
  #aide { position:fixed; inset:0; background:rgba(20,18,15,.45); display:none; place-items:center; z-index:30; }
  #aide .carte { width:min(560px, calc(100vw - 24px)); border-radius:var(--rc); padding:18px 20px; background:var(--papier); }
  #aide h2 { margin:0 0 10px; font-size:16px; }
  #aide dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; margin:0; }
  #aide dt { font-weight:600; }
  #aide dd { margin:0; color:var(--encre-2); }
  #legende { position:fixed; right:16px; bottom:98px; border-radius:14px; padding:10px 12px; font-size:12px; display:none; z-index:5; }
  #legende div { display:flex; align-items:center; gap:8px; margin:3px 0; }
  #legende i { width:12px; height:12px; border-radius:3px; display:inline-block; }