@layer modules{
/* Atelier 3D - éditeur CAO maison (plan 2D + viewport 3D sans dépendance).
   Voir assets/js/38-cao.js. */
.cao{display:flex;flex-direction:column;height:calc(100vh - 230px);min-height:480px}

/* Barre d'outils */
.cao-bar{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;padding:var(--sp-8) var(--sp-10);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);margin-bottom:var(--sp-10)}
.cao-tools{display:flex;gap:var(--sp-4)}
.cao-t{display:grid;place-items:center;width:32px;height:32px;border:1px solid transparent;border-radius:var(--radius);
  background:transparent;color:var(--mut);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.cao-t:hover{background:var(--bg2);color:var(--txt)}
.cao-t[aria-pressed="true"]{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.cao-sep{width:1px;align-self:stretch;background:var(--line);margin:var(--sp-2) var(--sp-2)}
.cao-spacer{flex:1}
.cao-tg{padding:var(--sp-6) var(--sp-10);border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);
  color:var(--mut);font-size:var(--fs-sm);font-weight:var(--fw-strong);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.cao-tg:hover{background:var(--bg2);color:var(--txt)}
.cao-tg[aria-pressed="true"]{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.cao-field{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--mut)}
.cao-field input{width:54px;padding:var(--sp-4) var(--sp-6);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card2);color:var(--txt);font:inherit;font-size:var(--fs-sm)}
.cao-field span{font-size:var(--fs-xs);opacity:.7}
.cao-mini{padding:var(--sp-6) var(--sp-10);border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);
  color:var(--txt);font-size:var(--fs-sm);cursor:pointer;transition:background .12s;line-height:var(--lh-flat)}
.cao-mini:hover{background:var(--bg2)}
.cao-mini:disabled{opacity:.4;cursor:default}
.cao-save{border-color:var(--accent);color:var(--accent);font-weight:var(--fw-strong)}
.cao-save:not(:disabled):hover{background:var(--accent);color:var(--on-solid)}
.cao-stat{font-size:var(--fs-xs);color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Plan 2D + viewport 3D côte à côte */
.cao-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10);flex:1;min-height:0}
.cao-2d,.cao-3d{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--card);min-height:0}
.cao-2d canvas,.cao-3d canvas{display:block;width:100%;height:100%;touch-action:none}
.cao-2d canvas:focus,.cao-3d canvas:focus{outline:none}
.cao-3d-cv{position:absolute;inset:0;pointer-events:none}
.cao-3d-ovl{pointer-events:auto;cursor:grab}
.cao-3d-ovl:active{cursor:grabbing}
.cao-3d-b.on{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.cao-hint{position:absolute;left:10px;bottom:8px;font-size:var(--fs-xs);color:var(--mut);
  background:color-mix(in srgb,var(--card) 82%,transparent);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-sm);pointer-events:none;max-width:calc(100% - 20px)}
.cao-hud{position:absolute;right:10px;top:8px;font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--txt);
  background:color-mix(in srgb,var(--card) 85%,transparent);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-sm);pointer-events:none;
  font-variant-numeric:tabular-nums}
.cao-dyn{position:absolute;left:10px;top:8px;display:flex;gap:var(--sp-8);
  background:color-mix(in srgb,var(--card) 90%,transparent);padding:var(--sp-4) var(--sp-8);border:1px solid var(--line);border-radius:var(--radius)}
.cao-dyn label{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--mut);font-family:var(--font-mono)}
.cao-dyn input{width:60px;padding:var(--sp-2) var(--sp-6);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2);color:var(--txt);font:inherit;font-size:var(--fs-sm);text-align:right}
.cao-dyn i{font-style:normal;opacity:.6;font-size:var(--fs-xs)}
.cao-adds{display:flex;gap:var(--sp-4)}
.cao-add{padding:var(--sp-6) var(--sp-8);border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);color:var(--txt);font-size:var(--fs-sm);font-weight:var(--fw-strong);cursor:pointer;transition:background .12s,border-color .12s}
.cao-add:hover{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.cao-comp{padding:var(--sp-6) var(--sp-8);border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);color:var(--txt);font-size:var(--fs-sm);font-weight:var(--fw-strong);cursor:pointer}
.cao-comp:hover{border-color:var(--accent)}
.cao-layers{position:absolute;right:10px;bottom:8px;width:232px;background:color-mix(in srgb,var(--card) 94%,transparent);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-8);box-shadow:var(--elev-2);font-size:var(--fs-sm)}
.cao-layers .cl-h{display:flex;align-items:center;justify-content:space-between;font-weight:var(--fw-bold);margin-bottom:var(--sp-6)}
.cao-layers .cl-h button{border:none;background:transparent;color:var(--accent);cursor:pointer;font-size:var(--fs-base)}
.cl-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2);border-radius:var(--radius-sm)}
.cl-row.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.cl-row>button{border:1px solid transparent;background:transparent;color:var(--mut);cursor:pointer;width:22px;height:22px;border-radius:var(--radius-sm);font-size:var(--fs-sm);flex:none}
.cl-row>button:hover{background:var(--bg2)}
.cl-row>button.on{color:var(--accent)}
.cl-row input[type=color]{width:22px;height:20px;padding:0;border:1px solid var(--line);border-radius:var(--radius-xs);background:none;cursor:pointer;flex:none}
.cl-row .cl-name{flex:1;min-width:0;padding:var(--sp-2) var(--sp-4);border:1px solid transparent;border-radius:var(--radius-xs);background:transparent;color:var(--txt);font:inherit;font-size:var(--fs-sm)}
.cl-row .cl-name:focus{border-color:var(--line);background:var(--card2)}
.cl-row .cl-n{font-size:var(--fs-2xs);color:var(--mut);font-variant-numeric:tabular-nums;min-width:14px;text-align:right}
.ci-row select{width:120px;padding:var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2);color:var(--txt);font:inherit;font-size:var(--fs-xs)}
.cao-insp .ci-row>button{flex:none;min-width:22px;height:22px;padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2);color:var(--txt);font-size:var(--fs-xs);cursor:pointer}
.cao-insp .ci-row>button:hover{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.cao-insp{position:absolute;left:10px;top:8px;width:208px;background:color-mix(in srgb,var(--card) 94%,transparent);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-8) var(--sp-10);box-shadow:var(--elev-2);font-size:var(--fs-sm)}
.cao-insp .ci-h{display:flex;align-items:center;justify-content:space-between;font-weight:var(--fw-bold);color:var(--txt);margin-bottom:var(--sp-6)}
.cao-insp .ci-h button{border:none;background:transparent;color:var(--mut);cursor:pointer;font-size:var(--fs-md);padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-sm)}
.cao-insp .ci-h button:hover{background:var(--bg2);color:var(--err,var(--err))}
.cao-insp .ci-row{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-4) 0}
.cao-insp .ci-row>span{width:34px;color:var(--mut);flex:none}
.cao-insp .ci-row input[type=number]{width:48px;padding:var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2);color:var(--txt);font:inherit;font-size:var(--fs-xs);font-family:var(--font-mono);text-align:right}
.cao-insp .ci-row input[type=color]{width:48px;height:24px;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:none;cursor:pointer}
.cao-insp .ci-row>i{font-style:normal;color:var(--mut);opacity:.6;font-size:var(--fs-2xs);margin-left:var(--sp-2)}
.cao-3d-ctrls{position:absolute;right:10px;top:8px;display:flex;gap:var(--sp-6)}
.cao-3d-b{padding:var(--sp-4) var(--sp-8);border:1px solid var(--line);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--card) 88%,transparent);
  color:var(--txt);font-size:var(--fs-xs);cursor:pointer}
.cao-3d-b:hover{background:var(--bg2)}

@media (max-width:1100px){.cao-split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}

/* ── Ruban à onglets (refonte UI · Lot 1) ── */
.cao-bar.cao-bar-ribbon{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;flex-wrap:nowrap}
.cao-tabs{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-8) 0;border-bottom:1px solid var(--line);background:var(--card2)}
.cao-tab{padding:var(--sp-6) var(--sp-12);border:1px solid transparent;border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;
  background:transparent;color:var(--mut);font-size:var(--fs-sm);font-weight:var(--fw-strong);cursor:pointer;line-height:var(--lh-flat);
  transition:background .12s,color .12s}
.cao-tab:hover{color:var(--txt);background:var(--bg2)}
.cao-tab[aria-selected="true"]{background:var(--card);color:var(--txt);border-color:var(--line)}
.cao-tabs-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-6);padding-bottom:var(--sp-6)}
.cao-ribbon{padding:var(--sp-8) var(--sp-10);background:var(--card)}
.cao-panel{display:flex;align-items:stretch;flex-wrap:wrap;gap:0}
.cao-panel[hidden]{display:none}
.cao-grp{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4);padding:0 var(--sp-12);
  border-right:1px solid var(--line)}
.cao-grp:last-child{border-right:none}
.cao-grp-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:flex-start}
.cao-grp-cap{font-size:var(--fs-2xs);color:var(--mut);text-align:center;opacity:.75;letter-spacing:.02em}
.cao-rb{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--sp-2);
  min-width:54px;padding:var(--sp-6) var(--sp-8);border:1px solid transparent;border-radius:var(--radius);background:transparent;
  color:var(--txt);font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;line-height:1.1;
  transition:background .12s,border-color .12s}
.cao-rb:hover{background:var(--bg2);border-color:var(--line)}
.cao-rb[aria-pressed="true"]{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.cao-rb-i{font-size:var(--fs-lg);line-height:var(--lh-flat);height:20px;display:flex;align-items:center}
.cao-rb-i svg{width:18px;height:18px}
.cao-rb-l{font-size:var(--fs-xs);white-space:nowrap}
.cao-t.cao-rb{width:auto;height:auto;display:flex;color:var(--txt)}
.cao-t.cao-rb[aria-pressed="true"]{background:var(--accent);color:var(--on-solid)}
.cao-bar-ribbon .cao-field{flex-direction:column;align-items:center;gap:var(--sp-2);min-width:54px}
/* sélecteur de composant compact, en ligne avec les primitives */
.cao-bar-ribbon .cao-comp,.cao-bar-ribbon .dhsel.cao-comp{flex:0 0 auto;width:162px;align-self:center}

/* ── Dock de panneaux à droite (refonte UI · Lot 2) ── */
.cao-split.cao-split-dock{grid-template-columns:1fr 1fr 268px}
.cao-3d-tg{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);
  background:color-mix(in srgb,var(--card) 86%,transparent);color:var(--mut);cursor:pointer;font-size:var(--fs-base);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .12s,color .12s,border-color .12s}
.cao-3d-tg:hover{background:var(--card);color:var(--txt)}
.cao-3d-tg[aria-pressed="true"]{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.cao-dock{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);overflow:hidden;min-height:0}
.cao-dock-tabs{display:flex;gap:var(--sp-2);padding:var(--sp-6) var(--sp-6) 0;border-bottom:1px solid var(--line);background:var(--card2)}
.cao-dock-tab{padding:var(--sp-6) var(--sp-8);border:1px solid transparent;border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:transparent;color:var(--mut);font-size:var(--fs-xs);font-weight:var(--fw-strong);cursor:pointer;line-height:var(--lh-flat);white-space:nowrap;transition:background .12s,color .12s}
.cao-dock-tab:hover{color:var(--txt);background:var(--bg2)}
.cao-dock-tab[aria-selected="true"]{background:var(--card);color:var(--txt);border-color:var(--line)}
.cao-dock-body{flex:1;overflow:auto;min-height:0}
.cao-dock-panel{padding:var(--sp-8)}
.cao-dock-panel[hidden]{display:none}
.cao-dock-empty{font-size:var(--fs-sm);color:var(--mut);padding:var(--sp-16) var(--sp-8);text-align:center;line-height:1.6}
.cao-pieces{display:flex;flex-direction:column;gap:var(--sp-2)}
.cao-pc{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-6) var(--sp-8);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);color:var(--txt)}
.cao-pc:hover{background:var(--bg2)}
.cao-pc.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.cao-pc-c{width:12px;height:12px;border-radius:var(--radius-xs);flex:none;border:1px solid var(--line)}
.cao-pc-l{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cao-pc-x{border:none;background:transparent;color:var(--mut);cursor:pointer;opacity:0;font-size:var(--fs-md);flex:none;line-height:var(--lh-flat)}
.cao-pc:hover .cao-pc-x{opacity:1}
.cao-pc-x:hover{color:var(--accent)}
.cao-tree{display:flex;flex-direction:column;gap:var(--sp-6)}
.cao-tn{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-6) var(--sp-8);background:var(--card2)}
.cao-tn-h{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt);margin-bottom:var(--sp-4)}
.cao-tn-n{display:grid;place-items:center;width:17px;height:17px;border-radius:var(--radius-sm);background:var(--accent);
  color:var(--on-solid);font-size:var(--fs-2xs);font-weight:var(--fw-strong);flex:none}
.cao-tn-p{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);font-size:var(--fs-xs);color:var(--mut);margin:var(--sp-2) 0}
.cao-tn-p input{width:72px;padding:var(--sp-2) var(--sp-6);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);
  color:var(--txt);font:inherit;font-size:var(--fs-xs);font-family:var(--font-mono);text-align:right}
.cao-tn-p input:focus{border-color:var(--accent)}
.cao-tn-p select{padding:var(--sp-2) var(--sp-6);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--txt);font:inherit;font-size:var(--fs-xs);cursor:pointer}
/* l'inspecteur et les calques relogés perdent leur positionnement flottant */
.cao-dock .cao-insp,.cao-dock .cao-layers{position:static;inset:auto;width:auto;background:transparent;
  border:none;box-shadow:none;padding:0}
.cao-dock .cao-insp[hidden]{display:none}
/* ── Palette d'outils à gauche + barre d'état (refonte UI · Lot 3) ── */
.cao-split.cao-split-rail{grid-template-columns:auto 1fr 1fr 250px}
.cao-rail{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-8) var(--sp-4);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card);align-items:center;min-height:0}
.cao-rail-b{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);width:50px;padding:var(--sp-6) var(--sp-2);
  border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--mut);font-size:var(--fs-2xs);
  font-weight:var(--fw-medium);cursor:pointer;transition:background .12s,color .12s}
.cao-rail-b:hover{background:var(--bg2);color:var(--txt)}
.cao-rail-b[aria-pressed="true"]{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.cao-rail-i{font-size:var(--fs-lg);line-height:var(--lh-flat);height:18px;display:flex;align-items:center}
.cao-rail-l{font-size:var(--fs-2xs);white-space:nowrap}
.cao-status{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-4) var(--sp-12);margin-top:var(--sp-8);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2);
  font-size:var(--fs-xs);color:var(--mut);font-variant-numeric:tabular-nums}
.cao-status-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cao-status .cao-stat{color:var(--mut)}
.cao-status-r{display:flex;align-items:center;gap:var(--sp-8);flex:none}
.cao-status-sep{opacity:.4}
.cao-status-i.on{color:var(--accent)}

@media (max-width:1100px){.cao-split.cao-split-dock,.cao-split.cao-split-rail{grid-template-columns:1fr;grid-template-rows:auto 1fr 1fr auto}}

/* Icônes SVG des panneaux (calques, pièces, inspecteur) - outils déjà gérés par .su-tool/.cao-rb-i */
.cl-h button,.cl-row button[data-act],.cao-pc-x,.ci-h button,.ci-row button{ display:inline-flex; align-items:center; justify-content:center; }
.cl-h button svg.ic,.cl-row button[data-act] svg.ic,.cao-pc-x svg.ic,.ci-h button svg.ic,.ci-row button svg.ic{ width:14px; height:14px; }
.cao-mini svg.ic,.cao-tg svg.ic{ width:15px; height:15px; }
.cao-tg .gm svg.ic,.gm svg.ic{ width:16px; height:16px; }
.cao-tn-n{ display:inline-flex; align-items:center; justify-content:center; }
.cao-tn-n svg.ic{ width:14px; height:14px; }

/* ── Dock flottant unifié de la vue 3D (bas-centre, façon Figma) ─────────── */
.cao-3d-dock{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:7;
  display:flex; align-items:center; gap:var(--sp-6); padding:var(--sp-6);
  background:color-mix(in srgb,var(--card) 88%,transparent); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--elev-2);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); }
html[data-theme="light"] .cao-3d-dock{ box-shadow:var(--elev-2); }
.cao-3d-grp{ display:flex; align-items:center; gap:var(--sp-2); }
.cao-3d-dsep{ width:1px; align-self:stretch; margin:var(--sp-2) var(--sp-2); background:var(--line); }
/* À plat dans le pill (c'est le dock qui porte le fond/blur) */
.cao-3d-dock .su-floattool,.cao-3d-dock .su-floatbtn{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:transparent; }
.cao-3d-dock .su-floattool:hover,.cao-3d-dock .su-floatbtn:hover{ background:var(--bg2); }
.cao-3d-dock .su-floattool[aria-pressed="true"],.cao-3d-dock .su-floattool.on{ background:var(--accent); color:var(--on-solid); border-color:var(--accent); }
.cao-3d-dock .su-floattool svg.ic{ width:17px; height:17px; }

}