feat(studio): refine header and photo controls

src/features/studio/components/StudioIdentity.tsx

@@ -1,5 +1,3 @@
-import { Code2 } from 'lucide-react'
-
 import {
   Select,
   SelectContent,
@@ -14,6 +12,14 @@ type StudioIdentityProps = Pick<StudioController, 'language' | 'setLanguage' | '
   className?: string
 }
 
+function GitHubLogo() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3Z" />
+    </svg>
+  )
+}
+
 export function StudioIdentity({ className = '', language, setLanguage, t }: StudioIdentityProps) {
   return (
     <div className={`studio-identity ${className}`.trim()}>
@@ -29,7 +35,7 @@ export function StudioIdentity({ className = '', language, setLanguage, t }: Stu
           rel="noreferrer"
           aria-label="GitHub"
         >
-          <Code2 aria-hidden="true" />
+          <GitHubLogo />
           <span>GitHub</span>
         </a>
         <span className="identity-divider" aria-hidden="true" />

src/features/studio/components/StudioStage.tsx

@@ -1,6 +1,6 @@
 import { Camera, Info } from 'lucide-react'
 import { motion } from 'motion/react'
-import { type CSSProperties } from 'react'
+import { type CSSProperties, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@@ -10,6 +10,7 @@ import { StudioIdentity } from '@/features/studio/components/StudioIdentity'
 import type { StudioController } from '@/features/studio/useStudioController'
 
 export function StudioStage({ controller }: { controller: StudioController }) {
+  const [photoHelpOpen, setPhotoHelpOpen] = useState(false)
   const {
     activeAvatarEyes,
     activeSequenceLabel,
@@ -38,7 +39,6 @@ export function StudioStage({ controller }: { controller: StudioController }) {
     setEditing,
     setSelectedEyeSide,
     showWire,
-    snapshotFormat,
     surface,
     t,
     takePicture,
@@ -118,10 +118,15 @@ export function StudioStage({ controller }: { controller: StudioController }) {
           >
             <Camera />
             <span className="photo-capture-label">{t('Prendre une photo')}</span>
-            <span className="photo-format-badge">{snapshotFormat.toUpperCase()}</span>
           </Button>
-          <Tooltip>
+          <Tooltip
+            open={photoHelpOpen}
+            onOpenChange={open => {
+              if (!open) setPhotoHelpOpen(false)
+            }}
+          >
             <TooltipTrigger
+              closeOnClick={false}
               render={
                 <Button
                   className="photo-help-button"
@@ -129,6 +134,8 @@ export function StudioStage({ controller }: { controller: StudioController }) {
                   size="icon-sm"
                   type="button"
                   aria-label={t('Informations sur le mode photo')}
+                  aria-expanded={photoHelpOpen}
+                  onClick={() => setPhotoHelpOpen(open => !open)}
                 />
               }
             >