@layer overrides{
/* ════════════════════════════════════════════════════════════════════════════
   FRAMEWORK UI DU STUDIO - « Studio Shell »                  (CDC_STUDIO_UI.md)
   ----------------------------------------------------------------------------
   Source de vérité UNIQUE pour le chrome de TOUS les éditeurs du Studio :
   barre haute, onglets, outils, panneaux, barre d'état, cadres de canvas, champs.
   Référence visuelle = Atelier 3D (CAO). Importé EN DERNIER → gagne la cascade.

   2 rôles :
     1) tokens chrome `--su-*` (dérivés de 01-tokens.css : clair/sombre/accent/densité)
        + primitives `.su-*` réutilisables (pour tout futur éditeur) ;
     2) re-thème les classes existantes (.cao-* .gph-* .ve-* …) via ces tokens, SANS
        toucher au JS → modifier une variable ici se répercute sur tous les éditeurs.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* Depuis le 2026-10-24 (CDC_DA_COMMUNE), ces jetons LISENT ceux de la DA commune (22c-studio-outils.css) : changer
     l'accent, la hauteur d'un outil ou un fond de survol dans 22c change aussi tout ce qui porte encore .su-* (la Toile,
     les compléments). Avant : un accent, des rayons (9 et 10 px) et une taille d'outil (32 px) propres au « Studio Shell ». */
  --su-chrome:      var(--card);                               /* barres (ruban/onglets/état) */
  --su-panel:       var(--card);                               /* panneaux & cadres de canvas */
  --su-line:        var(--line);
  --su-line2:       var(--line2);
  --su-radius:      var(--radius-sm);                          /* conteneurs de chrome        */
  --su-radius-btn:  var(--radius-sm);                          /* boutons / outils            */
  --su-tool:        var(--outils-h);                           /* côté d'un outil carré       */
  --su-gap:         var(--sp-6);
  --su-active:      var(--outils-accent);
  --su-active-h:    color-mix(in srgb, var(--outils-accent) 88%, var(--txt));
  --su-active-fg:   var(--on-solid);
  --su-soft:        var(--outils-accent-doux);
  --su-soft-line:   var(--outils-accent-filet);
  --su-hover:       var(--outils-survol);
  --su-txt:         var(--txt);
  --su-mut:         var(--mut);
  --su-pop:         var(--elev-2);
  --su-cap:         10px;                                      /* mini-légende de groupe      */
}

/* ════════════════ 1. PRIMITIVES RÉUTILISABLES (.su-*) ═══════════════════════ */

/* - Barre haute / ruban - */
.su-ribbon{ display:flex; align-items:center; gap:var(--sp-10); flex-wrap:wrap;
  padding:var(--sp-6) var(--sp-10); background:var(--su-chrome); border:1px solid var(--su-line);
  border-radius:var(--su-radius); }
.su-spacer{ flex:1 1 auto; }
.su-sep{ width:1px; align-self:stretch; min-height:22px; background:var(--su-line); margin:0 var(--sp-2); }

/* - Onglets (liseré accent actif) - */
.su-tabs{ display:flex; align-items:center; gap:var(--sp-2); }
.su-tab{ position:relative; padding:var(--sp-6) var(--sp-12); border:0; background:transparent; color:var(--su-mut);
  font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-strong); line-height:var(--lh-flat); cursor:pointer; border-radius:var(--radius) var(--radius) 0 0; }
.su-tab:hover{ color:var(--su-txt); background:var(--su-hover); }
.su-tab[aria-selected="true"]{ color:var(--su-txt); }
.su-tab[aria-selected="true"]::after{ content:""; position:absolute; left:8px; right:8px; bottom:-1px;
  height:2px; border-radius:var(--radius-xs); background:var(--su-active); }

/* - Cluster d'outils (pilule encastrée) - */
.su-cluster{ display:inline-flex; gap:var(--sp-2); padding:var(--sp-2); background:var(--su-panel);
  border:1px solid var(--su-line); border-radius:var(--radius); }

/* - Outil carré (icône) - */
.su-tool{ width:var(--su-tool); height:var(--su-tool); display:grid; place-items:center;
  border:1px solid transparent; border-radius:var(--su-radius-btn); background:transparent;
  color:var(--su-mut); cursor:pointer; line-height:var(--lh-flat); }
.su-tool:hover{ background:var(--su-hover); color:var(--su-txt); }
.su-tool[aria-pressed="true"], .su-tool.on{ background:var(--su-active); color:var(--su-active-fg);
  border-color:var(--su-active); }
.su-tool svg{ width:18px; height:18px; }

/* - Boutons texte / icône - */
.su-btn{ display:inline-flex; align-items:center; gap:var(--sp-6); padding:var(--sp-6) var(--sp-12); font:inherit; font-size:var(--fs-sm);
  border:1px solid var(--su-line); border-radius:var(--su-radius-btn); background:var(--su-panel);
  color:var(--su-txt); cursor:pointer; white-space:nowrap; }
.su-btn:hover{ border-color:var(--su-active); background:var(--su-hover); }
.su-btn:disabled{ opacity:.42; cursor:default; }
.su-btn--primary{ background:var(--su-active); border-color:var(--su-active); color:var(--su-active-fg); }
.su-btn--primary:hover{ filter:brightness(1.06); background:var(--su-active); }
.su-iconbtn{ width:var(--su-tool); height:var(--su-tool); display:grid; place-items:center; padding:0;
  border:1px solid var(--su-line); border-radius:var(--su-radius-btn); background:var(--su-panel);
  color:var(--su-txt); cursor:pointer; font-size:var(--fs-base); }
.su-iconbtn:hover{ background:var(--su-hover); border-color:var(--su-active); }
.su-iconbtn:disabled{ opacity:.42; cursor:default; }

/* - Palette verticale (rail gauche) - */
.su-rail{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-8) var(--sp-4); align-items:center;
  background:var(--su-panel); border:1px solid var(--su-line); border-radius:var(--su-radius); }
.su-railb{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); width:50px; padding:var(--sp-6) var(--sp-2);
  border:1px solid transparent; border-radius:var(--su-radius-btn); background:transparent; color:var(--su-mut);
  font:inherit; font-size:var(--fs-2xs); font-weight:var(--fw-medium); cursor:pointer; }
.su-railb:hover{ background:var(--su-hover); color:var(--su-txt); }
.su-railb[aria-pressed="true"]{ background:var(--su-active); color:var(--su-active-fg); border-color:var(--su-active); }

/* - Panneau latéral - */
.su-panel-box{ display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:var(--su-panel); border:1px solid var(--su-line); border-radius:var(--su-radius); }
.su-panel-tabs{ display:flex; gap:var(--sp-2); padding:var(--sp-6) var(--sp-6) 0; background:var(--su-chrome); border-bottom:1px solid var(--su-line); }
.su-panel-tab{ padding:var(--sp-6) var(--sp-8); border:0; background:transparent; color:var(--su-mut); font:inherit; font-size:var(--fs-xs);
  font-weight:var(--fw-strong); line-height:var(--lh-flat); cursor:pointer; border-radius:var(--radius-sm) var(--radius-sm) 0 0; white-space:nowrap; position:relative; }
.su-panel-tab:hover{ color:var(--su-txt); background:var(--su-hover); }
.su-panel-tab[aria-selected="true"]{ color:var(--su-txt); }
.su-panel-tab[aria-selected="true"]::after{ content:""; position:absolute; left:8px; right:8px; bottom:-1px;
  height:2px; border-radius:var(--radius-xs); background:var(--su-active); }

/* - Barre d'état - */
.su-status{ display:flex; align-items:center; gap:var(--sp-12); padding:var(--sp-4) var(--sp-12); background:var(--su-chrome);
  border:1px solid var(--su-line); border-radius:var(--su-radius); font-size:var(--fs-xs); color:var(--su-mut);
  font-variant-numeric:tabular-nums; }

/* - Champ compact - */
.su-field{ display:inline-flex; align-items:center; gap:var(--sp-4); height:30px; padding:0 var(--sp-6); background:var(--su-panel);
  border:1px solid var(--su-line); border-radius:var(--radius); }
.su-field input,.su-field select{ border:0; background:transparent; color:var(--su-txt); font:inherit; font-size:var(--fs-sm); min-width:0; }
.su-field input:focus,.su-field select:focus{ outline:none; }
.su-field:focus-within{ border-color:var(--su-active); }

/* - Bascule segmentée - */
.su-seg{ display:inline-flex; gap:var(--sp-2); padding:var(--sp-2); background:var(--su-panel);
  border:1px solid var(--su-line); border-radius:var(--radius); }
.su-seg button{ border:0; background:transparent; color:var(--su-txt); font:inherit; font-size:var(--fs-sm);
  padding:var(--sp-4) var(--sp-10); border-radius:var(--radius-sm); cursor:pointer; }
.su-seg button.on,.su-seg button[aria-pressed="true"]{ background:var(--su-active); color:var(--su-active-fg); }

/* - Bouton de ruban labellisé (icône + libellé, en colonne) - */
.su-rb{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--sp-2);
  min-width:56px; padding:var(--sp-6) var(--sp-8); border:1px solid transparent; border-radius:var(--su-radius-btn);
  background:transparent; color:var(--su-txt); font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-medium); line-height:1.1;
  cursor:pointer; transition:background .12s,border-color .12s,transform .08s; }
.su-rb:hover{ background:var(--su-hover); border-color:var(--su-line); }
.su-rb:active{ transform:translateY(1px); }
.su-rb[aria-pressed="true"]{ background:var(--su-active); color:var(--su-active-fg); border-color:var(--su-active); }
.su-rb-i{ height:20px; display:flex; align-items:center; font-size:var(--fs-lg); line-height:var(--lh-flat); }
.su-rb-i svg{ width:18px; height:18px; }
.su-rb-l{ white-space:nowrap; }

/* - Contrôles flottants au-dessus d'un canvas (fond translucide) - */
.su-floattool{ width:var(--su-tool); height:var(--su-tool); display:grid; place-items:center;
  border:1px solid var(--su-line); border-radius:var(--su-radius-btn); cursor:pointer; font-size:var(--fs-base);
  color:var(--su-mut); background:color-mix(in srgb, var(--su-panel) 86%, transparent);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.su-floattool:hover{ background:var(--su-panel); color:var(--su-txt); }
.su-floattool[aria-pressed="true"], .su-floattool.on{ background:var(--su-active); color:var(--su-active-fg); border-color:var(--su-active); }
.su-floatbtn{ padding:var(--sp-4) var(--sp-8); border:1px solid var(--su-line); border-radius:var(--radius-sm); cursor:pointer; font-size:var(--fs-xs);
  color:var(--su-txt); background:color-mix(in srgb, var(--su-panel) 88%, transparent);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.su-floatbtn:hover{ background:var(--su-hover); }


/* ════════════════ 2. HARMONISATION DES ÉDITEURS EXISTANTS ═══════════════════
   On ne touche qu'au visuel (surfaces, rayons, tailles, hover/actif, bordures) ;
   la structure (grilles, positions) reste propre à chaque éditeur.            */

/* ── 2.2 Toile / Image (graphique) - chrome migré sur primitives ──────────────
   .gph-ribbon→.su-ribbon · .gph-tools→.su-cluster · .gph-tool→.su-tool ·
   .gph-docbtn/.gph-rbtn→.su-iconbtn (markup graph/00-core.js). Reste : spécifiques. */
.gph-rbtn.gph-ai-btn{ color:var(--su-active); }   /* garde l'accent du bouton IA après .su-iconbtn */
.gph-mini{ border-radius:var(--radius); }
.gph-mini:hover{ background:var(--su-active); color:var(--su-active-fg); }
.gph-left,.gph-right{ background:var(--su-panel); }
.gph-pane-head{ background:var(--su-chrome); }
.gph-fld{ border-radius:var(--radius); background:var(--su-panel); }
.gph-fld:focus-within{ border-color:var(--su-active); }
.gph-al-btn,.gph-bool-bar .gph-al-btn{ border-radius:var(--su-radius-btn); background:var(--su-panel); }
.gph-al-btn:hover{ background:var(--su-active); color:var(--su-active-fg); border-color:var(--su-active); }
.gph-stbtn.on{ color:var(--su-active); border-color:var(--su-soft-line); }
.gph-ex-seg button.on,.gph-mask-seg button.on{ background:var(--su-active); color:var(--su-active-fg); }

/* ── 2.4 Édition - barres per-doc, cadres de canvas, segments ───────────────── */
/* La barre de la Bibliothèque est la rangée d'outils de la DA commune depuis le 2026-10-24 (.outils de 22c) : ses
   anciennes classes (.ed-seg, .ed-vseg) et son filet ne sont plus redessinés ici. */
.ed-btn{ border-radius:var(--su-radius-btn); }
.ed-btn:hover{ border-color:var(--su-active); background:var(--su-hover); }
.ed-btn.primary{ background:var(--su-active); border-color:var(--su-active); }
.etx-modes .etx-mode.on,.esh-bar .on{ background:var(--su-active); color:var(--su-active-fg); }
.eau-wave-wrap{ border-color:var(--su-line); border-radius:var(--su-radius); background:var(--su-panel); }

/* ── 2.5 Compléments du Studio (Business / API / Réseaux / AutoTest / Figma / Calendrier / Données) ──
   Déjà basés sur les tokens : on n'unifie QUE le chrome partagé (rails de nav, barres
   d'outils, onglets/segments, états actifs) - pas les surfaces de contenu (cartes, formulaires). */

/* Rails de navigation internes : état actif = teinte accent (cohérent éditeurs) */
.apim-nav-btn.on, .smed-nav-btn.on, .at-nav-btn.on, .fig-nav-btn.on{
  background:var(--su-soft); color:var(--su-txt); border-color:transparent; font-weight:var(--fw-strong); }

/* Barres d'outils → surface & rayon de chrome unifiés */
.biz-toolbar, .fig-toolbar, .at-bar{ background:var(--su-chrome); border-radius:var(--su-radius); }

/* Onglets & segments → accent actif homogène */
.cal-seg button.on{ background:var(--su-active); color:var(--su-active-fg); }
.cal-tab.on{ background:var(--su-panel); color:var(--su-txt); }
.cal-tabs{ background:var(--su-chrome); border-radius:var(--su-radius); }
.cal-add{ background:var(--su-active); border-color:var(--su-active); }
.cal-add:hover{ background:var(--su-active-h); }
.cal-add.ghost{ background:transparent; color:var(--su-active); }

/* Boutons « + » / sélections accent des compléments */
.ds-item.on{ border-color:var(--su-active); box-shadow:0 0 0 2px var(--su-soft); }
.ds-item:hover{ border-color:var(--su-active); }

/* FIX thème - Dataset (« Données ») utilisait --panel/--muted non définis → cartes
   blanches en sombre. Même remède que l'éditeur Vidéo. */
.ds-wrap{ --panel:var(--card); --muted:var(--mut); --fg:var(--txt); }

/* ── 2.6 Modes Kids/Ado : coins plus ronds sur les éléments actifs ──────────── */
html[data-mode="kids"]{ --su-radius:14px; --su-radius-btn:12px; }
html[data-mode="teen"]{ --su-radius:12px; --su-radius-btn:10px; }

/* ════════════════ 2.7 POLISH MODERNITÉ - cohérence « suite Office » ══════════
   Touche finale partagée par TOUS les éditeurs (réf. = Atelier 3D) : transitions
   homogènes, focus visible, profondeur subtile des barres, état actif net.
   N'agit que sur le chrome partagé (primitives .su-* + classes restylées). */

/* Transitions homogènes sur tout contrôle de chrome */
.su-tool,.su-btn,.su-iconbtn,.su-rb,.su-tab,.su-railb,.su-seg button,.su-panel-tab,
.su-floattool,.su-floatbtn,
.gph-tool,.gph-rbtn,.gph-mini,.ed-btn{
  transition:background .13s ease,border-color .13s ease,color .13s ease,box-shadow .13s ease,transform .07s ease; }
.su-tool:active,.su-iconbtn:active,.su-rb:active{ transform:translateY(1px); }

/* Focus clavier visible (accessibilité + finition) */
.su-tool:focus-visible,.su-btn:focus-visible,.su-iconbtn:focus-visible,.su-rb:focus-visible,
.su-tab:focus-visible,.su-railb:focus-visible,.su-panel-tab:focus-visible,
.gph-tool:focus-visible,.gph-rbtn:focus-visible{
  outline:none; box-shadow:0 0 0 2px var(--su-soft-line); }

/* Ruban & barres : liseré interne discret = profondeur « papier » Office */
.su-ribbon,.gph-ribbon{ box-shadow:inset 0 1px 0 color-mix(in srgb,var(--su-line) 55%,transparent); }

/* Cluster d'outils : léger encastrement */
.su-cluster{ box-shadow:inset 0 1px 2px rgba(0,0,0,.04); }   /* .gph-tools lit .barre-flottante (22c, CDC_APPSTUDIO_MODIF L2) */

/* État actif : halo accent doux (outils & boutons de ruban) */
.su-tool[aria-pressed="true"],.su-tool.on,.su-rb[aria-pressed="true"],
.gph-tool[aria-pressed="true"]{
  box-shadow:0 1px 7px color-mix(in srgb,var(--su-active) 32%,transparent); }

/* Icônes de ruban labellisé : surface duotone légèrement renforcée au survol/actif */
.su-rb:hover .su-rb-i svg .du{ fill-opacity:calc(var(--ic-duo,.15) * 1.5); }

/* Onglets de ruban : lien visuel onglet actif → corps (continuité Office) */
.su-tab[aria-selected="true"]{ box-shadow:inset 0 1px 0 color-mix(in srgb,var(--su-line) 60%,transparent); }


/* ════════════════ 3. PLEIN ÉCRAN DES ÉDITEURS (62-studio-fs.js) ═════════════
   Bouton .su-fs-btn → host.requestFullscreen(). En plein écran, la racine
   d'éditeur devient le viewport : on lui rend un fond, un remplissage complet
   et le bon défilement (sinon fond noir/blanc par défaut du navigateur). */
.su-fs-btn{ cursor:pointer; }
.su-fs-btn svg{ width:16px; height:16px; }

#ve:fullscreen, #cao:fullscreen, .gph:fullscreen{
  width:100%; height:100%; background:var(--bg); }
#ve:fullscreen{ padding:var(--sp-14); overflow:auto; box-sizing:border-box; }
#cao:fullscreen{ height:100vh; min-height:0; box-sizing:border-box; }
.gph:fullscreen{ border-radius:0; border:0; }

/* Compat -webkit (Safari/anciens WebKit) */
#ve:-webkit-full-screen, #cao:-webkit-full-screen, .gph:-webkit-full-screen{
  width:100%; height:100%; background:var(--bg); }
#ve:-webkit-full-screen{ padding:var(--sp-14); overflow:auto; box-sizing:border-box; }
#cao:-webkit-full-screen{ height:100vh; min-height:0; box-sizing:border-box; }
.gph:-webkit-full-screen{ border-radius:0; border:0; }

}