@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{
  --su-chrome:      var(--card2);                              /* barres (ruban/onglets/état) */
  --su-panel:       var(--card);                               /* panneaux & cadres de canvas */
  --su-line:        var(--line);
  --su-line2:       var(--line2);
  --su-radius:      10px;                                      /* conteneurs de chrome        */
  --su-radius-btn:  9px;                                       /* boutons / outils            */
  --su-tool:        32px;                                      /* côté d'un outil carré       */
  --su-gap:         6px;
  --su-active:      var(--accent);
  --su-active-h:    var(--accent-h);
  --su-active-fg:   #fff;
  --su-soft:        color-mix(in srgb, var(--accent) 14%, transparent);
  --su-soft-line:   color-mix(in srgb, var(--accent) 40%, transparent);
  --su-hover:       var(--bg2);
  --su-txt:         var(--txt);
  --su-mut:         var(--mut);
  --su-pop:         0 6px 24px rgba(0,0,0,.14);
  --su-cap:         10px;                                      /* mini-légende de groupe      */
}
html[data-theme="light"]{ --su-pop:0 6px 22px rgba(31,35,40,.12); }

/* ════════════════ 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.1 Atelier 3D (CAO) - référence, polish ──────────────────────────────── */
.cao-bar.cao-bar-ribbon{ border-radius:var(--su-radius); }
.cao-tabs{ background:var(--su-chrome); }
.cao-tab{ border-radius:var(--radius) var(--radius) 0 0; }
.cao-tab[aria-selected="true"]{ position:relative; background:var(--su-panel); }
.cao-tab[aria-selected="true"]::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px;
  height:2px; border-radius:var(--radius-xs); background:var(--su-active); }
.cao-ribbon{ background:var(--su-panel); }
/* .cao-t → migré sur .su-tool · .cao-3d-tg → .su-floattool · .cao-3d-b → .su-floatbtn · .cao-status → .su-status (markup 38-cao.js) */
.cao-tg,.cao-mini{ border-radius:var(--su-radius-btn); }
.cao-tg:hover{ background:var(--su-hover); color:var(--su-txt); }
.cao-tg[aria-pressed="true"]{ background:var(--su-active); color:var(--su-active-fg); border-color:var(--su-active); }
.cao-rb{ border-radius:var(--su-radius-btn); }
.cao-rb:hover{ background:var(--su-hover); border-color:var(--su-line); }
.cao-rb[aria-pressed="true"]{ background:var(--su-active); color:var(--su-active-fg); border-color:var(--su-active); }
.cao-grp-cap{ font-size:var(--su-cap); }
.cao-dock{ border-radius:var(--su-radius); }
.cao-dock-tabs{ background:var(--su-chrome); }
.cao-dock-tab{ border-radius:var(--radius-sm) var(--radius-sm) 0 0; position:relative; }
.cao-dock-tab[aria-selected="true"]{ background:var(--su-panel); }
.cao-dock-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); }
.cao-rail{ border-radius:var(--su-radius); }
.cao-rail-b{ border-radius:var(--su-radius-btn); }
.cao-rail-b:hover{ background:var(--su-hover); color:var(--su-txt); }
.cao-rail-b[aria-pressed="true"]{ background:var(--su-active); color:var(--su-active-fg); border-color:var(--su-active); }
.cao-2d,.cao-3d,.cao-dock{ border-radius:var(--su-radius); }
/* - polish ergonomique de la référence (propagé par les tokens) - */
.cao-ribbon{ padding:var(--sp-8) var(--sp-12); }
.cao-grp{ padding:0 var(--sp-14); }
.cao-grp{ border-right-color:var(--su-line2); }
.cao-grp-cap{ text-transform:uppercase; font-size:var(--fs-2xs); letter-spacing:.06em; color:var(--mut2); margin-top:var(--sp-2); }
.cao-rb{ min-width:56px; gap:var(--sp-4); transition:background .12s,border-color .12s,transform .08s; }
.cao-rb:active{ transform:translateY(1px); }
.cao-tabs-right{ gap:var(--sp-4); }
.cao-tabs-right::before{ content:""; width:1px; align-self:center; height:20px;
  background:var(--su-line); margin:0 var(--sp-4) 0 var(--sp-2); }
.cao-dock-empty{ color:var(--mut); line-height:1.7; padding:var(--sp-22) var(--sp-10); }
.cao-status-sep{ color:var(--mut2); opacity:.55; }
.cao-status-i.on{ color:var(--su-active); }
/* champs d'inspecteur & d'arbre : focus accent homogène */
.cao-insp .ci-row input:focus,.cao-tn-p input:focus,.cao-tn-p select:focus{
  border-color:var(--su-active); outline:none; }

/* ── 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-status{ 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.3 Vidéo - UNIFIÉ (façon Figma : panneaux jointifs) + FIX thème ───────── */
.ve{ --panel:var(--card); --muted:var(--mut); --fg:var(--txt); --bg:var(--card2); --accent:var(--accent); }
/* cadre unique : surfaces conservées, mais bordures = diviseurs jointifs (gérés par 33-video-editor.css) */
.ve-scenes,.ve-insp,.ve-result{ background:var(--su-panel); border-color:var(--su-line); }
.ve-canvas-wrap{ background:repeating-conic-gradient(transparent 0 25%,
    color-mix(in srgb, var(--su-line) 45%, transparent) 0 50%) 0 0/22px 22px, var(--su-panel); }
.ve-ctl select,.ve-ctl input{ border-radius:var(--radius); background:var(--su-panel); border-color:var(--su-line); }
.ve-li{ border-radius:var(--su-radius-btn); background:var(--su-panel); border-color:var(--su-line); }
.ve-li:hover{ border-color:var(--su-active); }
.ve-li.on{ border-color:var(--su-active); box-shadow:0 0 0 2px var(--su-soft); }
.ve-ico:hover{ background:var(--su-soft); }
.ve-fld input[type=text],.ve-fld textarea,.ve-fld select,.ve-fld input[type=color]{
  border-radius:var(--radius); background:var(--su-panel); border-color:var(--su-line); }

/* ── 2.4 Édition - barres per-doc, cadres de canvas, segments ───────────────── */
.ed-toolbar{ border-bottom-color:var(--su-line); }
.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); }
.ed-seg{ border-radius:var(--radius); }
.ed-vseg.on{ background:var(--su-active); }
.etx-modes .etx-mode.on,.esh-bar .on{ background:var(--su-active); color:var(--su-active-fg); }
.ve-fld input[type=range]{ accent-color:var(--su-active); }
.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) */
.biz-nav-btn.on, .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.6b UNIFICATION (anti-« bento ») - Atelier 3D façon Figma ══
   Un seul cadre extérieur, panneaux JOINTIFS (plus de boîtes flottantes séparées
   par des gaps). Vient après §2.1 → gagne la cascade sur les rayons/bordures. */
.cao{ border:1px solid var(--su-line); border-radius:var(--su-radius); overflow:hidden; background:var(--su-panel); }
.cao-bar.cao-bar-ribbon{ border:0; border-bottom:1px solid var(--su-line); border-radius:0; margin-bottom:0; }
.cao-split{ gap:0; }
.cao-2d,.cao-3d{ border:0; border-radius:0; }
.cao-2d{ border-right:1px solid var(--su-line); }
.cao-split.cao-split-dock .cao-dock,.cao-split.cao-split-rail .cao-dock{ border:0; border-left:1px solid var(--su-line); border-radius:0; }
.cao-status.su-status{ border:0; border-top:1px solid var(--su-line); border-radius:0; }
/* le ruban à onglets reste plat dans le cadre unifié */
.cao-bar.cao-bar-ribbon{ box-shadow:none; }

/* ════════════════ 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,.cao-rb,.cao-mini,.cao-tg,.cao-tab,.cao-dock-tab,.cao-rail-b,
.gph-tool,.gph-rbtn,.gph-mini,.ed-btn,.ve-li,.ve-ico{
  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,.cao-rb:active,.cao-mini:active,.ve-ico: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,
.cao-rb:focus-visible,.cao-mini:focus-visible,.cao-tg:focus-visible,.cao-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,.cao-bar.cao-bar-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,.gph-tools{ box-shadow:inset 0 1px 2px rgba(0,0,0,.04); }

/* État actif : halo accent doux (outils & boutons de ruban) */
.su-tool[aria-pressed="true"],.su-tool.on,.su-rb[aria-pressed="true"],
.cao-rb[aria-pressed="true"],.cao-tg[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 */
.cao-rb:hover .cao-rb-i svg .du,.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) */
.cao-tab[aria-selected="true"],.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; padding:var(--sp-14); 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; padding:var(--sp-14); box-sizing:border-box; }
.gph:-webkit-full-screen{ border-radius:0; border:0; }

}