@layer modules{
/* ════════ Toile « DHGraph » - éditeur graphique (CDC_EDITEUR_GRAPHIQUE.md) ════════
   Style natif Hdplio (tokens 01-tokens.css : clair/sombre, accent, densité).
   3 zones + ruban + barre d'état. Scope préfixé .gph-* (sûr en multi-instance/Live). */

.gph-host{ position:relative; height:100%; min-height:480px; }

/* ── Palette de commandes ⌘K (G14) ──────────────────────────────────────── */
.gph-cmdk{ position:absolute; inset:0; z-index:40; background:rgba(10,12,20,.34);
  display:flex; justify-content:center; align-items:flex-start; padding-top:11vh; }
.gph-cmdk-box{ width:min(520px,92%); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--elev-2); overflow:hidden; }
.gph-cmdk-inp{ width:100%; box-sizing:border-box; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-base); padding:var(--sp-14) var(--sp-16); outline:none; }
.gph-cmdk-list{ list-style:none; margin:0; padding:var(--sp-6); max-height:46vh; overflow-y:auto; }
.gph-cmdk-it{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-10);
  padding:var(--sp-8) var(--sp-12); border-radius:var(--radius); cursor:pointer; color:var(--txt); }
.gph-cmdk-it.on,.gph-cmdk-it:hover{ background:var(--bg2); }
.gph-cmdk-it kbd{ font:inherit; font-size:var(--fs-xs); color:var(--muted,#8a90a2); background:var(--bg2);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-1) var(--sp-6); }
.gph-cmdk-it.on kbd{ background:var(--card); }
.gph-cmdk-empty{ list-style:none; padding:var(--sp-14) var(--sp-12); color:var(--muted,#8a90a2); text-align:center; }
.gph{
  --gph-canvas-bg:#eef0f4; --gph-grid:rgba(120,130,150,.10);
  display:flex; flex-direction:column; height:100%; min-height:480px;
  background:var(--card); color:var(--txt); border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); outline:none;
}
html[data-theme="dark"] .gph, .gph[data-theme="dark"]{ --gph-canvas-bg:#0c1016; --gph-grid:rgba(120,140,180,.10); }

/* ── Barre supérieure fine (Figma-like : doc à gauche, actions à droite) ──── */
.gph-topbar{ display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-8) var(--sp-12); border-bottom:1px solid var(--line); background:var(--card); flex:0 0 auto; }
.gph-topbar .gph-doc-menu{ flex:1 1 auto; }
/* Actions regroupées en une « pilule » nette (style Figma) : fond discret, boutons sans bordure. */
.gph-topbar-r{ display:flex; align-items:center; gap:var(--sp-1); flex:0 0 auto; padding:var(--sp-2); background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); }
.gph-topbar-r .gph-rbtn{ width:30px; height:30px; border:0; background:transparent; border-radius:var(--radius); }
.gph-topbar-r .gph-rbtn:hover{ background:var(--card); }
.gph-topbar-r .gph-rbtn.on{ background:var(--accent); color:var(--on-solid); }
.gph-topbar-r .gph-ai-btn{ color:var(--accent); }
.gph-topbar-r .gph-ai-btn:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
.gph-topbar-r .gph-sep{ height:18px; margin:0 var(--sp-2); background:var(--line); }
.gph-doc-menu{ display:flex; align-items:center; gap:var(--sp-6); min-width:180px; }
.gph-docbtn{ width:30px; height:30px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--txt); cursor:pointer; font-size:var(--fs-base); }
.gph-docbtn:hover{ background:var(--card2); }
.gph-docname{ flex:1; min-width:80px; border:1px solid transparent; background:transparent; color:var(--txt); font:inherit; font-weight:var(--fw-strong); padding:var(--sp-4) var(--sp-8); border-radius:var(--radius); }
.gph-docname:hover,.gph-docname:focus{ border-color:var(--line); background:var(--card); outline:none; }
.gph-saved{ color:var(--accent); font-size:var(--fs-lg); width:12px; }

/* ── Dock d'outils flottant (bas-centre, façon Figma) ───────────────────── */
/* Rail d'outils VERTICAL ancré à gauche du canevas (style Framer/Figma). */
.gph-dock{ position:absolute; left:12px; top:50%; transform:translateY(-50%);
  z-index:6; display:flex; flex-direction:column; align-items:center; gap:var(--sp-6); pointer-events:none; }
.gph-dock > *{ pointer-events:auto; }
.gph-tools{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6); border-radius:var(--radius-modal);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  border:1px solid var(--line); box-shadow:var(--elev-2);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); }
html[data-theme="light"] .gph-tools{ box-shadow:var(--elev-2); }
.gph-tool{ width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:var(--radius); background:transparent; color:var(--txt); cursor:pointer; font-size:var(--fs-base); }
.gph-tool:hover{ background:var(--bg2); }
.gph-tool.on{ background:var(--accent); color:var(--on-solid); }
.gph-tool.on svg.ic .du{ fill-opacity:.32; }
.gph-tool-ic{ pointer-events:none; line-height:var(--lh-flat); display:inline-flex; }
.gph-tool svg.ic{ width:19px; height:19px; }

.gph-rbtn{ width:32px; height:32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--txt); cursor:pointer; font-size:var(--fs-base); }
.gph-rbtn:hover{ background:var(--card2); }
.gph-rbtn:disabled{ opacity:.4; cursor:default; }
.gph-sep{ width:1px; height:22px; background:var(--line); margin:0 var(--sp-2); }

/* ── Corps : 3 zones ───────────────────────────────────────────────────── */
.gph-body{ flex:1 1 auto; display:flex; min-height:0; }
.gph-left{ width:220px; flex:0 0 auto; border-right:1px solid var(--line); display:flex; flex-direction:column; background:var(--card); min-height:0; }
.gph-right{ width:248px; flex:0 0 auto; border-left:1px solid var(--line); background:var(--card); overflow-y:auto; min-height:0; }
.gph-canvas-wrap{ position:relative; flex:1 1 auto; min-width:0; overflow:hidden; background:var(--gph-canvas-bg); }
.gph-canvas-wrap[data-cursor="crosshair"]{ cursor:crosshair; }
.gph-canvas-wrap[data-cursor="text"]{ cursor:text; }
.gph-canvas{ position:absolute; inset:0; }
.gph-overlay{ position:absolute; inset:0; }

/* ── Panneau calques ───────────────────────────────────────────────────── */
.gph-pane-head{ display:flex; gap:var(--sp-6); padding:var(--sp-8); border-bottom:1px solid var(--line); }
.gph-pagesel{ flex:1; }
.gph-mini{ width:30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); cursor:pointer; font-size:var(--fs-base); }
.gph-mini:hover{ background:var(--accent); color:var(--on-solid); }
.gph-search{ padding:var(--sp-8); border-bottom:1px solid var(--line2); }
.gph-search input{ width:100%; box-sizing:border-box; padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; }
.gph-layers{ flex:1; overflow-y:auto; padding:var(--sp-4); }
.gph-layer{ display:flex; align-items:center; gap:var(--sp-6); padding:var(--sp-4) var(--sp-8); border-radius:var(--radius-sm); cursor:pointer; user-select:none; font-size:var(--fs-md); }
.gph-layer:hover{ background:var(--card2); }
.gph-layer.sel{ background:color-mix(in srgb, var(--accent) 22%, transparent); }
.gph-layer.dim{ opacity:.5; }
.gph-layer.over{ box-shadow:inset 0 -2px 0 var(--accent); }
.gph-layer.drag{ opacity:.4; }
.gph-l-ic{ width:16px; text-align:center; opacity:.8; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.gph-l-ic svg.ic{ width:15px; height:15px; }

/* ── Icônes SVG des panneaux secondaires (inspecteur, effets, variables, auto-layout, raster) ── */
.gph-l-btn{ display:inline-flex; align-items:center; justify-content:center; }
.gph-l-btn svg.ic{ width:14px; height:14px; }
.gph-fld>span svg.ic,.gph-fld-sel>span svg.ic{ width:14px; height:14px; }
.gph-eff-ic svg.ic{ width:15px; height:15px; }
.gph-add-paint{ display:inline-flex; align-items:center; }
.gph-add-paint svg.ic{ width:15px; height:15px; }
.gph-insp-sub svg.ic{ width:14px; height:14px; vertical-align:-2px; }
.gph-paint-lbl svg.ic{ width:13px; height:13px; vertical-align:-2px; }
.gph-al-seg button,.gph-ex-seg button{ display:inline-flex; align-items:center; justify-content:center; }
.gph-al-seg button svg.ic,.gph-ex-seg button svg.ic{ width:15px; height:15px; }
.gph-al-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-4); }
.gph-al-btn svg.ic{ width:15px; height:15px; }
.gph-vc-exp svg.ic,.gph-vars-x svg.ic,.gph-ai-x svg.ic{ width:14px; height:14px; vertical-align:-2px; }
.gph-vars-top h3 svg.ic,.gph-ai-top h3 svg.ic{ width:16px; height:16px; vertical-align:-3px; }
.gph-rt svg.ic{ width:16px; height:16px; }
.gph-stbtn{ display:inline-flex; align-items:center; gap:var(--sp-4); }
.gph-stbtn svg.ic{ width:14px; height:14px; }
.gph-align-bar .gph-al-btn svg.ic{ width:16px; height:16px; }
.gph-l-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gph-l-edit{ flex:1; font:inherit; border:1px solid var(--accent); border-radius:var(--radius-sm); padding:var(--sp-1) var(--sp-4); background:var(--card); color:var(--txt); }
.gph-l-btn{ border:0; background:transparent; color:var(--mut); cursor:pointer; font-size:var(--fs-sm); opacity:0; padding:var(--sp-2); line-height:var(--lh-flat); border-radius:var(--radius-sm); }
.gph-layer:hover .gph-l-btn{ opacity:.9; }
.gph-l-btn:hover{ color:var(--txt); background:var(--bg2); }
/* Boutons d'action dans l'inspecteur (remplissage/contour) : visibles au repos,
   contrairement aux boutons de calque (cachés jusqu'au survol de la ligne). */
.gph-paint .gph-l-btn{ opacity:.55; }
.gph-paint:hover .gph-l-btn{ opacity:.9; }
.gph-paint .gph-l-btn:hover{ opacity:1; color:var(--accent); }
.gph-empty,.gph-insp-empty,.gph-paint-none{ padding:var(--sp-18) var(--sp-12); color:var(--mut); font-size:var(--fs-sm); text-align:center; }

/* ── Inspecteur ────────────────────────────────────────────────────────── */
.gph-insp{ padding:var(--sp-2) 0; }
.gph-insp-sec{ padding:var(--sp-10) var(--sp-12); border-bottom:1px solid var(--line2); }
.gph-insp-title{ font-weight:var(--fw-bold); font-size:var(--fs-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* En-tête de section : un cran plus lisible et contrasté (hiérarchie type Figma). */
.gph-insp-sub{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; font-weight:var(--fw-strong); color:var(--mut2,var(--mut)); margin-bottom:var(--sp-8); display:flex; align-items:center; justify-content:space-between; min-height:18px; }
.gph-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
.gph-fld{ display:flex; align-items:center; gap:var(--sp-4); border:1px solid var(--line); border-radius:var(--radius); padding:0 var(--sp-6); background:var(--card2); height:30px; }
.gph-fld-wide{ grid-column:1/-1; }
/* Libellé de champ : glyphe centré (X/Y/∠…) OU mot court (Épaisseur/Bout…).
   width:auto + ellipsis → jamais de chevauchement avec la valeur (corrige « Épa15seur »). */
.gph-fld>span{ color:var(--mut); font-size:var(--fs-sm); flex:0 1 auto; min-width:15px; max-width:60%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Mot-libellé (« Épaisseur », « Bout »…) : largeur naturelle, aligné à gauche, ton atténué,
   curseur d'aide. flex:0 0 auto → le mot s'affiche en entier et c'est la valeur qui cède
   la place (jamais de chevauchement, le champ flex se réduit via min-width:0). */
.gph-fld>span.gph-fld-word{ flex:0 0 auto; max-width:none; text-align:left; cursor:help; }
.gph-fld .gph-scrub{ cursor:ew-resize; }
.gph-fld input{ width:100%; min-width:0; border:0; background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-sm); padding:0; }
.gph-fld input:focus{ outline:none; }
.gph-fld i{ color:var(--mut); font-style:normal; font-size:var(--fs-xs); flex:0 0 auto; }
.gph-fld-sel{ padding:0; }
.gph-fld-sel select{ width:100%; min-width:0; border:0; background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-sm); padding:0 var(--sp-4) 0 var(--sp-6); height:28px; }
.gph-fld-sel>span{ padding-left:var(--sp-6); }

.gph-add-paint{ border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:var(--fs-base); line-height:var(--lh-flat); }
.gph-paint{ display:flex; align-items:center; gap:var(--sp-6); padding:var(--sp-2) 0; }
.gph-swatch{ width:26px; height:26px; border-radius:var(--radius-sm); border:1px solid var(--line); cursor:pointer; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.gph-paint-lbl{ flex:1; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; color:var(--txt); }

/* ── Barre d'état ──────────────────────────────────────────────────────── */
.gph-status{ flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-14); padding:var(--sp-4) var(--sp-12); border-top:1px solid var(--line); background:var(--card2); font-size:var(--fs-sm); color:var(--mut); font-variant-numeric:tabular-nums; }
.gph-status-sp{ flex:1; }
.gph-stbtn{ border:1px solid transparent; background:transparent; color:var(--mut); cursor:pointer; font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-6); border-radius:var(--radius-sm); }
.gph-stbtn:hover{ background:var(--card); color:var(--txt); }
.gph-stbtn.on{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }

/* ── Surcouche de sélection ────────────────────────────────────────────── */
.gph-selbox{ position:absolute; border:1.5px solid var(--accent); pointer-events:none; }
.gph-h{ position:absolute; width:9px; height:9px; margin:-5px 0 0 -5px; background:var(--on-solid); border:1.5px solid var(--accent); border-radius:var(--radius-xs); pointer-events:auto; }
.gph-h[data-handle="n"],.gph-h[data-handle="s"]{ cursor:ns-resize; }
.gph-h[data-handle="e"],.gph-h[data-handle="w"]{ cursor:ew-resize; }
.gph-h[data-handle="nw"],.gph-h[data-handle="se"]{ cursor:nwse-resize; }
.gph-h[data-handle="ne"],.gph-h[data-handle="sw"]{ cursor:nesw-resize; }
.gph-rot{ position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--on-solid); border:1.5px solid var(--accent); pointer-events:auto; cursor:grab; }
.gph-marquee{ position:absolute; border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); pointer-events:none; }

/* ── Rich-text : éditeur contenteditable + barre de format (V2 G4) ─────── */
.gph-rich-edit{ white-space:pre-wrap; word-break:break-word; }
.gph-rich-bar{ position:absolute; z-index:8; display:flex; gap:var(--sp-2); padding:var(--sp-2); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.gph-rich-bar button{ width:28px; height:26px; border:0; background:transparent; color:var(--txt); cursor:pointer; border-radius:var(--radius-sm); font-size:var(--fs-md); }
.gph-rich-bar button:hover{ background:var(--card2); }

/* ── Édition de nœuds vectoriels (L5) ──────────────────────────────────── */
.gph-ve-pt{ position:absolute; width:9px; height:9px; margin:-5px 0 0 -5px; background:var(--on-solid); border:1.5px solid var(--accent); pointer-events:auto; cursor:move; z-index:6; }
.gph-ve-pt.anchor{ border-radius:var(--radius-xs); }
.gph-ve-pt.in,.gph-ve-pt.out{ width:7px; height:7px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--accent); border-color:var(--on-solid); }
.gph-ve-line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:5; }
.gph-ve-line line{ stroke:var(--accent); stroke-width:1; opacity:.6; }

/* ── Édition de texte inline ───────────────────────────────────────────── */
.gph-text-edit{ position:absolute; transform-origin:top left; border:1px solid var(--accent); border-radius:var(--radius-xs); background:rgba(255,255,255,.92); padding:var(--sp-1) var(--sp-2); margin:0; resize:none; overflow:hidden; outline:none; box-shadow:0 0 0 9999px rgba(0,0,0,.02); white-space:pre; }
html[data-theme="dark"] .gph-text-edit{ background:rgba(20,24,32,.92); }

/* ── Menu Documents (repli) ────────────────────────────────────────────── */
.gph-menu{ position:fixed; z-index:9000; min-width:220px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:var(--sp-4); }
.gph-menu hr{ border:0; border-top:1px solid var(--line2); margin:var(--sp-4) 0; }
.gph-menu-it{ display:flex; align-items:center; gap:var(--sp-8); width:100%; border:0; background:transparent; color:var(--txt); cursor:pointer; padding:var(--sp-6) var(--sp-8); border-radius:var(--radius); font:inherit; font-size:var(--fs-md); text-align:left; }
.gph-menu-it:hover{ background:var(--card2); }
.gph-menu-it.danger{ color:var(--err); }
.gph-menu-it em{ margin-left:auto; color:var(--mut); font-style:normal; font-size:var(--fs-xs); }

/* ── Dialogue d'export ─────────────────────────────────────────────────── */
.gph-export-modal{ position:fixed; inset:0; z-index:9100; display:grid; place-items:center; background:var(--backdrop); }
.gph-export-card{ width:380px; max-width:92vw; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-modal); box-shadow:var(--shadow); padding:var(--sp-18) var(--sp-20); }
.gph-export-card h3{ margin:0 0 var(--sp-12); font-size:var(--fs-base); display:flex; align-items:baseline; gap:var(--sp-8); }
.gph-ex-scope{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--mut); }
/* Aperçu fidèle de l'export (rendu réel sur damier de transparence). */
.gph-ex-preview{ height:184px; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; margin-bottom:var(--sp-8);
  background:repeating-conic-gradient(var(--line2) 0 25%, transparent 0 50%) 50%/16px 16px, var(--card2); }
.gph-ex-preview.opaque{ background:var(--paper); }
.gph-ex-preview canvas{ display:block; width:100%; height:184px; }
.gph-ex-dims{ text-align:center; font-size:var(--fs-xs); color:var(--mut); font-variant-numeric:tabular-nums; margin-bottom:var(--sp-14); letter-spacing:.01em; }
.gph-ex-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); margin-bottom:var(--sp-12); }
.gph-ex-row label{ font-size:var(--fs-sm); color:var(--mut); }
.gph-ex-seg{ display:flex; gap:var(--sp-2); padding:var(--sp-2); background:var(--card2); border:1px solid var(--line); border-radius:var(--radius); }
.gph-ex-seg button{ border:0; background:transparent; color:var(--txt); cursor:pointer; padding:var(--sp-4) var(--sp-10); border-radius:var(--radius-sm); font:inherit; font-size:var(--fs-sm); }
.gph-ex-seg button.on{ background:var(--accent); color:var(--on-solid); }

/* Bac à sable de plugins (B6) */
.gph-pl-card{ width:560px; max-width:94vw; }
.gph-pl-list{ max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); }
.gph-pl-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-10); padding:var(--sp-6) var(--sp-10); border-bottom:1px solid var(--line); }
.gph-pl-row:last-child{ border-bottom:0; }
.gph-pl-name{ font-size:var(--fs-md); }
.gph-pl-acts{ display:flex; gap:var(--sp-4); }
.gph-pl-acts button{ border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; width:26px; height:26px; border-radius:var(--radius-sm); font-size:var(--fs-sm); line-height:var(--lh-flat); }
.gph-pl-acts button:hover{ border-color:var(--accent); }
.gph-pl-bar{ display:flex; align-items:center; gap:var(--sp-8); margin-top:var(--sp-12); }
.gph-pl-bar button{ border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; padding:var(--sp-6) var(--sp-12); border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); }
.gph-pl-new:hover{ border-color:var(--accent); }
.gph-pl-editor{ margin-top:var(--sp-12); border-top:1px solid var(--line); padding-top:var(--sp-12); }
.gph-pl-title{ width:100%; box-sizing:border-box; padding:var(--sp-6) var(--sp-10); border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; margin-bottom:var(--sp-8); }
.gph-pl-code{ width:100%; box-sizing:border-box; min-height:180px; padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--radius); background:var(--code-bg,#0d1117); color:var(--code-fg,var(--code-fg)); font-family:var(--font-mono); font-size:var(--fs-sm); line-height:var(--lh-normal); resize:vertical; }
.gph-pl-edfoot{ display:flex; align-items:center; gap:var(--sp-8); margin-top:var(--sp-8); }
.gph-pl-api{ font-size:var(--fs-2xs); color:var(--mut); opacity:.8; max-width:300px; }
.gph-pl-edfoot button{ border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; padding:var(--sp-6) var(--sp-12); border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); }
.gph-pl-edfoot button.primary{ background:var(--accent); color:var(--on-solid); border-color:var(--accent); }
.gph-ex-foot{ display:flex; justify-content:flex-end; gap:var(--sp-8); margin-top:var(--sp-18); }
.gph-ex-foot button{ border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; padding:var(--sp-8) var(--sp-16); border-radius:var(--radius); font:inherit; }
.gph-ex-foot button.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-solid); }

/* ── Barre d'alignement (L12) ──────────────────────────────────────────── */
.gph-align-bar{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.gph-al-btn{ flex:1; min-width:28px; height:30px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); cursor:pointer; font-size:var(--fs-base); }
.gph-al-btn:hover{ background:var(--accent); color:var(--on-solid); border-color:var(--accent); }

/* ── Calque raster / peinture (V2 G8) ──────────────────────────────────── */
.gph-raster-bar{ position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:8; display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-6); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.gph-rt{ width:30px; height:28px; border:0; background:transparent; color:var(--txt); cursor:pointer; border-radius:var(--radius-sm); font-size:var(--fs-base); }
.gph-rt:hover{ background:var(--card2); }
.gph-rt.on{ background:var(--accent); color:var(--on-solid); }
.gph-rt-sep{ width:1px; height:20px; background:var(--line); margin:0 var(--sp-2); }
.gph-rt-swatch{ width:26px; height:26px; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; }
.gph-rt-slider{ display:flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-sm); color:var(--mut); }
.gph-rt-slider input[type=range]{ width:78px; accent-color:var(--accent); }
.gph-rt-done{ border:1px solid var(--accent); background:var(--accent); color:var(--on-solid); cursor:pointer; padding:var(--sp-4) var(--sp-12); border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); }

/* ── Images (V2 G5) ────────────────────────────────────────────────────── */
.gph-canvas-wrap.gph-drop::after{ content:''; position:absolute; inset:8px; border:2px dashed var(--accent); border-radius:var(--radius);
  background:color-mix(in srgb, var(--accent) 8%, transparent); pointer-events:none; z-index:7; }

/* ── Masques (V2 G6) ───────────────────────────────────────────────────── */
.gph-mask-seg{ width:100%; }
.gph-mask-seg button{ flex:1; }
.gph-mask-hint{ font-size:var(--fs-2xs); text-transform:none; letter-spacing:var(--ls-none); color:var(--mut2); margin-left:var(--sp-6); }

/* ── Booléens (L6) ─────────────────────────────────────────────────────── */
.gph-bool-bar{ display:flex; gap:var(--sp-4); }
.gph-bool-bar .gph-al-btn{ font-size:var(--fs-base); }
.gph-flat-btn{ width:100%; margin-top:var(--sp-6); }

/* ── Filtres & ajustements (V2 G9) ─────────────────────────────────────── */
.gph-fx{ padding:var(--sp-4) 0; border-top:1px solid var(--line2); }
.gph-fx:first-of-type{ border-top:0; }
.gph-fx-h{ display:flex; align-items:center; gap:var(--sp-6); }
.gph-fx-lbl{ flex:1; font-size:var(--fs-sm); }
.gph-fx-val{ font-size:var(--fs-xs); color:var(--mut); font-variant-numeric:tabular-nums; }
.gph-fx-range{ width:100%; margin-top:var(--sp-4); accent-color:var(--accent); }
.gph-fx-apply{ font-size:var(--fs-sm); }

/* ── Effets (L7) ───────────────────────────────────────────────────────── */
.gph-effect{ padding:var(--sp-4) 0; border-top:1px solid var(--line2); }
.gph-effect:first-of-type{ border-top:0; }
.gph-effect-h{ display:flex; align-items:center; gap:var(--sp-6); }
.gph-eff-ic{ width:20px; text-align:center; color:var(--mut); }
.gph-swatch-sm{ width:20px; height:20px; }
.gph-effect-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-4); }
.gph-effect-fields .gph-fld{ height:26px; }

/* ── Auto-layout (L8) ──────────────────────────────────────────────────── */
.gph-al-seg{ width:100%; }
.gph-al-seg button{ flex:1; }
.gph-al-add{ width:100%; }
.gph-al-lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em; color:var(--mut); margin:var(--sp-8) 0 var(--sp-2); }
.gph-al-check{ display:flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-sm); color:var(--txt); margin-top:var(--sp-8); cursor:pointer; }
.gph-al-check input{ accent-color:var(--accent); }

/* ── Composants / Instances (L9) ───────────────────────────────────────── */
.gph-comp-sec .gph-insp-sub{ color:var(--accent); }
.gph-layer .gph-l-ic{ }
.gph-layer[data-type="COMPONENT"] .gph-l-ic,.gph-layer[data-type="INSTANCE"] .gph-l-ic{ color:var(--accent); }

/* ── Repères intelligents (magnétisme) ─────────────────────────────────── */
.gph-guide{ position:absolute; background:#ff3b6b; pointer-events:none; z-index:5; }
.gph-guide.v{ top:0; bottom:0; width:1px; }
.gph-guide.h{ left:0; right:0; height:1px; }

/* ── IA d'authoring (V2 G10) ───────────────────────────────────────────── */
.gph-ai-btn{ color:var(--accent); }
.gph-ai-modal{ position:fixed; inset:0; z-index:9100; display:grid; place-items:center; background:var(--backdrop); }
.gph-ai-card{ width:460px; max-width:94vw; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-modal); box-shadow:var(--shadow); padding:var(--sp-18) var(--sp-20); }
.gph-ai-top{ display:flex; align-items:center; justify-content:space-between; }
.gph-ai-top h3{ margin:0; font-size:var(--fs-base); }
.gph-ai-top .gph-ai-x{ border:0; background:transparent; color:var(--mut); cursor:pointer; font-size:var(--fs-base); }
.gph-ai-sub{ color:var(--mut); font-size:var(--fs-sm); margin:var(--sp-6) 0 var(--sp-12); }
.gph-ai-prompt{ width:100%; box-sizing:border-box; resize:vertical; border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); padding:var(--sp-10) var(--sp-12); }
.gph-ai-prompt:focus{ outline:none; border-color:var(--accent); }
.gph-ai-actions{ display:flex; justify-content:flex-end; margin:var(--sp-10) 0 var(--sp-4); }
.gph-ai-go{ border:1px solid var(--accent); background:var(--accent); color:var(--on-solid); cursor:pointer; padding:var(--sp-8) var(--sp-20); border-radius:var(--radius); font:inherit; font-weight:var(--fw-strong); }
.gph-ai-go:disabled{ opacity:.6; cursor:default; }
.gph-ai-recipes-h{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--mut); margin:var(--sp-14) 0 var(--sp-8); }
.gph-ai-recipes{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
.gph-ai-recipe{ border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; padding:var(--sp-10) var(--sp-12); border-radius:var(--radius); font:inherit; font-size:var(--fs-md); text-align:left; transition:border-color .12s; }
.gph-ai-recipe:hover{ border-color:var(--accent); color:var(--accent); }
.gph-ai-instr{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); padding:var(--sp-8) var(--sp-10); }
.gph-ai-instr:focus{ outline:none; border-color:var(--accent); }
.gph-ai-edit-actions{ display:flex; gap:var(--sp-6); margin-top:var(--sp-8); }
.gph-ai-edit-actions button{ flex:1; border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; padding:var(--sp-8) var(--sp-6); border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); }
.gph-ai-edit-actions .gph-ai-edit{ border-color:var(--accent); color:var(--accent); }
.gph-ai-edit-actions button:hover{ background:var(--card); }
.gph-ai-edit-actions button:disabled{ opacity:.6; cursor:default; }
.gph-imggen{ display:flex; gap:var(--sp-6); }
.gph-imggen-prompt{ flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); padding:var(--sp-8) var(--sp-10); }
.gph-imggen-prompt:focus{ outline:none; border-color:var(--accent); }
.gph-imggen-go{ border:1px solid var(--line); background:var(--card2); color:var(--accent); cursor:pointer; padding:var(--sp-8) var(--sp-14); border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); white-space:nowrap; }
.gph-imggen-go:hover{ border-color:var(--accent); }
.gph-imggen-go:disabled{ opacity:.6; cursor:default; }

/* ── Styles & Variables (L10) ──────────────────────────────────────────── */
.gph-paint.bound .gph-paint-lbl{ color:var(--accent); }
.gph-vars-modal{ position:fixed; inset:0; z-index:9100; display:grid; place-items:center; background:var(--backdrop); }
.gph-vars-card{ width:680px; max-width:94vw; max-height:84vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-modal); box-shadow:var(--shadow); }
.gph-vars-top{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-14) var(--sp-18); border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:1; }
.gph-vars-top h3{ margin:0; font-size:var(--fs-base); }
.gph-vars-actions{ display:flex; gap:var(--sp-6); }
.gph-vars-actions button{ border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; padding:var(--sp-6) var(--sp-10); border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); }
.gph-vars-actions .gph-vars-x{ width:32px; padding:var(--sp-6) 0; }
.gph-vars-body{ padding:var(--sp-14) var(--sp-18); }
.gph-vars-empty{ padding:var(--sp-30); text-align:center; color:var(--mut); }
.gph-vc{ margin-bottom:var(--sp-18); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.gph-vc-head{ display:flex; align-items:center; gap:var(--sp-12); padding:var(--sp-8) var(--sp-12); background:var(--card2); border-bottom:1px solid var(--line); }
.gph-vc-head b{ font-size:var(--fs-md); }
.gph-vc-modes{ font-size:var(--fs-sm); color:var(--mut); margin-left:auto; display:flex; align-items:center; gap:var(--sp-6); }
.gph-vc-modes select{ font:inherit; font-size:var(--fs-sm); }
.gph-vc-exp{ border:1px solid var(--line); background:var(--card); color:var(--txt); cursor:pointer; padding:var(--sp-2) var(--sp-8); border-radius:var(--radius-sm); font-size:var(--fs-sm); }
.gph-vt{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.gph-vt th{ text-align:left; padding:var(--sp-6) var(--sp-12); color:var(--mut); font-weight:var(--fw-strong); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em; }
.gph-vt td{ padding:var(--sp-4) var(--sp-12); border-top:1px solid var(--line2); }
.gph-vt-name{ width:100%; border:1px solid transparent; background:transparent; color:var(--txt); font:inherit; padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-sm); }
.gph-vt-name:hover,.gph-vt-name:focus{ border-color:var(--line); background:var(--card2); outline:none; }
.gph-vt-num{ width:70px; border:1px solid var(--line); background:var(--card2); color:var(--txt); font:inherit; padding:var(--sp-2) var(--sp-6); border-radius:var(--radius-sm); }
.gph-vc-add{ display:flex; gap:var(--sp-6); padding:var(--sp-8) var(--sp-12); border-top:1px solid var(--line2); }
.gph-vc-add button{ border:1px dashed var(--line); background:transparent; color:var(--accent); cursor:pointer; padding:var(--sp-4) var(--sp-10); border-radius:var(--radius-sm); font:inherit; font-size:var(--fs-sm); }

/* ── Réduction pour Live / petits panneaux ─────────────────────────────── */
@media (max-width:880px){ .gph-left{ width:170px; } .gph-right{ width:200px; } }

/* ── Mode « editions » : le nom/dossiers sont gérés par le Finder d'Édition ─ */
.gph-editions .gph-doc-menu{ display:none; }

/* ════════════════════════════════════════════════════════════════════════
   CDC_TOILE_UX - refonte UI/UX (U1 onglets+repli · U2 menus · U3 calques ·
   U4 dock flyouts · U5 règles/guides · U6 palette · U7 export · U8 état vide)
   ════════════════════════════════════════════════════════════════════════ */

/* ── U1 : inspecteur à onglets + sections repliables ───────────────────── */
.gph-insp-tabs{ display:flex; gap:var(--sp-2); margin:var(--sp-8) var(--sp-10) var(--sp-4); }
.gph-insp-tabs button{ flex:1; border:0; background:transparent; color:var(--mut); cursor:pointer; font:inherit; font-size:var(--fs-sm); padding:var(--sp-6) var(--sp-4); border-radius:var(--radius-sm); }
.gph-insp-tabs button:hover{ background:var(--card2); color:var(--txt); }
.gph-insp-tabs button.on{ background:var(--accent); color:var(--on-solid); }
.gph-insp-body{ }
.gph-insp-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); }
.gph-insp-type{ font-size:var(--fs-xs); color:var(--mut); text-transform:capitalize; flex:0 0 auto; }
.gph-insp-sub{ cursor:default; }
.gph-fold > .gph-insp-sub,.gph-insp-sec > .gph-insp-sub{ cursor:pointer; user-select:none; }
.gph-fold-ic{ display:inline-flex; transition:transform .14s; opacity:.6; margin-right:var(--sp-1); }
.gph-fold-ic svg.ic{ width:13px; height:13px; }
.gph-insp-sec.gph-collapsed .gph-fold-ic{ transform:rotate(-90deg); }
.gph-insp-sec.gph-collapsed > *:not(.gph-insp-sub){ display:none; }
.gph-insp-sec.gph-collapsed{ padding-bottom:var(--sp-10); }

/* ── Groupes d'inspecteur (organisation type Figma/Framer) ──────────────────
   Une passe post-rendu (gphGroupInspector) range les sections plates en quelques
   groupes repliables. Le groupe est l'unité de repli ; les sous-titres internes
   deviennent de simples séparateurs (plus de chevron par-section). */
.gph-grp{ border-bottom:1px solid var(--line); }
.gph-grp:last-child{ border-bottom:0; }
.gph-grp-h{ display:flex; align-items:center; gap:var(--sp-6); padding:var(--sp-10) var(--sp-12); cursor:pointer; user-select:none;
  font-size:var(--fs-xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.05em; color:var(--txt); }
.gph-grp-h:hover{ background:var(--bg2); }
.gph-grp-ch{ display:inline-flex; align-items:center; transition:transform .14s; opacity:.5; }
.gph-grp-ch svg.ic{ width:12px; height:12px; }
.gph-grp-h:hover .gph-grp-ch{ opacity:.8; }
.gph-grp.col .gph-grp-ch{ transform:rotate(-90deg); }
.gph-grp-t{ flex:1; }
.gph-grp-body{ padding-bottom:var(--sp-6); }
.gph-grp.col .gph-grp-body{ display:none; }
/* Sections rangées dans un groupe : pas de bordure propre, padding compact, sous-titre = label statique. */
.gph-grp-body .gph-insp-sec{ border-bottom:0; padding:var(--sp-2) var(--sp-12) var(--sp-8); }
.gph-grp-body .gph-insp-sec:last-child{ padding-bottom:var(--sp-2); }
.gph-grp-body .gph-insp-sub{ cursor:default; margin-bottom:var(--sp-6); }
.gph-grp-body .gph-insp-sub .gph-fold-ic{ display:none; }
/* « + » d'ajout (remplissage/contour) remonté sur la ligne d'en-tête du groupe. */
.gph-grp-h .gph-add-paint{ margin-left:auto; }

/* ── U8 : état vide riche (onglet doc) + raccourcis ────────────────────── */
.gph-keys{ display:flex; flex-direction:column; gap:var(--sp-4); }
.gph-key{ display:flex; align-items:center; gap:var(--sp-8); font-size:var(--fs-sm); color:var(--txt); }
.gph-key kbd{ font:inherit; font-size:var(--fs-2xs); min-width:22px; text-align:center; color:var(--mut); background:var(--card2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-6); }
.gph-key span{ color:var(--mut); }
.gph-shortcuts .gph-cmdk-box{ width:min(620px,94%); }
.gph-sc-box{ padding:0; }
.gph-sc-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-12) var(--sp-16); border-bottom:1px solid var(--line); }
.gph-sc-head b{ font-size:var(--fs-base); }
.gph-sc-head .gph-ai-x{ border:0; background:transparent; color:var(--mut); cursor:pointer; }
.gph-sc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8) var(--sp-22); padding:var(--sp-14) var(--sp-16); }
.gph-sc-col h4{ margin:0 0 var(--sp-6); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--mut); }
.gph-sc-col .gph-key{ margin-bottom:var(--sp-4); }

/* ── U2 : icônes des menus contextuels (override l'opacity:0 des .gph-l-btn) ── */
.gph-menu-ic{ display:inline-flex; align-items:center; justify-content:center; width:16px; color:var(--mut); flex:0 0 auto; }
.gph-menu-ic svg.ic{ width:14px; height:14px; }
.gph-menu-it{ gap:var(--sp-8); }
.gph-menu-it:hover .gph-menu-ic{ color:var(--txt); }

/* ── U3 : calques (twirl, vignette, indicateurs de glisser) ────────────── */
.gph-l-twirl{ width:15px; height:15px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--mut); cursor:pointer; padding:0; }
.gph-l-twirl svg.ic{ width:12px; height:12px; transition:transform .12s; }
.gph-l-twirl.col svg.ic{ transform:rotate(-90deg); }
.gph-l-twirl-x{ cursor:default; }
.gph-l-thumb{ width:17px; height:17px; flex:0 0 auto; border-radius:var(--radius-xs); border:1px solid var(--line); background:var(--card2); image-rendering:auto; }
.gph-layer.over-before{ box-shadow:inset 0 2px 0 var(--accent); }
.gph-layer.over-after{ box-shadow:inset 0 -2px 0 var(--accent); }
.gph-layer.over-inside{ background:color-mix(in srgb, var(--accent) 16%, transparent); box-shadow:inset 0 0 0 1px var(--accent); }

/* ── U4 : dock - séparateurs + flyouts ─────────────────────────────────── */
/* Séparateur horizontal (le rail est vertical). */
.gph-tool-sep{ width:22px; height:1px; background:var(--line); margin:var(--sp-2) 0; flex:0 0 auto; align-self:center; }
.gph-tool-wrap{ position:relative; display:inline-flex; }
.gph-tool-caret{ position:absolute; right:0; bottom:0; width:13px; height:13px; border:0; background:transparent; cursor:pointer; padding:0; }
.gph-tool-caret::after{ content:''; position:absolute; right:2px; bottom:2px; width:0; height:0;
  border:3px solid transparent; border-right-color:var(--mut); border-bottom-color:var(--mut); }
.gph-tool-wrap .gph-tool.on ~ .gph-tool-caret::after{ border-right-color:var(--on-solid); border-bottom-color:var(--on-solid); }
.gph-canvas-wrap[data-cursor="grab"]{ cursor:grab; }
.gph-canvas-wrap[data-cursor="grab"]:active{ cursor:grabbing; }

/* ── U5 : règles + guides ──────────────────────────────────────────────── */
.gph-ruler{ position:absolute; z-index:5; display:none; }
.gph-ruler-top{ top:0; left:0; }
.gph-ruler-left{ top:0; left:0; }
.gph-ruler-corner{ position:absolute; top:0; left:0; width:20px; height:20px; z-index:6; display:none; background:var(--card); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.gph-ruler-top{ cursor:ns-resize; } .gph-ruler-left{ cursor:ew-resize; }
.gph-has-rulers .gph-ruler,.gph-has-rulers .gph-ruler-corner{ display:block; }
.gph-uguide{ position:absolute; z-index:6; pointer-events:auto; }
.gph-uguide.v{ top:0; bottom:0; width:7px; margin-left:-3px; cursor:ew-resize; background:linear-gradient(to right, transparent 3px, color-mix(in srgb,var(--accent) 70%,transparent) 3px 4px, transparent 4px); }
.gph-uguide.h{ left:0; right:0; height:7px; margin-top:-3px; cursor:ns-resize; background:linear-gradient(to bottom, transparent 3px, color-mix(in srgb,var(--accent) 70%,transparent) 3px 4px, transparent 4px); }

/* ── U6 : palette de couleurs (récentes / document / styles) ───────────── */
.gph-palette{ display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-top:var(--sp-8); }
.gph-pal-grp{ display:flex; flex-wrap:wrap; gap:var(--sp-2); padding-right:var(--sp-6); border-right:1px solid var(--line2); }
.gph-pal-grp:last-child{ border-right:0; padding-right:0; }
.gph-pal-sw{ width:17px; height:17px; border-radius:var(--radius-xs); border:1px solid var(--line); cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.gph-pal-sw:hover{ transform:scale(1.12); border-color:var(--accent); }
.gph-pal-style{ border-radius:50%; }

/* ── U7 : onglet Export multi-preset ───────────────────────────────────── */
.gph-exp-row{ display:flex; align-items:center; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.gph-exp-fmt{ flex:0 0 auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-sm); padding:var(--sp-4) var(--sp-6); }
.gph-exp-seg{ flex:1; }
.gph-exp-seg button{ flex:1; border:0; background:transparent; color:var(--txt); cursor:pointer; font:inherit; font-size:var(--fs-sm); padding:var(--sp-4) 0; border-radius:var(--radius-sm); }
.gph-exp-seg button.on{ background:var(--accent); color:var(--on-solid); }
.gph-exp-add{ display:inline-flex; align-items:center; gap:var(--sp-4); border:1px dashed var(--line); background:transparent; color:var(--accent); cursor:pointer; padding:var(--sp-6) var(--sp-10); border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); width:100%; justify-content:center; margin-top:var(--sp-2); }
.gph-exp-add svg.ic{ width:14px; height:14px; }
.gph-exp-all{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-6); }
.gph-exp-all svg.ic{ width:15px; height:15px; }

/* ════════════════════════════════════════════════════════════════════════
   CDC_TOILE_UX V2 - outils pro (barre flottante, mini-carte, mesures, onboarding)
   + collaboration (commentaires, prototype) + inspecteur avancé.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Barre flottante contextuelle (HUD de sélection) ───────────────────── */
.gph-ctbar{ position:absolute; transform:translateX(-50%); z-index:9; display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-4); background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--elev-2); pointer-events:auto;
  -webkit-backdrop-filter:saturate(1.3) blur(8px); backdrop-filter:saturate(1.3) blur(8px); }
html[data-theme="light"] .gph-ctbar{ box-shadow:var(--elev-2); }
.gph-ct-b,.gph-ct-sw{ width:28px; height:28px; border:0; background:transparent; color:var(--txt); cursor:pointer; border-radius:var(--radius-sm); display:grid; place-items:center; padding:0; }
.gph-ct-b:hover{ background:var(--bg2); }
.gph-ct-b svg.ic{ width:16px; height:16px; }
.gph-ct-sw{ border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.gph-ct-sep{ width:1px; height:18px; background:var(--line); margin:0 var(--sp-2); }

/* ── Mini-carte de navigation (même principe que la mini-carte du Cockpit) ──
   Verre dépoli, redimensionnable (grip haut-gauche), peek-zoom Ctrl+molette,
   indicateur de viewport à double bord. Rendu canvas conservé (perf 100k nœuds). */
.gph-minimap{ position:absolute; right:14px; bottom:14px; z-index:6;
  display:flex; flex-direction:column; width:200px; height:150px;
  border-radius:var(--radius); overflow:hidden;
  background:color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:box-shadow .2s; }
.gph-minimap:hover{ box-shadow:0 16px 48px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.09); }
html[data-theme="light"] .gph-minimap{ box-shadow:0 12px 36px rgba(31,35,40,.16), inset 0 0 0 1px rgba(255,255,255,.5); }
.gph-minimap-bar{ display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; padding:var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-12); border-bottom:1px solid var(--line2); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; font-weight:var(--fw-strong); color:var(--mut); }
.gph-minimap-bar button{ border:0; background:transparent; color:var(--mut); cursor:pointer; padding:var(--sp-2); line-height:var(--lh-flat); border-radius:var(--radius-sm); }
.gph-minimap-bar button:hover{ color:var(--txt); background:var(--bg2); }
.gph-minimap-bar svg.ic{ width:12px; height:12px; }
.gph-minimap-map{ position:relative; flex:1 1 auto; min-height:0; }
.gph-minimap canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; cursor:grab; }
.gph-minimap canvas:active{ cursor:grabbing; }
/* Grip de redimensionnement (haut-gauche : minimap ancrée bas-droite → drag agrandit). */
.gph-minimap-grip{ position:absolute; top:0; left:0; width:16px; height:16px; cursor:nwse-resize; z-index:9;
  border-top:1.5px solid var(--mut); border-left:1.5px solid var(--mut); border-top-left-radius:14px;
  opacity:0; transition:opacity .15s; }
.gph-minimap:hover .gph-minimap-grip{ opacity:.5; }
.gph-minimap-grip:hover{ opacity:1 !important; }

/* Onglets du panneau de gauche : Calques | Ressources. */
.gph-left-tabs{ display:flex; gap:var(--sp-2); margin:var(--sp-6) var(--sp-10) var(--sp-2); }
.gph-left-tabs button{ flex:1; border:0; background:transparent; color:var(--mut); cursor:pointer; font:inherit; font-size:var(--fs-sm); padding:var(--sp-6) var(--sp-4); border-radius:var(--radius-sm); }
.gph-left-tabs button:hover{ background:var(--card2); color:var(--txt); }
.gph-left-tabs button.on{ background:var(--accent); color:var(--on-solid); }
.gph-tab-pane{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.gph-tab-pane[hidden]{ display:none; }
/* Panneau Ressources : grille de composants. */
.gph-assets{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:var(--sp-8) var(--sp-10); }
.gph-assets-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-8); }
.gph-asset{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-6); padding:var(--sp-10) var(--sp-6); border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); cursor:pointer; transition:.12s; }
.gph-asset:hover{ border-color:var(--accent); background:var(--card); }
.gph-asset-th{ width:48px; height:48px; display:grid; place-items:center; border-radius:var(--radius-sm); background:repeating-conic-gradient(var(--line2) 0 25%, transparent 0 50%) 50%/10px 10px; overflow:hidden; }
.gph-asset-th canvas{ width:48px; height:48px; }
.gph-asset-n{ font-size:var(--fs-xs); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gph-assets-empty{ padding:var(--sp-24) var(--sp-14); text-align:center; color:var(--mut); font-size:var(--fs-sm); line-height:var(--lh-normal); }
.gph-assets-empty span{ font-size:var(--fs-xs); color:var(--mut2,var(--mut)); }

/* ── Menu principal (toutes les commandes) ─────────────────────────────── */
.gph-mainmenu{ min-width:248px; max-height:min(70vh,560px); overflow-y:auto; padding:var(--sp-2); }
.gph-mainmenu .gph-menu-sec{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.05em; color:var(--mut2,var(--mut)); padding:var(--sp-8) var(--sp-10) var(--sp-4); }
.gph-mainmenu .gph-menu-sec:first-child{ padding-top:var(--sp-4); }
.gph-mainmenu .gph-menu-it{ width:100%; }
.gph-mainmenu .gph-menu-lbl{ flex:1; text-align:left; }
.gph-mainmenu .gph-menu-it em{ margin-left:auto; font-style:normal; font-size:var(--fs-xs); color:var(--mut); padding-left:var(--sp-14); }
/* Petit chevron sur le bouton Menu de l'en-tête. */
.gph-menu-btn{ position:relative; }
.gph-menu-caret{ position:absolute; right:2px; bottom:3px; width:0; height:0; border:3px solid transparent; border-top-color:currentColor; opacity:.5; }

/* ── Modale & popover accessibles partagés (A3) ────────────────────────── */
.gph-modal-back{ position:fixed; inset:0; z-index:calc(var(--z-modal) + 200);   /* garde l'écart avec gph-menu 9000 / gph-*-modal 9100 */ display:grid; place-items:center; background:var(--backdrop,rgba(0,0,0,.4));
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.gph-modal-card{ width:440px; max-width:94vw; max-height:88vh; overflow:auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-modal,10px); box-shadow:var(--shadow,0 18px 50px rgba(0,0,0,.3)); }
.gph-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); padding:var(--sp-14) var(--sp-18); border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:1; }
.gph-modal-head h3{ margin:0; font-size:var(--fs-base); }
.gph-modal-x{ border:0; background:transparent; color:var(--mut); cursor:pointer; padding:var(--sp-4); border-radius:var(--radius-sm); display:flex; }
.gph-modal-x:hover{ background:var(--bg2); color:var(--txt); }
.gph-modal-x svg.ic{ width:15px; height:15px; }
.gph-modal-body{ padding:var(--sp-16) var(--sp-18); }
.gph-modal-foot{ display:flex; justify-content:flex-end; gap:var(--sp-8); padding:var(--sp-14) var(--sp-18); border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--card); }
.gph-modal-btn{ border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; padding:var(--sp-8) var(--sp-16); border-radius:var(--radius); font:inherit; font-size:var(--fs-md); }
.gph-modal-btn:hover{ border-color:var(--accent); }
.gph-modal-btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-solid); }
.gph-modal-btn.primary:hover{ filter:brightness(1.06); }
.gph-popover{ position:fixed; z-index:calc(var(--z-modal) + 300); min-width:180px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-sm,8px); box-shadow:var(--shadow,0 12px 36px rgba(0,0,0,.24)); padding:var(--sp-4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* ── Mesures de distance (Alt) ─────────────────────────────────────────── */
.gph-meas-line{ position:absolute; background:#ff3b6b; z-index:8; pointer-events:none; }
.gph-meas-line.h{ height:1px; } .gph-meas-line.v{ width:1px; }
.gph-meas-lbl{ position:absolute; transform:translate(-50%,-50%); z-index:8; pointer-events:none;
  background:#ff3b6b; color:var(--on-solid); font:600 10px/1 ui-monospace,monospace; padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-xs); white-space:nowrap; }

/* ── Onboarding / état vide ────────────────────────────────────────────── */
.gph-onboard{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none; }
.gph-ob-card{ pointer-events:auto; text-align:center; max-width:380px; padding:var(--sp-26) var(--sp-28); background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-modal); box-shadow:var(--elev-2); }
.gph-ob-title{ font-size:var(--fs-lg); font-weight:var(--fw-bold); }
.gph-ob-sub{ font-size:var(--fs-md); color:var(--mut); margin:var(--sp-6) 0 var(--sp-18); line-height:var(--lh-normal); }
.gph-ob-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
.gph-ob-actions button{ display:inline-flex; align-items:center; gap:var(--sp-6); border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; padding:var(--sp-10) var(--sp-12); border-radius:var(--radius); font:inherit; font-size:var(--fs-md); transition:border-color .12s; }
.gph-ob-actions button:hover{ border-color:var(--accent); }
.gph-ob-actions button span{ flex:1; text-align:left; }
.gph-ob-actions button kbd{ font:inherit; font-size:var(--fs-2xs); color:var(--mut); background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-1) var(--sp-4); }
.gph-ob-actions button svg.ic{ width:16px; height:16px; }
.gph-ob-actions .primary{ grid-column:1/-1; justify-content:center; border-color:var(--accent); color:var(--on-solid); background:var(--accent); }
.gph-ob-actions .primary span{ flex:0 0 auto; }

/* ── Commentaires : épingles + popover ─────────────────────────────────── */
.gph-cpin{ position:absolute; z-index:8; transform:translate(-2px,-100%); min-width:22px; height:22px; padding:0 var(--sp-6);
  display:grid; place-items:center; background:var(--accent); color:var(--on-solid); font:600 11px/1 inherit; cursor:pointer;
  border-radius:var(--radius) var(--radius) var(--radius) var(--radius-xs); box-shadow:var(--elev-1); pointer-events:auto; border:2px solid var(--on-solid); }
html[data-theme="dark"] .gph-cpin{ border-color:var(--card); }
.gph-cpin.done{ background:var(--mut); opacity:.7; }
.gph-cpin:hover{ filter:brightness(1.08); }
.gph-cpop{ position:absolute; z-index:60; width:262px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--elev-2); overflow:hidden; }
.gph-cpop-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-8) var(--sp-10); border-bottom:1px solid var(--line2); }
.gph-cpop-head b{ font-size:var(--fs-sm); }
.gph-cpop-actions{ display:flex; gap:var(--sp-2); }
.gph-cpop-actions button{ border:0; background:transparent; color:var(--mut); cursor:pointer; padding:var(--sp-4); border-radius:var(--radius-sm); line-height:var(--lh-flat); }
.gph-cpop-actions button:hover{ background:var(--bg2); color:var(--txt); }
.gph-cpop-actions svg.ic{ width:14px; height:14px; }
.gph-cpop-thread{ max-height:200px; overflow-y:auto; padding:var(--sp-10) var(--sp-10); display:flex; flex-direction:column; gap:var(--sp-10); }
.gph-cmsg b{ font-size:var(--fs-sm); } .gph-cmsg span{ font-size:var(--fs-2xs); color:var(--mut); margin-left:var(--sp-6); }
.gph-cmsg p{ margin:var(--sp-2) 0 0; font-size:var(--fs-sm); line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.gph-cmsg-empty{ color:var(--mut); font-size:var(--fs-sm); }
.gph-cpop-edit{ display:flex; gap:var(--sp-6); padding:var(--sp-8) var(--sp-8); border-top:1px solid var(--line2); align-items:flex-end; }
.gph-cpop-edit textarea{ flex:1; min-height:34px; max-height:90px; resize:vertical; border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-sm); padding:var(--sp-6) var(--sp-8); }
.gph-cpop-edit textarea:focus{ outline:none; border-color:var(--accent); }
.gph-cpop-send{ border:1px solid var(--accent); background:var(--accent); color:var(--on-solid); cursor:pointer; width:34px; height:34px; border-radius:var(--radius); display:grid; place-items:center; }
.gph-cpop-send svg.ic{ width:15px; height:15px; }

/* ── Prototype : noodles, pastille de connexion, panneau, présentation ──── */
.gph-noodles{ overflow:visible; }
.gph-noodle{ fill:none; stroke:var(--accent); stroke-width:2; }
.gph-noodle.live{ stroke-dasharray:5 4; }
.gph-noodle-dot{ fill:var(--accent); }
.gph-proto-connect{ position:absolute; z-index:9; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--accent); border:2px solid var(--on-solid); box-shadow:var(--elev-1); cursor:crosshair; pointer-events:auto; }
.gph-proto-row{ padding:var(--sp-6) 0; border-top:1px solid var(--line2); }
.gph-proto-row:first-of-type{ border-top:0; }
.gph-proto-r1{ display:flex; align-items:center; gap:var(--sp-4); }
.gph-proto-r1 select{ flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-sm); padding:var(--sp-4) var(--sp-4); }
.gph-proto-arrow{ color:var(--mut); flex:0 0 auto; }
.gph-proto-tgt{ width:100%; box-sizing:border-box; margin-top: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-sm); padding:var(--sp-4) var(--sp-6); }
.gph-proto-present{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-6); }
.gph-proto-present svg.ic{ width:15px; height:15px; }
.gph-present{ position:fixed; inset:0; z-index:calc(var(--z-modal) + 300); background:rgba(16,18,26,.96); display:flex; flex-direction:column; }
.gph-present-bar{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-10) var(--sp-16); color:var(--on-solid); }
.gph-present-name{ font-size:var(--fs-md); opacity:.85; }
.gph-present-bar button{ border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:var(--on-solid); cursor:pointer; width:32px; height:32px; border-radius:var(--radius); margin-left:var(--sp-6); display:inline-grid; place-items:center; }
.gph-present-bar button:hover{ background:rgba(255,255,255,.16); }
.gph-present-bar svg.ic{ width:16px; height:16px; }
.gph-present-stage{ flex:1; position:relative; display:grid; place-items:center; min-height:0; }
.gph-present-stage canvas{ box-shadow:var(--elev-2); border-radius:var(--radius-xs); }
.gph-present-hot{ position:absolute; }
.gph-hot{ position:absolute; cursor:pointer; border-radius:var(--radius-xs); transition:background .1s; }
.gph-hot:hover{ background:color-mix(in srgb, var(--accent) 28%, transparent); box-shadow:0 0 0 2px var(--accent); }
.gph-present-stage.gph-fade canvas{ animation:gphFade .22s ease; }
@keyframes gphFade{ from{ opacity:.3; } to{ opacity:1; } }

/* ── Inspecteur avancé : slider d'opacité + style de contour ───────────── */
.gph-opac-range{ width:100%; margin:var(--sp-8) 0 var(--sp-2); accent-color:var(--accent); }
.gph-dash-seg{ width:100%; }
.gph-dash-seg button{ flex:1; border:0; background:transparent; color:var(--txt); cursor:pointer; font:inherit; font-size:var(--fs-sm); padding:var(--sp-4) 0; border-radius:var(--radius-sm); }
.gph-dash-seg button.on{ background:var(--accent); color:var(--on-solid); }

/* ════════════════════════════════════════════════════════════════════════
   CDC_TOILE_UX V3 - panneau commentaires + édition dégradés sur toile + transitions
   ════════════════════════════════════════════════════════════════════════ */

/* ── Panneau latéral des commentaires ──────────────────────────────────── */
.gph-cpanel{ position:absolute; left:12px; top:12px; bottom:12px; width:248px; z-index:7; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--elev-2); overflow:hidden; }
.gph-cpanel-head{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-10) var(--sp-10); border-bottom:1px solid var(--line2); }
.gph-cpanel-head b{ font-size:var(--fs-md); } .gph-cpanel-n{ font-size:var(--fs-xs); color:var(--mut); background:var(--bg2); border-radius:var(--radius); padding:var(--sp-1) var(--sp-6); }
.gph-cpanel-flt{ margin-left:auto; font-size:var(--fs-xs); color:var(--mut); display:flex; align-items:center; gap:var(--sp-4); cursor:pointer; }
.gph-cpanel-flt input{ accent-color:var(--accent); }
.gph-cpanel-head [data-cpanel-close]{ border:0; background:transparent; color:var(--mut); cursor:pointer; padding:var(--sp-2); line-height:var(--lh-flat); }
.gph-cpanel-head [data-cpanel-close] svg.ic{ width:14px; height:14px; }
.gph-cpanel-list{ flex:1; overflow-y:auto; padding:var(--sp-6); }
.gph-cpanel-it{ padding:var(--sp-8) var(--sp-10); border-radius:var(--radius); cursor:pointer; }
.gph-cpanel-it:hover{ background:var(--card2); }
.gph-cpanel-it.done{ opacity:.55; }
.gph-cpanel-it-top{ display:flex; align-items:center; gap:var(--sp-6); }
.gph-cpanel-it-top b{ font-size:var(--fs-sm); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gph-cpin-mini{ width:18px; height:18px; flex:0 0 auto; display:grid; place-items:center; background:var(--accent); color:var(--on-solid); font:600 10px/1 inherit; border-radius:var(--radius) var(--radius) var(--radius) var(--radius-xs); }
.gph-cpanel-it p{ margin:var(--sp-4) 0 0; font-size:var(--fs-sm); color:var(--txt); line-height:1.4; white-space:pre-wrap; word-break:break-word; max-height:48px; overflow:hidden; }
.gph-cpanel-rep{ display:inline-block; margin-top:var(--sp-4); font-size:var(--fs-2xs); color:var(--accent); }
.gph-cpanel-empty{ padding:var(--sp-24) var(--sp-14); text-align:center; color:var(--mut); font-size:var(--fs-sm); }

/* ── Poignées de dégradé sur la toile ──────────────────────────────────── */
.gph-grad-line{ stroke:var(--on-solid); stroke-width:1.5; filter:drop-shadow(0 0 1px rgba(0,0,0,.5)); }
.gph-grad-end{ position:absolute; width:13px; height:13px; margin:-7px 0 0 -7px; z-index:9; background:var(--on-solid);
  border:2px solid var(--accent); border-radius:var(--radius-xs); cursor:grab; pointer-events:auto; box-shadow:var(--elev-1); }
.gph-grad-stop{ position:absolute; width:15px; height:15px; margin:-8px 0 0 -8px; z-index:9; border:2px solid var(--on-solid); border-radius:50%;
  cursor:pointer; pointer-events:auto; box-shadow:var(--elev-1); }
.gph-grad-stop:hover{ transform:scale(1.15); }

/* ── Transitions du mode Présenter ─────────────────────────────────────── */
@keyframes gphSlideL{ from{ transform:translateX(46px); opacity:.35; } to{ transform:none; opacity:1; } }
@keyframes gphSlideR{ from{ transform:translateX(-46px); opacity:.35; } to{ transform:none; opacity:1; } }
.gph-present-stage.gph-sl-l canvas{ animation:gphSlideL .26s cubic-bezier(.2,.7,.2,1); }
.gph-present-stage.gph-sl-r canvas{ animation:gphSlideR .26s cubic-bezier(.2,.7,.2,1); }

/* ════════════════════════════════════════════════════════════════════════
   CDC_TOILE_ILLUSTRATOR - transformer, pathfinder, nuancier, step&repeat
   ════════════════════════════════════════════════════════════════════════ */
.gph-tf-row{ display:flex; gap:var(--sp-4); }
.gph-tf-row .gph-al-btn{ flex:1; }
.gph-sr-modal .gph-sr-in{ width:90px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); padding:var(--sp-6) var(--sp-8); text-align:right; }

/* Pathfinder */
.gph-pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
.gph-pf-btn{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-6); padding:var(--sp-14) var(--sp-10); border:1px solid var(--line); background:var(--card2); color:var(--txt); cursor:pointer; border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); transition:border-color .12s,color .12s; }
.gph-pf-btn:hover{ border-color:var(--accent); color:var(--accent); }
.gph-pf-btn svg.ic{ width:22px; height:22px; }
.gph-pf-hint{ margin-top:var(--sp-12); font-size:var(--fs-xs); line-height:var(--lh-normal); color:var(--mut); }

/* B3 : bascules typographiques (petites caps / crénage / césure) */
.gph-text-feats{ display:flex; flex-wrap:wrap; gap:var(--sp-8) var(--sp-12); margin-top:var(--sp-6); }
.gph-text-feats label{ display:inline-flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-xs); color:var(--mut); cursor:pointer; }
.gph-text-feats input{ accent-color:var(--accent); }

/* Nuancier */
.gph-sw-grid{ display:flex; flex-direction:column; gap:var(--sp-6); }
.gph-sw-cell{ display:flex; align-items:center; gap:var(--sp-8); }
.gph-sw-chip{ width:26px; height:26px; flex:0 0 auto; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.gph-sw-name{ flex:1; border:1px solid transparent; background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-md); padding:var(--sp-4) var(--sp-6); border-radius:var(--radius-sm); }
.gph-sw-name:hover,.gph-sw-name:focus{ border-color:var(--line); background:var(--card2); outline:none; }
.gph-sw-cell .gph-l-btn{ opacity:.85; }
.gph-sw-add{ border:1px dashed var(--line); background:transparent; color:var(--accent); cursor:pointer; padding:var(--sp-6) var(--sp-10); border-radius:var(--radius); font:inherit; font-size:var(--fs-sm); }

/* B1 - poignées du Width tool (losanges) */
.gph-wpt{ position:absolute; width:9px; height:9px; margin:-5px 0 0 -5px; background:var(--on-solid); border:1.5px solid var(--accent); transform:rotate(45deg); z-index:8; pointer-events:none; box-shadow:var(--elev-1); }

/* B1 - régions du Shape Builder */
.gph-sb-face{ fill:transparent; stroke:var(--accent); stroke-opacity:.35; stroke-width:1; }
.gph-sb-hover{ fill:color-mix(in srgb,var(--accent) 16%, transparent); stroke:var(--accent); stroke-width:1.5; }
.gph-sb-pick{ fill:color-mix(in srgb,var(--accent) 34%, transparent); stroke:var(--accent); stroke-width:1.5; }

/* ── Panneau dégradé inline ──────────────────────────────────────────────── */
.gph-grad-panel .gph-gsl-list{ display:flex; flex-direction:column; gap:var(--sp-4); margin:var(--sp-6) 0; }
.gph-gsl-row{ display:flex; align-items:center; gap:var(--sp-4); }
.gph-gsl-swatch{ width:20px; height:20px; flex:0 0 auto; border:1.5px solid var(--line); border-radius:50%; cursor:pointer; padding:0; }
.gph-gsl-range{ flex:1; min-width:0; accent-color:var(--accent); cursor:ew-resize; }
.gph-gsl-pct{ font-size:var(--fs-2xs); color:var(--mut); width:26px; text-align:right; flex:0 0 auto; }
.gph-gangle-inp{ width:44px; }
.gph-grad-panel [data-gsadd]{ font-size:var(--fs-sm); }

/* ── Grilles de mise en page ─────────────────────────────────────────────── */
.gph-lgrid-row{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) 0; border-top:1px solid var(--line2); }
.gph-lgrid-row:first-child{ border-top:0; }
.gph-lgrid-col{ width:20px; height:20px; flex:0 0 auto; border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; padding:0; }
.gph-lgrid-type{ flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-4); }
.gph-lgrid-num{ width:38px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-4); text-align:center; }
.gph-lgrid-num::-webkit-inner-spin-button,.gph-lgrid-num::-webkit-outer-spin-button{ opacity:.6; }

/* ── Menu ajout de remplissage ───────────────────────────────────────────── */
.gph-add-menu{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--elev-2); padding:var(--sp-4); min-width:170px; }
.gph-add-menu button{ display:block; width:100%; text-align:left; padding:var(--sp-6) var(--sp-10); border:0;
  background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-md); cursor:pointer; border-radius:var(--radius-sm); }
.gph-add-menu button:hover{ background:var(--accent); color:var(--on-solid); }

/* ── Éditeur de motif (popup) ────────────────────────────────────────────── */
.gph-pat-pop{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--elev-2); padding:var(--sp-10) var(--sp-12); min-width:220px;
  display:flex; flex-direction:column; gap:var(--sp-6); }
.gph-pat-row .gph-fld{ width:100%; }
.gph-pat-colors{ display:flex; flex-direction:column; gap:var(--sp-4); }
.gph-pat-col-row{ display:flex; align-items:center; gap:var(--sp-8); font-size:var(--fs-sm); color:var(--mut); }
.gph-pat-col{ width:24px; height:24px; border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; padding:0; flex:0 0 auto; }
.gph-pat-size,.gph-pat-angle{ flex:1; accent-color:var(--accent); }
.gph-pat-sz-val,.gph-pat-ang-val{ font-size:var(--fs-2xs); color:var(--mut); width:36px; text-align:right; flex:0 0 auto; }

/* ── Modes Kids/Ado : reskin via tokens (rayons/accent hérités) ────────── */
html[data-mode="kids"] .gph-tool.on,html[data-mode="kids"] .gph-ex-seg button.on{ border-radius:var(--radius); }

}