@layer modules{
/* 22c-studio-outils.css · La DA partagée des applications à document du Studio : le Tableur et le Document
   (CDC_DOCUMENT_WORD W0, 2026-10-23). Le proprio : « avec la même DA qu'on a faite pour l'app Tableur : DA partagée, comme
   ça quand je change ça change partout ; notre app Hdplio de toute façon doit avoir globalement la même DA ».
   Comme le bandeau (22b-bandeau.css) et les panneaux (37b), une seule feuille aux noms neutres : la rangée d'outils
   (.outils), ses boutons (.outil), séparateurs, groupes, listes et boutons de couleur, le pied d'état (.pied-app) et son
   zoom, la page sur son fond gris (.page-*). Les règles viennent de la barre du Tableur (21-edition.css, maquette du
   proprio du 2026-10-16), à l'identique : le relevé de 15 pièces du Tableur est le même avant et après ce lot (banc
   document_ui, sonde W0). Importée après 21-edition.css : à spécificité égale, elle gagne. Ce qui est propre à une app
   (la barre de formule et les onglets du Tableur, la règle du Document) reste dans sa feuille.
   L'état choisi d'un bouton se lit sur aria-pressed, que les deux apps posent déjà pour les lecteurs d'écran : une
   classe d'état par app aurait demandé deux règles pour un même dessin. */

/* ── Jetons ──────────────────────────────────────────────────────────────
   Le bleu du choix et le jaune du surligneur sont ceux de la maquette du Tableur (ex --esh-bleu, --esh-jaune, qui les
   lisent ici désormais) ; tout le reste vient de 01-tokens.css. Trois états de thème, comme 01-tokens (N20) : le sombre
   par défaut et sur data-theme="dark", le clair sur data-theme="light". */
:root, html[data-theme="dark"]{ --outils-accent:#5b9cf6; }
html[data-theme="light"]{ --outils-accent:#2373eb; }
:root{
  --outils-surligneur:#f5e400;
  --outils-accent-doux:color-mix(in srgb, var(--outils-accent) 18%, var(--card));
  --outils-accent-filet:color-mix(in srgb, var(--outils-accent) 45%, var(--line));
  --outils-h:28px;                 /* un bouton, une liste de la rangée (compacte, proprio 2026-10-16) */
  --outils-icone:16px;
  /* Le style (CDC_DA_COMMUNE § 6, 2026-10-24) : trois hauteurs de contrôle, trois tailles d'icône, un seul trait. */
  --ctl-h-petit:22px;              /* un bouton dans une ligne, un champ ou un pied */
  --ctl-h-grand:36px;              /* le bouton d'une carte d'accueil */
  --ic-petit:14px; --ic-chevron:12px;
  --ic-trait:var(--ico-trait, 1.5); /* l'épaisseur des icônes des apps, en pixels d'écran : 1,25 de S1 (2026-10-24) au 2026-11-04, puis le trait unique de 01-tokens (D1, ICONES) */
  /* Le fond d'une liste, du zoom, d'un champ : opaque (5 % d'encre mêlés à la carte) depuis le 2026-10-24. Transparent, il
     se lisait différemment selon le fond et les sondes de contraste du CMS le prenaient pour l'encre (1,04:1). */
  --outils-champ:color-mix(in srgb, var(--txt) 5%, var(--card));
  --outils-survol:color-mix(in srgb, var(--txt) 7%, transparent);
  --outils-appui:color-mix(in srgb, var(--outils-accent) 14%, transparent);
  /* La page : du papier (--paper, 01-tokens) quel que soit le thème, comme l'aperçu d'impression du Tableur (21c) :
     ce qu'on écrit est ce qui s'imprime. Son encre est noire, comme le texte « Automatique » de Word et les cellules de la
     feuille « papier » du Tableur, qui lisent ces deux jetons (21-edition.css). */
  --page-fond:color-mix(in srgb, var(--txt) 9%, var(--card2));
  --page-papier:var(--paper);
  --page-encre:#000;
  --page-encre-douce:color-mix(in srgb, var(--page-encre) 62%, var(--page-papier));
  --page-ombre:var(--elev-2);
}

/* ── La rangée d'outils ──────────────────────────────────────────────────── */
.outils{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-4) var(--sp-18); overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap;
  background:var(--card); border-bottom:1px solid var(--line2); }
.outils::-webkit-scrollbar{ display:none; }
.outil{ background:none; border:1px solid transparent; border-radius:var(--radius-sm); padding:0 var(--sp-6); min-width:var(--outils-h); height:var(--outils-h);
  font:inherit; font-size:var(--fs-md); color:var(--txt); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  white-space:nowrap; flex:none; line-height:var(--lh-flat); }
@media (prefers-reduced-motion:no-preference){ .outil{ transition:background-color .1s ease, border-color .1s ease; } }
.outil:hover{ background:var(--outils-survol); }
.outil:active{ background:var(--outils-appui); }
.outil[aria-pressed="true"]{ background:var(--outils-accent-doux); color:var(--txt); }
.outil:disabled{ color:var(--mut2); opacity:.55; cursor:default; background:none; }
.outil svg.ic{ width:var(--outils-icone); height:var(--outils-icone); }
.outil .outil-chev svg.ic{ width:var(--ic-chevron); height:var(--ic-chevron); color:var(--mut); }
.outil-chev{ display:inline-flex; }
.outil-sep{ width:1px; height:16px; background:var(--line); margin:0 var(--sp-6); flex:none; }
.outil-groupe{ display:flex; align-items:center; gap:0; }
.outil-gras{ font-weight:var(--fw-bold); font-size:var(--fs-base); }
.outil-glyphe{ font-size:var(--fs-md); font-weight:var(--fw-medium); letter-spacing:var(--ls-none); }

/* Les listes : le sélecteur maison (DHSelect, 46-select.js) les habille d'office ; il prend le gabarit de la rangée
   (28 px, sans cadre, fond à 5 %) au lieu d'un second chevron (vu en double le 2026-10-16). */
.outils .dhsel-trigger{ height:var(--outils-h); padding:0 var(--sp-6) 0 var(--sp-10); gap:var(--sp-4); border:1px solid transparent; border-radius:var(--radius-sm);
  background:var(--outils-champ); font-size:var(--fs-md); line-height:var(--lh-flat); }
.outils .dhsel-trigger:hover{ border-color:var(--line); }
/* Avant que DHSelect ne l'habille (un frame ou deux), une liste native de la rangée a déjà sa hauteur : sinon la rangée naissait
   6 px plus haute puis se resserrait, et l'écran glissait sous l'œil (layout-shift mesuré au banc squelettes_ui, 2026-11-04). */
.outils select:not(.dhsel-native){ height:var(--outils-h); box-sizing:border-box; padding-block:0; }
/* Sa largeur : celle de ses choix plutôt que les 100 % des champs (06-components), à spécificité nulle pour que la largeur qu'une
   app donne à sa liste (.edoc-sel-style…) l'emporte, comme elle l'emporte sur le DHSelect qui la remplacera. */
:where(.outils) select:where(:not(.dhsel-native)){ width:auto; }
.outils .dhsel.open .dhsel-trigger,.outils .dhsel-trigger:focus-visible{ border-color:var(--outils-accent-filet); box-shadow:none; background:var(--card); }
.outils .dhsel-caret{ width:var(--ic-chevron); height:var(--ic-chevron); color:var(--mut); }
.outils .dhsel.open .dhsel-caret{ color:var(--outils-accent); }

/* Couleur du texte, du fond, surligneur : le glyphe, une barre de la couleur courante dessous, le chevron à côté. */
.outil-couleur{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); }
.outil-couleur-glyphe{ font-size:var(--fs-md); font-weight:var(--fw-medium); line-height:var(--lh-flat); display:grid; place-items:center; height:14px; }
.outil-couleur-glyphe svg.ic{ width:14px; height:14px; }
.outil-couleur-barre{ display:block; width:14px; height:3px; border-radius:var(--radius-xs); background:var(--txt); }
.outil-couleur-barre.outil-fond{ background:var(--outils-surligneur); }

/* Un bouton à libellé qui porte le geste principal de l'app (Générer la vidéo, Publier…) : l'accent en aplat. Un libellé
   à côté d'un contrôle de la rangée, et un nombre au gabarit des listes (tempo, images par seconde). (CDC_DA_COMMUNE) */
.outil.outil-principal{ background:var(--outils-accent); color:var(--on-solid); padding:0 var(--sp-10); gap:var(--sp-6); }
.outil.outil-principal:hover{ background:color-mix(in srgb, var(--outils-accent) 88%, var(--txt)); }
.outil.outil-principal:disabled{ background:var(--outils-accent); color:var(--on-solid); opacity:.6; }
.outil-libelle{ display:inline-block; margin:0; font-size:var(--fs-sm); font-weight:var(--fw-regular); color:var(--mut); white-space:nowrap; flex:none; padding:0 var(--sp-2) 0 var(--sp-4); }
.outil-nombre{ width:52px; height:var(--outils-h); box-sizing:border-box; flex:none; margin:0; 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; }
.outil-nombre::-webkit-inner-spin-button,.outil-nombre::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.outil-nombre:hover{ border-color:var(--line); }
.outil-nombre:focus-visible{ outline:none; border-color:var(--outils-accent-filet); background:var(--card); }
/* Un petit bouton de panneau ou de liste (22 px) : monter, dupliquer, supprimer, armer… */
.outil.outil-petit{ min-width:var(--ctl-h-petit); height:var(--ctl-h-petit); padding:0 var(--sp-2); color:var(--mut); }
.outil.outil-petit:hover{ color:var(--txt); }
.outil.outil-petit svg.ic{ width:var(--ic-petit); height:var(--ic-petit); }
.outil.outil-petit[aria-pressed="true"]{ color:var(--txt); }

/* ── Les panneaux (CDC_DA_COMMUNE, 2026-10-24) ─────────────────────────────
   Le proprio : « tous : une DA partagée, comme ça je peux tout améliorer en même temps ». Les panneaux des apps du Studio
   sont ceux du Tableur et du Document : pleine hauteur, collés au bord, séparés du contenu par un filet (pas de cartes
   flottantes sur un fond gris) ; un titre de section en casse de phrase, aligné au début ; des champs pleins au gabarit de la
   rangée ; une ligne choisie sur l'accent doux, comme une page du volet du Document. */
:root{ --panneau-l:240px; --panneau-l-droit:288px; --panneau-pad:var(--sp-10); }
.panneau-app{ box-sizing:border-box; display:flex; flex-direction:column; gap:var(--sp-10); min-height:0; min-width:0; overflow-y:auto;
  padding:var(--panneau-pad); background:var(--card); color:var(--txt); font-size:var(--fs-md); }
.panneau-app.panneau-gauche{ border-right:1px solid var(--line2); }
.panneau-app.panneau-droit{ border-left:1px solid var(--line2); }
/* Un panneau dont des onglets font la tête (Pièces, Inspecteur… de la 3D ; Calques, Ressources de la Toile) : les onglets
   collés en haut et aux bords, le contenu de l'onglet garde le retrait du panneau. */
.panneau-app.panneau-onglets{ padding:0; gap:0; overflow:hidden; }
.panneau-app.panneau-onglets > .onglets-app{ flex:none; padding:0 var(--sp-4); }
.panneau-app.panneau-onglets > .onglets-app > button{ flex:1 1 auto; padding:0 var(--sp-6); }
.panneau-onglets-corps{ flex:1; min-height:0; overflow:auto; }
.panneau-onglets-corps > *{ padding:var(--panneau-pad); }
.panneau-tete{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); min-height:22px; }
.panneau-titre{ margin:0; font-size:var(--fs-sm); font-weight:var(--fw-strong); color:var(--txt); text-align:start; text-transform:none; letter-spacing:0; }
.panneau-section{ display:flex; flex-direction:column; gap:var(--sp-8); }
.panneau-section + .panneau-section{ padding-top:var(--sp-10); border-top:1px solid var(--line2); }
.panneau-note{ margin:0; font-size:var(--fs-sm); color:var(--mut); }
/* Un champ : son libellé au-dessus, sa saisie pleine et grise sans bordure (celle des listes de la rangée). */
.champ-app{ display:flex; flex-direction:column; gap:var(--sp-4); margin:0; font-size:var(--fs-sm); color:var(--mut); }
.champ-app > .champ-tete{ display:flex; justify-content:space-between; gap:var(--sp-6); }
.saisie-app, .champ-app > input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=radio]), .champ-app > textarea, .champ-app > select{
  box-sizing:border-box; width:100%; height:var(--outils-h); margin:0; padding:0 var(--sp-8); border:1px solid transparent; border-radius:var(--radius-sm);
  background:var(--outils-champ); color:var(--txt); font:inherit; font-size:var(--fs-md); }
.saisie-app:hover, .champ-app > input:hover, .champ-app > textarea:hover{ border-color:var(--line); }
.saisie-app:focus-visible, .champ-app > input:focus-visible, .champ-app > textarea:focus-visible{ outline:none; border-color:var(--outils-accent-filet); background:var(--card); }
.champ-app > textarea{ height:auto; min-height:calc(var(--outils-h) * 2); padding:var(--sp-4) var(--sp-8); resize:vertical; line-height:var(--lh-normal); }
.champ-app > input[type=range], .panneau-app input[type=range]{ width:100%; height:16px; margin:0; padding:0; border:0; background:none; accent-color:var(--outils-accent); }
.panneau-app .dhsel-trigger{ height:var(--outils-h); border:1px solid transparent; border-radius:var(--radius-sm); background:var(--outils-champ); font-size:var(--fs-md); }
.panneau-app .dhsel-trigger:hover{ border-color:var(--line); }
/* Une couleur : la pastille pleine largeur au gabarit d'un champ. */
.couleur-app{ box-sizing:border-box; width:100%; height:var(--outils-h); margin:0; padding:var(--sp-2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); cursor:pointer; }
/* Une liste de choix (scènes, pages, calques, pièces) : la ligne choisie sur l'accent doux. */
.liste-app{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); min-height:0; overflow-y:auto; }
.liste-app-item{ display:flex; align-items:center; gap:var(--sp-8); min-height:var(--outils-h); padding:var(--sp-4) var(--sp-6); border-radius:var(--radius-sm); color:var(--txt); cursor:pointer; }
.liste-app-item:hover{ background:var(--outils-survol); }
.liste-app-item[aria-selected="true"], .liste-app-item[aria-current="true"]{ background:var(--outils-accent-doux); }
/* Des onglets en texte : le choisi souligné d'accent (les onglets du volet du Document, de l'inspecteur…). */
.onglets-app{ display:flex; gap:0; border-bottom:1px solid var(--line2); }
.onglets-app > button{ flex:0 1 auto; min-width:0; height:var(--outils-h); padding:0 var(--sp-10); border:0; border-radius:0; background:none; color:var(--mut);
  font:inherit; font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; box-shadow:none; }
.onglets-app > button:hover{ color:var(--txt); }
.onglets-app > button[aria-selected="true"]{ color:var(--txt); font-weight:var(--fw-medium); box-shadow:inset 0 -2px 0 var(--outils-accent); }
/* Une barre qui flotte sur une scène (outils d'une vue 3D, d'une toile) : la rangée en carte, un filet, sans ombre. */
.flottant-app{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2); box-sizing:border-box; max-width:calc(100% - var(--sp-24));
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); }

/* La barre flottante (CDC_APPSTUDIO_MODIF D1, L2, 2026-11-05) : la barre du Lecteur, la colonne d'outils et la pilule du
   bas de la Toile la lisent ; la changer ici les change toutes (trois feuilles, trois dessins avant : 15-render, 35-graph,
   37b). Le proprio, 2026-11-03 : « rayon un peu plus marqué, bordure de 0,5 px, la même DA pour les deux barres flottantes
   du Design, horizontale et verticale ». Le rayon monte d'un cran (--radius, 10 px, Q1 au défaut), le filet passe à 0,5 px
   (un pixel physique sur un écran Retina, arrondi à 1 px par Chrome sur un écran de densité 1), et une ombre LÉGÈRE
   revient : le 2026-10-21 le proprio avait dit « retire la box shadow de la barre flottante », D1 (2026-11-03, plus récent)
   demande une ombre légère, c'est D1 qui est appliquée. Fond et filet seuls ici : la disposition (horizontale, verticale,
   place, marges) reste à chaque barre. */
:root{ --barre-flottante-filet:.5px; --barre-flottante-ombre:0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.07); }
html[data-theme="dark"]{ --barre-flottante-ombre:0 1px 2px rgba(0,0,0,.24), 0 4px 14px rgba(0,0,0,.28); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --barre-flottante-ombre:0 1px 2px rgba(0,0,0,.24), 0 4px 14px rgba(0,0,0,.28); } }
.barre-flottante{ box-sizing:border-box; background:var(--card); border:var(--barre-flottante-filet) solid var(--line);
  border-radius:var(--radius); box-shadow:var(--barre-flottante-ombre); }
.barre-flottante-h{ display:flex; flex-direction:row; align-items:center; }
.barre-flottante-v{ display:flex; flex-direction:column; align-items:center; }

/* Sous le bandeau partagé, la rangée d'outils d'un éditeur se colle au bandeau, comme celle du Tableur et du Document : la
   fenêtre Édition (21-edition.css) laissait entre eux son écart de 12 px, une bande vide sous les menus. */
.edition.ed-edite{ gap:0; }

/* ── Le pied d'état ──────────────────────────────────────────────────────── */
.pied-app{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-10); border-top:1px solid var(--line2); background:var(--card2); min-height:28px; flex:none; }
.pied-stat{ color:var(--mut); font-size:var(--fs-sm); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pied-droite{ display:flex; align-items:center; gap:var(--sp-6); margin-left:auto; flex:none; }
/* Le zoom : une pilule de 26 px sur le fond des listes ; − et + en boutons fantômes de 22 px ; le pourcentage en chiffres
   tabulaires (sa largeur ne saute pas de 90 % à 110 %). */
.pied-zoom{ display:inline-flex; align-items:center; gap:var(--sp-2); height:26px; padding:0 var(--sp-2); box-sizing:border-box; border-radius:var(--radius-sm); background:var(--outils-champ); }
.pied-zoom > button{ width:var(--ctl-h-petit); min-width:var(--ctl-h-petit); height:var(--ctl-h-petit); padding:0; border:0; border-radius:var(--radius-xs); color:var(--mut); background:none; cursor:pointer; display:grid; place-items:center; }
.pied-zoom > button:hover{ background:var(--card); color:var(--txt); }
.pied-zoom > button svg.ic{ width:var(--ic-petit); height:var(--ic-petit); }
.pied-zoom-texte{ min-width:42px; text-align:center; font-size:var(--fs-sm); font-weight:var(--fw-medium); font-variant-numeric:tabular-nums; color:var(--txt); cursor:default; }
/* Un choix à deux ou trois positions du pied (modes d'affichage du Document) : la pilule du zoom, le choisi en carte. */
.pied-bascule{ display:inline-flex; align-items:center; gap:var(--sp-2); height:26px; padding:0 var(--sp-2); box-sizing:border-box; border-radius:var(--radius-sm); background:var(--outils-champ); }
.pied-bascule > button{ height:var(--ctl-h-petit); padding:0 var(--sp-6); border:0; border-radius:var(--radius-xs); color:var(--mut); background:none; cursor:pointer; font:inherit; font-size:var(--fs-sm); display:inline-flex; align-items:center; gap:var(--sp-4); }
.pied-bascule > button svg.ic{ width:var(--ic-petit); height:var(--ic-petit); }
.pied-bascule > button:hover{ color:var(--txt); }
.pied-bascule > button[aria-pressed="true"]{ background:var(--card); color:var(--txt); box-shadow:inset 0 0 0 1px var(--line); }   /* S6 : un filet, plus une ombre */

/* ── La page sur son fond ─────────────────────────────────────────────────── */
.page-fond{ background:var(--page-fond); }
.page-feuille{ background:var(--page-papier); color:var(--page-encre); box-shadow:var(--page-ombre); }

/* ── Le style (CDC_DA_COMMUNE § 6, 2026-10-24) ──────────────────────────────
   Le proprio : « trait fin, esthétique, moderne, compact, minimaliste ». Ces règles valent pour toutes les fenêtres d'app
   (#dhapp) et le panneau du Studio (nav.snav) ; chacune est un jeton de plus haut, révocable ici.
   S1 : un seul trait pour toutes les icônes (la base de l'atelier est à 2 px, 03-layout), chevrons des listes compris ; plus
   de surface duotone sous les icônes du registre (--ic-duo, 01-tokens). */
#dhapp, nav.snav, .dhsel-panel{ --ic-duo:0; }
/* Un trait compté en pixels d'écran (non-scaling-stroke) : les icônes du registre (dessinées sur 24), les chevrons des listes
   (sur 16, leur trait posé sur le tracé) et les tailles de 12 à 30 px ont ainsi tous le même trait à l'écran. */
#dhapp svg.ic, #dhapp button svg, nav.snav svg.ic, .dhsel-caret, .dhsel-ok, .dhsel-oicon{ stroke-width:var(--ic-trait); }
:is(#dhapp svg.ic, #dhapp button svg, nav.snav svg.ic, .dhsel-caret, .dhsel-ok, .dhsel-panel svg.ic) :is(path, circle, rect, line, polyline, polygon, ellipse){ stroke-width:var(--ic-trait); vector-effect:non-scaling-stroke; }
/* S8 : dans une liste déroulante (DHSelect, 29-select), le choix en accent doux comme toute ligne choisie, plus en encre
   d'accent. */
.dhsel-panel .dhsel-opt.sel{ color:var(--txt); background:var(--outils-accent-doux); }
.dhsel-panel .dhsel-opt.sel .dhsel-oicon, .dhsel-panel .dhsel-opt:hover .dhsel-oicon, .dhsel-panel .dhsel-opt.active .dhsel-oicon{ color:var(--txt); }
/* S8 : un seul anneau de focus, au filet d'accent, sur tout ce qui se clique dans une app. */
#dhapp :is(.outil, .onglets-app > button, .studio-onglets > button, .liste-app-item, .pied-bascule > button, .pied-zoom > button, .bandeau-menu, .bandeau-ic, .bandeau-rond, .bandeau-discussions):focus-visible{
  outline:2px solid var(--outils-accent-filet); outline-offset:1px; box-shadow:none; }
/* S2 : trois tailles d'icône. Le relevé du banc (da_style_ui) en trouvait dix, de 9 à 20 px, chaque feuille la sienne ; elles
   sont ramenées ici plutôt que dans dix feuilles. 16 px dans une rangée d'outils, 14 px dans une ligne de liste ou un petit
   bouton, 12 px pour un chevron. Hors S2 : les illustrations (vignettes, états vides, à 30 px) et les deux glyphes larges
   « ,0 → ,00 » du Tableur (18 × 16, un dessin de chiffres). */
#dhapp :is(.gph-tool svg.ic, .bandeau-discussions svg, .esh-tb-btn.esh-cadre svg.ic){ width:var(--outils-icone); height:var(--outils-icone); }
#dhapp :is(.biz-nav-ic svg, .ed-tnode .ic, .rv-devbtn svg.ic, .rv-addr .rv-nav svg.ic){ width:var(--ic-petit); height:var(--ic-petit); }
/* Les icônes du panneau du Studio : 14 → 16 px le 2026-11-02 (le proprio : « agrandis légèrement, × 1,15 »). */
nav.snav .sni svg.ic{ width:16px; height:16px; }
/* Le panneau du Studio (04-studio) : ses lignes à la hauteur et au rayon des contrôles (31 px au rayon de 10 avant) ; les tuiles
   du groupe Studio gardent 32 px pour tenir deux lignes de nom (proprio, 2026-10-16). La ligne choisie passe en accent doux,
   comme le rail de l'Entreprise et l'arbre des Dossiers (S8, accent rare) : elle était en accent plein. Révocable : ces deux
   règles. */
nav.snav .sni{ border-radius:var(--radius-sm); }
nav.snav .sni:not(.snav-tuiles .sni){ min-height:var(--outils-h); padding-block:0; }
nav.snav .sni.on{ background:color-mix(in srgb, var(--accent) 14%, var(--card)); color:var(--txt); font-weight:var(--fw-medium); }   /* l'accent du panneau (violet de l'atelier), pas celui des apps */
nav.snav .sni.on svg.ic{ color:var(--accent); }
nav.snav .snav-car svg.ic, #dhapp :is(.gph-fold-ic svg.ic, .cms-gauche .cms-ecran-chev svg.ic, .ed-pt-sec-h-ico, .ed-pt-sec-h-ico svg){ width:var(--ic-chevron); height:var(--ic-chevron); }
}