@layer overrides{
/* 37b-studio-panneaux.css · Les panneaux des applications du Studio, une seule DA (CDC_STUDIO_DA, 2026-10-20). Le proprio, sur
   l'Éditeur d'interface : « il faudrait le même style dans l'app Design (Toile), un style partagé, comme on fait pour le
   header : toutes les apps du Studio devront avoir la même DA ». Comme 22b-bandeau.css pour le haut, cette feuille est la
   source unique du reste : modifier un jeton ici change toutes les apps qui la suivent.
   La référence est le panneau du CMS, redessiné d'après les maquettes du proprio des 14 et 15-10 (49-cms-inspecteur.css) :
   des cartes qui flottent sur le fond, des onglets en texte (le choisi en gras, souligné d'accent), des titres de section
   en gras sans majuscules ni filet, des champs pleins et gris sans bordure, des bascules sur un rail gris dont le choix est en
   accent plein, des gestes en icônes nues.
   Couche overrides, après 37-studio-ui.css : son « Studio Shell » (référence Atelier 3D, juin) re-thème encore .gph-* ;
   à spécificité égale, le dernier de la couche gagne, et ce qui est ici est le dessin voulu.
   Trois parties : 1. les jetons (le CMS les lit aussi, 48-cms.css et 49-cms-inspecteur.css) ; 2. les pièces .studio-*
   pour toute app qui naît ; 3. l'application aux apps existantes, une section par app (la Toile en premier). */

/* ── 1. Les jetons ──────────────────────────────────────────────────────── */
/* Depuis le 2026-10-24 (CDC_DA_COMMUNE), ces jetons LISENT ceux de la DA commune (22c-studio-outils.css) : la Toile, le CMS
   (l'app Interface) et ce qui lit --studio-* suivent un changement fait dans 22c. Le proprio : « tous : une DA partagée,
   comme ça je peux tout améliorer en même temps ». Avant : l'accent violet de l'atelier, des cartes à 12 px du bord. */
:root{
  --studio-champ:var(--outils-champ);                                     /* fond d'un champ, d'un rail, d'un survol */
  --studio-champ-fort:color-mix(in srgb, var(--txt) 11%, transparent);   /* le même, appuyé (survol sur un rail) */
  --studio-accent:var(--outils-accent);
  --studio-accent-plein:var(--outils-accent);                             /* aplat sous une encre blanche */
  --studio-accent-doux:var(--outils-accent-doux);                         /* une ligne choisie dans une liste */
  --studio-gauche-l:var(--panneau-l);
  --studio-droite-l:var(--panneau-l-droit);
  --studio-retrait:0px;                                                   /* les panneaux collés au bord, comme le Tableur */
  --studio-carte-pad:var(--panneau-pad);
  --studio-ctl-h:var(--outils-h);                                         /* champs, bascules, boutons de panneau */
}

/* ── 2. Les pièces ──────────────────────────────────────────────────────── */
.studio-carte{ box-sizing:border-box; padding:var(--studio-carte-pad); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.studio-onglets{ display:flex; gap:0; margin:var(--sp-8) 0; padding:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.studio-onglets > button{ flex:1 1 auto; min-width:0; height:var(--outils-h); padding:0 var(--sp-6); border:0; border-radius:0; background:transparent; box-shadow:none;
  color:var(--mut); font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.studio-onglets > button:hover{ color:var(--txt); }
/* Le choisi comme un onglet de .onglets-app (22c) : l'encre pleine, un demi-gras, le filet d'accent. */
.studio-onglets > button.on, .studio-onglets > button[aria-selected="true"]{ color:var(--txt); font-weight:var(--fw-medium); box-shadow:inset 0 -2px 0 var(--studio-accent); }
.studio-titre{ margin:0; font-size:var(--fs-sm); font-weight:var(--fw-strong); text-transform:none; letter-spacing:0; color:var(--txt); }
.studio-champ{ box-sizing:border-box; height:var(--studio-ctl-h); border:0; border-radius:var(--radius-sm); background:var(--studio-champ); box-shadow:none; color:var(--txt); font-size:var(--fs-sm); }
.studio-champ:focus-visible, .studio-champ:focus-within{ outline:2px solid var(--focus-anneau); outline-offset:0; }
.studio-bascule{ display:flex; gap:var(--sp-2); padding:var(--sp-2); border:0; border-radius:var(--radius-sm); background:var(--studio-champ); }
.studio-bascule > button{ flex:1 1 0; min-width:0; height:24px; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-xs); cursor:pointer; }
.studio-bascule > button:hover{ background:var(--studio-champ-fort); }
.studio-bascule > button.on, .studio-bascule > button[aria-pressed="true"]{ background:var(--studio-accent-doux); color:var(--txt); }
.studio-bt-icone{ display:grid; place-items:center; width:var(--studio-ctl-h); height:var(--studio-ctl-h); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--txt); cursor:pointer; }
.studio-bt-icone:hover:not(:disabled){ background:var(--studio-champ); }

/* ── 3. Les apps ────────────────────────────────────────────────────────── */

/* ━━ 3.1 La Toile (Design) ━━
   Trois cartes sur le fond, comme le CMS : le panneau gauche, la toile, le panneau droit. La toile garde sa carte à elle
   (plutôt que de passer sous les panneaux, comme le cadre du CMS) : ses règles, son dock, sa mini-carte et son ajustement
   au zoom restent justes sans toucher au moteur. Ouverte dans la bibliothèque (.gph-editions), la rangée du haut s'efface :
   ses gestes (menu, annuler, IA, exporter, plein écran) sont tous dans le bandeau. La barre d'état devient la pilule du bas. */
.gph{ position:relative; background:var(--bg); border:0; border-radius:0; }
.gph.gph-editions > .gph-topbar{ display:none; }
.gph .gph-body{ position:relative; display:block; flex:1 1 auto; min-height:0; }
.gph .gph-left, .gph .gph-right{ position:absolute; top:var(--studio-retrait); bottom:var(--studio-retrait); z-index:2; box-sizing:border-box;
  padding:var(--studio-carte-pad); border:0; border-radius:0; background:var(--card); overflow-y:auto; }
.gph .gph-left{ left:var(--studio-retrait); width:var(--studio-gauche-l); border-right:1px solid var(--line2); }
.gph .gph-right{ right:var(--studio-retrait); width:var(--studio-droite-l); border-left:1px solid var(--line2); }
.gph .gph-canvas-wrap{ position:absolute; top:var(--studio-retrait); bottom:var(--studio-retrait);
  left:calc(var(--studio-gauche-l) + var(--studio-retrait) * 2); right:calc(var(--studio-droite-l) + var(--studio-retrait) * 2);
  border:0; border-radius:0; }
/* Le plein écran de la toile seule (bouton du bandeau) garde la même scène, à bords francs. */
.gph:fullscreen{ background:var(--bg); }

/* La pilule du bas : la barre flottante partagée (.barre-flottante de 22c, CDC_APPSTUDIO_MODIF L2 : fond, filet de 0,5 px,
   rayon, ombre légère), centrée sous la toile, des icônes seules (le libellé reste en bulle) ; le zoom et la taille de la
   sélection gardent leur texte. Ici la place et la disposition seulement. */
.gph > .gph-status{ position:absolute; z-index:7; bottom:var(--sp-12);
  left:calc(var(--studio-gauche-l) + var(--sp-12)); right:calc(var(--studio-droite-l) + var(--sp-12));
  width:max-content; max-width:calc(100% - var(--studio-gauche-l) - var(--studio-droite-l) - var(--sp-24)); margin-inline:auto; box-sizing:border-box;
  gap:var(--sp-2); padding:var(--sp-2); overflow:hidden; }
.gph > .gph-status .gph-status-sp{ flex:0 0 var(--sp-4); }
.gph > .gph-status .gph-st-lib{ display:none; }
.gph > .gph-status .gph-stbtn{ height:var(--studio-ctl-h); padding:0 var(--sp-8); border:0; border-radius:var(--radius-sm); color:var(--txt); }
.gph > .gph-status .gph-stbtn:hover{ background:var(--studio-champ); color:var(--txt); }
.gph > .gph-status .gph-stbtn.on{ background:var(--studio-accent-doux); color:var(--txt); }
.gph > .gph-status > span{ padding:0 var(--sp-4); color:var(--mut); font-size:var(--fs-sm); white-space:nowrap; }

/* Le dock d'outils : la barre flottante partagée (.barre-flottante, 22c), verticale ; la mini-carte : une carte, sans ombre lourde. */
.gph .gph-tools{ padding:var(--sp-2); }
.gph .gph-tool{ width:var(--studio-ctl-h); height:var(--studio-ctl-h); padding:0; border-radius:var(--radius-sm); }   /* sans marge : à 28 px (36 avant), l'icône sortait à droite */
/* Cases, curseurs : l'accent des apps (22c), plus le violet de l'atelier. */
.gph input[type=checkbox], .gph input[type=radio], .gph input[type=range]{ accent-color:var(--studio-accent); }
.gph .gph-tool svg{ width:var(--outils-icone); height:var(--outils-icone); }   /* S2 : 18 px avant (.su-tool svg, 37) */
.gph .gph-tool:hover{ background:var(--studio-champ); }
.gph .gph-minimap{ bottom:calc(var(--studio-ctl-h) + var(--sp-12) * 2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); box-shadow:none; }   /* au-dessus de la pilule du bas, qu'elle couvrait */
.gph .gph-minimap-bar{ font-size:var(--fs-xs); font-weight:var(--fw-strong); text-transform:none; letter-spacing:0; color:var(--txt); }

/* Les onglets (Calques / Ressources ; Design, Export, Prototype, Inspecter) : du texte sur un filet, le choisi souligné. */
.gph .gph-left-tabs, .gph .gph-insp-tabs{ display:flex; width:100%; box-sizing:border-box; gap:0; margin:var(--sp-4) 0 var(--sp-8); padding:0;
  border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.gph .gph-left-tabs button, .gph .gph-insp-tabs button{ flex:1 1 auto; min-width:0; height:var(--outils-h); padding:0 var(--sp-4); border:0; border-radius:0; background:transparent;
  box-shadow:none; color:var(--mut); font-size:var(--fs-sm); font-weight:var(--fw-regular); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gph .gph-left-tabs button:hover, .gph .gph-insp-tabs button:hover{ background:transparent; color:var(--txt); }
.gph .gph-left-tabs button.on, .gph .gph-insp-tabs button.on{ background:transparent; color:var(--txt); font-weight:var(--fw-medium); box-shadow:inset 0 -2px 0 var(--studio-accent); }

/* Pages et calques : une ligne choisie en accent doux, comme les blocs du CMS ; la page courante en gras. */
.gph .gph-pane-head{ background:transparent; padding-inline:var(--sp-2); }
.gph .gph-pages-titre{ font-size:var(--fs-sm); font-weight:var(--fw-strong); text-transform:none; letter-spacing:0; color:var(--txt); }
.gph .gph-pages-list{ padding:0 0 var(--sp-6); }
/* Un document a toujours au moins une page : la liste, vide le temps d'être remplie, en garde la place, sinon les onglets
   Calques et Ressources descendaient de 30 px sous l'œil (layout-shift relevé au banc squelettes_ui, 2026-11-04). */
.gph .gph-pages-list:empty{ min-height:calc(var(--outils-h, 28px) + var(--sp-2, 2px) + var(--sp-6, 6px)); }   /* une page (28 + 2) et le bas de la liste */
.gph .gph-page, .gph .gph-layer{ min-height:var(--studio-ctl-h); box-sizing:border-box; font-size:var(--fs-sm); }
.gph .gph-page:hover, .gph .gph-layer:hover{ background:var(--studio-champ); }
/* La page courante comme toute ligne choisie de l'atelier (l'accent doux, l'encre pleine) ; un aplat d'accent jusqu'au
   2026-10-24. */
.gph .gph-page.on{ background:var(--studio-accent-doux); color:var(--txt); font-weight:var(--fw-medium); }
.gph .gph-page.on .gph-l-btn{ color:var(--txt); }
.gph .gph-layer.sel{ background:var(--studio-accent-doux); }
.gph .gph-search{ padding:0 0 var(--sp-6); }
.gph .gph-search input{ width:100%; height:var(--studio-ctl-h); box-sizing:border-box; padding:0 var(--sp-8); border:0; border-radius:var(--radius-sm);
  background:var(--studio-champ); color:var(--txt); font-size:var(--fs-sm); }
.gph .gph-mini{ border:0; border-radius:var(--radius-sm); background:transparent; }
.gph .gph-mini:hover{ background:var(--studio-champ); color:var(--txt); }

/* L'inspecteur, comme le Style du CMS : un groupe (Disposition, Apparence, Remplissage…) a son titre en gras derrière son
   chevron, sans majuscules ni filet ; dedans, les sous-titres (Coins, Transformer) sont des libellés de poids normal. */
.gph .gph-grp{ border-bottom:0; }
.gph .gph-grp-h{ padding:var(--sp-6) var(--sp-2); border-radius:var(--radius-sm); }
.gph .gph-grp-h:hover{ background:transparent; }
.gph .gph-grp-t{ font-size:var(--fs-sm); font-weight:var(--fw-strong); text-transform:none; letter-spacing:0; color:var(--txt); }
.gph .gph-grp-ch{ opacity:.7; }
.gph .gph-grp-body .gph-insp-sec{ padding:var(--sp-2) var(--sp-2) var(--sp-8); }
.gph .gph-grp-body .gph-insp-sub{ font-size:var(--fs-xs); font-weight:var(--fw-regular); text-transform:none; letter-spacing:0; color:var(--txt); margin-bottom:var(--sp-4); }
.gph .gph-insp-sec{ padding:var(--sp-6) var(--sp-2) var(--sp-8); border-bottom:0; }
.gph .gph-insp-sec.gph-collapsed{ padding-block:var(--sp-4); }
.gph .gph-insp-sub{ font-size:var(--fs-sm); font-weight:var(--fw-strong); text-transform:none; letter-spacing:0; color:var(--txt); margin-bottom:var(--sp-6); }
/* Un titre de section se lit au début de la ligne, son chevron devant (35-graph le poussait au bout, space-between). */
.gph .gph-fold > .gph-insp-sub{ justify-content:flex-start; gap:var(--sp-4); text-align:start; }
.gph .gph-insp-head{ padding-block:var(--sp-4) var(--sp-6); }
.gph .gph-insp-title{ font-size:var(--fs-sm); font-weight:var(--fw-strong); }
.gph .gph-insp-type, .gph .gph-insp-hint, .gph .gph-al-lbl{ color:var(--mut); }

/* Les champs : pleins, gris, sans bordure, 28 px ; l'anneau au focus. */
.gph .gph-fld{ height:var(--studio-ctl-h); border:0; border-radius:var(--radius-sm); background:var(--studio-champ); }
.gph .gph-fld:focus-within{ outline:2px solid var(--focus-anneau); outline-offset:0; border-color:transparent; }
.gph .gph-right :is(select, input[type="text"], input[type="number"], input[type="search"], input:not([type]), textarea):not(.gph-fld input){
  border:0; border-radius:var(--radius-sm); background:var(--studio-champ); box-shadow:none; color:var(--txt); font-size:var(--fs-sm); }
.gph .gph-right select{ height:var(--studio-ctl-h); }
.gph .gph-right .dhsel-trigger{ min-height:var(--studio-ctl-h); border:0; border-radius:var(--radius-sm); background:var(--studio-champ); box-shadow:none; color:var(--txt); font-size:var(--fs-sm); }   /* le menu maison (46-select.js), comme dans le CMS */
.gph .gph-right :is(select, input, textarea):focus-visible{ outline:2px solid var(--focus-anneau); outline-offset:0; }

/* Les rangées de gestes (aligner, retourner, booléens) : un rail gris, les gestes nus dessus. */
.gph .gph-al-btn{ height:var(--studio-ctl-h); border:0; border-radius:var(--radius-sm); background:var(--studio-champ); color:var(--txt); }
.gph .gph-al-btn:hover, .gph .gph-bool-bar .gph-al-btn:hover{ background:var(--studio-champ-fort); color:var(--txt); border-color:transparent; }
.gph .gph-al-btn.on{ background:var(--studio-accent-doux); color:var(--txt); }

/* Les bascules (formats, modes, masque) : le rail gris, le choix en accent plein. */
.gph .gph-ex-seg, .gph .gph-mask-seg{ padding:var(--sp-2); border:0; border-radius:var(--radius-sm); background:var(--studio-champ); }
.gph .gph-ex-seg button, .gph .gph-mask-seg button{ height:24px; padding:0 var(--sp-8); border-radius:var(--radius-xs); font-size:var(--fs-xs); }
.gph .gph-ex-seg button:hover, .gph .gph-mask-seg button:hover{ background:var(--studio-champ-fort); }
.gph .gph-ex-seg button.on, .gph .gph-mask-seg button.on{ background:var(--card); color:var(--txt); box-shadow:inset 0 0 0 1px var(--line); }   /* comme .pied-bascule (22c) : un filet, pas d'ombre */

/* Les pastilles de couleur : rondes, comme celles du CMS. */
.gph .gph-swatch{ border-radius:var(--radius-pill); }

/* La carte de la toile vierge : une carte de la DA commune, ses gestes en champs, la génération par l'IA en bouton principal
   (.outil-principal de 22c : l'accent des apps, plus l'aplat violet pleine largeur). */
.gph .gph-ob-card{ border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:none; }
.gph .gph-ob-actions button{ min-height:0; height:var(--ctl-h-grand); padding-block:0; border:1px solid transparent; border-radius:var(--radius-sm); background:var(--outils-champ); }
.gph .gph-ob-title{ font-weight:var(--fw-strong); }
/* CDC_DA_COMMUNE § 6 (2026-10-24) : les petits gestes de la Toile à la hauteur des petits boutons (22 px). */
.gph .gph-l-btn, .gph .gph-vc-exp, .gph .gph-pages-fold{ min-height:var(--ctl-h-petit); height:var(--ctl-h-petit); padding-block:0; box-sizing:border-box; }
.gph .gph-l-btn{ min-width:var(--ctl-h-petit); justify-content:center; }
.gph .gph-vc-exp{ border-color:var(--line2); }
.gph .gph-ob-actions button:hover{ border-color:var(--line); }
.gph .gph-ob-actions .primary{ border-color:transparent; background:var(--outils-accent); color:var(--on-solid); }
.gph .gph-ob-actions .primary:hover{ background:color-mix(in srgb, var(--outils-accent) 88%, var(--txt)); }

/* Sous 1100 px de large, les panneaux se resserrent pour laisser de la place à la toile. */
@media (max-width:1100px){ .gph{ --studio-gauche-l:220px; --studio-droite-l:260px; } }

}

/* ── 4. L'inspecteur : un panneau, une DA, partagée (VAGUE_UI_MODIF2 D1, D4, 2026-11-04) ───────────────────────────────────
   Le proprio (2026-11-02) : « le panel de droite de l'app Design doit avoir la même DA, la même présentation que ce qu'on a
   fait pour le panel de droite de l'app Interface ». Les pièces de l'inspecteur de l'Interface (49-cms-inspecteur.css,
   maquette du 2026-10-14) sont ici, UNE fois, sous des noms neutres (.studio-insp-*), les sélecteurs de l'Interface en alias
   dans la même règle : changer une pièce la change dans les deux apps. Dans la couche overrides, après les feuilles des
   apps : elles gagnaient déjà la cascade depuis 49 (dernière feuille de l'Interface), elles la gagnent ici aussi. */
@layer overrides{
  /* L'en-tête compact : l'icône du type, le nom, les gestes en tuiles. */
  :is(.cms-droite .cms-insp-tete, .studio-insp-tete){ display:flex; align-items:center; gap:var(--sp-6); min-height:32px; }
  :is(.cms-droite .cms-insp-noms, .studio-insp-noms){ flex:1 1 auto; min-width:0; }
  :is(.cms-droite .cms-inspecteur .cms-d-titre, .studio-insp-titre-objet){ margin:0; font-size:var(--fs-sm); line-height:1.2; }
  :is(.cms-droite .cms-insp-nom, .studio-insp-nom){ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--fw-strong); }
  :is(.cms-droite .cms-insp-tete .cms-insp-actes, .studio-insp-actes){ flex:none; margin:0; padding:0; border:0; gap:var(--sp-2); }
  :is(.cms-droite .cms-insp-actes .cms-insp-bt, .studio-insp-actes .studio-insp-bt){ width:28px; height:28px; border-radius:var(--radius-sm); background:transparent; color:var(--txt); }
  :is(.cms-droite .cms-insp-actes .cms-insp-bt, .studio-insp-actes .studio-insp-bt):hover:not(:disabled){ background:var(--studio-champ); }
  /* Les onglets : du texte sur une ligne de fond, le choisi en gras, souligné d'accent. */
  :is(.cms-droite .cms-insp-onglets, .studio-insp-onglets){ display:flex; gap:0; margin:var(--sp-8) 0 var(--sp-8); padding:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
  :is(.cms-droite .cms-insp-onglets .cms-seg-bt, .studio-insp-onglets > button){ flex:1 1 auto; height:var(--outils-h); padding:0 var(--sp-6); border-radius:0; background:transparent; box-shadow:none; color:var(--mut); font-size:var(--fs-sm); font-weight:var(--fw-regular); }
  :is(.cms-droite .cms-insp-onglets .cms-seg-bt.on, .studio-insp-onglets > button.on){ background:transparent; color:var(--txt); font-weight:var(--fw-medium); box-shadow:inset 0 -2px 0 var(--studio-accent); }
  /* Les titres de section : en gras, sans capitales ni filet. */
  :is(.cms-droite :is(.cms-sec-ligne .cms-bloc-r-titre, .cms-insp-contenu > .cms-bloc-r-titre, .cms-insp-evenements > .cms-bloc-r-titre), .studio-insp-titre){ font-size:var(--fs-sm); font-weight:var(--fw-strong); text-transform:none; letter-spacing:0; color:var(--txt); }
  /* Les libellés des champs, en poids normal (proprio, 2026-10-14) ; la puce d'un champ du Design en est un. */
  :is(.cms-droite :is(.cms-design-champ label > span, .cms-champ > span), .studio-puce){ font-size:var(--fs-xs); font-weight:var(--fw-regular); color:var(--txt); }
  /* Les champs : pleins, gris, sans bordure ; le focus en anneau. */
  :is(.cms-droite, .studio-insp) :is(input:not([type="checkbox"]):not([type="color"]):not([type="range"]):not(.cms-g-renommer), select, textarea:not(.cms-css), .dhsel-trigger){ border:0; border-radius:var(--radius-sm);
    background:var(--studio-champ); box-shadow:none; color:var(--txt); font-size:var(--fs-sm); }
  :is(.cms-droite, .studio-insp) :is(input:not([type="checkbox"]):not([type="color"]):not([type="range"]), select, textarea:not(.cms-css), .dhsel-trigger):focus-visible{ outline:2px solid var(--focus-anneau); outline-offset:0; }
  /* Les bascules : un rail gris, le choix en accent plein. */
  :is(.cms-droite .cms-bascule, .studio-bascule){ padding:var(--sp-2); border:0; background:var(--studio-champ); }
  :is(.cms-droite .cms-bascule-bt, .studio-bascule > button){ height:24px; min-width:0; color:var(--txt); font-size:var(--fs-xs); }
  :is(.cms-droite .cms-bascule-bt.on, .studio-bascule > button.on){ background:var(--studio-accent-plein); color:var(--on-solid); box-shadow:none; }
  :is(.cms-droite .cms-bascule-bt, .studio-bascule > button) svg.ic{ width:15px; height:15px; }

  /* Ce que l'Interface reçoit de 48-cms.css et qu'une pièce neutre n'a pas d'ailleurs : la base d'un onglet et d'une bascule. */
  .studio-insp-actes{ display:flex; align-items:center; }
  .studio-insp-bt{ display:grid; place-items:center; flex:none; padding:0; border:0; cursor:pointer; }
  .studio-insp-bt:disabled{ opacity:.35; cursor:default; }
  .studio-insp-onglets > button{ display:grid; place-items:center; min-width:0; border:0; cursor:pointer; font-family:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .studio-insp-onglets > button:hover{ color:var(--txt); }
  .studio-insp-onglets > button svg.ic{ width:16px; height:16px; }
  .studio-bascule{ display:inline-flex; gap:var(--sp-2); border-radius:var(--radius-sm); }
  .studio-bascule > button{ display:grid; place-items:center; flex:1 1 0; padding:0; border:0; border-radius:var(--radius-xs); background:transparent; cursor:pointer; }
  .studio-bascule > button:hover:not(.on){ background:var(--line2); }
  .studio-insp-icone{ display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:var(--radius-sm); background:var(--studio-champ); color:var(--txt); }
  .studio-insp-icone svg.ic{ width:16px; height:16px; }
  /* L'état vide, celui de l'Interface (.cms-d-vide) : une phrase discrète sous le titre du panneau. */
  .studio-insp-vide{ margin:0 0 var(--sp-12); color:var(--mut); font-size:var(--fs-sm); }

  /* Le Design lit ces pièces (06-inspector.js) : le panneau a le retrait de celui de l'Interface ; Prototype et Inspecter sont des
     tuiles au bout de la rangée des onglets ; un groupe n'a plus de pli (l'onglet l'a remplacé, Q1) ; une bascule prend sa case. */
  .gph .gph-right.gph-insp-studio{ padding:var(--sp-8); }
  .gph .gph-insp-onglets > .gph-insp-tuile{ flex:none; width:var(--outils-h); padding:0; }
  .gph .gph-insp-studio .gph-grp-ch{ display:none; }
  .gph .gph-insp-studio .gph-grp.col > .gph-grp-body{ display:block; }
  .gph .gph-insp-studio .gph-grp-h{ padding-inline:0; cursor:default; }
  .gph .gph-insp-studio .gph-bascule{ display:flex; width:100%; box-sizing:border-box; }
}