@layer modules{
/* 21e-edition-audio.css · L'Audio du Studio (56-edition-audio.js) dans la DA du Tableur et du Document (CDC_DA_COMMUNE § 4.0,
   2026-10-24). Le proprio : « il faut la même DA partout : base-toi sur la DA du Tableur et du Document ».
   La rangée d'outils, ses boutons et le pied sont ceux de la feuille partagée (22c : .outils, .outil, .pied-app,
   .pied-bascule) ; cette feuille ne dessine que ce qui est propre à l'Audio (compteur, tempo, grille des scènes, pistes,
   effets, boîte à rythmes, clavier), sur les seuls jetons. Elle remplace les 140 règles .daw2 qui vivaient dans la feuille
   du Tableur (21-edition.css) avec leur palette propre (--d2-*, noir #141414 et vert néon #00C95E), sourde au thème :
   l'Audio est maintenant clair ou sombre avec l'atelier. Importée après 22c. */

/* ── Jetons du canevas ───────────────────────────────────────────────────
   Le canevas de l'Arrangement et les vu-mètres ne lisent pas le CSS : le JS résout ces jetons par une sonde (couleurs()). */
.daw2{
  --daw-fond:var(--card2); --daw-piste:var(--card); --daw-piste-2:color-mix(in srgb, var(--txt) 3%, var(--card));
  --daw-grille:color-mix(in srgb, var(--txt) 7%, var(--card)); --daw-mesure:var(--line); --daw-texte:var(--mut);
  --daw-tete:var(--outils-accent); --daw-ok:var(--ok); --daw-warn:var(--warn); --daw-err:var(--err);
  --daw-crete:var(--txt); --daw-onde:color-mix(in srgb, var(--txt) 70%, transparent);
  --daw-entete:196px; --daw-cellule:104px; --daw-envois:116px;
  display:flex; flex-direction:column; height:100%; min-height:600px; position:relative; overflow:hidden;
  background:var(--bg); color:var(--txt); font-size:var(--fs-md); line-height:var(--lh-normal);
}
.daw2-sonde{ display:none; }

/* ── La rangée d'outils (22c) : ce que l'Audio y ajoute ──────────────────── */
.daw2-outils{ flex:none; }
.daw2-espace{ flex:1 1 auto; min-width:var(--sp-8); }
.daw2-outils .outil[data-outil="enregistrer"]{ color:var(--err); }
.daw2-outils .outil[data-outil="enregistrer"][aria-pressed="true"]{ background:color-mix(in srgb, var(--err) 16%, transparent); }
@media (prefers-reduced-motion:no-preference){
  .daw2-outils .outil[data-outil="enregistrer"][aria-pressed="true"]{ animation:daw2-pulse .6s infinite alternate; }
}
@keyframes daw2-pulse{ from{ opacity:.7; } to{ opacity:1; } }
/* Le battement : un point qui s'allume à chaque temps, l'accent de la mesure en jaune de l'atelier. */
.daw2-beat{ width:8px; height:8px; border-radius:var(--radius-pill); background:var(--line); flex:none; margin:0 var(--sp-4); }
.daw2-beat.flash{ background:var(--outils-accent); }
.daw2-beat.flash[data-accent='1']{ background:var(--warn); }
/* Le compteur : en chiffres tabulaires de l'atelier (il ne saute pas de 1:1:1 à 10:4:4), plus en Courier vert fluo. */
.daw2-compteur{ display:inline-flex; flex-direction:column; justify-content:center; gap:var(--sp-1); height:var(--outils-h); padding:0 var(--sp-6); flex:none; line-height:var(--lh-flat); font-variant-numeric:tabular-nums; }
.daw2-pos{ font-size:var(--fs-md); font-weight:var(--fw-strong); color:var(--txt); min-width:6ch; }
.daw2-ttime{ font-size:var(--fs-2xs); color:var(--mut); }
/* Le tempo : − et + en boutons de la rangée, la valeur dans un champ au gabarit des listes de la rangée. */
.daw2-tempo{ gap:var(--sp-2); flex:none; }
.daw2-bpminp{ width:44px; height:var(--outils-h); box-sizing:border-box; padding:0 var(--sp-4); border:1px solid transparent; border-radius:var(--radius-sm);
  background:var(--outils-champ); color:var(--txt); font:inherit; font-size:var(--fs-md); text-align:center; font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield; }
.daw2-bpminp::-webkit-inner-spin-button,.daw2-bpminp::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.daw2-bpminp:hover{ border-color:var(--line); }
.daw2-bpminp:focus-visible{ outline:none; border-color:var(--outils-accent-filet); background:var(--card); }
.daw2-bpm-unite{ font-size:var(--fs-xs); color:var(--mut); }
/* Le volume général : l'icône, le vu-mètre, le curseur à l'accent de l'atelier. */
.daw2-volume{ display:inline-flex; align-items:center; gap:var(--sp-4); color:var(--mut); flex:none; }
.daw2-volume svg.ic{ width:var(--outils-icone); height:var(--outils-icone); }
.daw2-mm, .daw2-meter{ border-radius:var(--radius-xs); flex:none; }
/* Les curseurs : le champ de formulaire de l'atelier (06-components : fond, cadre, marge, 100 % de large) ne s'applique pas
   à un curseur ; laissé, il faisait 38 px de haut et gonflait la rangée. */
.daw2 input[type=range]{ accent-color:var(--outils-accent); width:auto; height:16px; padding:0; margin:0; border:0; background:none; }
.daw2 .daw2-mvol{ width:84px; }

/* Les petits boutons à état des pistes (armer, muet, solo, effets…) : des .outil de 22 px. L'armement en rouge et le muet
   en jaune de l'atelier, comme leurs voyants dans toute console ; le solo et le reste à l'accent choisi de 22c. */
.daw2 .outil.daw2-petit{ min-width:22px; height:22px; padding:0 var(--sp-2); color:var(--mut); }
.daw2 .outil.daw2-petit:hover{ color:var(--txt); }
.daw2 .outil.daw2-petit svg.ic{ width:14px; height:14px; }
.daw2 .outil.daw2-petit[aria-pressed="true"]{ color:var(--txt); }
.daw2 .outil.daw2-petit[data-outil="armer"][aria-pressed="true"]{ background:color-mix(in srgb, var(--err) 16%, transparent); color:var(--err); }
.daw2 .outil.daw2-petit[data-outil="muet"][aria-pressed="true"]{ background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); }
.daw2 .outil.daw2-petit[data-outil="supprimerPiste"]:hover{ background:color-mix(in srgb, var(--err) 14%, transparent); color:var(--err); }

/* ── Le contenu ──────────────────────────────────────────────────────────── */
.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; }

/* La vue Session : une grille de pistes (lignes) et de scènes (colonnes). */
.daw2-sg{ min-width:max-content; }
.daw2-sg-head{ display:flex; align-items:stretch; position:sticky; top:0; z-index:2; background:var(--card); border-bottom:1px solid var(--line2); }
.daw2-sg-corner{ width:var(--daw-entete); flex:none; border-right:1px solid var(--line2); }
.daw2-sg-sh{ width:var(--daw-cellule); flex:none; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-10); border-right:1px solid var(--line2); }
.daw2-sg-sh > span{ font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.daw2-sg-envois{ width:var(--daw-envois); min-height:34px; }
.daw2-sg-row{ display:flex; align-items:stretch; border-bottom:1px solid var(--line2); }

/* L'en-tête d'une piste : sa couleur en filet à gauche (une donnée du projet), son nom, ses voyants, ses curseurs. */
.daw2-sg-th{ width:var(--daw-entete); flex:none; box-sizing:border-box; display:flex; flex-direction:column; gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-8); background:var(--card); border-right:1px solid var(--line2); border-left:3px solid var(--tc, var(--line)); }
.daw2-th-top{ display:flex; align-items:center; gap:var(--sp-4); }
.daw2-th-name{ flex:1; min-width:0; font-size:var(--fs-md); font-weight:var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.daw2-th-ctrl{ display:flex; gap:var(--sp-1); }
.daw2-th-bot{ display:flex; flex-direction:column; gap:var(--sp-2); }
.daw2 label{ margin:0; }
.daw2-flab{ display:flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-xs); color:var(--mut); }
.daw2-flab > span{ width:48px; flex:none; }
.daw2-fl{ flex:1; min-width:0; }
.daw2-th-foot{ display:flex; align-items:center; gap:var(--sp-2); }

/* Les cellules : vides, un plus discret ; pleines, la couleur de la piste en fond doux. */
.daw2-cell{ width:var(--daw-cellule); flex:none; box-sizing:border-box; display:flex; align-items:center; gap:var(--sp-6); padding:0 var(--sp-8);
  min-height:88px; position:relative; cursor:pointer; border-right:1px solid var(--line2); background:var(--card); }
.daw2-cell.empty{ justify-content:center; color:var(--mut2); }
/* « .empty » est aussi l'état vide des listes de l'atelier (03-layout : pointillés, 56 px de marge) : il gonflait chaque
   cellule vide, donc chaque ligne de piste, à 170 px. La cellule reprend son propre dessin. */
.daw2 .daw2-cell.empty{ padding:0 var(--sp-8); border:0; border-right:1px solid var(--line2); border-radius:0; text-align:left; grid-column:auto; }
.daw2-cell.empty svg.ic{ width:14px; height:14px; opacity:.45; }
.daw2-cell.empty:hover{ background:var(--outils-survol); color:var(--mut); }
.daw2-cell.empty:hover svg.ic{ opacity:1; }
.daw2-cell.has{ background:color-mix(in srgb, var(--tc) 16%, var(--card)); }
.daw2-cell.has:hover{ background:color-mix(in srgb, var(--tc) 24%, var(--card)); }
.daw2-cell.has.playing{ background:color-mix(in srgb, var(--tc) 32%, var(--card)); }
.daw2-cell.drag-over{ background:var(--outils-appui); outline:1px dashed var(--outils-accent); outline-offset:-4px; }
.daw2-cell-play{ display:inline-flex; color:var(--tc); flex:none; }
.daw2-cell-play svg.ic{ width:14px; height:14px; }
.daw2-cell-name{ flex:1; min-width:0; font-size:var(--fs-sm); font-weight:var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.daw2-cell-x{ position:absolute; top:var(--sp-4); right:var(--sp-4); width:18px; height:18px; padding:0; border:0; border-radius:var(--radius-xs);
  background:none; color:var(--mut); cursor:pointer; display:none; place-items:center; }
.daw2-cell-x svg.ic{ width:12px; height:12px; }
.daw2-cell:hover .daw2-cell-x{ display:grid; }
.daw2-cell-x:hover{ background:color-mix(in srgb, var(--err) 14%, transparent); color:var(--err); }

/* Les envois vers la réverbération et l'écho communs. */
.daw2-sends{ width:var(--daw-envois); flex:none; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-8); border-right:1px solid var(--line2); background:var(--card); }
.daw2-sends label{ display:flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-xs); color:var(--mut); }
.daw2-sends label > span{ width:32px; flex:none; }
.daw2-send{ flex:1; min-width:0; }

/* Ajouter une piste : des boutons de la rangée, le plus et le mot. */
.daw2-sg-add{ display:flex; gap:var(--sp-4); padding:var(--sp-8) var(--sp-10); }
.daw2 .outil.daw2-add{ color:var(--mut); gap:var(--sp-4); padding:0 var(--sp-8); }
.daw2 .outil.daw2-add:hover{ color:var(--txt); }

/* La vue Arrangement : les pistes à gauche, le canevas (jetons --daw-*) à droite. */
.daw2-arr-wrap{ display:flex; flex:1; overflow:hidden; }
.daw2-arr-left{ width:188px; flex:none; overflow:hidden; background:var(--card); border-right:1px solid var(--line2); }
.daw2-al{ height:52px; box-sizing:border-box; display:flex; align-items:center; gap:var(--sp-4); padding:0 var(--sp-8);
  border-bottom:1px solid var(--line2); border-left:3px solid var(--tc, var(--line)); }
.daw2-al-name{ flex:1; min-width:0; font-size:var(--fs-sm); font-weight:var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.daw2-arr-right{ flex:1; overflow:auto; }
.daw2-arr-canvas{ display:block; cursor:crosshair; }

/* ── Le panneau des effets ───────────────────────────────────────────────── */
.daw2-fx-panel{ width:264px; flex:none; flex-direction:column; overflow-y:auto; background:var(--card); border-left:1px solid var(--line2); }
.daw2-fx-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); padding:var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-12);
  border-bottom:1px solid var(--line2); font-size:var(--fs-md); font-weight:var(--fw-strong); flex:none; }
.daw2-fx-body{ display:flex; flex-direction:column; gap:var(--sp-8); padding:var(--sp-10); flex:1; }
.daw2-fx-s{ border:1px solid var(--line2); border-radius:var(--radius-sm); padding:var(--sp-8); }
.daw2-fx-sl{ font-size:var(--fs-sm); font-weight:var(--fw-strong); margin-bottom:var(--sp-6); }
.daw2-fx-sl label{ display:inline-flex; align-items:center; gap:var(--sp-6); cursor:pointer; }
.daw2-fx-sl input[type=checkbox]{ accent-color:var(--outils-accent); }
.daw2-fx-row{ display:flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.daw2-fx-row > span:first-child{ width:84px; flex:none; color:var(--mut); }
.daw2-fx-row input[type=range]{ flex:1; min-width:0; }
.daw2-fx-row > span:last-child{ min-width:44px; text-align:right; color:var(--mut); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }

/* ── La zone de détail : boîte à rythmes et synthé ───────────────────────── */
.daw2-detail{ flex:none; overflow-x:auto; background:var(--card); border-top:1px solid var(--line2); }
.daw2-detail:empty{ display:none; }
.daw2-dm, .daw2-synth{ padding:var(--sp-10) var(--sp-14); }
.daw2-dm{ min-width:max-content; }   /* la grille des pas défile ; les réglages du synthé passent à la ligne */
.daw2-dm-head, .daw2-synth-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-12); margin-bottom:var(--sp-8); }
.daw2-dm-title, .daw2-synth-title{ font-size:var(--fs-md); font-weight:var(--fw-strong); }
.daw2-dm-sub{ font-size:var(--fs-sm); color:var(--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:156px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); font-size:var(--fs-sm); color:var(--mut); }
.daw2-dr-steps{ display:flex; gap:var(--sp-2); }
.daw2-step{ width:26px; height:26px; padding:0; flex:none; position:relative; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-xs); background:var(--card2); }
.daw2-step:hover{ border-color:var(--outils-accent-filet); }
.daw2-step.on{ background:var(--sc, var(--outils-accent)); border-color:var(--sc, var(--outils-accent)); }
.daw2-step.cursor::after{ content:''; position:absolute; inset:0; background:color-mix(in srgb, var(--txt) 22%, transparent); }
/* Un écart entre les groupes de quatre pas, sur le premier pas du groupe seulement (il était sur chacun avant 2026-10-24). */
.daw2-step.g0 + .daw2-step.g1, .daw2-step.g1 + .daw2-step.g2, .daw2-step.g2 + .daw2-step.g3{ margin-left:var(--sp-6); }
.daw2-synth-ctrl{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-10); }
.daw2-sp{ display:inline-flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-sm); color:var(--mut); white-space:nowrap; }
.daw2-sp input[type=range]{ width:72px; }
.daw2-sp select{ width:auto; height:26px; padding:0 var(--sp-6); border:1px solid transparent; border-radius:var(--radius-sm); background:var(--outils-champ); color:var(--txt); font:inherit; font-size:var(--fs-sm); }
.daw2-sv{ min-width:36px; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.daw2-oct-val{ min-width:18px; text-align:center; font-weight:var(--fw-strong); color:var(--txt); }
/* Le clavier : du papier et de l'encre (22c), dans les deux thèmes, comme un vrai clavier. */
.daw2-piano-wrap{ overflow-x:auto; padding-bottom:var(--sp-4); }
.daw2-piano{ position:relative; display:flex; gap:var(--sp-1); height:80px; width:max-content; user-select:none; }
.daw2-key{ border-radius:0 0 var(--radius-xs) var(--radius-xs); cursor:pointer; flex:none; }
.daw2-key.wh{ width:30px; height:80px; box-sizing:border-box; position:relative; display:flex; align-items:flex-end; justify-content:center; padding-bottom:var(--sp-4);
  background:var(--page-papier); border:1px solid var(--line); }
.daw2-key.wh span{ font-size:var(--fs-2xs); font-weight:var(--fw-medium); color:var(--page-encre-douce); pointer-events:none; }
.daw2-key.wh:hover{ background:color-mix(in srgb, var(--outils-accent) 18%, var(--page-papier)); }
.daw2-key.bl{ position:absolute; z-index:1; width:18px; height:50px; left:calc(var(--bx,0)*31px + 21px);
  background:color-mix(in srgb, var(--page-encre) 88%, var(--page-papier)); border:1px solid var(--page-encre); }
.daw2-key.bl:hover{ background:color-mix(in srgb, var(--outils-accent) 40%, var(--page-encre)); }
.daw2-key.wh:active, .daw2-key.bl:active{ background:var(--outils-accent); }

@media (max-width:780px){
  .daw2{ --daw-entete:150px; --daw-cellule:84px; --daw-envois:88px; }
  .daw2 .daw2-mvol{ width:56px; }
}
}