From 94bc5223e688f3685503500e45f9a2124b392c23 Mon Sep 17 00:00:00 2001
From: smontlouis <s.montlouis.calixte@gmail.com>
Date: Thu, 13 Aug 2026 19:55:20 +0200
Subject: [PATCH] feat(studio): redesign responsive navigation

Add a unified bottom navigation, avatar drawer, and responsive preview and inspector layout across desktop and mobile.
---
 src/app/components/common.tsx                 |    2 +-
 src/app/styles.css                            |  403 +-
 src/components/ui/drawer.tsx                  |   35 +
 .../studio/components/AvatarDrawer.tsx        |  166 +
 .../studio/components/StudioIdentity.tsx      |   45 +
 .../studio/components/StudioInspector.tsx     | 3427 ++++++++---------
 .../studio/components/StudioStage.tsx         |   51 +-
 7 files changed, 2354 insertions(+), 1775 deletions(-)
 create mode 100644 src/components/ui/drawer.tsx
 create mode 100644 src/features/studio/components/AvatarDrawer.tsx
 create mode 100644 src/features/studio/components/StudioIdentity.tsx

diff --git a/src/app/components/common.tsx b/src/app/components/common.tsx
index 7397ca8..a6a8dfa 100644
--- a/src/app/components/common.tsx
+++ b/src/app/components/common.tsx
@@ -109,7 +109,7 @@ export function ExportSection({
 }) {
   const { t } = useStudioLanguage()
   return (
-    <AccordionItem value={value} className="export-accordion-item">
+    <AccordionItem value={value} className={`export-accordion-item export-accordion-${value}`}>
       <AccordionTrigger className="export-accordion-trigger">
         <span>
           <strong>{t(title)}</strong>
diff --git a/src/app/styles.css b/src/app/styles.css
index 06cc349..9aff0c3 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -165,10 +165,24 @@ input {
   text-wrap: pretty;
 }
 
-.brand {
+.studio-identity {
   position: absolute;
+  z-index: 5;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: none;
+}
+.studio-identity > * {
+  pointer-events: auto;
+}
+.brand {
+  position: relative;
   top: 28px;
-  left: 32px;
+  margin-left: 32px;
   display: flex;
   align-items: center;
   gap: 9px;
@@ -190,10 +204,9 @@ input {
   box-shadow: 0 0 0 3px rgb(91 127 229 / 15%);
 }
 .language-picker {
-  position: absolute;
-  z-index: 5;
+  position: relative;
   top: 24px;
-  right: 28px;
+  margin-right: 28px;
   display: flex;
   align-items: center;
   gap: 7px;
@@ -225,6 +238,9 @@ input {
   border-radius: 5px;
   box-shadow: 0 0 0 2px #7895ee;
 }
+.inspector-identity {
+  display: none;
+}
 
 .avatar-wrap {
   position: relative;
@@ -377,6 +393,9 @@ input {
   width: 100%;
   min-width: 0;
 }
+.export-accordion-snapshot {
+  order: -1;
+}
 .export-accordion-item {
   min-width: 0;
   overflow: hidden;
@@ -782,11 +801,13 @@ input {
 }
 
 .inspector {
+  --app-footer-clearance: 140px;
+
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-gutter: stable;
-  padding: 28px 26px 48px;
+  padding: 28px 26px var(--app-footer-clearance);
   border-left: 1px solid #d9dce3;
   background: #f5f6f8;
 }
@@ -796,7 +817,7 @@ input {
   padding-top: 0;
 }
 .inspector.state-player-active {
-  padding-bottom: 128px;
+  --app-footer-clearance: 220px;
 }
 @keyframes studio-workspace-in {
   from {
@@ -826,7 +847,7 @@ input {
   display: flex;
   min-height: calc(100vh - 76px);
   flex-direction: column;
-  padding-bottom: 74px;
+  padding-bottom: 0;
 }
 .workspace-header {
   position: sticky;
@@ -905,6 +926,16 @@ input {
   gap: 16px;
   margin-bottom: 22px;
 }
+.mode-page-header {
+  margin-bottom: 20px;
+  padding: 4px 2px 0;
+}
+.mode-page-header .eyebrow {
+  margin-bottom: 5px;
+}
+.mode-page-header h1 {
+  font-size: 28px;
+}
 .eyebrow {
   margin: 0 0 6px;
   color: #7185c4;
@@ -990,7 +1021,7 @@ p {
   position: fixed;
   z-index: 9;
   right: 0;
-  bottom: 0;
+  bottom: 62px;
   width: min(520px, 100vw);
   box-sizing: border-box;
   padding: 10px 18px;
@@ -1262,6 +1293,151 @@ p {
   padding: 5px;
   backdrop-filter: blur(14px);
 }
+.desktop-mode-tabs {
+  display: none;
+}
+.mobile-mode-tabs {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  width: min(520px, 100vw);
+  min-height: 62px;
+  padding: 5px 8px;
+  border-top: 1px solid #d9dce3;
+  background: rgb(250 251 253 / 97%);
+  box-shadow: 0 -8px 24px rgb(24 28 35 / 7%);
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  backdrop-filter: blur(16px);
+}
+.mobile-mode-tab {
+  display: flex;
+  height: 51px;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+  border-radius: 12px;
+  color: #7b828e;
+  font-size: 9px;
+  font-weight: 750;
+}
+.mobile-mode-tab > svg {
+  width: 19px;
+  height: 19px;
+}
+.mobile-mode-tab > span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mobile-mode-tab[aria-pressed='true'] {
+  background: #edf1ff;
+  color: #4168d5;
+}
+.mobile-avatar-tab > svg {
+  width: 27px;
+  height: 27px;
+  margin-block: -4px -1px;
+  border-radius: 50%;
+}
+.drawer-backdrop {
+  position: fixed;
+  z-index: 40;
+  inset: 0;
+  background: transparent;
+  animation: drawer-backdrop-in 180ms ease-out;
+}
+.drawer-viewport {
+  position: fixed;
+  z-index: 41;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  pointer-events: none;
+}
+.drawer-content {
+  width: min(520px, 100vw);
+  max-height: min(72dvh, 680px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 9px 20px 28px;
+  border: 1px solid #d9dce3;
+  border-bottom: 0;
+  border-radius: 24px 24px 0 0;
+  outline: 0;
+  background: #f5f6f8;
+  box-shadow: 0 -24px 70px rgb(12 16 24 / 22%);
+  animation: drawer-content-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
+  pointer-events: auto;
+}
+.drawer-handle {
+  display: grid;
+  width: 100%;
+  height: 24px;
+  margin: 0 0 3px;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  cursor: pointer;
+  place-items: center;
+}
+.drawer-handle > span {
+  width: 42px;
+  height: 5px;
+  border-radius: 999px;
+  background: #c8ccd4;
+}
+.avatar-drawer-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+  padding-inline: 2px;
+}
+.avatar-drawer-heading > span {
+  color: #858b96;
+  font-size: 11px;
+  font-weight: 800;
+}
+.drawer-title {
+  margin: 0;
+  font-size: 21px;
+  letter-spacing: -0.035em;
+}
+.drawer-description {
+  margin: 4px 0 0;
+  color: #7c838e;
+  font-size: 10px;
+}
+.avatar-drawer .avatar-shelf {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.avatar-drawer .avatar-shelf .avatar-grid {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+@keyframes drawer-backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes drawer-content-in {
+  from {
+    transform: translateY(100%);
+  }
+}
+.inspector.state-player-active .mobile-mode-tabs {
+  border-top: 0;
+  box-shadow: none;
+}
 .state-buttons button,
 .button-row button,
 .reset {
@@ -2131,30 +2307,195 @@ p {
 }
 
 @media (max-width: 600px) {
+  html,
+  body,
+  #root {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  .studio {
+    height: 100dvh;
+    min-height: 0;
+    grid-template-rows: auto minmax(0, 1fr);
+    overflow: hidden;
+  }
   .stage-column {
-    min-height: 420px;
-    padding: 18px;
+    position: relative;
+    aspect-ratio: 1;
+    height: auto;
+    min-height: 0;
+    padding: 10px;
+  }
+  .stage-identity {
+    display: flex;
+  }
+  .inspector-identity {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    display: none;
+    min-height: 52px;
+    margin: 0 -14px 16px;
+    padding: 0 14px;
+    border-bottom: 1px solid #d9dce3;
+    background: rgb(245 246 248 / 94%);
+    backdrop-filter: blur(14px);
+  }
+  .inspector-identity .brand {
+    top: 0;
+    margin-left: 0;
+    color: #17191d;
+    font-size: 11px;
+  }
+  .inspector-identity .brand em {
+    color: #767d88;
+  }
+  .inspector-identity .brand-mark {
+    width: 16px;
+    height: 16px;
+  }
+  .inspector-identity .language-picker {
+    top: 0;
+    min-height: 32px;
+    margin-right: 0;
+    padding: 3px 6px 3px 8px;
+    border-color: #d9dce3;
+    background: white;
+    box-shadow: 0 4px 14px rgb(24 28 35 / 7%);
+  }
+  .inspector-identity .language-picker [data-slot='select-trigger'] {
+    min-width: 68px;
+    color: #17191d;
+  }
+  .stage-identity .brand {
+    top: 14px;
+    margin-left: 14px;
+    font-size: 11px;
+  }
+  .stage-identity .brand-mark {
+    width: 16px;
+    height: 16px;
+  }
+  .stage-identity .language-picker {
+    top: 10px;
+    min-height: 32px;
+    margin-right: 12px;
+    padding: 3px 6px 3px 8px;
+  }
+  .stage-identity .language-picker [data-slot='select-trigger'] {
+    min-width: 68px;
+  }
+  .avatar-wrap {
+    width: min(42dvh, 78vw, 340px);
   }
   .photo-capture-bar {
-    bottom: 48px;
+    bottom: max(12px, env(safe-area-inset-bottom));
+    left: 12px;
+    transform: none;
   }
   .photo-capture-button {
-    min-width: 168px;
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    padding: 0;
+    border-radius: 50%;
   }
-  .brand {
-    top: 18px;
-    left: 20px;
+  .photo-capture-button > svg {
+    width: 18px;
+    height: 18px;
+  }
+  .photo-capture-label,
+  .photo-format-badge,
+  .photo-help-button {
+    display: none;
   }
   .inspector {
-    padding: 22px 14px 40px;
+    height: auto;
+    min-height: 0;
+    overscroll-behavior: contain;
+    padding: 0 14px calc(var(--app-footer-clearance) + env(safe-area-inset-bottom));
+    scrollbar-gutter: auto;
+  }
+  .inspector.expression-workspace-active,
+  .inspector.sequence-workspace-active,
+  .inspector.body-workspace {
+    padding-top: 0;
+  }
+  .inspector.expression-workspace-active .inspector-identity,
+  .inspector.sequence-workspace-active .inspector-identity,
+  .inspector.body-workspace .inspector-identity {
+    position: static;
+  }
+  .workspace-page {
+    min-height: calc(50dvh - 52px);
+  }
+  .mode-page-header {
+    margin-bottom: 16px;
+    padding-top: 18px;
+  }
+  .mode-page-header h1 {
+    font-size: 24px;
+  }
+  .workspace-header {
+    position: static;
+    top: auto;
   }
   .numeric-field {
     grid-template-columns: 100px minmax(76px, 1fr) 66px;
     gap: 7px;
   }
+  .desktop-mode-tabs {
+    display: none;
+  }
+  .mobile-mode-tabs {
+    position: fixed;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: grid;
+    min-height: calc(62px + env(safe-area-inset-bottom));
+    padding: 5px 8px max(5px, env(safe-area-inset-bottom));
+    border-top: 1px solid #d9dce3;
+    background: rgb(250 251 253 / 97%);
+    box-shadow: 0 -8px 24px rgb(24 28 35 / 7%);
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    backdrop-filter: blur(16px);
+  }
+  .mobile-mode-tab {
+    display: flex;
+    height: 51px;
+    min-width: 0;
+    flex-direction: column;
+    gap: 3px;
+    border-radius: 12px;
+    color: #7b828e;
+    font-size: 9px;
+    font-weight: 750;
+  }
+  .mobile-mode-tab > svg {
+    width: 19px;
+    height: 19px;
+  }
+  .mobile-mode-tab > span {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .mobile-mode-tab[aria-pressed='true'] {
+    background: #edf1ff;
+    color: #4168d5;
+  }
+  .eye-columns {
+    grid-template-columns: minmax(0, 1fr);
+  }
   .expression-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .state-buttons {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .avatar-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2174,4 +2515,32 @@ p {
   .workspace-header-actions .state-player > span {
     display: none;
   }
+  .state-playback-footer {
+    bottom: calc(62px + env(safe-area-inset-bottom));
+    padding: 6px 10px;
+  }
+  .state-playback-bar {
+    gap: 8px;
+  }
+  .state-playback-timeline {
+    gap: 4px;
+    padding: 3px 2px 4px;
+  }
+  .state-playback-step {
+    width: 42px;
+    height: 42px;
+    flex-basis: 42px;
+    border-radius: 9px;
+  }
+  .state-playback-controls {
+    padding-left: 8px;
+  }
+  .state-playback-footer .state-player [data-slot='button'] {
+    width: 36px;
+    height: 36px;
+  }
+  .state-playback-footer .state-player svg {
+    width: 22px;
+    height: 22px;
+  }
 }
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..ac40901
--- /dev/null
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,35 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Drawer(props: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root {...props} />
+}
+
+function DrawerContent({ className, children, ...props }: DialogPrimitive.Popup.Props) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop className="drawer-backdrop" />
+      <DialogPrimitive.Viewport className="drawer-viewport">
+        <DialogPrimitive.Popup className={cn('drawer-content', className)} {...props}>
+          {children}
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Viewport>
+    </DialogPrimitive.Portal>
+  )
+}
+
+function DrawerClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close {...props} />
+}
+
+function DrawerTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return <DialogPrimitive.Title className={cn('drawer-title', className)} {...props} />
+}
+
+function DrawerDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return <DialogPrimitive.Description className={cn('drawer-description', className)} {...props} />
+}
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle }
diff --git a/src/features/studio/components/AvatarDrawer.tsx b/src/features/studio/components/AvatarDrawer.tsx
new file mode 100644
index 0000000..044b7bc
--- /dev/null
+++ b/src/features/studio/components/AvatarDrawer.tsx
@@ -0,0 +1,166 @@
+import { Copy, Pencil, Plus, Trash2 } from 'lucide-react'
+import { motion } from 'motion/react'
+
+import { Button } from '@/components/ui/button'
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu'
+import { DrawerClose, DrawerContent, DrawerDescription, DrawerTitle } from '@/components/ui/drawer'
+import { defaultAvatarEyes } from '@/features/avatar/avatars'
+import { ExpressionPreview } from '@/features/avatar/components/ExpressionWorkspace'
+import { defaultExpression } from '@/features/avatar/presets'
+import type { StudioController } from '@/features/studio/useStudioController'
+
+export function AvatarDrawer({
+  controller,
+  onOpenChange,
+}: {
+  controller: StudioController
+  onOpenChange: (open: boolean) => void
+}) {
+  const {
+    activateAvatar,
+    activeAvatarId,
+    avatarDragOrigin,
+    avatarDragPreview,
+    avatars,
+    avatarsRef,
+    cancelAvatarMove,
+    commitAvatarMove,
+    createNewAvatar,
+    draggedAvatarId,
+    draggingAvatarId,
+    duplicateAvatar,
+    expressions,
+    previewAvatarMove,
+    reduceMotion,
+    setDeleteAvatarOpen,
+    setDraggingAvatarId,
+    setFocusAvatarName,
+    t,
+  } = controller
+
+  return (
+    <DrawerContent className="avatar-drawer">
+      <DrawerClose className="drawer-handle" aria-label="Close avatar picker">
+        <span />
+      </DrawerClose>
+      <div className="avatar-drawer-heading">
+        <div>
+          <DrawerTitle>Avatars</DrawerTitle>
+          <DrawerDescription>{t('Double-clic pour modifier')}</DrawerDescription>
+        </div>
+        <span>{avatars.length}</span>
+      </div>
+      <section className="avatar-shelf" aria-label={t('Choisir un avatar')}>
+        <div className="avatar-grid">
+          {avatars.map(avatar => (
+            <motion.div
+              className="avatar-sort-item"
+              data-dragging={draggingAvatarId === avatar.id || undefined}
+              key={avatar.id}
+              layout="position"
+              animate={{
+                opacity: draggingAvatarId === avatar.id ? 0.28 : 1,
+                scale: draggingAvatarId === avatar.id ? 0.96 : 1,
+              }}
+              transition={
+                reduceMotion
+                  ? { duration: 0 }
+                  : { type: 'spring', stiffness: 520, damping: 42, mass: 0.7 }
+              }
+            >
+              <ContextMenu>
+                <ContextMenuTrigger
+                  render={
+                    <Button
+                      className="avatar-card"
+                      variant="outline"
+                      aria-pressed={activeAvatarId === avatar.id}
+                      type="button"
+                      draggable
+                      onDragStart={event => {
+                        avatarDragOrigin.current = avatarsRef.current
+                        avatarDragPreview.current = avatarsRef.current
+                        draggedAvatarId.current = avatar.id
+                        setDraggingAvatarId(avatar.id)
+                        event.dataTransfer.effectAllowed = 'move'
+                      }}
+                      onDragEnter={() => previewAvatarMove(avatar.id)}
+                      onDragOver={event => {
+                        event.preventDefault()
+                        event.dataTransfer.dropEffect = 'move'
+                      }}
+                      onDrop={event => {
+                        event.preventDefault()
+                        commitAvatarMove(avatar.id)
+                      }}
+                      onDragEnd={cancelAvatarMove}
+                      onClick={() => activateAvatar(avatar.id, false, true)}
+                      onDoubleClick={() => {
+                        setFocusAvatarName(false)
+                        activateAvatar(avatar.id, true)
+                        onOpenChange(false)
+                      }}
+                    >
+                      <ExpressionPreview
+                        expression={expressions[0] ?? defaultExpression}
+                        surface={avatar.body.primary}
+                        bodyNodes={avatar.body.nodes}
+                        colors={avatar.colors}
+                        avatarEyes={avatar.eyes ?? defaultAvatarEyes}
+                        id={`avatar-${avatar.id}`}
+                      />
+                      <span>{avatar.name}</span>
+                    </Button>
+                  }
+                />
+                <ContextMenuContent>
+                  <ContextMenuItem
+                    onClick={() => {
+                      setFocusAvatarName(false)
+                      activateAvatar(avatar.id, true)
+                      onOpenChange(false)
+                    }}
+                  >
+                    <Pencil /> {t('Modifier')}
+                  </ContextMenuItem>
+                  <ContextMenuItem onClick={() => duplicateAvatar(avatar)}>
+                    <Copy /> {t('Dupliquer')}
+                  </ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem
+                    variant="destructive"
+                    disabled={avatars.length <= 1}
+                    onClick={() => {
+                      activateAvatar(avatar.id, false, true)
+                      onOpenChange(false)
+                      setDeleteAvatarOpen(true)
+                    }}
+                  >
+                    <Trash2 /> {t('Supprimer')}
+                  </ContextMenuItem>
+                </ContextMenuContent>
+              </ContextMenu>
+            </motion.div>
+          ))}
+          <Button
+            variant="outline"
+            className="avatar-add creation-card"
+            onClick={() => {
+              createNewAvatar()
+              onOpenChange(false)
+            }}
+            aria-label={t('Nouvel avatar')}
+          >
+            <Plus />
+          </Button>
+        </div>
+      </section>
+    </DrawerContent>
+  )
+}
diff --git a/src/features/studio/components/StudioIdentity.tsx b/src/features/studio/components/StudioIdentity.tsx
new file mode 100644
index 0000000..93b4a6e
--- /dev/null
+++ b/src/features/studio/components/StudioIdentity.tsx
@@ -0,0 +1,45 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import type { StudioController } from '@/features/studio/useStudioController'
+import { type StudioLanguage } from '@/i18n'
+
+type StudioIdentityProps = Pick<StudioController, 'language' | 'setLanguage' | 't'> & {
+  className?: string
+}
+
+export function StudioIdentity({ className = '', language, setLanguage, t }: StudioIdentityProps) {
+  return (
+    <div className={`studio-identity ${className}`.trim()}>
+      <div className="brand">
+        <span className="brand-mark" />
+        Bible Strong <em>Avatar Lab</em>
+      </div>
+      <div className="language-picker">
+        <span aria-hidden="true">{language === 'en' ? '🇬🇧' : language === 'fr' ? '🇫🇷' : '🇨🇳'}</span>
+        <Select
+          value={language}
+          items={[
+            { value: 'en', label: 'English' },
+            { value: 'fr', label: 'Français' },
+            { value: 'zh-CN', label: '中文' },
+          ]}
+          onValueChange={next => next && setLanguage(next as StudioLanguage)}
+        >
+          <SelectTrigger aria-label={t('Langue de l’interface')}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="en">English</SelectItem>
+            <SelectItem value="fr">Français</SelectItem>
+            <SelectItem value="zh-CN">中文</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
diff --git a/src/features/studio/components/StudioInspector.tsx b/src/features/studio/components/StudioInspector.tsx
index 5cbb110..042f39d 100644
--- a/src/features/studio/components/StudioInspector.tsx
+++ b/src/features/studio/components/StudioInspector.tsx
@@ -5,13 +5,16 @@ import {
   Copy,
   Download,
   FileCode2,
+  Move3D,
   Pencil,
+  Play,
   Plus,
   RotateCcw,
+  Smile,
   Trash2,
   Upload,
 } from 'lucide-react'
-import { motion } from 'motion/react'
+import { AnimatePresence, motion } from 'motion/react'
 import { type CSSProperties } from 'react'
 
 import { Accordion } from '@/components/ui/accordion'
@@ -25,6 +28,7 @@ import {
   ContextMenuTrigger,
 } from '@/components/ui/context-menu'
 import { Field, FieldTitle } from '@/components/ui/field'
+import { Drawer } from '@/components/ui/drawer'
 import { Input } from '@/components/ui/input'
 import {
   Select,
@@ -35,7 +39,6 @@ import {
 } from '@/components/ui/select'
 import { Separator } from '@/components/ui/separator'
 import { Switch } from '@/components/ui/switch'
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 
 import {
   ControlSection,
@@ -46,13 +49,7 @@ import {
   StatePlayer,
 } from '@/app/components/common'
 import { ColorField, LinkButton, NumericField } from '@/app/components/controls'
-import {
-  formatSeconds,
-  scaleSurface,
-  type Mode,
-  type Side,
-  type SnapshotFormat,
-} from '@/app/studio-utils'
+import { formatSeconds, scaleSurface, type Side, type SnapshotFormat } from '@/app/studio-utils'
 import { SequenceWorkspace } from '@/features/animation/components/SequenceWorkspace'
 import { findExpressionIndex, groupSequences } from '@/features/animation/sequences'
 import { defaultAvatarEyes } from '@/features/avatar/avatars'
@@ -66,9 +63,13 @@ import {
 import { defaultExpression } from '@/features/avatar/presets'
 import { surfaceLabels, surfacePresets } from '@/features/avatar/surfaces'
 import { type SnapshotBackground } from '@/features/export/snapshotExporter'
+import { AvatarDrawer } from '@/features/studio/components/AvatarDrawer'
+import { StudioIdentity } from '@/features/studio/components/StudioIdentity'
 import type { StudioController } from '@/features/studio/useStudioController'
+import { useState } from 'react'
 
 export function StudioInspector({ controller }: { controller: StudioController }) {
+  const [avatarDrawerOpen, setAvatarDrawerOpen] = useState(false)
   const {
     activateAvatar,
     activeAvatar,
@@ -161,6 +162,7 @@ export function StudioInspector({ controller }: { controller: StudioController }
     setExportFormat,
     setFocusAvatarName,
     setLinked,
+    setLanguage,
     setMode,
     setSelectedSequenceStepId,
     setSequenceEditing,
@@ -206,1772 +208,1757 @@ export function StudioInspector({ controller }: { controller: StudioController }
     workspaceBackButtonRef,
   } = controller
   return (
-    <main
-      className={`inspector ${editing ? 'expression-workspace-active' : sequenceEditing ? 'sequence-workspace-active' : bodyEditing ? 'body-workspace' : 'studio-workspace'}${activeSequence && !editorPageOpen ? ' state-player-active' : ''}`}
-    >
-      {sequenceEditing && !editing && (
-        <motion.div
-          key={`sequence-${sequenceEditing.sourceId ?? 'new'}`}
-          className="workspace-page sequence-workspace"
-          initial={{ opacity: 0, x: 20 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
-        >
-          <SequenceWorkspace
-            editing={sequenceEditing}
-            expressions={expressions}
-            surface={surface}
-            bodyNodes={bodyNodes}
-            colors={activeAvatar.colors}
-            avatarEyes={activeAvatarEyes}
-            selectedStepId={selectedSequenceStepId}
-            backButtonRef={workspaceBackButtonRef}
-            reduceMotion={Boolean(reduceMotion)}
-            onSelectedStepChange={setSelectedSequenceStepId}
-            onChange={draft =>
-              setSequenceEditing(current => (current ? { ...current, draft } : current))
-            }
-            onPreviewStep={step => {
-              const expressionIndex = findExpressionIndex(expressions, step.expressionId)
-              const preset = expressions[expressionIndex]
-              if (preset) transitionToExpression(preset, expressionIndex, step)
-            }}
-            onEditExpression={openExpressionEditor}
-            onPlay={() => launchSequence(sequenceEditing.draft, false, false)}
-            onPause={() => pauseState(false)}
-            onStop={() => stopState(false)}
-            playing={statePlaying}
-            active={activeState === sequenceEditing.draft.id}
-            onCancel={cancelSequenceEditing}
-            onSave={saveSequenceEditing}
-            onDuplicate={duplicateSequenceEditing}
-            onDelete={() => setDeleteSequenceOpen(true)}
-          />
-        </motion.div>
-      )}
-      {editing && (
-        <motion.div
-          key={`expression-${editing.index ?? 'new'}`}
-          className="workspace-page expression-workspace"
-          initial={{ opacity: 0, x: 20 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
-        >
-          <ExpressionWorkspace
-            editing={editing}
-            avatarColors={activeAvatar.colors}
-            backButtonRef={workspaceBackButtonRef}
-            onChange={previewExpressionDraft}
-            onCancel={cancelExpressionEditing}
-            onSave={saveEditing}
-            onDuplicate={() => duplicateExpression(editing.index, editing.draft, true)}
-            onDelete={() => setDeleteExpressionOpen(true)}
-          />
-        </motion.div>
-      )}
-      {!sequenceEditing &&
-        !editing &&
-        (bodyEditing ? (
-          <header className="workspace-header body-workspace-header">
-            <Button
-              ref={workspaceBackButtonRef}
-              variant="ghost"
-              size="icon"
-              onClick={cancelAvatarEditing}
-              aria-label={t('Retour au studio')}
-            >
-              <ArrowLeft />
-            </Button>
-            <div className="workspace-heading">
-              <p className="eyebrow">{t('Construction du corps')}</p>
-              <Input
-                className="avatar-name-input"
-                aria-label={t('Nom de l’avatar')}
-                autoFocus={focusAvatarName}
-                value={activeAvatar.name}
-                onChange={event => renameActiveAvatar(event.currentTarget.value)}
-                onFocus={event => {
-                  if (focusAvatarName) event.currentTarget.select()
-                }}
-                onBlur={event => {
-                  if (!event.currentTarget.value.trim()) renameActiveAvatar('Unknown')
-                  setFocusAvatarName(false)
-                }}
-              />
-              <p>{t('Choisis la forme principale puis assemble les primitives autour d’elle.')}</p>
-            </div>
-          </header>
-        ) : (
-          <>
-            <section className="avatar-shelf" aria-label={t('Choisir un avatar')}>
-              <div className="avatar-shelf-heading">
-                <strong>Avatars</strong>
-                <span>{t('Double-clic pour modifier')}</span>
-              </div>
-              <div className="avatar-grid">
-                {avatars.map(avatar => (
-                  <motion.div
-                    className="avatar-sort-item"
-                    data-dragging={draggingAvatarId === avatar.id || undefined}
-                    key={avatar.id}
-                    layout="position"
-                    animate={{
-                      opacity: draggingAvatarId === avatar.id ? 0.28 : 1,
-                      scale: draggingAvatarId === avatar.id ? 0.96 : 1,
-                    }}
-                    transition={
-                      reduceMotion
-                        ? { duration: 0 }
-                        : { type: 'spring', stiffness: 520, damping: 42, mass: 0.7 }
-                    }
-                  >
-                    <ContextMenu>
-                      <ContextMenuTrigger
-                        render={
-                          <Button
-                            className="avatar-card"
-                            variant="outline"
-                            aria-pressed={activeAvatarId === avatar.id}
-                            type="button"
-                            draggable
-                            onDragStart={event => {
-                              avatarDragOrigin.current = avatarsRef.current
-                              avatarDragPreview.current = avatarsRef.current
-                              draggedAvatarId.current = avatar.id
-                              setDraggingAvatarId(avatar.id)
-                              event.dataTransfer.effectAllowed = 'move'
-                            }}
-                            onDragEnter={() => previewAvatarMove(avatar.id)}
-                            onDragOver={event => {
-                              event.preventDefault()
-                              event.dataTransfer.dropEffect = 'move'
-                            }}
-                            onDrop={event => {
-                              event.preventDefault()
-                              commitAvatarMove(avatar.id)
-                            }}
-                            onDragEnd={cancelAvatarMove}
-                            onClick={() => activateAvatar(avatar.id, false, true)}
-                            onDoubleClick={() => {
-                              setFocusAvatarName(false)
-                              activateAvatar(avatar.id, true)
-                            }}
-                          >
-                            <ExpressionPreview
-                              expression={expressions[0] ?? defaultExpression}
-                              surface={avatar.body.primary}
-                              bodyNodes={avatar.body.nodes}
-                              colors={avatar.colors}
-                              avatarEyes={avatar.eyes ?? defaultAvatarEyes}
-                              id={`avatar-${avatar.id}`}
-                            />
-                            <span>{avatar.name}</span>
-                          </Button>
-                        }
-                      />
-                      <ContextMenuContent>
-                        <ContextMenuItem
-                          onClick={() => {
-                            setFocusAvatarName(false)
-                            activateAvatar(avatar.id, true)
-                          }}
-                        >
-                          <Pencil /> {t('Modifier')}
-                        </ContextMenuItem>
-                        <ContextMenuItem onClick={() => duplicateAvatar(avatar)}>
-                          <Copy /> {t('Dupliquer')}
-                        </ContextMenuItem>
-                        <ContextMenuSeparator />
-                        <ContextMenuItem
-                          variant="destructive"
-                          disabled={avatars.length <= 1}
-                          onClick={() => {
-                            activateAvatar(avatar.id, false, true)
-                            setDeleteAvatarOpen(true)
-                          }}
-                        >
-                          <Trash2 /> {t('Supprimer')}
-                        </ContextMenuItem>
-                      </ContextMenuContent>
-                    </ContextMenu>
-                  </motion.div>
-                ))}
-                <Button
-                  variant="outline"
-                  className="avatar-add creation-card"
-                  onClick={createNewAvatar}
-                  aria-label={t('Nouvel avatar')}
-                >
-                  <Plus />
-                </Button>
-              </div>
-            </section>
-            <Tabs value={mode} onValueChange={value => setMode(value as Mode)}>
-              <TabsList className="tabs" aria-label={t('Mode d’édition')}>
-                <TabsTrigger value="manual">{t('Pose')}</TabsTrigger>
-                <TabsTrigger value="expressions">{t('Expressions')}</TabsTrigger>
-                <TabsTrigger value="states">{t('Animations')}</TabsTrigger>
-                <TabsTrigger value="export">{t('Exporter')}</TabsTrigger>
-              </TabsList>
-            </Tabs>
-          </>
-        ))}
-
-      {!editing && mode === 'manual' && (
-        <div className="panel-stack">
-          {bodyEditing && (
-            <>
-              <ControlSection
-                title="Corps"
-                subtitle="Construction, forme et couleur de la tête de l’avatar."
+    <Drawer open={avatarDrawerOpen} onOpenChange={setAvatarDrawerOpen}>
+      <main
+        className={`inspector ${editing ? 'expression-workspace-active' : sequenceEditing ? 'sequence-workspace-active' : bodyEditing ? 'body-workspace' : 'studio-workspace'}${activeSequence && !editorPageOpen ? ' state-player-active' : ''}`}
+      >
+        <StudioIdentity
+          className="inspector-identity"
+          language={language}
+          setLanguage={setLanguage}
+          t={t}
+        />
+        {sequenceEditing && !editing && (
+          <motion.div
+            key={`sequence-${sequenceEditing.sourceId ?? 'new'}`}
+            className="workspace-page sequence-workspace"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
+          >
+            <SequenceWorkspace
+              editing={sequenceEditing}
+              expressions={expressions}
+              surface={surface}
+              bodyNodes={bodyNodes}
+              colors={activeAvatar.colors}
+              avatarEyes={activeAvatarEyes}
+              selectedStepId={selectedSequenceStepId}
+              backButtonRef={workspaceBackButtonRef}
+              reduceMotion={Boolean(reduceMotion)}
+              onSelectedStepChange={setSelectedSequenceStepId}
+              onChange={draft =>
+                setSequenceEditing(current => (current ? { ...current, draft } : current))
+              }
+              onPreviewStep={step => {
+                const expressionIndex = findExpressionIndex(expressions, step.expressionId)
+                const preset = expressions[expressionIndex]
+                if (preset) transitionToExpression(preset, expressionIndex, step)
+              }}
+              onEditExpression={openExpressionEditor}
+              onPlay={() => launchSequence(sequenceEditing.draft, false, false)}
+              onPause={() => pauseState(false)}
+              onStop={() => stopState(false)}
+              playing={statePlaying}
+              active={activeState === sequenceEditing.draft.id}
+              onCancel={cancelSequenceEditing}
+              onSave={saveSequenceEditing}
+              onDuplicate={duplicateSequenceEditing}
+              onDelete={() => setDeleteSequenceOpen(true)}
+            />
+          </motion.div>
+        )}
+        {editing && (
+          <motion.div
+            key={`expression-${editing.index ?? 'new'}`}
+            className="workspace-page expression-workspace"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
+          >
+            <ExpressionWorkspace
+              editing={editing}
+              avatarColors={activeAvatar.colors}
+              backButtonRef={workspaceBackButtonRef}
+              onChange={previewExpressionDraft}
+              onCancel={cancelExpressionEditing}
+              onSave={saveEditing}
+              onDuplicate={() => duplicateExpression(editing.index, editing.draft, true)}
+              onDelete={() => setDeleteExpressionOpen(true)}
+            />
+          </motion.div>
+        )}
+        {!sequenceEditing &&
+          !editing &&
+          (bodyEditing ? (
+            <header className="workspace-header body-workspace-header">
+              <Button
+                ref={workspaceBackButtonRef}
+                variant="ghost"
+                size="icon"
+                onClick={cancelAvatarEditing}
+                aria-label={t('Retour au studio')}
               >
-                <InspectorCard className="body-panel">
-                  <PanelTitle
-                    level={3}
-                    title="Construction du corps"
-                    subtitle="Une forme principale porte les yeux. Les autres primitives se placent autour d’elle."
-                  />
-                  <div className="body-tree">
-                    <Button
-                      variant="outline"
-                      type="button"
-                      aria-pressed={selectedBodyNodeId === 'primary'}
-                      onClick={() => selectBodyNode('primary')}
+                <ArrowLeft />
+              </Button>
+              <div className="workspace-heading">
+                <p className="eyebrow">{t('Construction du corps')}</p>
+                <Input
+                  className="avatar-name-input"
+                  aria-label={t('Nom de l’avatar')}
+                  autoFocus={focusAvatarName}
+                  value={activeAvatar.name}
+                  onChange={event => renameActiveAvatar(event.currentTarget.value)}
+                  onFocus={event => {
+                    if (focusAvatarName) event.currentTarget.select()
+                  }}
+                  onBlur={event => {
+                    if (!event.currentTarget.value.trim()) renameActiveAvatar('Unknown')
+                    setFocusAvatarName(false)
+                  }}
+                />
+                <p>
+                  {t('Choisis la forme principale puis assemble les primitives autour d’elle.')}
+                </p>
+              </div>
+            </header>
+          ) : null)}
+
+        <AnimatePresence mode="wait" initial={false}>
+          <motion.div
+            className="mode-page-transition"
+            key={mode}
+            initial={reduceMotion ? false : { opacity: 0, x: 18 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={reduceMotion ? { opacity: 1, x: 0 } : { opacity: 0, x: -18 }}
+            transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
+          >
+            {!editorPageOpen && (
+              <header className="mode-page-header">
+                <p className="eyebrow">{activeAvatar.name}</p>
+                <h1>
+                  {t(
+                    mode === 'manual'
+                      ? 'Pose'
+                      : mode === 'expressions'
+                        ? 'Expressions'
+                        : mode === 'states'
+                          ? 'Animations'
+                          : 'Exporter'
+                  )}
+                </h1>
+              </header>
+            )}
+
+            {!editing && mode === 'manual' && (
+              <div className="panel-stack">
+                {bodyEditing && (
+                  <>
+                    <ControlSection
+                      title="Corps"
+                      subtitle="Construction, forme et couleur de la tête de l’avatar."
                     >
-                      <span className="body-node-icon body-node-icon-primary">
-                        <SurfaceThumbnail surface={surface} />
-                      </span>
-                      <span>
-                        <strong>{t('Forme principale')}</strong>
-                        <small>
-                          {t(surfaceLabels[surface.type])} · {t('porte les yeux')}
-                        </small>
-                      </span>
-                    </Button>
-                    {bodyNodes.map(node => (
-                      <Button
-                        variant="outline"
-                        type="button"
-                        key={node.id}
-                        aria-pressed={selectedBodyNodeId === node.id}
-                        onClick={() => selectBodyNode(node.id)}
-                      >
-                        <span className="body-node-icon">
-                          <SurfaceThumbnail surface={node.surface} />
-                        </span>
-                        <span>
-                          <strong>{t(node.name)}</strong>
-                          <small>{t(surfaceLabels[node.surface.type])}</small>
-                        </span>
-                      </Button>
-                    ))}
-                  </div>
-                  <div className="body-add">
-                    <span>
-                      {t('Ajouter une forme')} · {bodyNodes.length}/{MAX_BODY_NODES}
-                    </span>
-                    <div>
-                      {bodyPrimitiveTypes.map(type => (
-                        <Button
-                          className="surface-card body-add-card"
-                          variant="outline"
-                          type="button"
-                          key={type}
-                          disabled={bodyNodes.length >= MAX_BODY_NODES}
-                          onClick={() => addBodyNode(type)}
-                        >
-                          <SurfaceThumbnail surface={surfacePresets[type]} />
-                          <span>{t(surfaceLabels[type])}</span>
-                        </Button>
-                      ))}
-                    </div>
-                  </div>
-                  {selectedBodyNode && (
-                    <div className="body-node-editor">
-                      <div className="body-node-actions">
-                        <strong>{selectedBodyNode.name}</strong>
-                        <div>
+                      <InspectorCard className="body-panel">
+                        <PanelTitle
+                          level={3}
+                          title="Construction du corps"
+                          subtitle="Une forme principale porte les yeux. Les autres primitives se placent autour d’elle."
+                        />
+                        <div className="body-tree">
                           <Button
                             variant="outline"
-                            size="sm"
                             type="button"
-                            disabled={bodyNodes.length >= MAX_BODY_NODES}
-                            onClick={duplicateSelectedBodyNode}
+                            aria-pressed={selectedBodyNodeId === 'primary'}
+                            onClick={() => selectBodyNode('primary')}
                           >
-                            {t('Dupliquer')}
-                          </Button>
-                          <Button
-                            variant="destructive"
-                            size="sm"
-                            type="button"
-                            onClick={deleteSelectedBodyNode}
-                          >
-                            {t('Supprimer')}
+                            <span className="body-node-icon body-node-icon-primary">
+                              <SurfaceThumbnail surface={surface} />
+                            </span>
+                            <span>
+                              <strong>{t('Forme principale')}</strong>
+                              <small>
+                                {t(surfaceLabels[surface.type])} · {t('porte les yeux')}
+                              </small>
+                            </span>
                           </Button>
+                          {bodyNodes.map(node => (
+                            <Button
+                              variant="outline"
+                              type="button"
+                              key={node.id}
+                              aria-pressed={selectedBodyNodeId === node.id}
+                              onClick={() => selectBodyNode(node.id)}
+                            >
+                              <span className="body-node-icon">
+                                <SurfaceThumbnail surface={node.surface} />
+                              </span>
+                              <span>
+                                <strong>{t(node.name)}</strong>
+                                <small>{t(surfaceLabels[node.surface.type])}</small>
+                              </span>
+                            </Button>
+                          ))}
                         </div>
-                      </div>
-                      <p className="body-gizmo-help">
-                        <Badge variant="outline">{t('Gizmo local')}</Badge>
-                        {t(
-                          'Glisse un axe pour déplacer la forme, ou un anneau pour la faire tourner.'
+                        <div className="body-add">
+                          <span>
+                            {t('Ajouter une forme')} · {bodyNodes.length}/{MAX_BODY_NODES}
+                          </span>
+                          <div>
+                            {bodyPrimitiveTypes.map(type => (
+                              <Button
+                                className="surface-card body-add-card"
+                                variant="outline"
+                                type="button"
+                                key={type}
+                                disabled={bodyNodes.length >= MAX_BODY_NODES}
+                                onClick={() => addBodyNode(type)}
+                              >
+                                <SurfaceThumbnail surface={surfacePresets[type]} />
+                                <span>{t(surfaceLabels[type])}</span>
+                              </Button>
+                            ))}
+                          </div>
+                        </div>
+                        {selectedBodyNode && (
+                          <div className="body-node-editor">
+                            <div className="body-node-actions">
+                              <strong>{selectedBodyNode.name}</strong>
+                              <div>
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  type="button"
+                                  disabled={bodyNodes.length >= MAX_BODY_NODES}
+                                  onClick={duplicateSelectedBodyNode}
+                                >
+                                  {t('Dupliquer')}
+                                </Button>
+                                <Button
+                                  variant="destructive"
+                                  size="sm"
+                                  type="button"
+                                  onClick={deleteSelectedBodyNode}
+                                >
+                                  {t('Supprimer')}
+                                </Button>
+                              </div>
+                            </div>
+                            <p className="body-gizmo-help">
+                              <Badge variant="outline">{t('Gizmo local')}</Badge>
+                              {t(
+                                'Glisse un axe pour déplacer la forme, ou un anneau pour la faire tourner.'
+                              )}
+                            </p>
+                            <div className="surface-fields">
+                              <NumericField
+                                label="Échelle"
+                                value={Math.max(
+                                  selectedBodyNode.surface.width,
+                                  selectedBodyNode.surface.height,
+                                  selectedBodyNode.surface.depth
+                                )}
+                                min={10}
+                                max={300}
+                                unit="u"
+                                onChange={size =>
+                                  updateSelectedBodyNode(node => ({
+                                    ...node,
+                                    surface: scaleSurface(node.surface, size, {
+                                      width: 10,
+                                      height: 10,
+                                      depth: 10,
+                                    }),
+                                  }))
+                                }
+                              />
+                              {(['width', 'height', 'depth'] as const).map(dimension => (
+                                <NumericField
+                                  key={dimension}
+                                  label={
+                                    { width: 'Largeur', height: 'Hauteur', depth: 'Profondeur' }[
+                                      dimension
+                                    ]
+                                  }
+                                  value={selectedBodyNode.surface[dimension]}
+                                  min={10}
+                                  max={300}
+                                  unit="u"
+                                  onChange={value =>
+                                    updateSelectedBodyNode(node => ({
+                                      ...node,
+                                      surface: { ...node.surface, [dimension]: value },
+                                    }))
+                                  }
+                                />
+                              ))}
+                              {(selectedBodyNode.surface.type === 'cube' ||
+                                selectedBodyNode.surface.type === 'diamond' ||
+                                selectedBodyNode.surface.type === 'cylinder') && (
+                                <NumericField
+                                  label="Rondeur"
+                                  value={selectedBodyNode.surface.roundness}
+                                  min={0}
+                                  max={2}
+                                  step={0.01}
+                                  onChange={roundness =>
+                                    updateSelectedBodyNode(node => ({
+                                      ...node,
+                                      surface: { ...node.surface, roundness },
+                                    }))
+                                  }
+                                />
+                              )}
+                              {(selectedBodyNode.surface.type === 'cylinder' ||
+                                selectedBodyNode.surface.type === 'cone') && (
+                                <NumericField
+                                  label="Rondeur globale"
+                                  value={selectedBodyNode.surface.morphRoundness ?? 0}
+                                  min={0}
+                                  max={2}
+                                  step={0.01}
+                                  onChange={morphRoundness =>
+                                    updateSelectedBodyNode(node => ({
+                                      ...node,
+                                      surface: { ...node.surface, morphRoundness },
+                                    }))
+                                  }
+                                />
+                              )}
+                              {selectedBodyNode.surface.type === 'cone' && (
+                                <>
+                                  <NumericField
+                                    label="Rondeur pointe"
+                                    value={selectedBodyNode.surface.tipRoundness ?? 0}
+                                    min={0}
+                                    max={2}
+                                    step={0.01}
+                                    onChange={tipRoundness =>
+                                      updateSelectedBodyNode(node => ({
+                                        ...node,
+                                        surface: { ...node.surface, tipRoundness },
+                                      }))
+                                    }
+                                  />
+                                  <NumericField
+                                    label="Rondeur base"
+                                    value={selectedBodyNode.surface.baseRoundness ?? 0}
+                                    min={0}
+                                    max={2}
+                                    step={0.01}
+                                    onChange={baseRoundness =>
+                                      updateSelectedBodyNode(node => ({
+                                        ...node,
+                                        surface: { ...node.surface, baseRoundness },
+                                      }))
+                                    }
+                                  />
+                                </>
+                              )}
+                            </div>
+                            <div className="body-transform-grid">
+                              <div>
+                                <h3>{t('Position locale')}</h3>
+                                {(['X', 'Y', 'Z'] as const).map((axis, index) => (
+                                  <NumericField
+                                    key={axis}
+                                    label={axis}
+                                    value={selectedBodyNode.position[index]}
+                                    unit="u"
+                                    onChange={value =>
+                                      updateNodeVector('position', index as 0 | 1 | 2, value)
+                                    }
+                                  />
+                                ))}
+                              </div>
+                              <div>
+                                <h3>{t('Rotation locale')}</h3>
+                                {(['X', 'Y', 'Z'] as const).map((axis, index) => (
+                                  <NumericField
+                                    key={axis}
+                                    label={axis}
+                                    value={selectedBodyNode.rotation[index]}
+                                    unit="°"
+                                    onChange={value =>
+                                      updateNodeVector('rotation', index as 0 | 1 | 2, value)
+                                    }
+                                  />
+                                ))}
+                              </div>
+                            </div>
+                          </div>
                         )}
-                      </p>
-                      <div className="surface-fields">
-                        <NumericField
-                          label="Échelle"
-                          value={Math.max(
-                            selectedBodyNode.surface.width,
-                            selectedBodyNode.surface.height,
-                            selectedBodyNode.surface.depth
-                          )}
-                          min={10}
-                          max={300}
-                          unit="u"
-                          onChange={size =>
-                            updateSelectedBodyNode(node => ({
-                              ...node,
-                              surface: scaleSurface(node.surface, size, {
-                                width: 10,
-                                height: 10,
-                                depth: 10,
-                              }),
-                            }))
-                          }
+                      </InspectorCard>
+                      <InspectorCard className="surface-panel">
+                        <PanelTitle
+                          level={3}
+                          title="Forme principale"
+                          subtitle="Cette surface est la référence du visage et porte les yeux."
                         />
-                        {(['width', 'height', 'depth'] as const).map(dimension => (
+                        <div className="surface-grid">
+                          {bodyPrimitiveTypes.map(type => {
+                            const previewSurface =
+                              type === surface.type ? surface : surfacePresets[type]
+                            return (
+                              <Button
+                                className="surface-card"
+                                variant="outline"
+                                type="button"
+                                key={type}
+                                aria-pressed={surface.type === type}
+                                onClick={() => {
+                                  selectBodyNode('primary')
+                                  if (type !== surface.type) {
+                                    updateSurface({ ...surfacePresets[type] })
+                                  }
+                                }}
+                              >
+                                <SurfaceThumbnail surface={previewSurface} />
+                                <span>{t(surfaceLabels[type])}</span>
+                              </Button>
+                            )
+                          })}
+                        </div>
+                        <div className="surface-fields">
                           <NumericField
-                            key={dimension}
-                            label={
-                              { width: 'Largeur', height: 'Hauteur', depth: 'Profondeur' }[
-                                dimension
-                              ]
-                            }
-                            value={selectedBodyNode.surface[dimension]}
-                            min={10}
+                            label="Échelle"
+                            value={Math.max(surface.width, surface.height, surface.depth)}
+                            min={120}
                             max={300}
                             unit="u"
-                            onChange={value =>
-                              updateSelectedBodyNode(node => ({
-                                ...node,
-                                surface: { ...node.surface, [dimension]: value },
-                              }))
-                            }
-                          />
-                        ))}
-                        {(selectedBodyNode.surface.type === 'cube' ||
-                          selectedBodyNode.surface.type === 'diamond' ||
-                          selectedBodyNode.surface.type === 'cylinder') && (
-                          <NumericField
-                            label="Rondeur"
-                            value={selectedBodyNode.surface.roundness}
-                            min={0}
-                            max={2}
-                            step={0.01}
-                            onChange={roundness =>
-                              updateSelectedBodyNode(node => ({
-                                ...node,
-                                surface: { ...node.surface, roundness },
-                              }))
-                            }
-                          />
-                        )}
-                        {(selectedBodyNode.surface.type === 'cylinder' ||
-                          selectedBodyNode.surface.type === 'cone') && (
-                          <NumericField
-                            label="Rondeur globale"
-                            value={selectedBodyNode.surface.morphRoundness ?? 0}
-                            min={0}
-                            max={2}
-                            step={0.01}
-                            onChange={morphRoundness =>
-                              updateSelectedBodyNode(node => ({
-                                ...node,
-                                surface: { ...node.surface, morphRoundness },
-                              }))
-                            }
-                          />
-                        )}
-                        {selectedBodyNode.surface.type === 'cone' && (
-                          <>
-                            <NumericField
-                              label="Rondeur pointe"
-                              value={selectedBodyNode.surface.tipRoundness ?? 0}
-                              min={0}
-                              max={2}
-                              step={0.01}
-                              onChange={tipRoundness =>
-                                updateSelectedBodyNode(node => ({
-                                  ...node,
-                                  surface: { ...node.surface, tipRoundness },
-                                }))
-                              }
-                            />
-                            <NumericField
-                              label="Rondeur base"
-                              value={selectedBodyNode.surface.baseRoundness ?? 0}
-                              min={0}
-                              max={2}
-                              step={0.01}
-                              onChange={baseRoundness =>
-                                updateSelectedBodyNode(node => ({
-                                  ...node,
-                                  surface: { ...node.surface, baseRoundness },
-                                }))
-                              }
-                            />
-                          </>
-                        )}
-                      </div>
-                      <div className="body-transform-grid">
-                        <div>
-                          <h3>{t('Position locale')}</h3>
-                          {(['X', 'Y', 'Z'] as const).map((axis, index) => (
-                            <NumericField
-                              key={axis}
-                              label={axis}
-                              value={selectedBodyNode.position[index]}
-                              unit="u"
-                              onChange={value =>
-                                updateNodeVector('position', index as 0 | 1 | 2, value)
-                              }
-                            />
-                          ))}
-                        </div>
-                        <div>
-                          <h3>{t('Rotation locale')}</h3>
-                          {(['X', 'Y', 'Z'] as const).map((axis, index) => (
-                            <NumericField
-                              key={axis}
-                              label={axis}
-                              value={selectedBodyNode.rotation[index]}
-                              unit="°"
-                              onChange={value =>
-                                updateNodeVector('rotation', index as 0 | 1 | 2, value)
-                              }
-                            />
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </InspectorCard>
-                <InspectorCard className="surface-panel">
-                  <PanelTitle
-                    level={3}
-                    title="Forme principale"
-                    subtitle="Cette surface est la référence du visage et porte les yeux."
-                  />
-                  <div className="surface-grid">
-                    {bodyPrimitiveTypes.map(type => {
-                      const previewSurface = type === surface.type ? surface : surfacePresets[type]
-                      return (
-                        <Button
-                          className="surface-card"
-                          variant="outline"
-                          type="button"
-                          key={type}
-                          aria-pressed={surface.type === type}
-                          onClick={() => {
-                            selectBodyNode('primary')
-                            if (type !== surface.type) {
-                              updateSurface({ ...surfacePresets[type] })
-                            }
-                          }}
-                        >
-                          <SurfaceThumbnail surface={previewSurface} />
-                          <span>{t(surfaceLabels[type])}</span>
-                        </Button>
-                      )
-                    })}
-                  </div>
-                  <div className="surface-fields">
-                    <NumericField
-                      label="Échelle"
-                      value={Math.max(surface.width, surface.height, surface.depth)}
-                      min={120}
-                      max={300}
-                      unit="u"
-                      onChange={size =>
-                        updateSurface(
-                          scaleSurface(surface, size, { width: 120, height: 120, depth: 100 })
-                        )
-                      }
-                    />
-                    <NumericField
-                      label="Largeur"
-                      value={surface.width}
-                      min={120}
-                      max={300}
-                      unit="u"
-                      onChange={width => updateSurface({ ...surface, width })}
-                    />
-                    <NumericField
-                      label="Hauteur"
-                      value={surface.height}
-                      min={120}
-                      max={300}
-                      unit="u"
-                      onChange={height => updateSurface({ ...surface, height })}
-                    />
-                    <NumericField
-                      label="Profondeur"
-                      value={surface.depth}
-                      min={100}
-                      max={300}
-                      unit="u"
-                      onChange={depth => updateSurface({ ...surface, depth })}
-                    />
-                    {(surface.type === 'cube' || surface.type === 'diamond') && (
-                      <NumericField
-                        label="Rondeur"
-                        value={surface.roundness}
-                        min={0}
-                        max={2}
-                        step={0.01}
-                        onActiveChange={active => updateHighlight(active ? 'head' : null)}
-                        onChange={roundness => updateSurface({ ...surface, roundness })}
-                      />
-                    )}
-                    {surface.type === 'cylinder' && (
-                      <NumericField
-                        label="Rondeur des arêtes"
-                        value={surface.roundness}
-                        min={0}
-                        max={2}
-                        step={0.01}
-                        onActiveChange={active => updateHighlight(active ? 'head' : null)}
-                        onChange={roundness => updateSurface({ ...surface, roundness })}
-                      />
-                    )}
-                    {(surface.type === 'cylinder' || surface.type === 'cone') && (
-                      <NumericField
-                        label="Rondeur globale"
-                        value={surface.morphRoundness ?? 0}
-                        min={0}
-                        max={2}
-                        step={0.01}
-                        onActiveChange={active => updateHighlight(active ? 'head' : null)}
-                        onChange={morphRoundness => updateSurface({ ...surface, morphRoundness })}
-                      />
-                    )}
-                    {surface.type === 'cone' && (
-                      <>
-                        <NumericField
-                          label="Rondeur pointe"
-                          value={surface.tipRoundness ?? 0}
-                          min={0}
-                          max={2}
-                          step={0.01}
-                          onActiveChange={active => updateHighlight(active ? 'head' : null)}
-                          onChange={tipRoundness => updateSurface({ ...surface, tipRoundness })}
-                        />
-                        <NumericField
-                          label="Rondeur base"
-                          value={surface.baseRoundness ?? 0}
-                          min={0}
-                          max={2}
-                          step={0.01}
-                          onActiveChange={active => updateHighlight(active ? 'head' : null)}
-                          onChange={baseRoundness => updateSurface({ ...surface, baseRoundness })}
-                        />
-                      </>
-                    )}
-                  </div>
-                </InspectorCard>
-                <InspectorCard className="color-panel">
-                  <PanelTitle
-                    level={3}
-                    title="Couleur du corps"
-                    subtitle="Couleur de base utilisée par les poses et les expressions."
-                  />
-                  <ColorField
-                    label="Corps"
-                    value={activeAvatar.colors.body}
-                    onChange={body => updateAvatarColors({ body })}
-                  />
-                </InspectorCard>
-              </ControlSection>
-              <ControlSection
-                title="Yeux"
-                subtitle="Forme, placement, orientation et couleur du regard par défaut."
-              >
-                <p className="section-description">
-                  {t(
-                    'Définis l’identité du regard de cet avatar. Les poses s’ajoutent ensuite à cette base.'
-                  )}
-                </p>
-                {(['width', 'height', 'size'] as const).map(dimension => (
-                  <InspectorCard className="compact" key={`avatar-${dimension}`}>
-                    <div className="panel-inline-title">
-                      <h3>
-                        {t(
-                          {
-                            width: 'Largeur',
-                            height: 'Hauteur',
-                            size: 'Taille proportionnelle',
-                          }[dimension]
-                        )}
-                      </h3>
-                      <LinkButton
-                        linked={linked[dimension]}
-                        label={`Lier ${dimension}`}
-                        onClick={() =>
-                          setLinked(current => ({
-                            ...current,
-                            [dimension]: !current[dimension],
-                          }))
-                        }
-                      />
-                    </div>
-                    <div className="eye-columns">
-                      {(['Left', 'Right'] as Side[]).map(side => {
-                        const width = activeAvatarEyes[`width${side}`]
-                        const height = activeAvatarEyes[`height${side}`]
-                        const value =
-                          dimension === 'width'
-                            ? width
-                            : dimension === 'height'
-                              ? height
-                              : Math.max(width, height)
-                        return (
-                          <NumericField
-                            key={side}
-                            label={side === 'Left' ? 'Œil gauche' : 'Œil droit'}
-                            value={value}
-                            min={10}
-                            max={dimension === 'size' ? 110 : 100}
-                            unit="u"
-                            onActiveChange={active =>
-                              updateHighlight(
-                                active
-                                  ? linked[dimension]
-                                    ? 'both'
-                                    : side === 'Left'
-                                      ? 'left'
-                                      : 'right'
-                                  : null
+                            onChange={size =>
+                              updateSurface(
+                                scaleSurface(surface, size, { width: 120, height: 120, depth: 100 })
                               )
                             }
-                            onChange={next =>
-                              dimension === 'size'
-                                ? updateAvatarEyeSize(side, next)
-                                : updateAvatarEyeDimension(side, dimension, next)
-                            }
                           />
-                        )
-                      })}
-                    </div>
-                  </InspectorCard>
-                ))}
-                <InspectorCard>
-                  <div className="panel-inline-title">
-                    <div>
-                      <h3>{t('Position et espacement')}</h3>
-                      <p className="panel-inline-subtitle">
-                        {t('Coordonnées propres à l’avatar, indépendantes des poses.')}
+                          <NumericField
+                            label="Largeur"
+                            value={surface.width}
+                            min={120}
+                            max={300}
+                            unit="u"
+                            onChange={width => updateSurface({ ...surface, width })}
+                          />
+                          <NumericField
+                            label="Hauteur"
+                            value={surface.height}
+                            min={120}
+                            max={300}
+                            unit="u"
+                            onChange={height => updateSurface({ ...surface, height })}
+                          />
+                          <NumericField
+                            label="Profondeur"
+                            value={surface.depth}
+                            min={100}
+                            max={300}
+                            unit="u"
+                            onChange={depth => updateSurface({ ...surface, depth })}
+                          />
+                          {(surface.type === 'cube' || surface.type === 'diamond') && (
+                            <NumericField
+                              label="Rondeur"
+                              value={surface.roundness}
+                              min={0}
+                              max={2}
+                              step={0.01}
+                              onActiveChange={active => updateHighlight(active ? 'head' : null)}
+                              onChange={roundness => updateSurface({ ...surface, roundness })}
+                            />
+                          )}
+                          {surface.type === 'cylinder' && (
+                            <NumericField
+                              label="Rondeur des arêtes"
+                              value={surface.roundness}
+                              min={0}
+                              max={2}
+                              step={0.01}
+                              onActiveChange={active => updateHighlight(active ? 'head' : null)}
+                              onChange={roundness => updateSurface({ ...surface, roundness })}
+                            />
+                          )}
+                          {(surface.type === 'cylinder' || surface.type === 'cone') && (
+                            <NumericField
+                              label="Rondeur globale"
+                              value={surface.morphRoundness ?? 0}
+                              min={0}
+                              max={2}
+                              step={0.01}
+                              onActiveChange={active => updateHighlight(active ? 'head' : null)}
+                              onChange={morphRoundness =>
+                                updateSurface({ ...surface, morphRoundness })
+                              }
+                            />
+                          )}
+                          {surface.type === 'cone' && (
+                            <>
+                              <NumericField
+                                label="Rondeur pointe"
+                                value={surface.tipRoundness ?? 0}
+                                min={0}
+                                max={2}
+                                step={0.01}
+                                onActiveChange={active => updateHighlight(active ? 'head' : null)}
+                                onChange={tipRoundness =>
+                                  updateSurface({ ...surface, tipRoundness })
+                                }
+                              />
+                              <NumericField
+                                label="Rondeur base"
+                                value={surface.baseRoundness ?? 0}
+                                min={0}
+                                max={2}
+                                step={0.01}
+                                onActiveChange={active => updateHighlight(active ? 'head' : null)}
+                                onChange={baseRoundness =>
+                                  updateSurface({ ...surface, baseRoundness })
+                                }
+                              />
+                            </>
+                          )}
+                        </div>
+                      </InspectorCard>
+                      <InspectorCard className="color-panel">
+                        <PanelTitle
+                          level={3}
+                          title="Couleur du corps"
+                          subtitle="Couleur de base utilisée par les poses et les expressions."
+                        />
+                        <ColorField
+                          label="Corps"
+                          value={activeAvatar.colors.body}
+                          onChange={body => updateAvatarColors({ body })}
+                        />
+                      </InspectorCard>
+                    </ControlSection>
+                    <ControlSection
+                      title="Yeux"
+                      subtitle="Forme, placement, orientation et couleur du regard par défaut."
+                    >
+                      <p className="section-description">
+                        {t(
+                          'Définis l’identité du regard de cet avatar. Les poses s’ajoutent ensuite à cette base.'
+                        )}
                       </p>
-                    </div>
-                    <LinkButton
-                      linked={linked.position}
-                      label="Lier la position des yeux"
-                      onClick={() =>
-                        setLinked(current => ({ ...current, position: !current.position }))
-                      }
-                    />
-                  </div>
-                  <div className="eye-columns">
-                    {(['Left', 'Right'] as Side[]).map(side => (
-                      <div className="eye-column" key={side}>
-                        <h3>{t(side === 'Left' ? 'Œil gauche' : 'Œil droit')}</h3>
-                        <NumericField
-                          label="Horizontale"
-                          value={activeAvatarEyes[`positionX${side}`]}
-                          unit="u"
-                          onActiveChange={active =>
-                            updateHighlight(
-                              active
-                                ? linked.position
-                                  ? 'both'
-                                  : side === 'Left'
-                                    ? 'left'
-                                    : 'right'
-                                : null
-                            )
-                          }
-                          onChange={value => updateAvatarEyePosition(side, 'X', value)}
-                        />
-                        <NumericField
-                          label="Verticale"
-                          value={activeAvatarEyes[`positionY${side}`]}
-                          unit="u"
-                          onActiveChange={active =>
-                            updateHighlight(
-                              active
-                                ? linked.position
-                                  ? 'both'
-                                  : side === 'Left'
-                                    ? 'left'
-                                    : 'right'
-                                : null
-                            )
-                          }
-                          onChange={value => updateAvatarEyePosition(side, 'Y', value)}
-                        />
-                      </div>
-                    ))}
-                  </div>
-                  <div className="position-spacing">
-                    <NumericField
-                      label="Espacement"
-                      value={activeAvatarEyes.spacing}
-                      min={0}
-                      max={150}
-                      unit="u"
-                      onActiveChange={active => updateHighlight(active ? 'both' : null)}
-                      onChange={spacing => updateAvatarEyes({ spacing })}
-                    />
-                  </div>
-                </InspectorCard>
-                <InspectorCard>
-                  <div className="panel-inline-title">
-                    <PanelTitle
-                      level={3}
-                      title="Rotation locale"
-                      subtitle="Inclinaison par défaut propre à chaque œil."
-                    />
-                    <LinkButton
-                      linked={linked.rotation}
-                      label="Lier les rotations"
-                      onClick={() =>
-                        setLinked(current => ({ ...current, rotation: !current.rotation }))
-                      }
-                    />
-                  </div>
-                  <div className="eye-columns">
-                    <NumericField
-                      label="Œil gauche"
-                      value={activeAvatarEyes.leftAngle}
-                      unit="°"
-                      onActiveChange={active =>
-                        updateHighlight(active ? (linked.rotation ? 'both' : 'left') : null)
-                      }
-                      onChange={leftAngle =>
-                        updateAvatarEyes({
-                          leftAngle,
-                          ...(linked.rotation ? { rightAngle: -leftAngle } : {}),
-                        })
-                      }
-                    />
-                    <NumericField
-                      label="Œil droit"
-                      value={activeAvatarEyes.rightAngle}
-                      unit="°"
-                      onActiveChange={active =>
-                        updateHighlight(active ? (linked.rotation ? 'both' : 'right') : null)
-                      }
-                      onChange={rightAngle =>
-                        updateAvatarEyes({
-                          rightAngle,
-                          ...(linked.rotation ? { leftAngle: -rightAngle } : {}),
-                        })
-                      }
-                    />
-                  </div>
-                </InspectorCard>
-                <InspectorCard className="color-panel">
-                  <PanelTitle
-                    level={3}
-                    title="Couleur des yeux"
-                    subtitle="Couleur de base utilisée par les poses et les expressions."
-                  />
-                  <ColorField
-                    label="Yeux"
-                    value={activeAvatar.colors.eyes}
-                    onChange={eyes => updateAvatarColors({ eyes })}
-                  />
-                </InspectorCard>
-              </ControlSection>
-            </>
-          )}
-          {!bodyEditing && (
-            <>
-              <ControlSection
-                title="Corps"
-                subtitle="Orientation et apparence générale de la pose."
-              >
-                <InspectorCard className="color-panel">
-                  <PanelTitle
-                    level={3}
-                    title="Couleur du corps"
-                    subtitle="La pose peut remplacer temporairement la couleur de l’avatar."
-                  />
-                  <ColorField
-                    label="Corps"
-                    value={expression.bodyColor ?? activeAvatar.colors.body}
-                    onChange={bodyColor => updateImmediate({ ...expression, bodyColor })}
-                  />
-                  {expression.bodyColor && (
-                    <Button
-                      className="inherit-colors"
-                      variant="ghost"
-                      size="icon-sm"
-                      aria-label={t('Reprendre la couleur de l’avatar')}
-                      onClick={() => {
-                        const next = { ...expression }
-                        delete next.bodyColor
-                        updateImmediate(next)
-                      }}
-                    >
-                      <RotateCcw />
-                    </Button>
-                  )}
-                </InspectorCard>
-                <InspectorCard>
-                  <PanelTitle
-                    level={3}
-                    title="Rotation de la tête"
-                    subtitle="Les libellés ↔ sont scrubbables, comme dans Figma."
-                  />
-                  <NumericField
-                    label="Rotation X"
-                    value={expression.headX}
-                    unit="°"
-                    onActiveChange={active => updateHighlight(active ? 'head' : null)}
-                    onChange={value => updateImmediate({ ...expression, headX: value })}
-                  />
-                  <NumericField
-                    label="Rotation Y"
-                    value={expression.headY}
-                    unit="°"
-                    onActiveChange={active => updateHighlight(active ? 'head' : null)}
-                    onChange={value => updateImmediate({ ...expression, headY: value })}
-                  />
-                  <NumericField
-                    label="Rotation Z"
-                    value={expression.headZ}
-                    unit="°"
-                    onActiveChange={active => updateHighlight(active ? 'head' : null)}
-                    onChange={value => updateImmediate({ ...expression, headZ: value })}
-                  />
-                </InspectorCard>
-              </ControlSection>
-              <ControlSection
-                title="Yeux"
-                subtitle="Forme, placement, orientation et couleur du regard."
-              >
-                <InspectorCard className="color-panel">
-                  <PanelTitle
-                    level={3}
-                    title="Couleur des yeux"
-                    subtitle="La pose peut remplacer temporairement la couleur de l’avatar."
-                  />
-                  <ColorField
-                    label="Yeux"
-                    value={expression.eyeColor ?? activeAvatar.colors.eyes}
-                    onChange={eyeColor => updateImmediate({ ...expression, eyeColor })}
-                  />
-                  {expression.eyeColor && (
-                    <Button
-                      className="inherit-colors"
-                      variant="ghost"
-                      size="icon-sm"
-                      aria-label={t('Reprendre la couleur de l’avatar')}
-                      onClick={() => {
-                        const next = { ...expression }
-                        delete next.eyeColor
-                        updateImmediate(next)
-                      }}
-                    >
-                      <RotateCcw />
-                    </Button>
-                  )}
-                </InspectorCard>
-                {(['width', 'height', 'size'] as const).map(dimension => (
-                  <InspectorCard className="compact" key={dimension}>
-                    <div className="panel-inline-title">
-                      <h3>
-                        {t(
-                          {
-                            width: 'Largeur',
-                            height: 'Hauteur',
-                            size: 'Taille proportionnelle',
-                          }[dimension]
-                        )}
-                      </h3>
-                      <LinkButton
-                        linked={linked[dimension]}
-                        label={`Lier ${dimension}`}
-                        onClick={() =>
-                          setLinked(current => ({
-                            ...current,
-                            [dimension]: !current[dimension],
-                          }))
-                        }
-                      />
-                    </div>
-                    <div className="eye-columns">
-                      {(['Left', 'Right'] as Side[]).map(side => {
-                        const width = expression[`width${side}`]
-                        const height = expression[`height${side}`]
-                        const value =
-                          dimension === 'width'
-                            ? width
-                            : dimension === 'height'
-                              ? height
-                              : Math.max(width, height)
-                        return (
-                          <NumericField
-                            key={side}
-                            label={side === 'Left' ? 'Œil gauche' : 'Œil droit'}
-                            value={value}
-                            min={10}
-                            max={dimension === 'size' ? 110 : 100}
-                            unit="u"
-                            onActiveChange={active =>
-                              updateHighlight(
-                                active
-                                  ? linked[dimension]
-                                    ? 'both'
-                                    : side === 'Left'
-                                      ? 'left'
-                                      : 'right'
-                                  : null
+                      {(['width', 'height', 'size'] as const).map(dimension => (
+                        <InspectorCard className="compact" key={`avatar-${dimension}`}>
+                          <div className="panel-inline-title">
+                            <h3>
+                              {t(
+                                {
+                                  width: 'Largeur',
+                                  height: 'Hauteur',
+                                  size: 'Taille proportionnelle',
+                                }[dimension]
+                              )}
+                            </h3>
+                            <LinkButton
+                              linked={linked[dimension]}
+                              label={`Lier ${dimension}`}
+                              onClick={() =>
+                                setLinked(current => ({
+                                  ...current,
+                                  [dimension]: !current[dimension],
+                                }))
+                              }
+                            />
+                          </div>
+                          <div className="eye-columns">
+                            {(['Left', 'Right'] as Side[]).map(side => {
+                              const width = activeAvatarEyes[`width${side}`]
+                              const height = activeAvatarEyes[`height${side}`]
+                              const value =
+                                dimension === 'width'
+                                  ? width
+                                  : dimension === 'height'
+                                    ? height
+                                    : Math.max(width, height)
+                              return (
+                                <NumericField
+                                  key={side}
+                                  label={side === 'Left' ? 'Œil gauche' : 'Œil droit'}
+                                  value={value}
+                                  min={10}
+                                  max={dimension === 'size' ? 110 : 100}
+                                  unit="u"
+                                  onActiveChange={active =>
+                                    updateHighlight(
+                                      active
+                                        ? linked[dimension]
+                                          ? 'both'
+                                          : side === 'Left'
+                                            ? 'left'
+                                            : 'right'
+                                        : null
+                                    )
+                                  }
+                                  onChange={next =>
+                                    dimension === 'size'
+                                      ? updateAvatarEyeSize(side, next)
+                                      : updateAvatarEyeDimension(side, dimension, next)
+                                  }
+                                />
                               )
-                            }
-                            onChange={next =>
-                              dimension === 'size'
-                                ? updateSize(side, next)
-                                : updateDimension(side, dimension, next)
+                            })}
+                          </div>
+                        </InspectorCard>
+                      ))}
+                      <InspectorCard>
+                        <div className="panel-inline-title">
+                          <div>
+                            <h3>{t('Position et espacement')}</h3>
+                            <p className="panel-inline-subtitle">
+                              {t('Coordonnées propres à l’avatar, indépendantes des poses.')}
+                            </p>
+                          </div>
+                          <LinkButton
+                            linked={linked.position}
+                            label="Lier la position des yeux"
+                            onClick={() =>
+                              setLinked(current => ({ ...current, position: !current.position }))
                             }
                           />
-                        )
-                      })}
-                    </div>
-                  </InspectorCard>
-                ))}
-                <InspectorCard>
-                  <PanelTitle
-                    level={3}
-                    title="Position et espacement"
-                    subtitle="Coordonnées communes projetées sur la forme choisie."
-                  />
-                  <div className="eye-columns">
-                    <div className="eye-column">
-                      <h3>{t('Œil gauche')}</h3>
-                      <NumericField
-                        label="Horizontale"
-                        value={expression.positionXLeft}
-                        unit="u"
-                        onActiveChange={active => updateHighlight(active ? 'left' : null)}
-                        onChange={value => updateImmediate({ ...expression, positionXLeft: value })}
-                      />
-                      <NumericField
-                        label="Verticale"
-                        value={expression.positionYLeft}
-                        unit="u"
-                        onActiveChange={active => updateHighlight(active ? 'left' : null)}
-                        onChange={value => updateImmediate({ ...expression, positionYLeft: value })}
-                      />
-                    </div>
-                    <div className="eye-column">
-                      <h3>{t('Œil droit')}</h3>
-                      <NumericField
-                        label="Horizontale"
-                        value={expression.positionXRight}
-                        unit="u"
-                        onActiveChange={active => updateHighlight(active ? 'right' : null)}
-                        onChange={value =>
-                          updateImmediate({ ...expression, positionXRight: value })
-                        }
-                      />
-                      <NumericField
-                        label="Verticale"
-                        value={expression.positionYRight}
-                        unit="u"
-                        onActiveChange={active => updateHighlight(active ? 'right' : null)}
-                        onChange={value =>
-                          updateImmediate({ ...expression, positionYRight: value })
-                        }
-                      />
-                    </div>
-                  </div>
-                  <div className="position-spacing">
-                    <NumericField
-                      label="Espacement"
-                      value={expression.spacing}
-                      min={0}
-                      max={150}
-                      unit="u"
-                      onActiveChange={active => updateHighlight(active ? 'both' : null)}
-                      onChange={updateSpacing}
-                    />
-                  </div>
-                </InspectorCard>
-                <InspectorCard>
-                  <div className="panel-inline-title">
-                    <PanelTitle
-                      level={3}
-                      title="Rotation locale"
-                      subtitle="Inclinaison propre à chaque œil."
-                    />
-                    <LinkButton
-                      linked={linked.rotation}
-                      label="Lier les rotations"
-                      onClick={() =>
-                        setLinked(current => ({ ...current, rotation: !current.rotation }))
-                      }
-                    />
-                  </div>
-                  <div className="eye-columns">
-                    <NumericField
-                      label="Œil gauche"
-                      value={expression.leftAngle}
-                      unit="°"
-                      onActiveChange={active =>
-                        updateHighlight(active ? (linked.rotation ? 'both' : 'left') : null)
-                      }
-                      onChange={value =>
-                        updateImmediate({
-                          ...expression,
-                          leftAngle: value,
-                          ...(linked.rotation ? { rightAngle: -value } : {}),
-                        })
-                      }
-                    />
-                    <NumericField
-                      label="Œil droit"
-                      value={expression.rightAngle}
-                      unit="°"
-                      onActiveChange={active =>
-                        updateHighlight(active ? (linked.rotation ? 'both' : 'right') : null)
-                      }
-                      onChange={value =>
-                        updateImmediate({
-                          ...expression,
-                          rightAngle: value,
-                          ...(linked.rotation ? { leftAngle: -value } : {}),
-                        })
-                      }
-                    />
-                  </div>
-                </InspectorCard>
-              </ControlSection>
-              <ControlSection
-                title="Projection"
-                subtitle="Perspective et repères appliqués à la surface active."
-              >
-                <InspectorCard>
-                  <PanelTitle
-                    level={3}
-                    title="Perspective"
-                    subtitle="Profondeur simulée du visage."
-                  />
-                  <NumericField
-                    label="Perspective"
-                    value={expression.perspective}
-                    step={0.01}
-                    unit="×"
-                    onChange={value => updateImmediate({ ...expression, perspective: value })}
-                  />
-                  <div className="switch">
-                    <span>{t('Afficher le maillage')}</span>
-                    <Switch
-                      checked={showWire}
-                      onCheckedChange={updateWireVisibility}
-                      aria-label={t('Afficher le maillage')}
-                    />
-                  </div>
-                  <Button
-                    className="reset"
-                    variant="outline"
-                    type="button"
-                    onClick={() => transitionToExpression({ ...defaultExpression })}
-                  >
-                    {t('Réinitialiser')}
-                  </Button>
-                </InspectorCard>
-              </ControlSection>
-            </>
-          )}
-        </div>
-      )}
-
-      {!sequenceEditing && !editing && bodyEditing && (
-        <footer className="workspace-footer">
-          <div className="workspace-footer-secondary">
-            <Button
-              variant="destructive"
-              disabled={avatars.length <= 1}
-              onClick={() => setDeleteAvatarOpen(true)}
-            >
-              <Trash2 />
-              {t('Supprimer')}
-            </Button>
-            <Button variant="outline" onClick={() => duplicateAvatar(activeAvatar, true)}>
-              <Copy />
-              {t('Dupliquer')}
-            </Button>
-          </div>
-          <Button onClick={saveAvatarEditing}>{t('Enregistrer')}</Button>
-        </footer>
-      )}
-
-      {!sequenceEditing && !editing && !bodyEditing && mode === 'expressions' && (
-        <div className="panel-stack">
-          <InspectorCard>
-            <div className="preset-header">
-              <div>
-                <p className="eyebrow">{expressions.length} presets</p>
-                <h2>{t('Expressions')}</h2>
-              </div>
-              <span>{t('Double-clic pour modifier')}</span>
-            </div>
-            <div className="expression-grid">
-              {expressions.map((preset, index) => (
-                <motion.div
-                  className="expression-sort-item"
-                  data-dragging={draggingExpressionId === preset.id || undefined}
-                  key={preset.id}
-                  layout="position"
-                  layoutId={`expression-${preset.id}`}
-                  animate={{
-                    opacity: draggingExpressionId === preset.id ? 0.28 : 1,
-                    scale: draggingExpressionId === preset.id ? 0.96 : 1,
-                  }}
-                  transition={
-                    reduceMotion
-                      ? { duration: 0 }
-                      : { type: 'spring', stiffness: 520, damping: 42, mass: 0.7 }
-                  }
-                >
-                  <ExpressionCard
-                    expression={preset}
-                    index={index}
-                    active={activeExpression === index}
-                    surface={surface}
-                    bodyNodes={bodyNodes}
-                    colors={activeAvatar.colors}
-                    avatarEyes={activeAvatarEyes}
-                    previewId={String(index)}
-                    onSelect={() => transitionToExpression(preset, index)}
-                    onEdit={() => openExpressionEditor(index, preset)}
-                    onDuplicate={() => duplicateExpression(index, preset)}
-                    onDelete={() => {
-                      openExpressionEditor(index, preset)
-                      setDeleteExpressionOpen(true)
-                    }}
-                    draggable
-                    onDragStart={event => {
-                      expressionDragOrigin.current = expressions
-                      expressionDragPreview.current = expressions
-                      draggedExpressionId.current = preset.id
-                      setDraggingExpressionId(preset.id)
-                      event.dataTransfer.effectAllowed = 'move'
-                    }}
-                    onDragEnter={() => previewExpressionMove(preset.id)}
-                    onDragOver={event => {
-                      event.preventDefault()
-                      event.dataTransfer.dropEffect = 'move'
-                    }}
-                    onDrop={event => {
-                      event.preventDefault()
-                      commitExpressionMove(preset.id)
-                    }}
-                    onDragEnd={cancelExpressionMove}
-                  />
-                </motion.div>
-              ))}
-              <Button
-                className="expression-add creation-card"
-                variant="outline"
-                type="button"
-                onDragOver={event => event.preventDefault()}
-                onDrop={event => {
-                  event.preventDefault()
-                  commitExpressionMove(null)
-                }}
-                onClick={() => openExpressionEditor(null, expression)}
-                aria-label={t('Nouvelle expression')}
-              >
-                <Plus />
-              </Button>
-            </div>
-          </InspectorCard>
-          <InspectorCard>
-            <PanelTitle
-              title="Mouvement"
-              subtitle="Motion interpole les valeurs et notre moteur effectue le slerp quaternion."
-            />
-            <NumericField
-              label="Vitesse du ressort"
-              value={springSpeed}
-              step={0.5}
-              onChange={value => {
-                springSpeedRef.current = value
-                setSpringSpeed(value)
-              }}
-            />
-            <div className="button-row">
-              <Button variant="outline" type="button" onClick={() => blink()}>
-                {t('Cligner')}
-              </Button>
-              <Button
-                variant="outline"
-                type="button"
-                onClick={() => {
-                  const index = Math.floor(Math.random() * expressions.length)
-                  transitionToExpression(expressions[index], index)
-                }}
-              >
-                {t('Expression aléatoire')}
-              </Button>
-            </div>
-          </InspectorCard>
-        </div>
-      )}
-
-      {!sequenceEditing && !editing && !bodyEditing && mode === 'states' && (
-        <div className="panel-stack">
-          <InspectorCard>
-            <div className="preset-header">
-              <div>
-                <p className="eyebrow">
-                  {sequences.length} {t('animations')}
-                </p>
-                <h2>{t('Animations')}</h2>
-              </div>
-            </div>
-            <div className="state-groups">
-              {groupSequences(sequences).map(group => (
-                <div
-                  key={group.name}
-                  onDragOver={event => event.preventDefault()}
-                  onDrop={event => {
-                    event.preventDefault()
-                    commitStateMove(null, group.name)
-                  }}
-                >
-                  <strong>
-                    {group.sequences.every(sequence => sequence.builtIn)
-                      ? t(group.name)
-                      : group.name}
-                  </strong>
-                  <div className="state-buttons">
-                    {group.sequences.map(sequence => {
-                      const firstStep = sequence.steps[0]
-                      const firstExpression = firstStep
-                        ? expressionById.get(firstStep.expressionId)
-                        : undefined
-                      const card = (
+                        </div>
+                        <div className="eye-columns">
+                          {(['Left', 'Right'] as Side[]).map(side => (
+                            <div className="eye-column" key={side}>
+                              <h3>{t(side === 'Left' ? 'Œil gauche' : 'Œil droit')}</h3>
+                              <NumericField
+                                label="Horizontale"
+                                value={activeAvatarEyes[`positionX${side}`]}
+                                unit="u"
+                                onActiveChange={active =>
+                                  updateHighlight(
+                                    active
+                                      ? linked.position
+                                        ? 'both'
+                                        : side === 'Left'
+                                          ? 'left'
+                                          : 'right'
+                                      : null
+                                  )
+                                }
+                                onChange={value => updateAvatarEyePosition(side, 'X', value)}
+                              />
+                              <NumericField
+                                label="Verticale"
+                                value={activeAvatarEyes[`positionY${side}`]}
+                                unit="u"
+                                onActiveChange={active =>
+                                  updateHighlight(
+                                    active
+                                      ? linked.position
+                                        ? 'both'
+                                        : side === 'Left'
+                                          ? 'left'
+                                          : 'right'
+                                      : null
+                                  )
+                                }
+                                onChange={value => updateAvatarEyePosition(side, 'Y', value)}
+                              />
+                            </div>
+                          ))}
+                        </div>
+                        <div className="position-spacing">
+                          <NumericField
+                            label="Espacement"
+                            value={activeAvatarEyes.spacing}
+                            min={0}
+                            max={150}
+                            unit="u"
+                            onActiveChange={active => updateHighlight(active ? 'both' : null)}
+                            onChange={spacing => updateAvatarEyes({ spacing })}
+                          />
+                        </div>
+                      </InspectorCard>
+                      <InspectorCard>
+                        <div className="panel-inline-title">
+                          <PanelTitle
+                            level={3}
+                            title="Rotation locale"
+                            subtitle="Inclinaison par défaut propre à chaque œil."
+                          />
+                          <LinkButton
+                            linked={linked.rotation}
+                            label="Lier les rotations"
+                            onClick={() =>
+                              setLinked(current => ({ ...current, rotation: !current.rotation }))
+                            }
+                          />
+                        </div>
+                        <div className="eye-columns">
+                          <NumericField
+                            label="Œil gauche"
+                            value={activeAvatarEyes.leftAngle}
+                            unit="°"
+                            onActiveChange={active =>
+                              updateHighlight(active ? (linked.rotation ? 'both' : 'left') : null)
+                            }
+                            onChange={leftAngle =>
+                              updateAvatarEyes({
+                                leftAngle,
+                                ...(linked.rotation ? { rightAngle: -leftAngle } : {}),
+                              })
+                            }
+                          />
+                          <NumericField
+                            label="Œil droit"
+                            value={activeAvatarEyes.rightAngle}
+                            unit="°"
+                            onActiveChange={active =>
+                              updateHighlight(active ? (linked.rotation ? 'both' : 'right') : null)
+                            }
+                            onChange={rightAngle =>
+                              updateAvatarEyes({
+                                rightAngle,
+                                ...(linked.rotation ? { leftAngle: -rightAngle } : {}),
+                              })
+                            }
+                          />
+                        </div>
+                      </InspectorCard>
+                      <InspectorCard className="color-panel">
+                        <PanelTitle
+                          level={3}
+                          title="Couleur des yeux"
+                          subtitle="Couleur de base utilisée par les poses et les expressions."
+                        />
+                        <ColorField
+                          label="Yeux"
+                          value={activeAvatar.colors.eyes}
+                          onChange={eyes => updateAvatarColors({ eyes })}
+                        />
+                      </InspectorCard>
+                    </ControlSection>
+                  </>
+                )}
+                {!bodyEditing && (
+                  <>
+                    <ControlSection
+                      title="Corps"
+                      subtitle="Orientation et apparence générale de la pose."
+                    >
+                      <InspectorCard className="color-panel">
+                        <PanelTitle
+                          level={3}
+                          title="Couleur du corps"
+                          subtitle="La pose peut remplacer temporairement la couleur de l’avatar."
+                        />
+                        <ColorField
+                          label="Corps"
+                          value={expression.bodyColor ?? activeAvatar.colors.body}
+                          onChange={bodyColor => updateImmediate({ ...expression, bodyColor })}
+                        />
+                        {expression.bodyColor && (
+                          <Button
+                            className="inherit-colors"
+                            variant="ghost"
+                            size="icon-sm"
+                            aria-label={t('Reprendre la couleur de l’avatar')}
+                            onClick={() => {
+                              const next = { ...expression }
+                              delete next.bodyColor
+                              updateImmediate(next)
+                            }}
+                          >
+                            <RotateCcw />
+                          </Button>
+                        )}
+                      </InspectorCard>
+                      <InspectorCard>
+                        <PanelTitle
+                          level={3}
+                          title="Rotation de la tête"
+                          subtitle="Les libellés ↔ sont scrubbables, comme dans Figma."
+                        />
+                        <NumericField
+                          label="Rotation X"
+                          value={expression.headX}
+                          unit="°"
+                          onActiveChange={active => updateHighlight(active ? 'head' : null)}
+                          onChange={value => updateImmediate({ ...expression, headX: value })}
+                        />
+                        <NumericField
+                          label="Rotation Y"
+                          value={expression.headY}
+                          unit="°"
+                          onActiveChange={active => updateHighlight(active ? 'head' : null)}
+                          onChange={value => updateImmediate({ ...expression, headY: value })}
+                        />
+                        <NumericField
+                          label="Rotation Z"
+                          value={expression.headZ}
+                          unit="°"
+                          onActiveChange={active => updateHighlight(active ? 'head' : null)}
+                          onChange={value => updateImmediate({ ...expression, headZ: value })}
+                        />
+                      </InspectorCard>
+                    </ControlSection>
+                    <ControlSection
+                      title="Yeux"
+                      subtitle="Forme, placement, orientation et couleur du regard."
+                    >
+                      <InspectorCard className="color-panel">
+                        <PanelTitle
+                          level={3}
+                          title="Couleur des yeux"
+                          subtitle="La pose peut remplacer temporairement la couleur de l’avatar."
+                        />
+                        <ColorField
+                          label="Yeux"
+                          value={expression.eyeColor ?? activeAvatar.colors.eyes}
+                          onChange={eyeColor => updateImmediate({ ...expression, eyeColor })}
+                        />
+                        {expression.eyeColor && (
+                          <Button
+                            className="inherit-colors"
+                            variant="ghost"
+                            size="icon-sm"
+                            aria-label={t('Reprendre la couleur de l’avatar')}
+                            onClick={() => {
+                              const next = { ...expression }
+                              delete next.eyeColor
+                              updateImmediate(next)
+                            }}
+                          >
+                            <RotateCcw />
+                          </Button>
+                        )}
+                      </InspectorCard>
+                      {(['width', 'height', 'size'] as const).map(dimension => (
+                        <InspectorCard className="compact" key={dimension}>
+                          <div className="panel-inline-title">
+                            <h3>
+                              {t(
+                                {
+                                  width: 'Largeur',
+                                  height: 'Hauteur',
+                                  size: 'Taille proportionnelle',
+                                }[dimension]
+                              )}
+                            </h3>
+                            <LinkButton
+                              linked={linked[dimension]}
+                              label={`Lier ${dimension}`}
+                              onClick={() =>
+                                setLinked(current => ({
+                                  ...current,
+                                  [dimension]: !current[dimension],
+                                }))
+                              }
+                            />
+                          </div>
+                          <div className="eye-columns">
+                            {(['Left', 'Right'] as Side[]).map(side => {
+                              const width = expression[`width${side}`]
+                              const height = expression[`height${side}`]
+                              const value =
+                                dimension === 'width'
+                                  ? width
+                                  : dimension === 'height'
+                                    ? height
+                                    : Math.max(width, height)
+                              return (
+                                <NumericField
+                                  key={side}
+                                  label={side === 'Left' ? 'Œil gauche' : 'Œil droit'}
+                                  value={value}
+                                  min={10}
+                                  max={dimension === 'size' ? 110 : 100}
+                                  unit="u"
+                                  onActiveChange={active =>
+                                    updateHighlight(
+                                      active
+                                        ? linked[dimension]
+                                          ? 'both'
+                                          : side === 'Left'
+                                            ? 'left'
+                                            : 'right'
+                                        : null
+                                    )
+                                  }
+                                  onChange={next =>
+                                    dimension === 'size'
+                                      ? updateSize(side, next)
+                                      : updateDimension(side, dimension, next)
+                                  }
+                                />
+                              )
+                            })}
+                          </div>
+                        </InspectorCard>
+                      ))}
+                      <InspectorCard>
+                        <PanelTitle
+                          level={3}
+                          title="Position et espacement"
+                          subtitle="Coordonnées communes projetées sur la forme choisie."
+                        />
+                        <div className="eye-columns">
+                          <div className="eye-column">
+                            <h3>{t('Œil gauche')}</h3>
+                            <NumericField
+                              label="Horizontale"
+                              value={expression.positionXLeft}
+                              unit="u"
+                              onActiveChange={active => updateHighlight(active ? 'left' : null)}
+                              onChange={value =>
+                                updateImmediate({ ...expression, positionXLeft: value })
+                              }
+                            />
+                            <NumericField
+                              label="Verticale"
+                              value={expression.positionYLeft}
+                              unit="u"
+                              onActiveChange={active => updateHighlight(active ? 'left' : null)}
+                              onChange={value =>
+                                updateImmediate({ ...expression, positionYLeft: value })
+                              }
+                            />
+                          </div>
+                          <div className="eye-column">
+                            <h3>{t('Œil droit')}</h3>
+                            <NumericField
+                              label="Horizontale"
+                              value={expression.positionXRight}
+                              unit="u"
+                              onActiveChange={active => updateHighlight(active ? 'right' : null)}
+                              onChange={value =>
+                                updateImmediate({ ...expression, positionXRight: value })
+                              }
+                            />
+                            <NumericField
+                              label="Verticale"
+                              value={expression.positionYRight}
+                              unit="u"
+                              onActiveChange={active => updateHighlight(active ? 'right' : null)}
+                              onChange={value =>
+                                updateImmediate({ ...expression, positionYRight: value })
+                              }
+                            />
+                          </div>
+                        </div>
+                        <div className="position-spacing">
+                          <NumericField
+                            label="Espacement"
+                            value={expression.spacing}
+                            min={0}
+                            max={150}
+                            unit="u"
+                            onActiveChange={active => updateHighlight(active ? 'both' : null)}
+                            onChange={updateSpacing}
+                          />
+                        </div>
+                      </InspectorCard>
+                      <InspectorCard>
+                        <div className="panel-inline-title">
+                          <PanelTitle
+                            level={3}
+                            title="Rotation locale"
+                            subtitle="Inclinaison propre à chaque œil."
+                          />
+                          <LinkButton
+                            linked={linked.rotation}
+                            label="Lier les rotations"
+                            onClick={() =>
+                              setLinked(current => ({ ...current, rotation: !current.rotation }))
+                            }
+                          />
+                        </div>
+                        <div className="eye-columns">
+                          <NumericField
+                            label="Œil gauche"
+                            value={expression.leftAngle}
+                            unit="°"
+                            onActiveChange={active =>
+                              updateHighlight(active ? (linked.rotation ? 'both' : 'left') : null)
+                            }
+                            onChange={value =>
+                              updateImmediate({
+                                ...expression,
+                                leftAngle: value,
+                                ...(linked.rotation ? { rightAngle: -value } : {}),
+                              })
+                            }
+                          />
+                          <NumericField
+                            label="Œil droit"
+                            value={expression.rightAngle}
+                            unit="°"
+                            onActiveChange={active =>
+                              updateHighlight(active ? (linked.rotation ? 'both' : 'right') : null)
+                            }
+                            onChange={value =>
+                              updateImmediate({
+                                ...expression,
+                                rightAngle: value,
+                                ...(linked.rotation ? { leftAngle: -value } : {}),
+                              })
+                            }
+                          />
+                        </div>
+                      </InspectorCard>
+                    </ControlSection>
+                    <ControlSection
+                      title="Projection"
+                      subtitle="Perspective et repères appliqués à la surface active."
+                    >
+                      <InspectorCard>
+                        <PanelTitle
+                          level={3}
+                          title="Perspective"
+                          subtitle="Profondeur simulée du visage."
+                        />
+                        <NumericField
+                          label="Perspective"
+                          value={expression.perspective}
+                          step={0.01}
+                          unit="×"
+                          onChange={value => updateImmediate({ ...expression, perspective: value })}
+                        />
+                        <div className="switch">
+                          <span>{t('Afficher le maillage')}</span>
+                          <Switch
+                            checked={showWire}
+                            onCheckedChange={updateWireVisibility}
+                            aria-label={t('Afficher le maillage')}
+                          />
+                        </div>
                         <Button
-                          className="expression-card state-card"
+                          className="reset"
                           variant="outline"
                           type="button"
+                          onClick={() => transitionToExpression({ ...defaultExpression })}
+                        >
+                          {t('Réinitialiser')}
+                        </Button>
+                      </InspectorCard>
+                    </ControlSection>
+                  </>
+                )}
+              </div>
+            )}
+
+            {!sequenceEditing && !editing && bodyEditing && (
+              <footer className="workspace-footer">
+                <div className="workspace-footer-secondary">
+                  <Button
+                    variant="destructive"
+                    disabled={avatars.length <= 1}
+                    onClick={() => setDeleteAvatarOpen(true)}
+                  >
+                    <Trash2 />
+                    {t('Supprimer')}
+                  </Button>
+                  <Button variant="outline" onClick={() => duplicateAvatar(activeAvatar, true)}>
+                    <Copy />
+                    {t('Dupliquer')}
+                  </Button>
+                </div>
+                <Button onClick={saveAvatarEditing}>{t('Enregistrer')}</Button>
+              </footer>
+            )}
+
+            {!sequenceEditing && !editing && !bodyEditing && mode === 'expressions' && (
+              <div className="panel-stack">
+                <InspectorCard>
+                  <div className="preset-header">
+                    <div>
+                      <p className="eyebrow">{expressions.length} presets</p>
+                    </div>
+                    <span>{t('Double-clic pour modifier')}</span>
+                  </div>
+                  <div className="expression-grid">
+                    {expressions.map((preset, index) => (
+                      <motion.div
+                        className="expression-sort-item"
+                        data-dragging={draggingExpressionId === preset.id || undefined}
+                        key={preset.id}
+                        layout="position"
+                        layoutId={`expression-${preset.id}`}
+                        animate={{
+                          opacity: draggingExpressionId === preset.id ? 0.28 : 1,
+                          scale: draggingExpressionId === preset.id ? 0.96 : 1,
+                        }}
+                        transition={
+                          reduceMotion
+                            ? { duration: 0 }
+                            : { type: 'spring', stiffness: 520, damping: 42, mass: 0.7 }
+                        }
+                      >
+                        <ExpressionCard
+                          expression={preset}
+                          index={index}
+                          active={activeExpression === index}
+                          surface={surface}
+                          bodyNodes={bodyNodes}
+                          colors={activeAvatar.colors}
+                          avatarEyes={activeAvatarEyes}
+                          previewId={String(index)}
+                          onSelect={() => transitionToExpression(preset, index)}
+                          onEdit={() => openExpressionEditor(index, preset)}
+                          onDuplicate={() => duplicateExpression(index, preset)}
+                          onDelete={() => {
+                            openExpressionEditor(index, preset)
+                            setDeleteExpressionOpen(true)
+                          }}
                           draggable
-                          aria-pressed={selectedState === sequence.id}
                           onDragStart={event => {
-                            stateDragOrigin.current = sequences
-                            stateDragPreview.current = sequences
-                            draggedStateId.current = sequence.id
-                            setDraggingStateId(sequence.id)
+                            expressionDragOrigin.current = expressions
+                            expressionDragPreview.current = expressions
+                            draggedExpressionId.current = preset.id
+                            setDraggingExpressionId(preset.id)
                             event.dataTransfer.effectAllowed = 'move'
                           }}
-                          onDragEnter={() => previewStateMove(sequence.id, group.name)}
+                          onDragEnter={() => previewExpressionMove(preset.id)}
                           onDragOver={event => {
                             event.preventDefault()
-                            event.stopPropagation()
                             event.dataTransfer.dropEffect = 'move'
                           }}
                           onDrop={event => {
                             event.preventDefault()
-                            event.stopPropagation()
-                            commitStateMove(sequence.id, group.name)
+                            commitExpressionMove(preset.id)
                           }}
-                          onDragEnd={cancelStateMove}
-                          onClick={() => launchSequence(sequence)}
-                          onDoubleClick={() => openSequenceEditor(sequence)}
-                        >
-                          <ExpressionPreview
-                            expression={firstExpression ?? expressions[0] ?? defaultExpression}
-                            surface={surface}
-                            bodyNodes={bodyNodes}
-                            colors={activeAvatar.colors}
-                            avatarEyes={activeAvatarEyes}
-                            id={`state-card-${sequence.id}`}
-                          />
-                          <span>{sequence.builtIn ? t(sequence.name) : sequence.name}</span>
-                        </Button>
-                      )
-                      return (
-                        <motion.div
-                          className="state-sort-item"
-                          data-dragging={draggingStateId === sequence.id || undefined}
-                          key={sequence.id}
-                          layout="position"
-                          layoutId={`state-${sequence.id}`}
-                          animate={{
-                            opacity: draggingStateId === sequence.id ? 0.28 : 1,
-                            scale: draggingStateId === sequence.id ? 0.96 : 1,
-                          }}
-                          transition={
-                            reduceMotion
-                              ? { duration: 0 }
-                              : { type: 'spring', stiffness: 520, damping: 42, mass: 0.7 }
-                          }
-                        >
-                          <ContextMenu>
-                            <ContextMenuTrigger render={card} />
-                            <ContextMenuContent>
-                              <ContextMenuItem onClick={() => openSequenceEditor(sequence)}>
-                                <Pencil />
-                                {t('Modifier')}
-                              </ContextMenuItem>
-                              <ContextMenuItem onClick={() => duplicateState(sequence)}>
-                                <Copy />
-                                {t('Dupliquer')}
-                              </ContextMenuItem>
-                              <ContextMenuSeparator />
-                              <ContextMenuItem
-                                variant="destructive"
-                                onClick={() => {
-                                  openSequenceEditor(sequence)
-                                  setDeleteSequenceOpen(true)
-                                }}
-                              >
-                                <Trash2 />
-                                {t('Supprimer')}
-                              </ContextMenuItem>
-                            </ContextMenuContent>
-                          </ContextMenu>
-                        </motion.div>
-                      )
-                    })}
-                  </div>
-                </div>
-              ))}
-              <div className="state-buttons">
-                <Button
-                  className="expression-add creation-card"
-                  variant="outline"
-                  type="button"
-                  onClick={() => openSequenceEditor()}
-                  aria-label={t('Nouvelle animation')}
-                >
-                  <Plus />
-                </Button>
-              </div>
-            </div>
-          </InspectorCard>
-        </div>
-      )}
-
-      {!sequenceEditing && !editing && !bodyEditing && mode === 'export' && (
-        <Accordion className="export-panel">
-          <ExportSection
-            value="avatar"
-            title="Exporter l’avatar"
-            subtitle="Télécharge un composant autonome avec les animations de ton choix."
-          >
-            <InspectorCard>
-              <div className="export-avatar-summary">
-                <ExpressionPreview
-                  expression={expressions[0] ?? defaultExpression}
-                  surface={activeAvatar.body.primary}
-                  bodyNodes={activeAvatar.body.nodes}
-                  colors={activeAvatar.colors}
-                  avatarEyes={activeAvatarEyes}
-                  id={`export-avatar-${activeAvatar.id}`}
-                />
-                <div>
-                  <small>{t('Avatar sélectionné')}</small>
-                  <strong>{activeAvatar.name}</strong>
-                </div>
-              </div>
-            </InspectorCard>
-
-            <InspectorCard>
-              <PanelTitle
-                title="Format"
-                subtitle="Choisis l’intégration correspondant à ton projet."
-              />
-              <div className="export-format-grid">
-                <Button
-                  variant="outline"
-                  type="button"
-                  aria-pressed={exportFormat === 'react'}
-                  onClick={() => setExportFormat('react')}
-                >
-                  <FileCode2 />
-                  <span>
-                    <strong>React / TypeScript</strong>
-                    <small>{t('Package React local (.zip)')}</small>
-                  </span>
-                </Button>
-                <Button
-                  variant="outline"
-                  type="button"
-                  aria-pressed={exportFormat === 'javascript'}
-                  onClick={() => setExportFormat('javascript')}
-                >
-                  <FileCode2 />
-                  <span>
-                    <strong>{t('Module JavaScript')}</strong>
-                    <small>{t('Projet HTML + module JS (.zip)')}</small>
-                  </span>
-                </Button>
-              </div>
-            </InspectorCard>
-
-            <InspectorCard>
-              <div className="preset-header export-animation-header">
-                <div>
-                  <p className="eyebrow">
-                    {selectedExportAnimations.length}/{sequences.length} {t('sélectionnées')}
-                  </p>
-                  <h2>{t('Animations à exporter')}</h2>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  type="button"
-                  onClick={() =>
-                    setExportAnimationIds(
-                      selectedExportAnimations.length === sequences.length
-                        ? []
-                        : sequences.map(animation => animation.id)
-                    )
-                  }
-                >
-                  {t(
-                    selectedExportAnimations.length === sequences.length
-                      ? 'Tout désélectionner'
-                      : 'Tout sélectionner'
-                  )}
-                </Button>
-              </div>
-              <div className="state-buttons export-animation-grid">
-                {sequences.map(animation => {
-                  const firstStep = animation.steps[0]
-                  const firstExpression = firstStep
-                    ? expressionById.get(firstStep.expressionId)
-                    : undefined
-                  return (
+                          onDragEnd={cancelExpressionMove}
+                        />
+                      </motion.div>
+                    ))}
                     <Button
-                      className="expression-card state-card"
+                      className="expression-add creation-card"
                       variant="outline"
                       type="button"
-                      key={animation.id}
-                      aria-pressed={exportAnimationIdSet.has(animation.id)}
-                      onClick={() => toggleExportAnimation(animation.id)}
+                      onDragOver={event => event.preventDefault()}
+                      onDrop={event => {
+                        event.preventDefault()
+                        commitExpressionMove(null)
+                      }}
+                      onClick={() => openExpressionEditor(null, expression)}
+                      aria-label={t('Nouvelle expression')}
+                    >
+                      <Plus />
+                    </Button>
+                  </div>
+                </InspectorCard>
+                <InspectorCard>
+                  <PanelTitle
+                    title="Mouvement"
+                    subtitle="Motion interpole les valeurs et notre moteur effectue le slerp quaternion."
+                  />
+                  <NumericField
+                    label="Vitesse du ressort"
+                    value={springSpeed}
+                    step={0.5}
+                    onChange={value => {
+                      springSpeedRef.current = value
+                      setSpringSpeed(value)
+                    }}
+                  />
+                  <div className="button-row">
+                    <Button variant="outline" type="button" onClick={() => blink()}>
+                      {t('Cligner')}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      type="button"
+                      onClick={() => {
+                        const index = Math.floor(Math.random() * expressions.length)
+                        transitionToExpression(expressions[index], index)
+                      }}
+                    >
+                      {t('Expression aléatoire')}
+                    </Button>
+                  </div>
+                </InspectorCard>
+              </div>
+            )}
+
+            {!sequenceEditing && !editing && !bodyEditing && mode === 'states' && (
+              <div className="panel-stack">
+                <InspectorCard>
+                  <div className="preset-header">
+                    <div>
+                      <p className="eyebrow">
+                        {sequences.length} {t('animations')}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="state-groups">
+                    {groupSequences(sequences).map(group => (
+                      <div
+                        key={group.name}
+                        onDragOver={event => event.preventDefault()}
+                        onDrop={event => {
+                          event.preventDefault()
+                          commitStateMove(null, group.name)
+                        }}
+                      >
+                        <strong>
+                          {group.sequences.every(sequence => sequence.builtIn)
+                            ? t(group.name)
+                            : group.name}
+                        </strong>
+                        <div className="state-buttons">
+                          {group.sequences.map(sequence => {
+                            const firstStep = sequence.steps[0]
+                            const firstExpression = firstStep
+                              ? expressionById.get(firstStep.expressionId)
+                              : undefined
+                            const card = (
+                              <Button
+                                className="expression-card state-card"
+                                variant="outline"
+                                type="button"
+                                draggable
+                                aria-pressed={selectedState === sequence.id}
+                                onDragStart={event => {
+                                  stateDragOrigin.current = sequences
+                                  stateDragPreview.current = sequences
+                                  draggedStateId.current = sequence.id
+                                  setDraggingStateId(sequence.id)
+                                  event.dataTransfer.effectAllowed = 'move'
+                                }}
+                                onDragEnter={() => previewStateMove(sequence.id, group.name)}
+                                onDragOver={event => {
+                                  event.preventDefault()
+                                  event.stopPropagation()
+                                  event.dataTransfer.dropEffect = 'move'
+                                }}
+                                onDrop={event => {
+                                  event.preventDefault()
+                                  event.stopPropagation()
+                                  commitStateMove(sequence.id, group.name)
+                                }}
+                                onDragEnd={cancelStateMove}
+                                onClick={() => launchSequence(sequence)}
+                                onDoubleClick={() => openSequenceEditor(sequence)}
+                              >
+                                <ExpressionPreview
+                                  expression={
+                                    firstExpression ?? expressions[0] ?? defaultExpression
+                                  }
+                                  surface={surface}
+                                  bodyNodes={bodyNodes}
+                                  colors={activeAvatar.colors}
+                                  avatarEyes={activeAvatarEyes}
+                                  id={`state-card-${sequence.id}`}
+                                />
+                                <span>{sequence.builtIn ? t(sequence.name) : sequence.name}</span>
+                              </Button>
+                            )
+                            return (
+                              <motion.div
+                                className="state-sort-item"
+                                data-dragging={draggingStateId === sequence.id || undefined}
+                                key={sequence.id}
+                                layout="position"
+                                layoutId={`state-${sequence.id}`}
+                                animate={{
+                                  opacity: draggingStateId === sequence.id ? 0.28 : 1,
+                                  scale: draggingStateId === sequence.id ? 0.96 : 1,
+                                }}
+                                transition={
+                                  reduceMotion
+                                    ? { duration: 0 }
+                                    : { type: 'spring', stiffness: 520, damping: 42, mass: 0.7 }
+                                }
+                              >
+                                <ContextMenu>
+                                  <ContextMenuTrigger render={card} />
+                                  <ContextMenuContent>
+                                    <ContextMenuItem onClick={() => openSequenceEditor(sequence)}>
+                                      <Pencil />
+                                      {t('Modifier')}
+                                    </ContextMenuItem>
+                                    <ContextMenuItem onClick={() => duplicateState(sequence)}>
+                                      <Copy />
+                                      {t('Dupliquer')}
+                                    </ContextMenuItem>
+                                    <ContextMenuSeparator />
+                                    <ContextMenuItem
+                                      variant="destructive"
+                                      onClick={() => {
+                                        openSequenceEditor(sequence)
+                                        setDeleteSequenceOpen(true)
+                                      }}
+                                    >
+                                      <Trash2 />
+                                      {t('Supprimer')}
+                                    </ContextMenuItem>
+                                  </ContextMenuContent>
+                                </ContextMenu>
+                              </motion.div>
+                            )
+                          })}
+                        </div>
+                      </div>
+                    ))}
+                    <div className="state-buttons">
+                      <Button
+                        className="expression-add creation-card"
+                        variant="outline"
+                        type="button"
+                        onClick={() => openSequenceEditor()}
+                        aria-label={t('Nouvelle animation')}
+                      >
+                        <Plus />
+                      </Button>
+                    </div>
+                  </div>
+                </InspectorCard>
+              </div>
+            )}
+
+            {!sequenceEditing && !editing && !bodyEditing && mode === 'export' && (
+              <Accordion className="export-panel" defaultValue={['snapshot']}>
+                <ExportSection
+                  value="avatar"
+                  title="Exporter l’avatar"
+                  subtitle="Télécharge un composant autonome avec les animations de ton choix."
+                >
+                  <InspectorCard>
+                    <div className="export-avatar-summary">
+                      <ExpressionPreview
+                        expression={expressions[0] ?? defaultExpression}
+                        surface={activeAvatar.body.primary}
+                        bodyNodes={activeAvatar.body.nodes}
+                        colors={activeAvatar.colors}
+                        avatarEyes={activeAvatarEyes}
+                        id={`export-avatar-${activeAvatar.id}`}
+                      />
+                      <div>
+                        <small>{t('Avatar sélectionné')}</small>
+                        <strong>{activeAvatar.name}</strong>
+                      </div>
+                    </div>
+                  </InspectorCard>
+
+                  <InspectorCard>
+                    <PanelTitle
+                      title="Format"
+                      subtitle="Choisis l’intégration correspondant à ton projet."
+                    />
+                    <div className="export-format-grid">
+                      <Button
+                        variant="outline"
+                        type="button"
+                        aria-pressed={exportFormat === 'react'}
+                        onClick={() => setExportFormat('react')}
+                      >
+                        <FileCode2 />
+                        <span>
+                          <strong>React / TypeScript</strong>
+                          <small>{t('Package React local (.zip)')}</small>
+                        </span>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        type="button"
+                        aria-pressed={exportFormat === 'javascript'}
+                        onClick={() => setExportFormat('javascript')}
+                      >
+                        <FileCode2 />
+                        <span>
+                          <strong>{t('Module JavaScript')}</strong>
+                          <small>{t('Projet HTML + module JS (.zip)')}</small>
+                        </span>
+                      </Button>
+                    </div>
+                  </InspectorCard>
+
+                  <InspectorCard>
+                    <div className="preset-header export-animation-header">
+                      <div>
+                        <p className="eyebrow">
+                          {selectedExportAnimations.length}/{sequences.length} {t('sélectionnées')}
+                        </p>
+                        <h2>{t('Animations à exporter')}</h2>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        type="button"
+                        onClick={() =>
+                          setExportAnimationIds(
+                            selectedExportAnimations.length === sequences.length
+                              ? []
+                              : sequences.map(animation => animation.id)
+                          )
+                        }
+                      >
+                        {t(
+                          selectedExportAnimations.length === sequences.length
+                            ? 'Tout désélectionner'
+                            : 'Tout sélectionner'
+                        )}
+                      </Button>
+                    </div>
+                    <div className="state-buttons export-animation-grid">
+                      {sequences.map(animation => {
+                        const firstStep = animation.steps[0]
+                        const firstExpression = firstStep
+                          ? expressionById.get(firstStep.expressionId)
+                          : undefined
+                        return (
+                          <Button
+                            className="expression-card state-card"
+                            variant="outline"
+                            type="button"
+                            key={animation.id}
+                            aria-pressed={exportAnimationIdSet.has(animation.id)}
+                            onClick={() => toggleExportAnimation(animation.id)}
+                          >
+                            <ExpressionPreview
+                              expression={firstExpression ?? expressions[0] ?? defaultExpression}
+                              surface={surface}
+                              bodyNodes={bodyNodes}
+                              colors={activeAvatar.colors}
+                              avatarEyes={activeAvatarEyes}
+                              id={`export-animation-${animation.id}`}
+                            />
+                            <span>{animation.builtIn ? t(animation.name) : animation.name}</span>
+                          </Button>
+                        )
+                      })}
+                    </div>
+                  </InspectorCard>
+
+                  <Button
+                    className="export-download"
+                    type="button"
+                    disabled={!selectedExportAnimations.length}
+                    onClick={downloadAvatarExport}
+                  >
+                    <Download />
+                    {t(
+                      exportFormat === 'react'
+                        ? 'Télécharger le package React'
+                        : 'Télécharger le module'
+                    )}
+                  </Button>
+                </ExportSection>
+
+                <ExportSection
+                  value="snapshot"
+                  title="Mode photo"
+                  subtitle="Capture une image statique de l’avatar."
+                >
+                  <InspectorCard className="snapshot-preview-card">
+                    <SnapshotPreview
+                      scene={renderedScene}
+                      colors={renderedColors}
+                      background={snapshotBackground}
+                      colorFrom={snapshotColorFrom}
+                      colorTo={snapshotColorTo}
+                    />
+                    <div>
+                      <small>{t('Aperçu du mode photo')}</small>
+                      <strong>{activeAvatar.name}</strong>
+                      <span>
+                        {snapshotSize} × {snapshotSize} px · {snapshotFormat.toUpperCase()}
+                      </span>
+                    </div>
+                  </InspectorCard>
+
+                  <InspectorCard>
+                    <PanelTitle
+                      title="Arrière-plan"
+                      subtitle="Choisis un fond transparent, uni ou en dégradé."
+                    />
+                    <Field className="snapshot-background-field" orientation="horizontal">
+                      <FieldTitle>{t('Style')}</FieldTitle>
+                      <Select
+                        value={snapshotBackground}
+                        items={[
+                          { value: 'transparent', label: t('Transparent') },
+                          { value: 'solid', label: t('Uni') },
+                          { value: 'linear', label: t('Dégradé linéaire') },
+                          { value: 'radial', label: t('Dégradé radial') },
+                        ]}
+                        onValueChange={next =>
+                          next && setSnapshotBackground(next as SnapshotBackground)
+                        }
+                      >
+                        <SelectTrigger aria-label={t('Style d’arrière-plan')}>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="transparent">{t('Transparent')}</SelectItem>
+                          <SelectItem value="solid">{t('Uni')}</SelectItem>
+                          <SelectItem value="linear">{t('Dégradé linéaire')}</SelectItem>
+                          <SelectItem value="radial">{t('Dégradé radial')}</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                    {snapshotBackground !== 'transparent' && (
+                      <div className="snapshot-colors">
+                        <ColorField
+                          label={snapshotBackground === 'solid' ? 'Couleur' : 'Départ'}
+                          value={snapshotColorFrom}
+                          onChange={setSnapshotColorFrom}
+                        />
+                        {(snapshotBackground === 'linear' || snapshotBackground === 'radial') && (
+                          <ColorField
+                            label="Arrivée"
+                            value={snapshotColorTo}
+                            onChange={setSnapshotColorTo}
+                          />
+                        )}
+                      </div>
+                    )}
+                  </InspectorCard>
+
+                  <InspectorCard>
+                    <Field className="snapshot-background-field" orientation="horizontal">
+                      <div>
+                        <FieldTitle>{t('Format d’export')}</FieldTitle>
+                        <small>{t('Choisis le type de fichier généré par le mode photo.')}</small>
+                      </div>
+                      <Select
+                        value={snapshotFormat}
+                        items={[
+                          { value: 'png', label: 'PNG' },
+                          { value: 'svg', label: 'SVG' },
+                        ]}
+                        onValueChange={next => next && setSnapshotFormat(next as SnapshotFormat)}
+                      >
+                        <SelectTrigger aria-label={t('Format d’export du mode photo')}>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="png">PNG</SelectItem>
+                          <SelectItem value="svg">SVG</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                    <Separator className="snapshot-settings-separator" />
+                    <Field className="snapshot-background-field" orientation="horizontal">
+                      <div>
+                        <FieldTitle>{t('Définition')}</FieldTitle>
+                        <small>{t('Dimensions du fichier exporté.')}</small>
+                      </div>
+                      <Select
+                        value={snapshotSize}
+                        items={['512', '1024', '2048'].map(value => ({
+                          value,
+                          label: `${value} px`,
+                        }))}
+                        onValueChange={next => next && setSnapshotSize(next)}
+                      >
+                        <SelectTrigger aria-label={t('Définition du mode photo')}>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="512">512 px</SelectItem>
+                          <SelectItem value="1024">1024 px</SelectItem>
+                          <SelectItem value="2048">2048 px</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                  </InspectorCard>
+                </ExportSection>
+
+                <ExportSection
+                  value="project"
+                  title="Projet du Studio"
+                  subtitle="Transfère tous les avatars, expressions et animations vers un autre navigateur."
+                >
+                  <div className="project-transfer-actions">
+                    <Button variant="outline" type="button" onClick={downloadStudioProject}>
+                      <Download />
+                      {t('Télécharger le projet JSON')}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      type="button"
+                      onClick={() => projectImportRef.current?.click()}
+                    >
+                      <Upload />
+                      {t('Importer un projet JSON')}
+                    </Button>
+                    <input
+                      ref={projectImportRef}
+                      className="project-import-input"
+                      type="file"
+                      accept="application/json,.json"
+                      aria-label={t('Importer un projet JSON')}
+                      onChange={event => {
+                        prepareStudioProjectImport(event.currentTarget.files?.[0])
+                        event.currentTarget.value = ''
+                      }}
+                    />
+                  </div>
+                  {projectImportError && (
+                    <p className="project-transfer-error" role="alert">
+                      {projectImportError}
+                    </p>
+                  )}
+                </ExportSection>
+              </Accordion>
+            )}
+          </motion.div>
+        </AnimatePresence>
+        {activeSequence && !editorPageOpen && (
+          <motion.footer
+            className={`state-playback-footer${statePlayerExpanded ? ' is-expanded' : ''}`}
+            initial={{ opacity: 0, y: 18 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <Button
+              className="state-playback-expand"
+              variant="outline"
+              size="icon-sm"
+              type="button"
+              aria-expanded={statePlayerExpanded}
+              aria-label={t(
+                statePlayerExpanded
+                  ? 'Masquer les détails de l’animation'
+                  : 'Afficher les détails de l’animation'
+              )}
+              onClick={() => setStatePlayerExpanded(expanded => !expanded)}
+            >
+              {statePlayerExpanded ? <ChevronDown /> : <ChevronUp />}
+            </Button>
+            {statePlayerExpanded && (
+              <motion.div
+                className="state-playback-details"
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+              >
+                <div className="state-playback-details-header">
+                  <div>
+                    <p className="eyebrow">{t('Détails de l’animation')}</p>
+                    <h2>{activeSequenceLabel}</h2>
+                    <p>
+                      {activeSequence.builtIn
+                        ? t(activeSequence.description)
+                        : activeSequence.description}
+                    </p>
+                  </div>
+                  <Badge variant="secondary">
+                    {t('Mode de lecture')} · {t(activeSequence.playbackMode)}
+                  </Badge>
+                </div>
+                <div className="state-playback-detail-grid">
+                  <div>
+                    <span>{t('Expressions')}</span>
+                    <strong>{activeSequence.steps.length}</strong>
+                    <small>
+                      {activeSequence.steps
+                        .map(step => formatSeconds(step.holdMs, language))
+                        .join(' · ')}
+                    </small>
+                  </div>
+                  <div>
+                    <span>{t('Premier clignement')}</span>
+                    <strong>
+                      {activeSequence.blink.enabled
+                        ? formatSeconds(activeSequence.blink.initialDelayMs, language)
+                        : t('Désactivé')}
+                    </strong>
+                    <small>{t('après le lancement')}</small>
+                  </div>
+                  <div>
+                    <span>{t('Intervalle du clignement')}</span>
+                    <strong>
+                      {formatSeconds(activeSequence.blink.minIntervalMs, language)}–
+                      {formatSeconds(activeSequence.blink.maxIntervalMs, language)}
+                    </strong>
+                    <small>{t('tirage aléatoire')}</small>
+                  </div>
+                  <div>
+                    <span>{t('Durée du clignement')}</span>
+                    <strong>{activeSequence.blink.durationMs} ms</strong>
+                    <small>{t('fermeture et ouverture')}</small>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+            <div className="state-playback-bar">
+              <div className="state-playback-timeline">
+                {activeSequence.steps.map((step, position) => {
+                  const expressionIndex = findExpressionIndex(expressions, step.expressionId)
+                  const preset = expressions[expressionIndex]
+                  if (!preset) return null
+                  return (
+                    <Button
+                      className="state-playback-step"
+                      variant="outline"
+                      type="button"
+                      key={step.id}
+                      aria-pressed={activeExpression === expressionIndex}
+                      onClick={() => transitionToExpression(preset, expressionIndex, step)}
                     >
                       <ExpressionPreview
-                        expression={firstExpression ?? expressions[0] ?? defaultExpression}
+                        expression={preset}
                         surface={surface}
                         bodyNodes={bodyNodes}
                         colors={activeAvatar.colors}
                         avatarEyes={activeAvatarEyes}
-                        id={`export-animation-${animation.id}`}
+                        id={`player-${activeSequence.id}-${position}`}
                       />
-                      <span>{animation.builtIn ? t(animation.name) : animation.name}</span>
+                      {playbackVisual.position === position && (
+                        <span
+                          className="state-playback-progress"
+                          key={`${step.id}-${playbackVisual.run}`}
+                          aria-hidden="true"
+                          style={
+                            {
+                              animationDuration: `${Math.max(playbackVisual.durationMs, 1)}ms`,
+                              animationPlayState: statePlaying ? 'running' : 'paused',
+                            } as CSSProperties
+                          }
+                        />
+                      )}
                     </Button>
                   )
                 })}
               </div>
-            </InspectorCard>
-
+              <div className="state-playback-controls">
+                <StatePlayer
+                  name={activeSequenceLabel}
+                  status={playbackStatus}
+                  onToggle={toggleStatePlayback}
+                  onStop={stopState}
+                />
+              </div>
+            </div>
+          </motion.footer>
+        )}
+        {!editorPageOpen && (
+          <nav className="mobile-mode-tabs" aria-label={t('Mode d’édition')}>
             <Button
-              className="export-download"
+              className="mobile-mode-tab mobile-avatar-tab"
+              variant="ghost"
               type="button"
-              disabled={!selectedExportAnimations.length}
-              onClick={downloadAvatarExport}
+              aria-pressed={avatarDrawerOpen}
+              aria-label={t('Choisir un avatar')}
+              onClick={() => setAvatarDrawerOpen(true)}
             >
-              <Download />
-              {t(
-                exportFormat === 'react' ? 'Télécharger le package React' : 'Télécharger le module'
-              )}
+              <ExpressionPreview
+                expression={expressions[0] ?? defaultExpression}
+                surface={activeAvatar.body.primary}
+                bodyNodes={activeAvatar.body.nodes}
+                colors={activeAvatar.colors}
+                avatarEyes={activeAvatarEyes}
+                id={`active-avatar-tab-${activeAvatar.id}`}
+              />
+              <span>{activeAvatar.name}</span>
             </Button>
-          </ExportSection>
-
-          <ExportSection
-            value="snapshot"
-            title="Mode photo"
-            subtitle="Capture une image statique de l’avatar."
-          >
-            <InspectorCard className="snapshot-preview-card">
-              <SnapshotPreview
-                scene={renderedScene}
-                colors={renderedColors}
-                background={snapshotBackground}
-                colorFrom={snapshotColorFrom}
-                colorTo={snapshotColorTo}
-              />
-              <div>
-                <small>{t('Aperçu du mode photo')}</small>
-                <strong>{activeAvatar.name}</strong>
-                <span>
-                  {snapshotSize} × {snapshotSize} px · {snapshotFormat.toUpperCase()}
-                </span>
-              </div>
-            </InspectorCard>
-
-            <InspectorCard>
-              <PanelTitle
-                title="Arrière-plan"
-                subtitle="Choisis un fond transparent, uni ou en dégradé."
-              />
-              <Field className="snapshot-background-field" orientation="horizontal">
-                <FieldTitle>{t('Style')}</FieldTitle>
-                <Select
-                  value={snapshotBackground}
-                  items={[
-                    { value: 'transparent', label: t('Transparent') },
-                    { value: 'solid', label: t('Uni') },
-                    { value: 'linear', label: t('Dégradé linéaire') },
-                    { value: 'radial', label: t('Dégradé radial') },
-                  ]}
-                  onValueChange={next => next && setSnapshotBackground(next as SnapshotBackground)}
-                >
-                  <SelectTrigger aria-label={t('Style d’arrière-plan')}>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="transparent">{t('Transparent')}</SelectItem>
-                    <SelectItem value="solid">{t('Uni')}</SelectItem>
-                    <SelectItem value="linear">{t('Dégradé linéaire')}</SelectItem>
-                    <SelectItem value="radial">{t('Dégradé radial')}</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-              {snapshotBackground !== 'transparent' && (
-                <div className="snapshot-colors">
-                  <ColorField
-                    label={snapshotBackground === 'solid' ? 'Couleur' : 'Départ'}
-                    value={snapshotColorFrom}
-                    onChange={setSnapshotColorFrom}
-                  />
-                  {(snapshotBackground === 'linear' || snapshotBackground === 'radial') && (
-                    <ColorField
-                      label="Arrivée"
-                      value={snapshotColorTo}
-                      onChange={setSnapshotColorTo}
-                    />
-                  )}
-                </div>
-              )}
-            </InspectorCard>
-
-            <InspectorCard>
-              <Field className="snapshot-background-field" orientation="horizontal">
-                <div>
-                  <FieldTitle>{t('Format d’export')}</FieldTitle>
-                  <small>{t('Choisis le type de fichier généré par le mode photo.')}</small>
-                </div>
-                <Select
-                  value={snapshotFormat}
-                  items={[
-                    { value: 'png', label: 'PNG' },
-                    { value: 'svg', label: 'SVG' },
-                  ]}
-                  onValueChange={next => next && setSnapshotFormat(next as SnapshotFormat)}
-                >
-                  <SelectTrigger aria-label={t('Format d’export du mode photo')}>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="png">PNG</SelectItem>
-                    <SelectItem value="svg">SVG</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Separator className="snapshot-settings-separator" />
-              <Field className="snapshot-background-field" orientation="horizontal">
-                <div>
-                  <FieldTitle>{t('Définition')}</FieldTitle>
-                  <small>{t('Dimensions du fichier exporté.')}</small>
-                </div>
-                <Select
-                  value={snapshotSize}
-                  items={['512', '1024', '2048'].map(value => ({ value, label: `${value} px` }))}
-                  onValueChange={next => next && setSnapshotSize(next)}
-                >
-                  <SelectTrigger aria-label={t('Définition du mode photo')}>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="512">512 px</SelectItem>
-                    <SelectItem value="1024">1024 px</SelectItem>
-                    <SelectItem value="2048">2048 px</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-            </InspectorCard>
-          </ExportSection>
-
-          <ExportSection
-            value="project"
-            title="Projet du Studio"
-            subtitle="Transfère tous les avatars, expressions et animations vers un autre navigateur."
-          >
-            <div className="project-transfer-actions">
-              <Button variant="outline" type="button" onClick={downloadStudioProject}>
-                <Download />
-                {t('Télécharger le projet JSON')}
-              </Button>
+            {(
+              [
+                ['manual', t('Pose'), Move3D],
+                ['expressions', t('Expressions'), Smile],
+                ['states', t('Animations'), Play],
+                ['export', t('Exporter'), Download],
+              ] as const
+            ).map(([value, label, Icon]) => (
               <Button
-                variant="outline"
+                className="mobile-mode-tab"
+                variant="ghost"
                 type="button"
-                onClick={() => projectImportRef.current?.click()}
+                key={value}
+                aria-pressed={mode === value}
+                onClick={() => setMode(value)}
               >
-                <Upload />
-                {t('Importer un projet JSON')}
+                <Icon />
+                <span>{label}</span>
               </Button>
-              <input
-                ref={projectImportRef}
-                className="project-import-input"
-                type="file"
-                accept="application/json,.json"
-                aria-label={t('Importer un projet JSON')}
-                onChange={event => {
-                  prepareStudioProjectImport(event.currentTarget.files?.[0])
-                  event.currentTarget.value = ''
-                }}
-              />
-            </div>
-            {projectImportError && (
-              <p className="project-transfer-error" role="alert">
-                {projectImportError}
-              </p>
-            )}
-          </ExportSection>
-        </Accordion>
-      )}
-      {activeSequence && !editorPageOpen && (
-        <motion.footer
-          className={`state-playback-footer${statePlayerExpanded ? ' is-expanded' : ''}`}
-          initial={{ opacity: 0, y: 18 }}
-          animate={{ opacity: 1, y: 0 }}
-        >
-          <Button
-            className="state-playback-expand"
-            variant="outline"
-            size="icon-sm"
-            type="button"
-            aria-expanded={statePlayerExpanded}
-            aria-label={t(
-              statePlayerExpanded
-                ? 'Masquer les détails de l’animation'
-                : 'Afficher les détails de l’animation'
-            )}
-            onClick={() => setStatePlayerExpanded(expanded => !expanded)}
-          >
-            {statePlayerExpanded ? <ChevronDown /> : <ChevronUp />}
-          </Button>
-          {statePlayerExpanded && (
-            <motion.div
-              className="state-playback-details"
-              initial={{ opacity: 0, y: 8 }}
-              animate={{ opacity: 1, y: 0 }}
-            >
-              <div className="state-playback-details-header">
-                <div>
-                  <p className="eyebrow">{t('Détails de l’animation')}</p>
-                  <h2>{activeSequenceLabel}</h2>
-                  <p>
-                    {activeSequence.builtIn
-                      ? t(activeSequence.description)
-                      : activeSequence.description}
-                  </p>
-                </div>
-                <Badge variant="secondary">
-                  {t('Mode de lecture')} · {t(activeSequence.playbackMode)}
-                </Badge>
-              </div>
-              <div className="state-playback-detail-grid">
-                <div>
-                  <span>{t('Expressions')}</span>
-                  <strong>{activeSequence.steps.length}</strong>
-                  <small>
-                    {activeSequence.steps
-                      .map(step => formatSeconds(step.holdMs, language))
-                      .join(' · ')}
-                  </small>
-                </div>
-                <div>
-                  <span>{t('Premier clignement')}</span>
-                  <strong>
-                    {activeSequence.blink.enabled
-                      ? formatSeconds(activeSequence.blink.initialDelayMs, language)
-                      : t('Désactivé')}
-                  </strong>
-                  <small>{t('après le lancement')}</small>
-                </div>
-                <div>
-                  <span>{t('Intervalle du clignement')}</span>
-                  <strong>
-                    {formatSeconds(activeSequence.blink.minIntervalMs, language)}–
-                    {formatSeconds(activeSequence.blink.maxIntervalMs, language)}
-                  </strong>
-                  <small>{t('tirage aléatoire')}</small>
-                </div>
-                <div>
-                  <span>{t('Durée du clignement')}</span>
-                  <strong>{activeSequence.blink.durationMs} ms</strong>
-                  <small>{t('fermeture et ouverture')}</small>
-                </div>
-              </div>
-            </motion.div>
-          )}
-          <div className="state-playback-bar">
-            <div className="state-playback-timeline">
-              {activeSequence.steps.map((step, position) => {
-                const expressionIndex = findExpressionIndex(expressions, step.expressionId)
-                const preset = expressions[expressionIndex]
-                if (!preset) return null
-                return (
-                  <Button
-                    className="state-playback-step"
-                    variant="outline"
-                    type="button"
-                    key={step.id}
-                    aria-pressed={activeExpression === expressionIndex}
-                    onClick={() => transitionToExpression(preset, expressionIndex, step)}
-                  >
-                    <ExpressionPreview
-                      expression={preset}
-                      surface={surface}
-                      bodyNodes={bodyNodes}
-                      colors={activeAvatar.colors}
-                      avatarEyes={activeAvatarEyes}
-                      id={`player-${activeSequence.id}-${position}`}
-                    />
-                    {playbackVisual.position === position && (
-                      <span
-                        className="state-playback-progress"
-                        key={`${step.id}-${playbackVisual.run}`}
-                        aria-hidden="true"
-                        style={
-                          {
-                            animationDuration: `${Math.max(playbackVisual.durationMs, 1)}ms`,
-                            animationPlayState: statePlaying ? 'running' : 'paused',
-                          } as CSSProperties
-                        }
-                      />
-                    )}
-                  </Button>
-                )
-              })}
-            </div>
-            <div className="state-playback-controls">
-              <StatePlayer
-                name={activeSequenceLabel}
-                status={playbackStatus}
-                onToggle={toggleStatePlayback}
-                onStop={stopState}
-              />
-            </div>
-          </div>
-        </motion.footer>
-      )}
-    </main>
+            ))}
+          </nav>
+        )}
+        <AvatarDrawer controller={controller} onOpenChange={setAvatarDrawerOpen} />
+      </main>
+    </Drawer>
   )
 }
diff --git a/src/features/studio/components/StudioStage.tsx b/src/features/studio/components/StudioStage.tsx
index dacce16..b825b40 100644
--- a/src/features/studio/components/StudioStage.tsx
+++ b/src/features/studio/components/StudioStage.tsx
@@ -3,17 +3,10 @@ import { motion } from 'motion/react'
 import { type CSSProperties } from 'react'
 
 import { Button } from '@/components/ui/button'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { type StudioLanguage } from '@/i18n'
 
 import { AvatarCanvas } from '@/features/rendering/components/AvatarCanvas'
+import { StudioIdentity } from '@/features/studio/components/StudioIdentity'
 import type { StudioController } from '@/features/studio/useStudioController'
 
 export function StudioStage({ controller }: { controller: StudioController }) {
@@ -27,7 +20,6 @@ export function StudioStage({ controller }: { controller: StudioController }) {
     expression,
     freezeLivePreviewForManipulation,
     highlight,
-    language,
     linked,
     mode,
     persistEditedEyeExpression,
@@ -44,7 +36,6 @@ export function StudioStage({ controller }: { controller: StudioController }) {
     selectedBodyNodeId,
     selectedEyeSide,
     setEditing,
-    setLanguage,
     setSelectedEyeSide,
     showWire,
     snapshotFormat,
@@ -65,31 +56,12 @@ export function StudioStage({ controller }: { controller: StudioController }) {
         } as CSSProperties
       }
     >
-      <div className="brand">
-        <span className="brand-mark" />
-        Bible Strong <em>Avatar Lab</em>
-      </div>
-      <div className="language-picker">
-        <span aria-hidden="true">{language === 'en' ? '🇬🇧' : language === 'fr' ? '🇫🇷' : '🇨🇳'}</span>
-        <Select
-          value={language}
-          items={[
-            { value: 'en', label: 'English' },
-            { value: 'fr', label: 'Français' },
-            { value: 'zh-CN', label: '中文' },
-          ]}
-          onValueChange={next => next && setLanguage(next as StudioLanguage)}
-        >
-          <SelectTrigger aria-label={t('Langue de l’interface')}>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="en">English</SelectItem>
-            <SelectItem value="fr">Français</SelectItem>
-            <SelectItem value="zh-CN">中文</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      <StudioIdentity
+        className="stage-identity"
+        language={controller.language}
+        setLanguage={controller.setLanguage}
+        t={t}
+      />
       <AvatarCanvas
         expression={canvasExpression}
         avatarEyes={activeAvatarEyes}
@@ -138,9 +110,14 @@ export function StudioStage({ controller }: { controller: StudioController }) {
       )}
       <TooltipProvider>
         <div className="photo-capture-bar">
-          <Button className="photo-capture-button" type="button" onClick={takePicture}>
+          <Button
+            className="photo-capture-button"
+            type="button"
+            aria-label={t('Prendre une photo')}
+            onClick={takePicture}
+          >
             <Camera />
-            {t('Prendre une photo')}
+            <span className="photo-capture-label">{t('Prendre une photo')}</span>
             <span className="photo-format-badge">{snapshotFormat.toUpperCase()}</span>
           </Button>
           <Tooltip>