@layer modules{
/* 20-cao.css · L'atelier 3D (38-cao.js) dans la DA commune du Studio (CDC_DA_COMMUNE, 2026-10-24). Le proprio : « idem pour
   l'app 3D », « tous : une DA partagée, comme ça je peux tout améliorer en même temps ».
   Les onglets du ruban (.onglets-app), la rangée d'outils de l'onglet (.outils, boutons .outil en icônes), le panneau de
   droite (.panneau-app, ses onglets, la liste des pièces .liste-app), la barre flottante de la vue 3D (.flottant-app) et le
   pied (.pied-app) sont ceux du Tableur et du Document (22c). Ne reste ici que ce qui est propre à la 3D : la grille plan,
   vue, panneau ; les surimpressions du plan (saisie au clavier, cotes, aide) ; l'inspecteur, l'arbre et les calques ; le ciel
   de la vue (jetons --cao-ciel-*, lus par le JS). Jusqu'au 2026-10-24 : gros boutons à légende, légendes de groupe en
   capitales, accent violet, un cadre arrondi, une rangée de droite collée au bord, l'aide de la vue 3D coupée par la barre
   flottante, une seule colonne sous 1 100 px (la vue et le panneau sortaient de l'écran) ; et 37-studio-ui.css redessinait
   le tout en couche overrides. */

#cao{ --cao-ciel-haut:color-mix(in srgb, var(--outils-accent) 14%, var(--card)); --cao-ciel-milieu:color-mix(in srgb, var(--outils-accent) 4%, var(--card));
  --cao-ciel-bas:color-mix(in srgb, var(--txt) 5%, var(--card)); }
.cao{ display:flex; flex-direction:column; height:100%; min-height:520px; overflow:hidden; background:var(--card); color:var(--txt); }
.cao-sonde{ display:none; }

/* ── Le ruban : onglets et gestes du document, puis la rangée d'outils de l'onglet ── */
.cao-bar{ flex:none; display:flex; flex-direction:column; }
.cao-tabs{ display:flex; align-items:center; gap:var(--sp-6); padding:0 var(--sp-10) 0 var(--sp-12); border-bottom:1px solid var(--line2); background:var(--card); }
.cao-tabs .onglets-app{ border-bottom:0; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
.cao-tabs-right{ display:flex; align-items:center; gap:var(--sp-2); flex:none; padding:var(--sp-2) 0; }
.cao-tabs-right .cao-stat{ display:none; }   /* le compte du modèle est au pied */
.cao-ribbon{ background:var(--card); }
.cao-panel[hidden]{ display:none; }
.cao-grp{ gap:var(--sp-2); }
.cao-field{ display:inline-flex; align-items:center; gap:0; flex:none; margin:0; }
.cao-bar .dhsel.cao-comp, .cao-bar .dhsel:has(#cao-comp){ flex:none; width:176px; }
.cao-bar select#cao-comp:not(.dhsel-native){ flex:none; width:176px; }   /* la même place avant DHSelect : rien ne glisse à son arrivée (2026-11-04) */
.cao-bar .outil[aria-pressed="true"]{ background:var(--outils-accent-doux); color:var(--txt); }
.cao-bar .outil:disabled{ opacity:.45; }
#cao-save:not(:disabled){ color:var(--outils-accent); }

/* ── Plan, vue, panneau : trois colonnes pleine hauteur, séparées par un filet ── */
.cao-split{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--panneau-l-droit); }
.cao-2d, .cao-3d{ position:relative; overflow:hidden; min-height:0; min-width:0; background:var(--card); }
.cao-2d{ border-right:1px solid var(--line2); }
.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; }
@media (max-width:860px){ .cao-split{ grid-template-columns:minmax(0,1fr); grid-auto-rows:minmax(280px,1fr); overflow-y:auto; } .cao-2d{ border-right:0; border-bottom:1px solid var(--line2); } }

/* Les surimpressions du plan : la saisie au clavier (L, angle) et les cotes en barres flottantes ; l'aide en note. */
.cao-dyn{ position:absolute; left:var(--sp-10); top:var(--sp-10); z-index:3; }
.cao-dyn label{ display:inline-flex; align-items:center; margin:0; }
.cao-hud{ position:absolute; right:var(--sp-10); top:var(--sp-10); z-index:3; padding:var(--sp-2) var(--sp-8); font-size:var(--fs-xs); color:var(--mut); font-variant-numeric:tabular-nums;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); pointer-events:none; }
.cao-hint{ position:absolute; left:var(--sp-10); bottom:var(--sp-10); z-index:2; max-width:calc(100% - var(--sp-20)); box-sizing:border-box; padding:var(--sp-2) var(--sp-8);
  font-size:var(--fs-xs); color:var(--mut); background:var(--card); border:1px solid var(--line2); border-radius:var(--radius-sm); pointer-events:none; }
/* Vide, l'aide ne se dessine pas : un cadre de 6 px qui grandissait à l'arrivée du texte (layout-shift du banc, 2026-11-04). */
.cao-hint:empty{ display:none; }
/* Dans la vue 3D, l'aide passe en haut : en bas, la barre flottante la coupait. */
.cao-3d .cao-hint{ top:var(--sp-10); bottom:auto; }
.cao-3d-dock{ position:absolute; left:50%; bottom:var(--sp-12); transform:translateX(-50%); z-index:4; }
.cao-3d-grp{ display:flex; align-items:center; gap:var(--sp-2); }
.cao-3d-dock .outil[aria-pressed="true"]{ background:var(--outils-accent-doux); }

/* ── Le panneau de droite : ses onglets en tête, sans retrait ── */
.cao-dock-panel[hidden]{ display:none; }
.cao-dock-empty{ text-align:start; }
.cao-pc-c{ width:12px; height:12px; flex:none; border-radius:var(--radius-xs); border:1px solid var(--line); }
.cao-pc-l{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-md); }
.cao-pc-x{ visibility:hidden; }
.cao-pc:hover .cao-pc-x, .cao-pc:focus-within .cao-pc-x{ visibility:visible; }

/* L'inspecteur, l'arbre et les calques, relogés dans le panneau : des lignes libellé + champ de la DA commune. */
.cao-insp, .cao-layers{ font-size:var(--fs-sm); }
.cao-dock .cao-insp, .cao-dock .cao-layers{ position:static; width:auto; padding:0; border:0; background:none; }
.cao-dock .cao-insp[hidden]{ display:none; }
.cao-insp .ci-h, .cao-layers .cl-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); margin-bottom:var(--sp-8);
  font-size:var(--fs-sm); font-weight:var(--fw-strong); color:var(--txt); }
.cao-insp .ci-h button, .cao-layers .cl-h button, .cl-row > button, .cao-insp .ci-row > button{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 var(--sp-2);
  border:0; border-radius:var(--radius-sm); background:none; color:var(--mut); cursor:pointer; font:inherit; font-size:var(--fs-sm); }   /* S7 : 11 px avant */
.cao-insp .ci-h button:hover, .cao-layers .cl-h button:hover, .cl-row > button:hover, .cao-insp .ci-row > button:hover{ background:var(--outils-survol); color:var(--txt); }
.cl-row > button.on{ color:var(--outils-accent); }
.cao-insp svg.ic, .cao-layers svg.ic{ width:14px; height:14px; }
.cao-insp .ci-row, .cao-tn-p{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); margin:0 0 var(--sp-6); color:var(--mut); }
.cao-insp .ci-row > span{ width:44px; flex:none; }
/* Trois coordonnées par ligne (position, rotation, dimensions) : elles se partagent la place au lieu de déborder. */
.cao-insp .ci-row > input[type=number], .cao-insp .ci-row > select, .cao-insp .ci-row > .dhsel{ flex:1 1 0; width:auto; min-width:0; }
.cao-insp .ci-row > i{ font-style:normal; color:var(--mut); font-size:var(--fs-2xs); }
.cao-insp .ci-row input[type=number], .cao-tn-p input, .cao-tn-p select, .ci-row select, .cl-row .cl-name{ box-sizing:border-box; width:84px; height:var(--outils-h); margin:0; padding:0 var(--sp-6);
  border:1px solid transparent; border-radius:var(--radius-sm); background:var(--outils-champ); color:var(--txt); font:inherit; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.cao-insp .ci-row input:focus-visible, .cao-tn-p input:focus-visible, .cao-tn-p select:focus-visible, .cl-row .cl-name:focus-visible{ outline:none; border-color:var(--outils-accent-filet); background:var(--card); }
.cao-insp .ci-row input[type=color], .cl-row input[type=color]{ width:36px; height:22px; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius-xs); background:none; cursor:pointer; flex:none; }
.cl-row{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-2); border-radius:var(--radius-sm); }
.cl-row.on{ background:var(--outils-accent-doux); }
.cl-row .cl-name{ flex:1; width:auto; min-width:0; background:none; }
.cl-row .cl-n{ font-size:var(--fs-2xs); color:var(--mut); font-variant-numeric:tabular-nums; min-width:14px; text-align:end; }
.cao-tree{ display:flex; flex-direction:column; gap:var(--sp-10); }
.cao-tn + .cao-tn{ padding-top:var(--sp-10); border-top:1px solid var(--line2); }
.cao-tn-h{ display:flex; align-items:center; gap:var(--sp-6); margin-bottom:var(--sp-8); font-size:var(--fs-sm); font-weight:var(--fw-strong); color:var(--txt); }
.cao-tn-n{ display:inline-grid; place-items:center; width:18px; height:18px; flex:none; border-radius:var(--radius-xs); background:var(--outils-accent-doux); color:var(--txt); font-size:var(--fs-2xs); }
.cao-tn-n svg.ic{ width:12px; height:12px; }
/* Les calques hors du panneau (bouton Calques du plan) : une carte de la DA commune sur le plan. */
.cao-2d .cao-layers{ position:absolute; right:var(--sp-10); bottom:var(--sp-10); width:232px; padding:var(--sp-8); background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); }

/* ── Le pied : le compte du modèle à gauche, la sélection et l'accrochage à droite ; rien de coupé au bord ── */
.cao-status{ gap:var(--sp-10); }
.cao-status-l{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cao-status-l .cao-stat{ font-size:inherit; color:inherit; }
.cao-status-r{ flex:0 1 auto; min-width:0; gap:var(--sp-4); }
.cao-status-i.on{ color:var(--outils-accent); }
}