@layer modules{
/* ════════ Studio « Édition » - bibliothèque de contenus type Finder ════════
   Réutilise les tokens de 01-tokens.css (clair/sombre/accent/densité ; modes
   Kids/Ado restent fonctionnels par cascade des tokens). 4 affichages (icônes /
   liste / galerie / colonnes macOS) + mode panneau (arbre + éditeur). */

.edition{ display:flex; flex-direction:column; gap:var(--sp-12); min-height:420px; }
.ed-loading{ color:var(--mut); font-size:var(--fs-md); padding:var(--sp-24); }

/* ── Barre d'outils ──────────────────────────────────────────────────────── */
.ed-toolbar{ display:flex; align-items:center; gap:var(--sp-12);
  padding-bottom:var(--sp-10); border-bottom:1px solid var(--line); min-height:34px; }
/* margin:0 neutralise une règle homonyme orpheline (03-layout.css .ed-acts{margin:18px…})
   qui décalait les CTAs vers le bas et cassait l'alignement vertical de la barre. */
.ed-acts{ display:flex; gap:var(--sp-8); align-items:center; flex:none; margin:0; }
/* Outils + CTAs de création regroupés à DROITE de la barre, alignés au centre. */
.ed-tools{ display:flex; gap:var(--sp-10); align-items:center; margin-left:auto; flex:none; }

.ed-btn{ display:inline-flex; align-items:center; gap:var(--sp-6); padding:var(--sp-6) var(--sp-12); font:inherit; font-size:var(--fs-md);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--txt);
  cursor:pointer; transition:.13s; white-space:nowrap; }
.ed-btn:hover{ border-color:var(--accent); background:var(--card2); }
.ed-btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-solid); }
.ed-btn.primary:hover{ filter:brightness(1.06); }
.ed-btn.sm{ padding:var(--sp-4) var(--sp-10); font-size:var(--fs-sm); }
.ed-btn .ic{ width:16px; height:16px; }

/* Fil d'Ariane */
.ed-crumb{ display:flex; align-items:center; gap:var(--sp-2); flex:1 1 220px; min-width:0; overflow:hidden;
  flex-wrap:nowrap; color:var(--mut); font-size:var(--fs-sm); }
.ed-cr{ display:inline-flex; align-items:center; gap:var(--sp-4); padding:var(--sp-2) var(--sp-8); border:0; background:none;
  color:var(--mut); font:inherit; font-size:var(--fs-sm); cursor:pointer; border-radius:var(--radius-sm); white-space:nowrap;
  max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.ed-cr:hover{ background:var(--card2); color:var(--txt); }
.ed-cr.cur{ color:var(--txt); font-weight:var(--fw-strong); cursor:default; }
.ed-cr .ic{ width:14px; height:14px; }
.ed-cr-sep{ color:var(--mut); opacity:.5; display:inline-flex; }
.ed-cr-sep .ic{ width:12px; height:12px; }

/* Bascule d'affichage + panneau */
.ed-seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.ed-vseg{ display:grid; place-items:center; width:34px; height:30px; border:0; background:none; color:var(--mut);
  cursor:pointer; transition:.12s; }
.ed-vseg:hover{ background:var(--card2); color:var(--txt); }
.ed-vseg.on{ background:var(--accent); color:var(--on-solid); }
.ed-vseg .ic{ width:16px; height:16px; }
.ed-panel-t{ border:1px solid var(--line); border-radius:var(--radius); }

/* ── Corps ───────────────────────────────────────────────────────────────── */
.ed-body{ flex:1; min-height:0; }
.ed-pane{ min-height:360px; }

/* Vide */
.ed-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-12);
  padding:var(--sp-48) var(--sp-16); color:var(--mut); text-align:center; }
.ed-empty-ic{ display:grid; place-items:center; width:64px; height:64px; border-radius:var(--radius-modal);
  background:var(--card2); color:var(--mut); }
.ed-empty-ic .ic{ width:30px; height:30px; }
.ed-empty p{ margin:0; font-size:var(--fs-md); }
.ed-empty-acts{ display:flex; gap:var(--sp-8); }

/* ── Affichage ICÔNES ────────────────────────────────────────────────────── */
.ed-icons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:var(--sp-8); padding:var(--sp-6) var(--sp-2); }
.ed-tile{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-8); padding:var(--sp-14) var(--sp-8); text-align:center;
  border:1px solid transparent; border-radius:var(--radius); background:none; color:var(--txt); font:inherit; cursor:pointer;
  transition:.12s; }
.ed-tile:hover{ background:var(--card2); }
.ed-tile.sel{ background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:var(--accent); }
.ed-tile-ic{ position:relative; display:grid; place-items:center; width:62px; height:62px; border-radius:var(--radius-modal);
  background:var(--card2); color:var(--accent); border:1px solid var(--line); overflow:hidden; }
.ed-tile-ic.folder{ color:var(--mut); background:linear-gradient(180deg,var(--card),var(--card2)); }
.ed-tile-ic .ic{ width:30px; height:30px; }
.ed-tile-ic.has-thumb{ background:var(--card); border-color:var(--line); padding:0; }
.ed-tile-n{ font-size:var(--fs-sm); line-height:1.3; word-break:break-word; max-width:108px; }

/* Thumbnail commun */
.ed-th{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.ed-gal-prev.has-thumb{ background:var(--card); padding:0; color:transparent; overflow:hidden; }
.ed-gal-prev.has-thumb .ed-th{ border-radius:var(--radius-modal); }
.ed-chip-ic.has-thumb{ background:var(--card); padding:0; color:transparent; overflow:hidden; }
.ed-chip-ic.has-thumb .ed-th{ border-radius:var(--radius); }

/* ── Affichage LISTE ─────────────────────────────────────────────────────── */
.ed-list{ display:flex; flex-direction:column; }
.ed-row{ display:grid; grid-template-columns:30px 1fr auto auto; align-items:center; gap:var(--sp-12);
  padding:var(--sp-8) var(--sp-10); border-radius:var(--radius); cursor:pointer; transition:.1s; }
.ed-row:hover{ background:var(--card2); }
.ed-row.sel{ background:color-mix(in srgb,var(--accent) 16%,transparent); }
.ed-row-ic{ display:grid; place-items:center; color:var(--accent); }
.ed-row-ic.folder{ color:var(--mut); }
.ed-row-ic .ic{ width:18px; height:18px; }
.ed-row.has-row-thumb{ grid-template-columns:46px 1fr auto auto; }
.ed-row-ic.has-thumb{ width:44px; height:30px; border-radius:var(--radius-sm); overflow:hidden; padding:0; background:var(--card); }
.ed-row-ic.has-thumb .ed-th{ border-radius:var(--radius-sm); }
.ed-row-n{ font-size:var(--fs-md); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:var(--sp-6); }
.ed-row-k,.ed-row-d{ font-size:var(--fs-sm); color:var(--mut); white-space:nowrap; }

/* ── Affichage GALERIE (aperçu + bande scroll-x) ─────────────────────────── */
.ed-gallery{ display:flex; flex-direction:column; gap:var(--sp-12); }
.ed-gal-stage{ display:flex; align-items:center; gap:var(--sp-20); padding:var(--sp-24); border:1px solid var(--line);
  border-radius:var(--radius); background:linear-gradient(180deg,var(--card),var(--card2)); min-height:220px; cursor:default; }
.ed-gal-prev{ flex:none; display:grid; place-items:center; width:170px; height:170px; border-radius:var(--radius-modal);
  background:var(--card2); color:var(--accent); border:1px solid var(--line); position:relative; }
.ed-gal-prev.folder{ color:var(--mut); }
.ed-gal-prev .ic{ width:78px; height:78px; }
.ed-gal-meta{ display:flex; flex-direction:column; gap:var(--sp-6); align-items:flex-start; }
.ed-gal-meta b{ font-size:var(--fs-lg); }
.ed-gal-meta span{ font-size:var(--fs-sm); color:var(--mut); }
.ed-gal-meta .ed-btn{ margin-top:var(--sp-6); }
.ed-strip{ display:flex; gap:var(--sp-8); overflow-x:auto; padding:var(--sp-8) var(--sp-2) var(--sp-12); scroll-snap-type:x proximity; }
.ed-chip{ flex:none; width:92px; display:flex; flex-direction:column; align-items:center; gap:var(--sp-6); padding:var(--sp-8) var(--sp-6);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--txt); font:inherit; cursor:pointer;
  scroll-snap-align:start; transition:.12s; }
.ed-chip:hover{ border-color:var(--accent); }
.ed-chip.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.ed-chip-ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius); background:var(--card2);
  color:var(--accent); }
.ed-chip-ic.folder{ color:var(--mut); }
.ed-chip-ic .ic{ width:22px; height:22px; }
.ed-chip-n{ font-size:var(--fs-xs); line-height:1.25; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Affichage COLONNES (macOS) ──────────────────────────────────────────── */
.ed-cols{ display:flex; gap:0; overflow-x:auto; min-height:360px; border:1px solid var(--line); border-radius:var(--radius); }
.ed-col{ flex:none; width:230px; border-right:1px solid var(--line); padding:var(--sp-6); overflow-y:auto; max-height:540px; }
.ed-col:last-child{ border-right:0; }
.ed-col-row{ display:flex; align-items:center; gap:var(--sp-8); width:100%; padding:var(--sp-6) var(--sp-8); border:0; border-radius:var(--radius);
  background:none; color:var(--txt); font:inherit; font-size:var(--fs-md); cursor:pointer; text-align:left; transition:.1s; }
.ed-col-row:hover{ background:var(--card2); }
.ed-col-row.on{ background:var(--accent); color:var(--on-solid); }
.ed-col-row.on .ed-col-ic{ color:var(--on-solid); }
.ed-col-ic{ display:grid; place-items:center; color:var(--accent); flex:none; }
.ed-col-ic.folder{ color:var(--mut); }
.ed-col-ic .ic{ width:17px; height:17px; }
.ed-col-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:var(--sp-6); }
.ed-col-ch{ display:inline-flex; color:var(--mut); opacity:.7; }
.ed-col-row.on .ed-col-ch{ color:var(--on-solid); opacity:.9; }
.ed-col-ch .ic{ width:13px; height:13px; }
.ed-col-empty{ color:var(--mut); font-size:var(--fs-sm); padding:var(--sp-10); }
.ed-col-prev{ width:260px; display:flex; flex-direction:column; align-items:center; gap:var(--sp-14); padding:var(--sp-24) var(--sp-16); }
.ed-col-prev .ed-gal-prev{ width:140px; height:140px; }
.ed-col-prev .ed-gal-prev .ic{ width:64px; height:64px; }
.ed-prev-meta{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-6); text-align:center; }
.ed-prev-meta b{ font-size:var(--fs-base); }
.ed-prev-meta span{ font-size:var(--fs-sm); color:var(--mut); }

/* ── Mode PANNEAU (arbre + contenu/éditeur) ──────────────────────────────── */
.ed-split{ display:grid; grid-template-columns:230px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; min-height:360px; }
.ed-tree{ border-right:1px solid var(--line); padding:var(--sp-8); overflow-y:auto; max-height:600px; background:var(--card); display:flex; flex-direction:column; gap:var(--sp-1); }
/* Nœud d'arbre : hauteur de ligne cohérente (corrige les items Bibliothèque écrasés). */
.ed-tnode{ display:flex; align-items:center; gap:var(--sp-8); width:100%; box-sizing:border-box; min-height:30px; padding:var(--sp-6) var(--sp-8); padding-left:calc(8px + var(--d,0)*14px);
  border:0; border-radius:var(--radius); background:none; color:var(--txt); font:inherit; font-size:var(--fs-sm); line-height:1.3; cursor:pointer;
  text-align:left; transition:.1s; white-space:nowrap; overflow:hidden; flex:0 0 auto; }
.ed-tnode:hover{ background:var(--card2); }
.ed-tnode.on{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--txt); font-weight:var(--fw-strong); }
.ed-tnode .ic{ width:15px; height:15px; color:var(--mut); flex:none; }
.ed-split .ed-pane{ padding:var(--sp-10); overflow-y:auto; max-height:600px; }

/* ── Hôte d'éditeur ──────────────────────────────────────────────────────── */
.ed-editor{ display:flex; flex-direction:column; min-height:360px; }
.ed-editor.solo{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
/* Éditeur plein cadre (« met juste l'éditeur ») : pas de chrome autour, l'éditeur
   embarqué porte sa propre bordure ; on remplit la hauteur disponible. */
.ed-editor.full{ display:flex; flex-direction:column; min-height:600px; }
.ed-editor.full .ed-editor-host{ padding:0; flex:1; min-height:0; }
.ed-back{ display:inline-flex; align-items:center; gap:var(--sp-6); align-self:flex-start; margin:var(--sp-10); padding:var(--sp-6) var(--sp-10);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--txt); font:inherit; font-size:var(--fs-sm);
  cursor:pointer; }
.ed-back:hover{ border-color:var(--accent); }
.ed-back .ic{ width:14px; height:14px; }
.ed-editor-host{ flex:1; min-height:0; padding:0 var(--sp-12) var(--sp-12); }
.ed-split .ed-editor-host{ padding:var(--sp-14); }
.ed-soon{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-10); padding:var(--sp-48) var(--sp-16);
  color:var(--mut); text-align:center; }
.ed-soon-ic{ display:grid; place-items:center; width:60px; height:60px; border-radius:var(--radius-modal); background:var(--card2);
  color:var(--accent); }
.ed-soon-ic .ic{ width:28px; height:28px; }
.ed-soon b{ color:var(--txt); font-size:var(--fs-base); }
.ed-soon p{ margin:0; font-size:var(--fs-md); }

/* Badge alias (copie liée) */
.ed-alias{ display:inline-flex; align-items:center; justify-content:center; color:var(--accent); }
.ed-alias .ic{ width:13px; height:13px; }
.ed-tile-ic .ed-alias,.ed-gal-prev .ed-alias{ position:absolute; right:-4px; bottom:-4px; width:22px; height:22px;
  border-radius:50%; background:var(--card); border:1px solid var(--line); }
.ed-tile-ic .ed-alias .ic,.ed-gal-prev .ed-alias .ic{ width:12px; height:12px; }

@media (max-width:720px){
  .ed-split{ grid-template-columns:1fr; }
  .ed-tree{ border-right:0; border-bottom:1px solid var(--line); max-height:200px; }
  .ed-gal-stage{ flex-direction:column; text-align:center; }
  .ed-gal-meta{ align-items:center; }
}

/* ════════ Éditeurs par-document (texte / tableur / slides / image / audio) ════════ */

/* - Texte - */
.etx{ display:flex; flex-direction:column; gap:var(--sp-10); height:100%; }
.etx-bar{ display:flex; align-items:center; gap:var(--sp-12); }
.etx-stat{ color:var(--mut); font-size:var(--fs-sm); }
.etx-modes{ margin-left:auto; display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.etx-mode{ border:0; background:none; color:var(--mut); font:inherit; font-size:var(--fs-sm); padding:var(--sp-4) var(--sp-10); cursor:pointer; }
.etx-mode:hover{ background:var(--card2); color:var(--txt); }
.etx-mode.on{ background:var(--accent); color:var(--on-solid); }
.etx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); min-height:340px; }
.etx-grid[data-m="write"]{ grid-template-columns:1fr; }
.etx-grid[data-m="write"] .etx-prev{ display:none; }
.etx-grid[data-m="read"]{ grid-template-columns:1fr; }
.etx-grid[data-m="read"] .etx-area{ display:none; }
.etx-area{ width:100%; min-height:340px; resize:vertical; padding:var(--sp-14); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); color:var(--txt); font:13px/1.6 ui-monospace,Menlo,monospace; }
.etx-prev{ padding:var(--sp-6) var(--sp-16); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   Tableur Excel-level - .esh-* namespace  (refonte UI v2)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Host / Layout ──────────────────────────────────────────────────────── */
.esh-host{ display:flex; flex-direction:column; height:100%; min-height:520px; overflow:hidden; background:var(--bg); font-size:var(--fs-md); }
.esh-host:fullscreen{ width:100vw; height:100vh; min-height:0; }
.esh-host:-webkit-full-screen{ width:100vw; height:100vh; min-height:0; }
.esh-toolbar-container{ flex:none; background:var(--card2); border-bottom:2px solid var(--line); }
.esh-tb-btn svg.ic{ width:14px; height:14px; }
.esh-action-btn svg.ic{ width:13px; height:13px; }
.esh-main-wrap{ flex:1; display:flex; position:relative; overflow:hidden; min-height:0; }
.esh-grid-container{ flex:1; position:relative; overflow:hidden; min-height:0; }

/* ── Footer (onglets + barre statut) ────────────────────────────────────── */
.esh-footer{ flex:none; display:flex; flex-direction:column; }

/* ── Toolbars ────────────────────────────────────────────────────────────── */
.esh-toolbar{ display:flex; align-items:center; gap:var(--sp-1); padding:var(--sp-2) var(--sp-8); min-height:36px; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
.esh-toolbar::-webkit-scrollbar{ display:none; }
.esh-toolbar-formula{ border-bottom:1px solid var(--line2); min-height:34px; gap:var(--sp-4); padding:var(--sp-2) var(--sp-10); }
.esh-toolbar-fmt{ min-height:36px; }
.esh-toolbar-actions{ border-top:1px solid var(--line2); min-height:28px; padding:var(--sp-2) var(--sp-8); background:var(--bg); gap:var(--sp-2); }
.esh-toolbar-minimal{ gap:var(--sp-6); padding:var(--sp-6) var(--sp-10); }

.esh-tb-sep{ width:1px; height:20px; background:var(--line); margin:0 var(--sp-4); flex:none; }
.esh-tb-spacer{ flex:1; }
.esh-tb-group{ display:flex; align-items:center; gap:var(--sp-1); }

.esh-tb-btn{ background:none; border:1px solid transparent; border-radius:var(--radius-sm); padding:0 var(--sp-6); min-width:28px; height:28px; font-size:var(--fs-md); color:var(--txt); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-4); transition:background .1s,border-color .1s; white-space:nowrap; flex:none; line-height:var(--lh-flat); font:inherit; }
.esh-tb-btn:hover{ background:color-mix(in srgb,var(--txt) 9%,transparent); border-color:var(--line); }
.esh-tb-btn:active{ background:color-mix(in srgb,var(--accent) 18%,transparent); }
.esh-tb-btn.esh-active{ background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:color-mix(in srgb,var(--accent) 50%,transparent); color:var(--accent); }

.esh-tb-select{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--txt); font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-4); height:28px; cursor:pointer; outline:none; font:inherit; }
.esh-tb-select:focus{ border-color:var(--accent); }
.esh-tb-select:hover{ border-color:color-mix(in srgb,var(--txt) 40%,transparent); }

/* ── Name box + barre formule ───────────────────────────────────────────── */
.esh-name-box-wrap{ flex:none; width:80px; }
.esh-name-box{ width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--txt); font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-6); height:28px; text-align:center; font-family:var(--font-mono); outline:none; box-sizing:border-box; }
.esh-name-box:focus{ border-color:var(--accent); box-shadow:var(--focus); }

.esh-fx-btn{ font-style:italic; font-weight:var(--fw-bold); font-size:var(--fs-base); color:var(--accent); letter-spacing:-.5px; min-width:28px; }
.esh-formula-bar-wrap{ flex:1; min-width:0; position:relative; }
.esh-formula-bar{ width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--txt); font-size:var(--fs-md); padding:var(--sp-2) var(--sp-10); height:28px; font-family:var(--font-mono); box-sizing:border-box; outline:none; transition:border-color .1s,box-shadow .1s; }
.esh-formula-bar:focus{ border-color:var(--accent); box-shadow:var(--focus); }
.esh-formula-bar-container{ flex:1; position:relative; }

/* Indicateur couleur sous le glyph du bouton ─────────────────────────────── */
.esh-ci-wrap{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); }
.esh-ci-glyph{ font-size:var(--fs-md); font-weight:var(--fw-bold); line-height:1.1; }
.esh-ci-bar{ display:block; width:14px; height:3px; border-radius:var(--radius-xs); }

/* ── Barre d'actions secondaires ────────────────────────────────────────── */
.esh-action-btn{ background:none; border:1px solid transparent; border-radius:var(--radius-sm); padding:var(--sp-1) var(--sp-8); height:24px; font-size:var(--fs-xs); color:var(--mut); cursor:pointer; display:inline-flex; align-items:center; gap:var(--sp-4); white-space:nowrap; transition:background .1s,color .1s,border-color .1s; font:inherit; font-size:var(--fs-xs); }
.esh-action-btn:hover{ background:color-mix(in srgb,var(--txt) 7%,transparent); color:var(--txt); border-color:var(--line); }
.esh-action-btn label{ cursor:pointer; }

/* ── Autocomplete ────────────────────────────────────────────────────────── */
.esh-autocomplete{ position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--elev-2); z-index:200; max-height:210px; overflow-y:auto; }
.esh-ac-item{ padding:var(--sp-4) var(--sp-10); cursor:pointer; font-size:var(--fs-sm); display:flex; gap:var(--sp-10); align-items:baseline; }
.esh-ac-item:hover,.esh-ac-active{ background:color-mix(in srgb,var(--accent) 10%,transparent); }
.esh-ac-name{ font-weight:var(--fw-strong); color:var(--accent); font-family:var(--font-mono); min-width:90px; }
.esh-ac-sig{ color:var(--mut); font-size:var(--fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.esh-sig-tip{ position:absolute; top:calc(100% + 4px); left:0; background:var(--card2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-4) var(--sp-10); font-size:var(--fs-sm); white-space:nowrap; z-index:201; box-shadow:var(--elev-1); pointer-events:none; color:var(--mut); }

/* ── Onglets feuilles (bas de grille, style Excel) ──────────────────────── */
.esh-tabs-bar{ display:flex; align-items:stretch; background:var(--card2); border-top:1px solid var(--line); padding-left:var(--sp-4); overflow-x:auto; scrollbar-width:none; min-height:32px; max-height:32px; }
.esh-tabs-bar::-webkit-scrollbar{ display:none; }
.esh-tab{ display:flex; align-items:center; gap:var(--sp-4); padding:0 var(--sp-12); border-right:1px solid var(--line); font-size:var(--fs-sm); cursor:pointer; color:var(--mut); background:transparent; white-space:nowrap; position:relative; border-top:3px solid transparent; transition:color .12s,background .12s; user-select:none; min-width:60px; }
.esh-tab:hover{ color:var(--txt); background:color-mix(in srgb,var(--txt) 5%,transparent); }
.esh-tab-active{ color:var(--txt) !important; background:var(--bg) !important; border-top-color:var(--accent) !important; font-weight:var(--fw-medium); }
.esh-tab-label{ max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.esh-tab-del{ background:none; border:none; color:var(--mut); cursor:pointer; font-size:var(--fs-base); padding:0; line-height:var(--lh-flat); opacity:0; transition:opacity .12s; }
.esh-tab:hover .esh-tab-del,.esh-tab-active .esh-tab-del{ opacity:.45; }
.esh-tab-del:hover{ opacity:1 !important; color:#e53935; }
.esh-tab-add{ background:none; border:none; color:var(--mut); cursor:pointer; font-size:var(--fs-lg); padding:0 var(--sp-10); display:flex; align-items:center; transition:color .12s; line-height:var(--lh-flat); }
.esh-tab-add:hover{ color:var(--accent); }
.esh-tab-color{ display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; }
.esh-tab-btn{ background:none; border:none; color:var(--mut); cursor:pointer; padding:var(--sp-4) var(--sp-6); font-size:var(--fs-md); }

/* ── Grille ──────────────────────────────────────────────────────────────── */
.esh-grid-host{ position:absolute; inset:0; overflow:hidden; }
.esh-grid-wrap{ position:relative; width:100%; height:100%; }
.esh-scroller{ position:absolute; inset:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.esh-scroller::-webkit-scrollbar{ width:8px; height:8px; }
.esh-scroller::-webkit-scrollbar-thumb{ background:var(--line); border-radius:var(--radius-xs); }
.esh-sizer{ position:absolute; top:0; left:0; pointer-events:none; }
.esh-tile{ position:absolute; top:0; left:0; }
.esh-canvas{ position:absolute; top:0; left:0; pointer-events:none; z-index:10; }
.esh-row{ display:flex; align-items:stretch; }
.esh-hdr-row{ position:sticky; top:0; z-index:5; }

.esh-cell{ border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); font-size:var(--fs-md); padding:0 var(--sp-6); display:flex; align-items:center; overflow:hidden; white-space:nowrap; cursor:cell; box-sizing:border-box; color:var(--txt); flex:none; background:var(--card); }
.esh-col-hdr{ font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--mut); background:var(--card2); justify-content:center; cursor:col-resize; user-select:none; position:sticky; top:0; border-right-color:var(--line); border-bottom:2px solid var(--line); letter-spacing:.3px; }
.esh-col-hdr:hover{ background:color-mix(in srgb,var(--accent) 8%,var(--card2)); color:var(--txt); }
.esh-row-hdr{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--mut); background:var(--card2); justify-content:center; width:38px; min-width:38px; cursor:row-resize; user-select:none; position:sticky; left:0; z-index:4; border-right:1px solid var(--line); border-bottom-color:var(--line2); }
.esh-corner{ background:var(--card2); width:38px; min-width:38px; position:sticky; left:0; top:0; z-index:6; border-right:1px solid var(--line); border-bottom:2px solid var(--line); cursor:pointer; transition:background .1s; }
.esh-corner:hover{ background:color-mix(in srgb,var(--accent) 10%,var(--card2)); }

/* État sélection */
.esh-selected{ background:color-mix(in srgb,var(--info) 11%,var(--card)) !important; }
.esh-active{ outline:2px solid var(--info); outline-offset:-2px; z-index:2; position:relative; }
.esh-hdr-sel{ background:color-mix(in srgb,var(--info) 22%,var(--card2)) !important; color:var(--txt) !important; font-weight:var(--fw-bold)!important; }
.esh-data-cell:hover{ background:color-mix(in srgb,var(--accent) 5%,var(--card)); }

/* ── Éditeur inline ──────────────────────────────────────────────────────── */
.esh-inline-editor{ position:absolute; border:none; outline:2px solid var(--info); outline-offset:-2px; font:13px/1 inherit; background:var(--card); color:var(--txt); padding:0 var(--sp-6); z-index:20; box-shadow:var(--elev-2); min-width:60px; box-sizing:border-box; }

/* ── Barre de statut ─────────────────────────────────────────────────────── */
.esh-status-bar{ display:flex; align-items:center; padding:0 var(--sp-10); background:var(--card2); font-size:var(--fs-xs); color:var(--mut); min-height:24px; max-height:24px; border-top:1px solid var(--line); gap:0; }
.esh-sb-spacer{ flex:1; }
.esh-sb-sep{ width:1px; height:12px; background:var(--line); margin:0 var(--sp-8); }
.esh-sb-stat{ padding:0 var(--sp-4); cursor:default; }
.esh-sb-stat:hover{ color:var(--txt); }
.esh-sb-mode{ color:var(--mut); letter-spacing:.2px; }
.esh-sb-perf{ color:var(--mut2); font-size:var(--fs-xs); padding-left:var(--sp-8); }

/* ── Context menu ────────────────────────────────────────────────────────── */
.esh-ctx-menu{ position:fixed; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--elev-2); z-index:calc(var(--z-modal) + 2); min-width:160px; padding:var(--sp-4) 0; }
.esh-ctx-item{ padding:var(--sp-6) var(--sp-14); font-size:var(--fs-md); cursor:pointer; color:var(--txt); }
.esh-ctx-item:hover{ background:color-mix(in srgb,var(--accent) 10%,transparent); }
.esh-ctx-sep{ height:1px; background:var(--line); margin:var(--sp-2) 0; }

/* ── Dialog ──────────────────────────────────────────────────────────────── */
.esh-dialog{ position:fixed; top:80px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--elev-2); z-index:var(--z-modal); min-width:320px; max-width:90vw; max-height:90vh; overflow-y:auto; }
.esh-dlg-header{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-10) var(--sp-14); border-bottom:1px solid var(--line); font-weight:var(--fw-strong); font-size:var(--fs-base); cursor:move; background:var(--card2); border-radius:var(--radius) var(--radius) 0 0; }
.esh-dlg-close{ background:none; border:none; color:var(--mut); cursor:pointer; font-size:var(--fs-base); }
.esh-dlg-body{ padding:var(--sp-14); display:flex; flex-direction:column; gap:var(--sp-10); }
.esh-dlg-row{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; font-size:var(--fs-md); }
.esh-dlg-row label{ color:var(--mut); min-width:80px; flex:none; }
.esh-dlg-input{ flex:1; min-width:120px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--txt); padding:var(--sp-4) var(--sp-8); font-size:var(--fs-md); font:inherit; }
.esh-dlg-textarea{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--txt); padding:var(--sp-6) var(--sp-8); font:inherit; font-size:var(--fs-md); }
.esh-dlg-section{ font-weight:var(--fw-strong); font-size:var(--fs-sm); color:var(--mut); margin-top:var(--sp-4); }
.esh-dlg-list{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
.esh-dlg-item{ padding:var(--sp-6) var(--sp-10); cursor:pointer; font-size:var(--fs-md); display:flex; align-items:center; gap:var(--sp-6); }
.esh-dlg-item:hover,.esh-dlg-item-active{ background:color-mix(in srgb,var(--accent) 10%,transparent); }
.esh-dlg-footer{ display:flex; gap:var(--sp-8); margin-top:var(--sp-6); }
.esh-dlg-ok,.esh-dlg-cancel,.esh-dlg-del,.esh-dlg-del-nr{ padding:var(--sp-6) var(--sp-14); border-radius:var(--radius-sm); border:1px solid var(--line); cursor:pointer; font:inherit; font-size:var(--fs-md); background:var(--card2); color:var(--txt); }
.esh-dlg-ok{ background:var(--accent); color:var(--on-solid); border-color:var(--accent); }
.esh-dlg-del{ background:var(--red,#e53935); color:var(--on-solid); border-color:var(--red,#e53935); }
.esh-dlg-tabs{ display:flex; gap:var(--sp-2); border-bottom:1px solid var(--line); margin-bottom:var(--sp-8); }
.esh-dlg-tab{ background:none; border:none; border-bottom:2px solid transparent; padding:var(--sp-6) var(--sp-12); font:inherit; font-size:var(--fs-sm); cursor:pointer; color:var(--mut); }
.esh-dlg-tab-active{ border-bottom-color:var(--accent); color:var(--txt); font-weight:var(--fw-strong); }

/* ── Color picker ────────────────────────────────────────────────────────── */
.esh-color-picker-pop{ position:fixed; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--elev-2); z-index:calc(var(--z-modal) + 1); padding:var(--sp-10); }
.esh-cp-swatches{ display:grid; grid-template-columns:repeat(8,20px); gap:var(--sp-2); }
.esh-cp-swatch{ width:20px; height:20px; border-radius:var(--radius-xs); cursor:pointer; border:1px solid transparent; }
.esh-cp-swatch:hover{ border-color:var(--txt); transform:scale(1.1); }
.esh-cp-custom{ margin-top:var(--sp-8); font-size:var(--fs-sm); }

/* ── CF icon ─────────────────────────────────────────────────────────────── */
.esh-cf-icon{ font-size:var(--fs-sm); margin-right:var(--sp-2); }

/* ── Charts overlay ──────────────────────────────────────────────────────── */
.esh-charts-overlay{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.esh-chart-wrap{ position:absolute; pointer-events:all; cursor:grab; }
.esh-chart-wrap:hover{ box-shadow:var(--elev-1); border-radius:var(--radius-sm); }

/* ── CF Manager dialog ───────────────────────────────────────────────────── */
.esh-cf-dialog{ min-width:480px; }
.esh-cf-rule{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-10); border-bottom:1px solid var(--line); font-size:var(--fs-md); }
.esh-cf-rule-preview{ width:32px; height:20px; border:1px solid var(--line); border-radius:var(--radius-xs); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); flex:none; }
.esh-cf-style-row{ background:color-mix(in srgb,var(--accent) 5%,transparent); border-radius:var(--radius-sm); padding:var(--sp-6); }

/* ── Backward compat stubs ──────────────────────────────────────────────── */
.esh{ display:flex; flex-direction:column; gap:var(--sp-10); }
.esh-bar{ display:flex; gap:var(--sp-8); flex-wrap:wrap; }
.esh-scroll{ overflow:auto; max-height:520px; border:1px solid var(--line); border-radius:var(--radius); }
.esh-tbl{ border-collapse:collapse; font-size:var(--fs-md); }
.esh-tbl th{ background:var(--card2); color:var(--mut); font-weight:var(--fw-strong); font-size:var(--fs-xs); padding:var(--sp-4) var(--sp-8); position:sticky; top:0; border:1px solid var(--line); text-align:center; z-index:1; }
.esh-corner-old{ position:sticky; left:0; z-index:3; }
.esh-tbl td{ border:1px solid var(--line); padding:0; }
.esh-tbl input{ width:120px; border:0; background:none; color:var(--txt); font:inherit; font-size:var(--fs-md); padding:var(--sp-4) var(--sp-8); }
.esh-tbl input:focus{ outline:2px solid var(--accent); outline-offset:-2px; background:var(--card); }

/* - Présentation - */
.esl{ display:grid; grid-template-columns:200px 1fr; gap:var(--sp-14); min-height:360px; }
.esl-rail{ display:flex; flex-direction:column; gap:var(--sp-8); }
.esl-thumbs{ display:flex; flex-direction:column; gap:var(--sp-6); overflow-y:auto; max-height:440px; }
.esl-thumb{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-8); border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--bg) 70%,#000));
  color:var(--on-solid); font:inherit; cursor:pointer; text-align:left; transition:.12s; }
.esl-thumb.on{ outline:2px solid var(--ac,#22d3ee); }
.esl-thumb-n{ font-size:var(--fs-xs); opacity:.7; flex:none; }
.esl-thumb-t{ font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.esl-rail-acts{ display:flex; flex-direction:column; gap:var(--sp-6); }
.esl-edit{ display:flex; flex-direction:column; gap:var(--sp-12); }
.esl-stage{ border-radius:var(--radius); padding:var(--sp-36); min-height:230px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--ac,#22d3ee) 22%,var(--bg)),var(--bg)); color:var(--on-solid); }
.esl-prev{ text-align:center; max-width:680px; }
.esl-prev h2{ margin:0 0 var(--sp-8); font-size:var(--fs-2xl); }
.esl-prev h3{ margin:0 0 var(--sp-10); font-weight:var(--fw-medium); opacity:.85; font-size:var(--fs-base); }
.esl-body{ font-size:var(--fs-base); opacity:.92; text-align:left; }
.esl-fields{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-10); }
.esl-fields label{ display:flex; flex-direction:column; gap:var(--sp-4); font-size:var(--fs-sm); color:var(--mut); }
.esl-fields label.full{ grid-column:1/-1; }
.esl-fields input,.esl-fields textarea{ padding:var(--sp-8) var(--sp-10); border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--txt); font:inherit; font-size:var(--fs-md); }
.esl-row{ grid-column:1/-1; display:flex; gap:var(--sp-8); }
.esl-present-ov{ position:fixed; inset:0; z-index:calc(var(--z-modal) + 3); display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--ac,#22d3ee) 22%,var(--bg)),var(--bg)); color:var(--on-solid); cursor:pointer; }
.esl-present-slide{ text-align:center; max-width:900px; padding:var(--sp-40); }
.esl-present-slide h1{ font-size:var(--fs-4xl); margin:0 0 var(--sp-16); }
.esl-present-slide h2{ font-size:var(--fs-xl); font-weight:var(--fw-medium); opacity:.85; }
.esl-present-nav{ position:fixed; bottom:18px; right:18px; display:flex; align-items:center; gap:var(--sp-14); font-size:var(--fs-md); opacity:.85; }
.esl-present-nav button{ background:rgba(255,255,255,.15); border:0; color:var(--on-solid); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:var(--fs-base); }

/* (L'éditeur d'Image = la Toile vectorielle, cf. assets/js/graph/. L'ancien retoucheur
   raster .eim-* a été retiré avec 55-edition-image.js.) */

/* - Audio - */
.eau{ display:flex; flex-direction:column; gap:var(--sp-12); }
.eau-bar{ display:flex; gap:var(--sp-8); align-items:center; flex-wrap:wrap; }
.eau-info{ color:var(--mut); font-size:var(--fs-sm); }
.eau-wave-wrap{ position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-8); }
.eau-wave-wrap canvas{ width:100%; height:120px; display:block; }
.eau-mk{ position:absolute; top:8px; bottom:8px; width:2px; background:var(--accent); pointer-events:none; }
.eau-mk.in{ box-shadow:-3px 0 0 color-mix(in srgb,var(--accent) 40%,transparent); }
.eau-mk.out{ box-shadow:3px 0 0 color-mix(in srgb,var(--accent) 40%,transparent); }
.eau-play-h{ position:absolute; top:8px; bottom:8px; width:1px; background:var(--txt); opacity:.6; pointer-events:none; left:0; }
.eau-marks{ display:flex; gap:var(--sp-8); flex-wrap:wrap; }
.eau-drop{ color:var(--mut); font-size:var(--fs-md); padding:var(--sp-24); }

/* ── Edition Hub (onglet Edition = hub d'outils) ─────────────────────────── */
.ed-hub{ padding:var(--sp-32); max-width:860px; margin:0 auto; }
.ed-hub-head{ margin-bottom:var(--sp-28); }
.ed-hub-head2{ margin-top:var(--sp-32); }
.ed-hub-title{ font-size:var(--fs-lg); font-weight:var(--fw-strong); color:var(--txt); margin-bottom:var(--sp-6); }
.ed-hub-sub{ font-size:var(--fs-md); color:var(--mut); }
.ed-hub-link{ background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font-size:inherit; text-decoration:underline; }
.ed-hub-link:hover{ opacity:.8; }
.ed-hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--sp-12); }
.ed-hub-card{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-6); padding:var(--sp-18) var(--sp-16);
  border:1.5px solid var(--border); border-radius:var(--rad,8px); background:var(--surface,var(--bg));
  cursor:pointer; text-align:left; transition:border-color .15s,box-shadow .15s; }
.ed-hub-card:hover{ border-color:var(--accent); box-shadow:var(--elev-1); }
.ed-hub-ic{ display:flex; align-items:center; color:var(--accent); width:24px; height:24px; }
.ed-hub-lbl{ font-size:var(--fs-base); font-weight:var(--fw-strong); color:var(--txt); }
.ed-hub-desc{ font-size:var(--fs-sm); color:var(--mut); line-height:1.4; }

/* ── Éditeur de code enrichi (55-edition-code.js) ─────────────────────── */
.eck-root{ height:100%; display:flex; flex-direction:column; overflow:hidden; }
.eck-bar{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-10);
  border-bottom:1px solid var(--line); background:var(--card2); flex-shrink:0; }
.eck-lang-sel{ font-size:var(--fs-xs); background:var(--card); border:1px solid var(--line);
  color:var(--txt); border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-6); cursor:pointer; }
.eck-stat{ color:var(--warn); font-weight:var(--fw-bold); font-size:var(--fs-base); line-height:var(--lh-flat); }
.eck-wrap{ flex:1; min-height:0; }
.eck-foot{ flex-shrink:0; }
.eck-lang-name{ }
.eck-pos{ }
/* stub textarea (désactivé dès que 55-edition-code.js est chargé) */
.ed-code-wrap{ height:100%; display:flex; flex-direction:column; }
.ed-code-ta{ flex:1; padding:var(--sp-16); font-family:var(--font-mono); font-size:var(--fs-md); line-height:var(--lh-loose);
  background:var(--surface-deep,var(--surface,var(--bg))); color:var(--txt);
  border:none; outline:none; resize:none; width:100%; box-sizing:border-box; }
.ed-placeholder{ color:var(--mut); font-size:var(--fs-md); padding:var(--sp-24); }

/* ══════════════════════════════════════════════════════════════
   DAW v2 - Ableton-level  (.daw2-*)
   Thème sombre propre : tokens --d2-* définis sur .daw2
   ══════════════════════════════════════════════════════════════ */
.daw2{
  --d2-bg:#141414; --d2-card:#1c1c1c; --d2-card2:#222; --d2-border:#2b2b2b;
  --d2-text:#d0d0d0; --d2-mut:#666; --d2-acc:#00C95E; --d2-rec:#e63946;
  --d2-warn:#FFD600; --d2-r:5px;
  display:flex; flex-direction:column; height:100%; min-height:600px;
  background:var(--d2-bg); color:var(--d2-text); font:13px/1.4 system-ui,sans-serif;
  position:relative; overflow:hidden;
}

/* ── Transport ── */
.daw2-transport{
  display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-10);
  background:var(--d2-card); border-bottom:1px solid var(--d2-border);
  flex:none; flex-wrap:wrap; min-height:52px;
}
.daw2-tr-l,.daw2-tr-c,.daw2-tr-r{ display:flex; align-items:center; gap:var(--sp-6); }
.daw2-tr-c{ flex:1; justify-content:center; }
.daw2-tr-r{ margin-left:auto; }
.daw2-tb{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--d2-r); border:1px solid var(--d2-border);
  background:var(--d2-card2); color:var(--d2-text); cursor:pointer; font-size:var(--fs-md);
  transition:.12s; flex:none;
}
.daw2-tb:hover{ border-color:var(--d2-acc); color:var(--d2-acc); }
.daw2-tb.playing{ background:var(--d2-acc); border-color:var(--d2-acc); color:#000; }
.daw2-tb.daw2-rec.on{ background:var(--d2-rec); border-color:var(--d2-rec); color:var(--on-solid); animation:daw2-pulse .5s infinite alternate; }
.daw2-tb.daw2-metro.on,.daw2-tb.daw2-loop.on{ background:var(--d2-acc)22; border-color:var(--d2-acc); color:var(--d2-acc); }
@keyframes daw2-pulse{ from{opacity:.7} to{opacity:1} }

/* Beat indicator */
.daw2-beat{
  width:10px; height:10px; border-radius:50%; background:var(--d2-border);
  transition:.08s; flex:none;
}
.daw2-beat.flash{ background:var(--d2-acc); box-shadow:0 0 8px var(--d2-acc); }
.daw2-beat.flash[data-accent='1']{ background:var(--d2-warn); box-shadow:0 0 10px var(--d2-warn); }

/* Timecodes */
.daw2-timecodes{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:80px; }
.daw2-pos{ font:bold 18px/1 'Courier New',monospace; color:var(--d2-acc); letter-spacing:1px; }
.daw2-ttime{ font:11px/1 monospace; color:var(--d2-mut); }

/* BPM control */
.daw2-bpmctrl{ display:flex; align-items:center; gap:var(--sp-4); }
.daw2-bpminp{ width:52px; background:var(--d2-card2); border:1px solid var(--d2-border);
  color:var(--d2-text); border-radius:var(--d2-r); padding:var(--sp-4) var(--sp-6); font:bold 15px monospace;
  text-align:center; -moz-appearance:textfield; }
.daw2-bpminp::-webkit-inner-spin-button,.daw2-bpminp::-webkit-outer-spin-button{ -webkit-appearance:none; }
.daw2-sb{ display:inline-flex; align-items:center; justify-content:center; height:26px;
  padding:0 var(--sp-8); border-radius:var(--d2-r); border:1px solid var(--d2-border);
  background:var(--d2-card2); color:var(--d2-text); cursor:pointer; font-size:var(--fs-sm); white-space:nowrap; }
.daw2-sb:hover{ border-color:var(--d2-acc); }
.daw2-tap{ font-weight:var(--fw-bold); padding:0 var(--sp-10); }

/* Master */
.daw2-mm{ border-radius:var(--radius-xs); flex:none; }
.daw2-mvol{ width:70px; accent-color:var(--d2-acc); }
.daw2-view-sw{ display:flex; border:1px solid var(--d2-border); border-radius:var(--d2-r); overflow:hidden; }
.daw2-vsw{ padding:var(--sp-4) var(--sp-10); background:var(--d2-card2); color:var(--d2-mut);
  border:none; cursor:pointer; font-size:var(--fs-sm); font-weight:var(--fw-strong); }
.daw2-vsw.on{ background:var(--d2-acc); color:#000; }

/* ── Layout principal ── */
.daw2-main{ display:flex; flex:1; overflow:hidden; position:relative; min-height:0; }
.daw2-content{ flex:1; overflow:auto; min-width:0; display:flex; flex-direction:column; }

/* ── Session View ── */
.daw2-sg{ min-width:max-content; }
.daw2-sg-head{ display:flex; align-items:stretch; background:var(--d2-card);
  border-bottom:2px solid var(--d2-border); position:sticky; top:0; z-index:2; }
.daw2-sg-corner{ width:186px; flex:none; border-right:1px solid var(--d2-border); padding:var(--sp-8) var(--sp-10);
  font-size:var(--fs-xs); color:var(--d2-mut); display:flex; align-items:center; }
.daw2-sg-sh{ width:100px; flex:none; padding:var(--sp-6) var(--sp-8); border-right:1px solid var(--d2-border);
  font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--d2-mut); display:flex; flex-direction:column;
  align-items:center; gap:var(--sp-4); }
.daw2-sg-sh span{ font-size:var(--fs-2xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:90px; }

/* Scene launch button */
.daw2-sb.daw2-sb-scene, button.daw2-sb[onclick*="LaunchScene"]{
  width:22px; height:22px; padding:0; border-radius:50%; font-size:var(--fs-2xs);
  background:var(--d2-acc)22; border-color:var(--d2-acc)55; color:var(--d2-acc);
}
.daw2-sb.daw2-sb-scene:hover{ background:var(--d2-acc); color:#000; }

/* Session row */
.daw2-sg-row{ display:flex; align-items:stretch; border-bottom:1px solid var(--d2-border); }
.daw2-sg-row:hover{ background:#ffffff05; }

/* Track header (session) */
.daw2-sg-th{
  width:186px; flex:none; border-right:1px solid var(--d2-border);
  background:var(--d2-card); display:flex; flex-direction:column; gap:0;
  padding:var(--sp-6) var(--sp-8); border-left:3px solid var(--tc,#666);
}
.daw2-th-top{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.daw2-th-name{ flex:1; font-size:var(--fs-sm); font-weight:var(--fw-strong); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.daw2-th-name:hover{ color:var(--d2-acc); }
.daw2-th-ctrl{ display:flex; gap:var(--sp-2); }
.daw2-th-bot{ display:flex; gap:var(--sp-6); align-items:center; }
.daw2-th-foot{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-2); }
.daw2-thb{
  display:inline-flex; align-items:center; justify-content:center;
  height:18px; min-width:18px; padding:0 var(--sp-4); border-radius:var(--radius-xs); font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  border:1px solid var(--d2-border); background:transparent; color:var(--d2-mut); cursor:pointer;
}
.daw2-thb:hover{ border-color:var(--d2-acc); color:var(--d2-acc); }
.daw2-thb.arm{ background:var(--d2-rec)33; border-color:var(--d2-rec); color:var(--d2-rec); }
.daw2-thb.mute{ background:var(--d2-warn)22; border-color:var(--d2-warn); color:var(--d2-warn); }
.daw2-thb.solo{ background:var(--d2-acc)22; border-color:var(--d2-acc); color:var(--d2-acc); }
.daw2-thb.daw2-fx-btn{ color:#8bf; border-color:#8bf4; }
.daw2-thb.daw2-del-t{ color:var(--d2-rec); border-color:var(--d2-rec)44; font-size:var(--fs-md); }

/* Faders dans le track header */
.daw2-flab{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-2xs); color:var(--d2-mut); flex:1; }
.daw2-fl{ flex:1; accent-color:var(--d2-acc); height:3px; }
.daw2-pan{ accent-color:var(--d2-warn); }
.daw2-meter{ border-radius:var(--radius-xs); flex:none; }

/* Clip cells */
.daw2-cell{
  width:100px; flex:none; border-right:1px solid var(--d2-border);
  display:flex; align-items:center; gap:var(--sp-6); padding:0 var(--sp-8);
  min-height:70px; cursor:pointer; position:relative; transition:.12s;
}
.daw2-cell.empty{ color:var(--d2-mut); font-size:var(--fs-lg); justify-content:center;
  background:repeating-linear-gradient(-45deg,transparent,transparent 5px,#ffffff04 5px,#ffffff04 6px); }
.daw2-cell.empty:hover{ background:var(--d2-acc)11; }
.daw2-cell.empty .daw2-empty-rec{ color:var(--d2-mut); }
.daw2-cell.has{ background:var(--tc,#444)22; }
.daw2-cell.has:hover{ background:var(--tc,#444)33; filter:brightness(1.1); }
.daw2-cell.has.playing{ background:var(--tc,#444)44; animation:daw2-cellpulse 1s infinite alternate; }
.daw2-cell.drag-over{ background:var(--d2-acc)22; border-color:var(--d2-acc); }
@keyframes daw2-cellpulse{ from{filter:brightness(1)} to{filter:brightness(1.15)} }
.daw2-cell-play{ font-size:var(--fs-xs); color:var(--tc,#fff); flex:none; }
.daw2-cell-name{ flex:1; font-size:var(--fs-xs); font-weight:var(--fw-strong); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.daw2-cell-x{ position:absolute; top:4px; right:4px; width:14px; height:14px;
  border-radius:50%; border:none; background:transparent; color:var(--d2-mut);
  cursor:pointer; font-size:var(--fs-xs); display:none; align-items:center; justify-content:center; }
.daw2-cell:hover .daw2-cell-x{ display:flex; }
.daw2-cell-x:hover{ background:var(--d2-rec); color:var(--on-solid); }

/* Sends */
.daw2-sends{ width:90px; flex:none; border-right:1px solid var(--d2-border);
  padding:var(--sp-6) var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-4); justify-content:center; }
.daw2-sends label{ display:flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-2xs); color:var(--d2-mut); }
.daw2-send{ flex:1; accent-color:#8bf; height:3px; }

/* Add track row */
.daw2-sg-add{ display:flex; gap:var(--sp-8); padding:var(--sp-8) var(--sp-10); border-top:1px solid var(--d2-border); }
.daw2-add{ padding:var(--sp-4) var(--sp-12); border-radius:var(--d2-r); border:1px dashed var(--d2-border);
  background:transparent; color:var(--d2-mut); cursor:pointer; font-size:var(--fs-sm); font-weight:var(--fw-strong); }
.daw2-add:hover{ border-color:var(--d2-acc); color:var(--d2-acc); }

/* ── Arrangement View ── */
.daw2-arr-wrap{ display:flex; flex:1; overflow:hidden; }
.daw2-arr-left{ width:188px; flex:none; overflow:hidden; border-right:1px solid var(--d2-border); }
.daw2-al{
  height:52px; display:flex; align-items:center; gap:var(--sp-4); padding:0 var(--sp-8);
  border-bottom:1px solid var(--d2-border); border-left:3px solid var(--tc,#666);
  background:var(--d2-card);
}
.daw2-al-name{ flex:1; font-size:var(--fs-sm); font-weight:var(--fw-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.daw2-arr-right{ flex:1; overflow:auto; }
.daw2-arr-canvas{ display:block; cursor:crosshair; }

/* ── FX Panel ── */
.daw2-fx-panel{
  width:240px; flex:none; display:flex; flex-direction:column;
  background:var(--d2-card); border-left:1px solid var(--d2-border); overflow-y:auto;
}
.daw2-fx-h{ display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-8) var(--sp-12); border-bottom:1px solid var(--d2-border);
  font-size:var(--fs-sm); font-weight:var(--fw-bold); flex:none; }
.daw2-fx-close{ border:none; background:none; color:var(--d2-mut); cursor:pointer; font-size:var(--fs-base); padding:0; }
.daw2-fx-close:hover{ color:var(--d2-rec); }
.daw2-fx-body{ padding:var(--sp-10); display:flex; flex-direction:column; gap:var(--sp-8); flex:1; }
.daw2-fx-s{ border:1px solid var(--d2-border); border-radius:var(--d2-r); padding:var(--sp-8); }
.daw2-fx-sl{ font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--d2-acc); margin-bottom:var(--sp-6); }
.daw2-fx-row{ display:flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-xs); margin-bottom:var(--sp-4); }
.daw2-fx-row span:first-child{ width:48px; flex:none; color:var(--d2-mut); }
.daw2-fx-row input[type=range]{ flex:1; accent-color:var(--d2-acc); }
.daw2-fx-row span:last-child{ min-width:34px; text-align:right; color:var(--d2-mut); font-size:var(--fs-2xs); }

/* ── Detail Zone (Drum Machine / Synth) ── */
.daw2-detail{
  flex:none; border-top:2px solid var(--d2-border);
  background:var(--d2-card); overflow-x:auto;
}

/* Drum Machine */
.daw2-dm{ padding:var(--sp-10) var(--sp-14); min-width:max-content; }
.daw2-dm-head{ display:flex; align-items:baseline; gap:var(--sp-12); margin-bottom:var(--sp-10); }
.daw2-dm-title{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--d2-acc); }
.daw2-dm-sub{ font-size:var(--fs-xs); color:var(--d2-mut); }
.daw2-dm-grid{ display:flex; flex-direction:column; gap:var(--sp-4); }
.daw2-dr{ display:flex; align-items:center; gap:var(--sp-8); }
.daw2-dr-lbl{ width:76px; flex:none; display:flex; align-items:center; justify-content:space-between;
  font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--d2-mut); }
.daw2-dr-tst{ border:1px solid var(--d2-border); background:none; color:var(--d2-acc);
  border-radius:var(--radius-xs); padding:var(--sp-1) var(--sp-4); font-size:var(--fs-2xs); cursor:pointer; }
.daw2-dr-tst:hover{ background:var(--d2-acc); color:#000; }
.daw2-dr-steps{ display:flex; gap:var(--sp-2); }
.daw2-step{
  width:28px; height:28px; border-radius:var(--radius-xs); border:1px solid var(--d2-border);
  background:var(--d2-card2); cursor:pointer; transition:.1s; flex:none;
  position:relative; overflow:hidden;
}
.daw2-step:hover{ border-color:var(--d2-acc)88; background:var(--d2-acc)11; }
.daw2-step.on{ background:var(--sc,var(--d2-acc)); border-color:var(--sc,var(--d2-acc)); box-shadow:0 0 6px var(--sc,var(--d2-acc))88; }
.daw2-step.cursor::after{ content:''; position:absolute; inset:0; background:#fff3; }
.daw2-step.on.cursor::after{ background:#fff4; }
/* Group gaps between 4-step groups */
.daw2-step.g1{ margin-left:var(--sp-6); }
.daw2-step.g2{ margin-left:var(--sp-6); }
.daw2-step.g3{ margin-left:var(--sp-6); }

/* Polyphonic Synth */
.daw2-synth{ padding:var(--sp-10) var(--sp-14); min-width:max-content; }
.daw2-synth-head{ display:flex; align-items:baseline; gap:var(--sp-12); flex-wrap:wrap; margin-bottom:var(--sp-8); }
.daw2-synth-title{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--d2-acc); }
.daw2-synth-ctrl{ display:flex; align-items:center; gap:var(--sp-10); flex-wrap:wrap; }
.daw2-sp{ display:flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-xs); color:var(--d2-mut); white-space:nowrap; }
.daw2-sp input[type=range]{ width:70px; accent-color:var(--d2-acc); }
.daw2-sp select{ background:var(--d2-card2); border:1px solid var(--d2-border);
  color:var(--d2-text); border-radius:var(--d2-r); padding:var(--sp-2) var(--sp-4); font-size:var(--fs-xs); }
.daw2-sv{ min-width:28px; font-size:var(--fs-2xs); color:var(--d2-acc); }
.daw2-oct-val{ min-width:18px; text-align:center; font-weight:var(--fw-bold); color:var(--d2-text); }

/* Piano Keyboard */
.daw2-piano-wrap{ overflow-x:auto; padding-bottom:var(--sp-4); }
.daw2-piano{ position:relative; display:flex; gap:var(--sp-1); height:80px; user-select:none; width:max-content; }
.daw2-key{ border-radius:0 0 var(--radius-xs) var(--radius-xs); cursor:pointer; transition:.06s; flex:none; }
.daw2-key.wh{
  width:30px; height:80px; background:#ddd; border:1px solid #aaa; position:relative;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:var(--sp-4);
}
.daw2-key.wh span{ font-size:var(--fs-2xs); color:#666; font-weight:var(--fw-strong); pointer-events:none; }
.daw2-key.wh:hover{ background:#c8ffe0; }
.daw2-key.wh:active{ background:var(--d2-acc); }
.daw2-key.bl{
  position:absolute; width:18px; height:50px; background:#1a1a1a; border:1px solid #000;
  z-index:1; left:calc(var(--bx,0)*31px + 21px);
}
.daw2-key.bl:hover{ background:#2c4a38; }
.daw2-key.bl:active{ background:var(--d2-acc); }

/* Status bar */
.daw2-status{
  display:flex; justify-content:space-between; padding:var(--sp-4) var(--sp-12);
  background:var(--d2-card); border-top:1px solid var(--d2-border);
  font-size:var(--fs-2xs); color:var(--d2-mut); flex:none;
}

/* Responsive */
@media(max-width:780px){
  .daw2-sg-th{ width:140px; }
  .daw2-sg-corner{ width:140px; }
  .daw2-cell{ width:80px; }
  .daw2-sends{ width:70px; }
  .daw2-tr-r .daw2-mvol{ width:50px; }
}

/* ══ CIDE - éditeur code VS Code-like (55-edition-code.js) ══════════════════ */
.cide{ display:flex; height:calc(100vh - 200px); min-height:480px; max-height:900px; overflow:hidden; background:var(--card); }

/* Sidebar */
.cide-sb{ display:flex; flex-direction:column; width:220px; min-width:140px; border-right:1px solid var(--line);
  background:var(--card); flex-shrink:0; overflow:hidden; transition:width .15s; }
.cide-sb.off{ width:0; min-width:0; border-right:none; }
.cide-sb-hd{ display:flex; align-items:center; padding:var(--sp-6) var(--sp-8); border-bottom:1px solid var(--line);
  background:var(--card2); gap:var(--sp-4); flex-shrink:0; }
.cide-sb-title{ flex:1; font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase;
  letter-spacing:var(--ls-wide); color:var(--mut); white-space:nowrap; }
.cide-sb-body{ flex:1; overflow:auto; min-width:140px; }

/* Sections de la sidebar */
.cide-sec-h{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-8) var(--sp-4);
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.06em;
  color:var(--mut2); cursor:pointer; user-select:none;
  position:sticky; top:0; background:var(--card); z-index:1; }
.cide-sec-h:hover{ color:var(--txt); }
.cide-sec-h-ico{ width:9px; height:9px; flex-shrink:0; transition:transform .12s; color:var(--mut); display:flex; }
.cide-sec-h-ico svg{ width:9px; height:9px; }
.cide-sec.open .cide-sec-h-ico{ transform:rotate(90deg); }
.cide-sec-body{ display:none; }
.cide-sec.open .cide-sec-body{ display:block; }

/* Items de l'arbre */
.cide-item{ display:flex; align-items:center; gap:var(--sp-4); cursor:pointer; font-size:var(--fs-xs);
  user-select:none; border-radius:var(--radius-xs); margin:0 var(--sp-2) var(--sp-1);
  padding:2px 5px 2px calc(var(--d,0) * 13px + 6px); white-space:nowrap; overflow:hidden; }
.cide-item:hover{ background:var(--line2); }
.cide-item.on{ background:color-mix(in srgb,var(--accent) 15%,transparent); }
.cide-item-ic{ width:13px; height:13px; flex-shrink:0; color:var(--mut2); display:flex; }
.cide-item-ic svg{ width:13px; height:13px; }
.cide-item.cide-folder > .cide-item-ic{ color:var(--accent); }
.cide-item-n{ overflow:hidden; text-overflow:ellipsis; flex:1;
  font-family:var(--font-mono); font-size:var(--fs-sm); }
.cide-item.cide-folder > .cide-item-n{ font-family:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.cide-loading{ padding:var(--sp-10) var(--sp-10); font-size:var(--fs-xs); color:var(--mut); font-style:italic; }

/* Zone éditeur */
.cide-ed{ flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* Onglets */
.cide-tabs{ display:flex; align-items:stretch; border-bottom:1px solid var(--line);
  background:var(--card2); overflow-x:auto; overflow-y:hidden; flex-shrink:0; scrollbar-width:none; }
.cide-tabs::-webkit-scrollbar{ display:none; }
.cide-tab{ display:inline-flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-10);
  border-right:1px solid var(--line); cursor:pointer; font-size:var(--fs-xs); white-space:nowrap;
  flex-shrink:0; color:var(--mut); border-bottom:2px solid transparent;
  font-family:var(--font-mono); }
.cide-tab:hover{ color:var(--txt); background:var(--line2); }
.cide-tab.on{ color:var(--txt); border-bottom-color:var(--accent); background:var(--card); }
.cide-tab-n{ max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.cide-tab-dot{ font-size:var(--fs-2xs); color:var(--warn); line-height:var(--lh-flat); }
.cide-tab-x{ display:flex; padding:var(--sp-2) var(--sp-2); border-radius:var(--radius-xs); color:var(--mut); }
.cide-tab-x:hover{ background:var(--line); color:var(--txt); }
.cide-tab-x svg{ width:9px; height:9px; }

/* Barre de l'éditeur */
.cide-bar{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-4) var(--sp-10);
  border-bottom:1px solid var(--line); background:var(--card2); flex-shrink:0; }

/* Workspace = gutter + code */
.cide-workspace{ flex:1; display:flex; overflow:hidden; }

/* Aperçu d'image (fichier image du projet ouvert dans l'éditeur) */
.cide-imgview{ flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; padding:var(--sp-24);
  background:
    linear-gradient(45deg,var(--line2) 25%,transparent 25%,transparent 75%,var(--line2) 75%) 0 0/20px 20px,
    linear-gradient(45deg,var(--line2) 25%,transparent 25%,transparent 75%,var(--line2) 75%) 10px 10px/20px 20px,
    var(--card); }
.cide-imgbox{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-12); max-width:100%; }
.cide-img{ max-width:100%; max-height:calc(100vh - 320px); object-fit:contain; border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(0,0,0,.22), 0 0 0 1px var(--line); background:var(--paper); }
.cide-imgmeta{ display:flex; align-items:center; gap:var(--sp-10); font-size:var(--fs-sm); color:var(--mut);
  font-family:var(--font-mono); }
.cide-imgname{ color:var(--txt); font-weight:var(--fw-strong); }
.cide-imgbox.err::after{ content:'Aperçu indisponible'; color:var(--mut); font-size:var(--fs-md); }

/* Barre de statut */
.cide-foot{ display:flex; justify-content:space-between; padding:var(--sp-4) var(--sp-10);
  border-top:1px solid var(--line); background:var(--card2);
  font-size:var(--fs-xs); color:var(--mut); font-family:var(--font-mono); flex-shrink:0; gap:var(--sp-8); }
.cide-foot-path{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:right; opacity:.7; }

/* ── Arbre Projet dans le panneau Dossiers (39-edition.js) ────────────────── */
.ed-pt-sep{ height:1px; background:var(--line); margin:var(--sp-6) var(--sp-6) var(--sp-2); }
.ed-pt-sec-h{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-6) var(--sp-10) var(--sp-4);
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.05em;
  color:var(--mut2); cursor:pointer; user-select:none; }
.ed-pt-sec-h:hover{ color:var(--txt); }
.ed-pt-sec-h-ico{ width:9px; height:9px; transition:transform .12s; display:flex; }
.ed-pt-sec-h-ico svg{ width:9px; height:9px; }
.ed-pt-open .ed-pt-sec-h-ico{ transform:rotate(90deg); }
.ed-pt-body{ display:none; padding:var(--sp-2) 0; }
.ed-pt-open .ed-pt-body{ display:block; }
.ed-pt-item{ display:flex; align-items:center; gap:var(--sp-4);
  padding:2px 5px 2px calc(var(--d,0) * 12px + 10px); cursor:pointer;
  font-size:var(--fs-sm); font-family:var(--font-mono);
  border-radius:var(--radius-xs); margin:0 var(--sp-2) var(--sp-1); white-space:nowrap; overflow:hidden; user-select:none; }
.ed-pt-item:hover{ background:var(--line2); }
.ed-pt-item.on{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--txt); font-weight:var(--fw-strong); }
.ed-pt-item.folder > .ed-pt-ic{ color:var(--accent); }
/* Triangle d'expansion (clic = déplier sans naviguer ; clic ligne = naviguer au centre). */
.ed-pt-tw{ color:var(--mut2); transition:transform .12s; cursor:pointer; }
.ed-pt-tw.open{ transform:rotate(90deg); }
.ed-pt-tw:hover{ color:var(--txt); }
.ed-pt-sec-h.on{ color:var(--txt); font-weight:var(--fw-bold); }
.ed-pt-ic{ width:12px; height:12px; flex-shrink:0; color:var(--mut2); display:flex; }
.ed-pt-ic svg{ width:12px; height:12px; }
.ed-pt-n{ overflow:hidden; text-overflow:ellipsis; flex:1; }
.ed-pt-item.folder > .ed-pt-n{ font-family:inherit; font-weight:var(--fw-medium); }
.ed-pt-load{ padding:var(--sp-8) var(--sp-10); font-size:var(--fs-xs); color:var(--mut); font-style:italic; }

}