Merge pull request #32 from maribakulj/claude/find-commit-dcec666-sI5Qn

.gitignore

@@ -5,6 +5,10 @@ data/
 *.db
 *.sqlite
 
+# Node / Frontend
+node_modules/
+package-lock.json
+
 # Python
 __pycache__/
 *.py[cod]

frontend/src/components/AdminNav.tsx

@@ -1,14 +1,13 @@
+import { RetroButton } from './retro'
+
 interface AdminNavProps {
   onClick: () => void
 }
 
 export default function AdminNav({ onClick }: AdminNavProps) {
   return (
-    <button
-      onClick={onClick}
-      className="text-stone-400 hover:text-stone-100 text-sm transition-colors"
-    >
-      Administration
-    </button>
+    <RetroButton size="sm" onClick={onClick}>
+      Admin
+    </RetroButton>
   )
 }

frontend/src/components/CommentaryPanel.tsx

@@ -1,20 +1,21 @@
 import { useState, type FC } from 'react'
 import type { Commentary, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+import { RetroBadge, RetroButton } from './retro'
 
 const STATUS_LABELS: Record<EditorialStatus, string> = {
   machine_draft: 'Brouillon IA',
-  needs_review: 'À réviser',
-  reviewed: 'Révisé',
-  validated: 'Validé',
-  published: 'Publié',
+  needs_review: 'A reviser',
+  reviewed: 'Revise',
+  validated: 'Valide',
+  published: 'Publie',
 }
 
-const STATUS_COLORS: Record<EditorialStatus, string> = {
-  machine_draft: 'bg-amber-100 text-amber-700',
-  needs_review: 'bg-orange-100 text-orange-700',
-  reviewed: 'bg-blue-100 text-blue-700',
-  validated: 'bg-green-100 text-green-700',
-  published: 'bg-emerald-100 text-emerald-700',
+const STATUS_VARIANTS: Record<EditorialStatus, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
+  machine_draft: 'info',
+  needs_review: 'warning',
+  reviewed: 'default',
+  validated: 'success',
+  published: 'success',
 }
 
 interface Props {
@@ -29,7 +30,6 @@ const CommentaryPanel: FC<Props> = ({ commentary, editorial, visiblePublic, visi
 
   if (!visiblePublic && !visibleScholarly) return null
 
-  // Si une seule couche est visible, forcer l'onglet correspondant
   const activeTab: 'public' | 'scholarly' =
     !visiblePublic && visibleScholarly ? 'scholarly' :
     !visibleScholarly && visiblePublic ? 'public' :
@@ -39,40 +39,39 @@ const CommentaryPanel: FC<Props> = ({ commentary, editorial, visiblePublic, visi
   const bothVisible = visiblePublic && visibleScholarly
 
   return (
-    <div className="px-4 py-4">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-xs font-semibold text-stone-500 uppercase tracking-wide">
-          Commentaire
-        </h3>
-        <span
-          className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[editorial.status]}`}
-        >
+    <div className="p-2">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-retro-xs font-bold">Commentaire</span>
+        <RetroBadge variant={STATUS_VARIANTS[editorial.status]}>
           {STATUS_LABELS[editorial.status]}
-        </span>
+        </RetroBadge>
       </div>
 
       {bothVisible && (
-        <div className="flex gap-2 mb-3">
-          {(['public', 'scholarly'] as const).map((t) => (
-            <button
-              key={t}
-              onClick={() => setTab(t)}
-              className={`text-xs px-3 py-1 rounded transition-colors ${
-                activeTab === t
-                  ? 'bg-stone-800 text-white'
-                  : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
-              }`}
-            >
-              {t === 'public' ? 'Public' : 'Savant'}
-            </button>
-          ))}
+        <div className="flex gap-[2px] mb-2">
+          <RetroButton
+            size="sm"
+            pressed={activeTab === 'public'}
+            onClick={() => setTab('public')}
+          >
+            Public
+          </RetroButton>
+          <RetroButton
+            size="sm"
+            pressed={activeTab === 'scholarly'}
+            onClick={() => setTab('scholarly')}
+          >
+            Savant
+          </RetroButton>
         </div>
       )}
 
       {content ? (
-        <p className="text-sm text-stone-800 leading-relaxed whitespace-pre-wrap">{content}</p>
+        <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
+          {content}
+        </p>
       ) : (
-        <p className="text-sm text-stone-400 italic">Commentaire non disponible.</p>
+        <p className="text-retro-sm text-retro-darkgray">Commentaire non disponible.</p>
       )}
     </div>
   )

frontend/src/components/LayerPanel.tsx

@@ -1,16 +1,17 @@
 import type { FC } from 'react'
+import { RetroCheckbox } from './retro'
 
 const LAYER_LABELS: Record<string, string> = {
   image: 'Image',
-  ocr_diplomatic: 'Transcription diplomatique',
-  ocr_normalized: 'Transcription normalisée',
-  translation_fr: 'Traduction (FR)',
-  translation_en: 'Traduction (EN)',
-  summary: 'Résumé',
-  scholarly_commentary: 'Commentaire savant',
-  public_commentary: 'Commentaire public',
+  ocr_diplomatic: 'Transcription',
+  ocr_normalized: 'Normalise',
+  translation_fr: 'Traduction FR',
+  translation_en: 'Traduction EN',
+  summary: 'Resume',
+  scholarly_commentary: 'Comm. savant',
+  public_commentary: 'Comm. public',
   iconography_detection: 'Iconographie',
-  material_notes: 'Notes matérielles',
+  material_notes: 'Notes mat.',
   uncertainty: 'Incertitudes',
 }
 
@@ -21,24 +22,16 @@ interface Props {
 }
 
 const LayerPanel: FC<Props> = ({ activeLayers, visibleLayers, onToggle }) => (
-  <div className="border-b border-stone-200 bg-stone-50 px-4 py-3 shrink-0">
-    <h3 className="text-xs font-semibold text-stone-500 uppercase tracking-wide mb-2">
-      Couches
-    </h3>
-    <div className="flex flex-wrap gap-x-4 gap-y-1.5">
+  <div className="px-2 py-2 shrink-0 border-b border-retro-black bg-retro-gray">
+    <div className="text-retro-xs font-bold mb-1">Couches</div>
+    <div className="flex flex-wrap gap-x-3 gap-y-1">
       {activeLayers.map((layer) => (
-        <label
+        <RetroCheckbox
           key={layer}
-          className="flex items-center gap-1.5 text-xs text-stone-700 cursor-pointer select-none"
-        >
-          <input
-            type="checkbox"
-            checked={visibleLayers.has(layer)}
-            onChange={() => onToggle(layer)}
-            className="rounded border-stone-300 text-stone-700 focus:ring-stone-500"
-          />
-          {LAYER_LABELS[layer] ?? layer}
-        </label>
+          label={LAYER_LABELS[layer] ?? layer}
+          checked={visibleLayers.has(layer)}
+          onChange={() => onToggle(layer)}
+        />
       ))}
     </div>
   </div>

frontend/src/components/SearchBar.tsx

@@ -41,7 +41,6 @@ export default function SearchBar({ onSelectResult }: Props) {
     }
   }, [query, runSearch])
 
-  // Close dropdown on outside click
   useEffect(() => {
     const handler = (e: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
@@ -53,27 +52,45 @@ export default function SearchBar({ onSelectResult }: Props) {
   }, [])
 
   return (
-    <div ref={containerRef} className="relative w-72">
+    <div ref={containerRef} className="relative w-64">
       <div className="relative">
         <input
           type="search"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           onFocus={() => results.length > 0 && setOpen(true)}
-          placeholder="Rechercher dans les manuscrits…"
-          className="w-full bg-stone-800 text-stone-100 placeholder-stone-500 text-sm px-3 py-1.5 pr-8 rounded-md border border-stone-700 focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500"
+          placeholder="Rechercher..."
+          className="
+            w-full px-2 py-[2px]
+            text-retro-sm font-retro
+            bg-retro-white text-retro-black
+            border border-retro-black
+            shadow-retro-well
+            placeholder:text-retro-darkgray
+          "
         />
         {loading && (
-          <span className="absolute right-2.5 top-1/2 -translate-y-1/2 text-stone-400 text-xs">
-            …
+          <span className="absolute right-2 top-1/2 -translate-y-1/2 text-retro-darkgray text-retro-xs">
+            ...
           </span>
         )}
       </div>
 
       {open && (
-        <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-stone-200 rounded-lg shadow-xl z-50 max-h-80 overflow-y-auto">
+        <div
+          className="
+            absolute top-full left-0 right-0 mt-[2px]
+            bg-retro-white
+            border-retro border-retro-black
+            shadow-retro-lg
+            z-50 max-h-60
+            overflow-y-auto retro-scroll
+          "
+        >
           {results.length === 0 ? (
-            <div className="px-4 py-3 text-sm text-stone-400 italic">Aucun résultat.</div>
+            <div className="px-2 py-2 text-retro-xs text-retro-darkgray">
+              Aucun resultat.
+            </div>
           ) : (
             <ul>
               {results.map((r) => (
@@ -83,17 +100,20 @@ export default function SearchBar({ onSelectResult }: Props) {
                       setOpen(false)
                       onSelectResult?.(r)
                     }}
-                    className="w-full text-left px-4 py-3 hover:bg-amber-50 border-b border-stone-100 last:border-0 transition-colors"
+                    className="
+                      w-full text-left px-2 py-[3px]
+                      text-retro-sm font-retro
+                      hover:bg-retro-select hover:text-retro-select-text
+                      border-b border-retro-gray last:border-0
+                    "
                   >
                     <div className="flex items-center justify-between gap-2">
-                      <span className="font-medium text-stone-800 text-sm">
-                        {r.folio_label}
-                      </span>
-                      <span className="text-xs text-stone-400 shrink-0">
-                        score : {r.score}
+                      <span className="font-bold">{r.folio_label}</span>
+                      <span className="text-retro-xs opacity-60">
+                        {r.score}
                       </span>
                     </div>
-                    <div className="text-xs text-stone-500 mt-0.5 truncate">
+                    <div className="text-retro-xs truncate opacity-70">
                       {r.excerpt}
                     </div>
                   </button>

frontend/src/components/TranscriptionPanel.tsx

@@ -1,20 +1,21 @@
 import type { FC } from 'react'
 import type { OCRResult, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+import { RetroBadge } from './retro'
 
 const STATUS_LABELS: Record<EditorialStatus, string> = {
   machine_draft: 'Brouillon IA',
-  needs_review: 'À réviser',
-  reviewed: 'Révisé',
-  validated: 'Validé',
-  published: 'Publié',
+  needs_review: 'A reviser',
+  reviewed: 'Revise',
+  validated: 'Valide',
+  published: 'Publie',
 }
 
-const STATUS_COLORS: Record<EditorialStatus, string> = {
-  machine_draft: 'bg-amber-100 text-amber-700',
-  needs_review: 'bg-orange-100 text-orange-700',
-  reviewed: 'bg-blue-100 text-blue-700',
-  validated: 'bg-green-100 text-green-700',
-  published: 'bg-emerald-100 text-emerald-700',
+const STATUS_VARIANTS: Record<EditorialStatus, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
+  machine_draft: 'info',
+  needs_review: 'warning',
+  reviewed: 'default',
+  validated: 'success',
+  published: 'success',
 }
 
 interface Props {
@@ -27,34 +28,30 @@ const TranscriptionPanel: FC<Props> = ({ ocr, editorial, visible }) => {
   if (!visible) return null
 
   return (
-    <div className="px-4 py-4">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-xs font-semibold text-stone-500 uppercase tracking-wide">
-          Transcription diplomatique
-        </h3>
-        <span
-          className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[editorial.status]}`}
-        >
+    <div className="p-2">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-retro-xs font-bold">Transcription diplomatique</span>
+        <RetroBadge variant={STATUS_VARIANTS[editorial.status]}>
           {STATUS_LABELS[editorial.status]}
-        </span>
+        </RetroBadge>
       </div>
       {ocr ? (
         <div>
           {ocr.diplomatic_text ? (
-            <p className="text-sm text-stone-800 leading-relaxed font-serif whitespace-pre-wrap">
+            <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
               {ocr.diplomatic_text}
             </p>
           ) : (
-            <p className="text-sm text-stone-400 italic">Texte vide.</p>
+            <p className="text-retro-sm text-retro-darkgray">Texte vide.</p>
           )}
           {ocr.confidence > 0 && (
-            <div className="mt-2 text-xs text-stone-400">
-              Confiance OCR : {(ocr.confidence * 100).toFixed(0)} %
+            <div className="mt-2 text-retro-xs text-retro-darkgray">
+              Confiance : {(ocr.confidence * 100).toFixed(0)}% — Langue : {ocr.language}
             </div>
           )}
         </div>
       ) : (
-        <p className="text-sm text-stone-400 italic">Transcription non disponible.</p>
+        <p className="text-retro-sm text-retro-darkgray">Transcription non disponible.</p>
       )}
     </div>
   )

frontend/src/components/TranslationPanel.tsx

@@ -1,20 +1,21 @@
 import type { FC } from 'react'
 import type { Translation, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+import { RetroBadge } from './retro'
 
 const STATUS_LABELS: Record<EditorialStatus, string> = {
   machine_draft: 'Brouillon IA',
-  needs_review: 'À réviser',
-  reviewed: 'Révisé',
-  validated: 'Validé',
-  published: 'Publié',
+  needs_review: 'A reviser',
+  reviewed: 'Revise',
+  validated: 'Valide',
+  published: 'Publie',
 }
 
-const STATUS_COLORS: Record<EditorialStatus, string> = {
-  machine_draft: 'bg-amber-100 text-amber-700',
-  needs_review: 'bg-orange-100 text-orange-700',
-  reviewed: 'bg-blue-100 text-blue-700',
-  validated: 'bg-green-100 text-green-700',
-  published: 'bg-emerald-100 text-emerald-700',
+const STATUS_VARIANTS: Record<EditorialStatus, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
+  machine_draft: 'info',
+  needs_review: 'warning',
+  reviewed: 'default',
+  validated: 'success',
+  published: 'success',
 }
 
 interface Props {
@@ -27,23 +28,19 @@ const TranslationPanel: FC<Props> = ({ translation, editorial, visible }) => {
   if (!visible) return null
 
   return (
-    <div className="px-4 py-4">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-xs font-semibold text-stone-500 uppercase tracking-wide">
-          Traduction (FR)
-        </h3>
-        <span
-          className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[editorial.status]}`}
-        >
+    <div className="p-2">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-retro-xs font-bold">Traduction (FR)</span>
+        <RetroBadge variant={STATUS_VARIANTS[editorial.status]}>
           {STATUS_LABELS[editorial.status]}
-        </span>
+        </RetroBadge>
       </div>
       {translation?.fr ? (
-        <p className="text-sm text-stone-800 leading-relaxed whitespace-pre-wrap">
+        <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
           {translation.fr}
         </p>
       ) : (
-        <p className="text-sm text-stone-400 italic">Traduction non disponible.</p>
+        <p className="text-retro-sm text-retro-darkgray">Traduction non disponible.</p>
       )}
     </div>
   )

frontend/src/components/Viewer.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, type FC } from 'react'
 import OpenSeadragon from 'openseadragon'
+import { RetroButton } from './retro'
 
 interface Props {
   imageUrl: string
@@ -10,7 +11,6 @@ const Viewer: FC<Props> = ({ imageUrl, onViewerReady }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const viewerRef = useRef<OpenSeadragon.Viewer | null>(null)
 
-  // Initialise OSD une seule fois
   useEffect(() => {
     if (!containerRef.current) return
 
@@ -32,7 +32,6 @@ const Viewer: FC<Props> = ({ imageUrl, onViewerReady }) => {
     }
   }, [])
 
-  // Ouvre l'image à chaque changement d'URL
   useEffect(() => {
     const viewer = viewerRef.current
     if (!viewer || !imageUrl) return
@@ -42,40 +41,39 @@ const Viewer: FC<Props> = ({ imageUrl, onViewerReady }) => {
       onViewerReady?.(viewer)
     })
   }, [imageUrl]) // eslint-disable-line react-hooks/exhaustive-deps
-  // onViewerReady est intentionnellement exclu : c'est un callback stable
 
   return (
-    <div className="relative w-full h-full bg-stone-800">
+    <div className="relative w-full h-full bg-retro-black">
       <div ref={containerRef} className="w-full h-full" />
-      <div className="absolute bottom-3 right-3 flex gap-1.5">
-        <button
+      <div className="absolute bottom-2 right-2 flex gap-[2px]">
+        <RetroButton
+          size="sm"
           onClick={() => viewerRef.current?.viewport.zoomBy(1.5)}
-          className="w-8 h-8 bg-stone-800/80 text-stone-200 rounded hover:bg-stone-700 text-sm font-bold"
           title="Zoom +"
         >
           +
-        </button>
-        <button
+        </RetroButton>
+        <RetroButton
+          size="sm"
           onClick={() => viewerRef.current?.viewport.zoomBy(0.67)}
-          className="w-8 h-8 bg-stone-800/80 text-stone-200 rounded hover:bg-stone-700 text-sm font-bold"
-          title="Zoom −"
+          title="Zoom -"
         >
-          −
-        </button>
-        <button
+          -
+        </RetroButton>
+        <RetroButton
+          size="sm"
           onClick={() => viewerRef.current?.viewport.goHome()}
-          className="w-8 h-8 bg-stone-800/80 text-stone-200 rounded hover:bg-stone-700 text-xs"
-          title="Réinitialiser"
+          title="Reset"
         >
-          ⊙
-        </button>
-        <button
+          o
+        </RetroButton>
+        <RetroButton
+          size="sm"
           onClick={() => viewerRef.current?.setFullScreen(true)}
-          className="w-8 h-8 bg-stone-800/80 text-stone-200 rounded hover:bg-stone-700 text-xs"
-          title="Plein écran"
+          title="Plein ecran"
         >
-          ⛶
-        </button>
+          []
+        </RetroButton>
       </div>
     </div>
   )

frontend/src/components/retro/RetroBadge.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+
+type Variant = 'default' | 'success' | 'warning' | 'error' | 'info'
+
+interface Props {
+  children: ReactNode
+  variant?: Variant
+  className?: string
+}
+
+const variantStyles: Record<Variant, string> = {
+  default:  'bg-retro-gray text-retro-black',
+  success:  'bg-retro-black text-retro-white',
+  warning:  'bg-retro-white text-retro-black border-dashed',
+  error:    'bg-retro-white text-retro-black font-bold',
+  info:     'bg-retro-light text-retro-black',
+}
+
+export default function RetroBadge({
+  children,
+  variant = 'default',
+  className = '',
+}: Props) {
+  return (
+    <span
+      className={`
+        inline-block
+        px-2 py-[1px]
+        text-retro-xs font-retro
+        border border-retro-black
+        ${variantStyles[variant]}
+        ${className}
+      `}
+    >
+      {children}
+    </span>
+  )
+}

frontend/src/components/retro/RetroButton.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode, ButtonHTMLAttributes } from 'react'
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode
+  /** Render as a small compact button */
+  size?: 'sm' | 'md'
+  /** If true, renders in "pressed" state */
+  pressed?: boolean
+}
+
+export default function RetroButton({
+  children,
+  size = 'md',
+  pressed = false,
+  className = '',
+  disabled,
+  ...rest
+}: Props) {
+  const padding = size === 'sm' ? 'px-2 py-[1px]' : 'px-3 py-[3px]'
+  const fontSize = size === 'sm' ? 'text-retro-xs' : 'text-retro-sm'
+
+  return (
+    <button
+      className={`
+        ${padding} ${fontSize}
+        font-retro font-medium
+        bg-retro-gray
+        border border-retro-black
+        ${pressed
+          ? 'shadow-retro-inset'
+          : 'shadow-retro-outset active:shadow-retro-inset'
+        }
+        ${disabled
+          ? 'text-retro-darkgray cursor-not-allowed'
+          : 'text-retro-black hover:bg-retro-light cursor-pointer'
+        }
+        select-none
+        ${className}
+      `}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}

frontend/src/components/retro/RetroCheckbox.tsx

@@ -0,0 +1,48 @@
+interface Props {
+  /** Label text next to the checkbox */
+  label: string
+  /** Controlled checked state */
+  checked: boolean
+  /** Change handler */
+  onChange: (checked: boolean) => void
+  /** Disabled state */
+  disabled?: boolean
+  /** Extra CSS classes on the wrapper */
+  className?: string
+}
+
+export default function RetroCheckbox({
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  className = '',
+}: Props) {
+  return (
+    <label
+      onClick={() => { if (!disabled) onChange(!checked) }}
+      className={`
+        inline-flex items-center gap-[6px]
+        text-retro-sm font-retro
+        ${disabled ? 'text-retro-darkgray cursor-not-allowed' : 'cursor-pointer'}
+        select-none
+        ${className}
+      `}
+    >
+      <span
+        className={`
+          inline-flex items-center justify-center
+          w-[13px] h-[13px]
+          border border-retro-black
+          bg-retro-white
+          shadow-retro-well
+          text-[10px] leading-none font-bold
+          shrink-0
+        `}
+      >
+        {checked && <span className="text-retro-black">x</span>}
+      </span>
+      {label}
+    </label>
+  )
+}

frontend/src/components/retro/RetroIcon.tsx

@@ -0,0 +1,63 @@
+interface Props {
+  /** Label displayed below the icon */
+  label: string
+  /** Emoji or text character used as the icon glyph */
+  glyph: string
+  /** Click handler */
+  onClick?: () => void
+  /** If true, renders in selected/highlighted state */
+  selected?: boolean
+  /** Extra CSS classes */
+  className?: string
+}
+
+export default function RetroIcon({
+  label,
+  glyph,
+  onClick,
+  selected = false,
+  className = '',
+}: Props) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        flex flex-col items-center gap-1
+        p-2 w-[80px]
+        cursor-pointer select-none
+        ${className}
+      `}
+      onDoubleClick={onClick}
+    >
+      {/* Icon box */}
+      <div
+        className={`
+          w-[48px] h-[48px]
+          flex items-center justify-center
+          border border-retro-black
+          text-[24px] leading-none
+          ${selected
+            ? 'bg-retro-black text-retro-white'
+            : 'bg-retro-white text-retro-black hover:bg-retro-light'
+          }
+          shadow-retro-outset
+        `}
+      >
+        {glyph}
+      </div>
+      {/* Label */}
+      <span
+        className={`
+          text-retro-xs text-center leading-tight
+          max-w-full break-words
+          ${selected
+            ? 'bg-retro-select text-retro-select-text px-1'
+            : 'text-retro-black'
+          }
+        `}
+      >
+        {label}
+      </span>
+    </button>
+  )
+}

frontend/src/components/retro/RetroInput.tsx

@@ -0,0 +1,30 @@
+import type { InputHTMLAttributes } from 'react'
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  /** Optional label rendered above the input */
+  label?: string
+}
+
+export default function RetroInput({ label, className = '', ...rest }: Props) {
+  return (
+    <div className="flex flex-col gap-[2px]">
+      {label && (
+        <label className="text-retro-xs font-retro font-medium text-retro-black">
+          {label}
+        </label>
+      )}
+      <input
+        className={`
+          px-2 py-[3px]
+          text-retro-sm font-retro
+          bg-retro-white text-retro-black
+          border border-retro-black
+          shadow-retro-well
+          placeholder:text-retro-darkgray
+          ${className}
+        `}
+        {...rest}
+      />
+    </div>
+  )
+}

frontend/src/components/retro/RetroMenuBar.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react'
+
+export interface MenuItem {
+  label: string
+  onClick?: () => void
+  disabled?: boolean
+}
+
+interface Props {
+  /** Left-aligned items (logo, menus) */
+  items?: MenuItem[]
+  /** Right-aligned content (search, status) */
+  right?: ReactNode
+  /** Extra CSS classes */
+  className?: string
+}
+
+export default function RetroMenuBar({ items = [], right, className = '' }: Props) {
+  return (
+    <div
+      className={`
+        flex items-center
+        bg-retro-gray
+        border-b-retro border-retro-black
+        shadow-retro-outset
+        px-1 py-[2px]
+        select-none shrink-0
+        ${className}
+      `}
+    >
+      {items.map((item, i) => (
+        <button
+          key={i}
+          onClick={item.onClick}
+          disabled={item.disabled}
+          className={`
+            px-3 py-[2px]
+            text-retro-sm font-retro font-medium
+            ${item.disabled
+              ? 'text-retro-darkgray cursor-not-allowed'
+              : 'text-retro-black hover:bg-retro-black hover:text-retro-white cursor-pointer'
+            }
+          `}
+        >
+          {item.label}
+        </button>
+      ))}
+      {right && (
+        <div className="ml-auto flex items-center gap-1">
+          {right}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/retro/RetroSelect.tsx

@@ -0,0 +1,38 @@
+import type { SelectHTMLAttributes } from 'react'
+
+interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
+  /** Optional label rendered above the select */
+  label?: string
+  /** Options: array of {value, label} */
+  options: { value: string; label: string }[]
+}
+
+export default function RetroSelect({ label, options, className = '', ...rest }: Props) {
+  return (
+    <div className="flex flex-col gap-[2px]">
+      {label && (
+        <label className="text-retro-xs font-retro font-medium text-retro-black">
+          {label}
+        </label>
+      )}
+      <select
+        className={`
+          px-2 py-[3px]
+          text-retro-sm font-retro
+          bg-retro-white text-retro-black
+          border border-retro-black
+          shadow-retro-well
+          cursor-pointer
+          ${className}
+        `}
+        {...rest}
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

frontend/src/components/retro/RetroTextarea.tsx

@@ -0,0 +1,32 @@
+import type { TextareaHTMLAttributes } from 'react'
+
+interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Optional label rendered above the textarea */
+  label?: string
+}
+
+export default function RetroTextarea({ label, className = '', ...rest }: Props) {
+  return (
+    <div className="flex flex-col gap-[2px]">
+      {label && (
+        <label className="text-retro-xs font-retro font-medium text-retro-black">
+          {label}
+        </label>
+      )}
+      <textarea
+        className={`
+          px-2 py-[3px]
+          text-retro-sm font-retro
+          bg-retro-white text-retro-black
+          border border-retro-black
+          shadow-retro-well
+          placeholder:text-retro-darkgray
+          retro-scroll
+          resize-y
+          ${className}
+        `}
+        {...rest}
+      />
+    </div>
+  )
+}

frontend/src/components/retro/RetroWindow.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react'
+
+interface Props {
+  /** Window title shown in the title bar */
+  title: string
+  /** Optional status text displayed in the bottom status bar */
+  statusBar?: string
+  /** Called when the close button is clicked (omit to hide the button) */
+  onClose?: () => void
+  /** Extra CSS classes for the outer container */
+  className?: string
+  /** Content rendered inside the window body */
+  children: ReactNode
+  /** If true, window body is scrollable with retro scrollbars */
+  scrollable?: boolean
+  /** If true, the window is rendered as "active" (darker title bar) */
+  active?: boolean
+}
+
+export default function RetroWindow({
+  title,
+  statusBar,
+  onClose,
+  className = '',
+  children,
+  scrollable = false,
+  active = true,
+}: Props) {
+  return (
+    <div
+      className={`
+        flex flex-col
+        border-retro border-retro-black bg-retro-gray
+        shadow-retro
+        ${className}
+      `}
+    >
+      {/* ── Title bar ──────────────────────────────────────────── */}
+      <div
+        className={`
+          flex items-center gap-2 px-2 py-[3px]
+          select-none shrink-0
+          ${active ? 'bg-retro-black text-retro-white' : 'bg-retro-darkgray text-retro-white'}
+        `}
+      >
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="
+              w-[14px] h-[14px] flex items-center justify-center
+              border border-retro-white bg-retro-gray text-retro-black
+              text-[9px] leading-none font-bold
+              hover:bg-retro-white active:bg-retro-darkgray
+            "
+            aria-label="Fermer"
+          >
+            x
+          </button>
+        )}
+        <span className="flex-1 text-retro-xs font-bold truncate tracking-wide">
+          {title}
+        </span>
+      </div>
+
+      {/* ── Content area ───────────────────────────────────────── */}
+      <div
+        className={`
+          flex-1 bg-retro-white
+          border-t-0
+          m-[3px] mt-0
+          shadow-retro-well
+          ${scrollable ? 'overflow-auto retro-scroll' : 'overflow-hidden'}
+        `}
+      >
+        {children}
+      </div>
+
+      {/* ── Status bar (optional) ──────────────────────────────── */}
+      {statusBar !== undefined && (
+        <div
+          className="
+            px-2 py-[2px]
+            text-retro-xs text-retro-black
+            border-t border-retro-darkgray
+            bg-retro-gray
+            shadow-retro-well
+            mx-[3px] mb-[3px]
+            truncate shrink-0
+          "
+        >
+          {statusBar}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/retro/index.ts

@@ -0,0 +1,9 @@
+export { default as RetroWindow } from './RetroWindow'
+export { default as RetroButton } from './RetroButton'
+export { default as RetroMenuBar } from './RetroMenuBar'
+export { default as RetroIcon } from './RetroIcon'
+export { default as RetroCheckbox } from './RetroCheckbox'
+export { default as RetroInput } from './RetroInput'
+export { default as RetroTextarea } from './RetroTextarea'
+export { default as RetroSelect } from './RetroSelect'
+export { default as RetroBadge } from './RetroBadge'

frontend/src/index.css

@@ -1,3 +1,126 @@
+/* ── Google Font: IBM Plex Mono (must precede @tailwind) ───────────── */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* ══════════════════════════════════════════════════════════════════════
+   IIIF Studio — Retro Design System (global styles)
+   Inspired by Xerox Star, Smalltalk-80, GEOS, classic Mac
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── Base reset for retro look ─────────────────────────────────────── */
+@layer base {
+  html {
+    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    -webkit-font-smoothing: none;
+    -moz-osx-font-smoothing: unset;
+    background-color: #c0c0c0;
+    color: #000000;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+  }
+
+  /* Disable subpixel antialiasing for that crisp pixel look */
+  * {
+    text-rendering: optimizeSpeed;
+  }
+
+  /* Focus ring: dotted black outline (classic retro) */
+  *:focus-visible {
+    outline: 1px dotted #000000;
+    outline-offset: 1px;
+  }
+
+  /* Selection: classic inverted */
+  ::selection {
+    background-color: #000080;
+    color: #ffffff;
+  }
+}
+
+/* ── Retro scrollbar (Windows 3.1 style) ───────────────────────────── */
+@layer components {
+  /* Webkit-based browsers */
+  .retro-scroll::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+  }
+
+  .retro-scroll::-webkit-scrollbar-track {
+    background:
+      repeating-conic-gradient(
+        #c0c0c0 0% 25%, #dfdfdf 0% 50%
+      ) 50% / 2px 2px;
+  }
+
+  .retro-scroll::-webkit-scrollbar-thumb {
+    background-color: #c0c0c0;
+    border: 1px solid #000000;
+    box-shadow:
+      inset -1px -1px 0 #808080,
+      inset 1px 1px 0 #ffffff;
+  }
+
+  .retro-scroll::-webkit-scrollbar-button {
+    background-color: #c0c0c0;
+    border: 1px solid #000000;
+    box-shadow:
+      inset -1px -1px 0 #808080,
+      inset 1px 1px 0 #ffffff;
+    display: block;
+    height: 16px;
+    width: 16px;
+  }
+
+  .retro-scroll::-webkit-scrollbar-corner {
+    background-color: #c0c0c0;
+  }
+
+  /* Firefox */
+  .retro-scroll {
+    scrollbar-width: auto;
+    scrollbar-color: #c0c0c0 #dfdfdf;
+  }
+}
+
+/* ── Desktop dithered background ───────────────────────────────────── */
+@layer utilities {
+  .bg-retro-dither {
+    background-color: #c0c0c0;
+    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23a0a0a0'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23a0a0a0'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+  }
+
+  .bg-retro-dither-dark {
+    background-color: #808080;
+    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23606060'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23606060'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+  }
+
+  .bg-retro-dither-light {
+    background-color: #dfdfdf;
+    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23c8c8c8'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23c8c8c8'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+  }
+
+  /* Horizontal lines pattern */
+  .bg-retro-lines {
+    background-color: #c0c0c0;
+    background-image: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 1px,
+      #a0a0a0 1px,
+      #a0a0a0 2px
+    );
+    background-size: 100% 4px;
+  }
+}

frontend/src/pages/Admin.tsx

@@ -24,6 +24,15 @@ import {
   type Job,
   type CreateCorpusInput,
 } from '../lib/api.ts'
+import {
+  RetroMenuBar,
+  RetroWindow,
+  RetroButton,
+  RetroInput,
+  RetroTextarea,
+  RetroSelect,
+  RetroBadge,
+} from '../components/retro'
 
 type IngestSubTab = 'urls' | 'manifest' | 'files'
 
@@ -35,27 +44,16 @@ interface Props {
 
 function ErrorMsg({ message }: { message: string }) {
   return (
-    <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
-      {message}
-    </p>
+    <div className="border border-retro-black bg-retro-white p-2 text-retro-sm">
+      <span className="font-bold">Erreur:</span> {message}
+    </div>
   )
 }
 
 function SuccessMsg({ message }: { message: string }) {
   return (
-    <p className="text-sm text-green-700 bg-green-50 border border-green-200 rounded px-3 py-2">
-      {message}
-    </p>
-  )
-}
-
-// ── SectionCard ───────────────────────────────────────────────────────────
-
-function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div className="bg-white border border-stone-200 rounded-lg p-6 mb-4">
-      <h3 className="text-base font-semibold text-stone-800 mb-4">{title}</h3>
-      {children}
+    <div className="border border-retro-black bg-retro-light p-2 text-retro-sm">
+      <span className="font-bold">OK:</span> {message}
     </div>
   )
 }
@@ -89,7 +87,7 @@ function CreateCorpusPanel({ onCreated }: CreateCorpusPanelProps) {
     setLoading(true)
     try {
       const corpus = await createCorpus(form)
-      setSuccess(`Corpus « ${corpus.title} » créé.`)
+      setSuccess(`Corpus "${corpus.title}" cree.`)
       setForm((f) => ({ ...f, slug: '', title: '' }))
       onCreated(corpus)
     } catch (err) {
@@ -99,71 +97,45 @@ function CreateCorpusPanel({ onCreated }: CreateCorpusPanelProps) {
     }
   }
 
-  const inputClass =
-    'border border-stone-300 rounded px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-stone-400'
-
   return (
-    <div className="max-w-lg">
-      <h2 className="text-xl font-semibold text-stone-800 mb-6">Créer un corpus</h2>
-      <form onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
-        <div>
-          <label className="block text-xs font-semibold text-stone-500 uppercase tracking-wide mb-1">
-            Slug{' '}
-            <span className="text-stone-400 font-normal normal-case">(identifiant unique, sans espaces)</span>
-          </label>
-          <input
-            type="text"
-            value={form.slug}
-            onChange={(e) => setForm((f) => ({ ...f, slug: e.target.value }))}
-            required
-            placeholder="ex. beatus-lat8878"
-            className={inputClass}
-          />
-        </div>
-        <div>
-          <label className="block text-xs font-semibold text-stone-500 uppercase tracking-wide mb-1">
-            Titre
-          </label>
-          <input
-            type="text"
-            value={form.title}
-            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
-            required
-            placeholder="ex. Beatus de Saint-Sever"
-            className={inputClass}
+    <RetroWindow title="Creer un corpus" className="max-w-lg">
+      <form onSubmit={(e) => void handleSubmit(e)} className="p-3 flex flex-col gap-2">
+        <RetroInput
+          label="Slug (identifiant unique)"
+          value={form.slug}
+          onChange={(e) => setForm((f) => ({ ...f, slug: e.target.value }))}
+          required
+          placeholder="ex. beatus-lat8878"
+        />
+        <RetroInput
+          label="Titre"
+          value={form.title}
+          onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+          required
+          placeholder="ex. Beatus de Saint-Sever"
+        />
+        {profiles.length === 0 ? (
+          <div className="text-retro-sm text-retro-darkgray">Chargement des profils...</div>
+        ) : (
+          <RetroSelect
+            label="Profil"
+            value={form.profile_id}
+            onChange={(e) => setForm((f) => ({ ...f, profile_id: e.target.value }))}
+            options={profiles.map((p) => ({ value: p.profile_id, label: `${p.label} (${p.profile_id})` }))}
           />
-        </div>
-        <div>
-          <label className="block text-xs font-semibold text-stone-500 uppercase tracking-wide mb-1">
-            Profil
-          </label>
-          {profiles.length === 0 ? (
-            <p className="text-sm text-stone-400">Chargement des profils…</p>
-          ) : (
-            <select
-              value={form.profile_id}
-              onChange={(e) => setForm((f) => ({ ...f, profile_id: e.target.value }))}
-              className="border border-stone-300 rounded px-3 py-2 text-sm w-full bg-white focus:outline-none focus:ring-2 focus:ring-stone-400"
-            >
-              {profiles.map((p) => (
-                <option key={p.profile_id} value={p.profile_id}>
-                  {p.label} ({p.profile_id})
-                </option>
-              ))}
-            </select>
-          )}
-        </div>
+        )}
         {error && <ErrorMsg message={error} />}
         {success && <SuccessMsg message={success} />}
-        <button
-          type="submit"
-          disabled={loading || !form.slug || !form.title || !form.profile_id}
-          className="bg-stone-800 text-white px-5 py-2 rounded text-sm font-medium hover:bg-stone-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        >
-          {loading ? 'Création…' : 'Créer le corpus'}
-        </button>
+        <div className="mt-1">
+          <RetroButton
+            type="submit"
+            disabled={loading || !form.slug || !form.title || !form.profile_id}
+          >
+            {loading ? 'Creation...' : 'Creer le corpus'}
+          </RetroButton>
+        </div>
       </form>
-    </div>
+    </RetroWindow>
   )
 }
 
@@ -178,19 +150,16 @@ function ModelPanel({ corpusId, onSaved }: ModelPanelProps) {
   const [providers, setProviders] = useState<ProviderInfo[]>([])
   const [loadingProviders, setLoadingProviders] = useState(true)
   const [providersError, setProvidersError] = useState<string | null>(null)
-
   const [selectedProvider, setSelectedProvider] = useState<string>('')
   const [models, setModels] = useState<ModelInfo[]>([])
   const [loadingModels, setLoadingModels] = useState(false)
   const [modelsError, setModelsError] = useState<string | null>(null)
   const [selectedModelId, setSelectedModelId] = useState('')
-
   const [currentModel, setCurrentModel] = useState<CorpusModelConfig | null>(null)
   const [savingModel, setSavingModel] = useState(false)
   const [saveError, setSaveError] = useState<string | null>(null)
   const [saveSuccess, setSaveSuccess] = useState<string | null>(null)
 
-  // Load current model config and providers on mount
   useEffect(() => {
     void getCorpusModel(corpusId).then(setCurrentModel)
     setLoadingProviders(true)
@@ -201,13 +170,10 @@ function ModelPanel({ corpusId, onSaved }: ModelPanelProps) {
         const first = ps.find((p) => p.available)
         if (first) setSelectedProvider(first.provider_type)
       })
-      .catch((err) => {
-        setProvidersError(err instanceof Error ? err.message : 'Erreur inconnue')
-      })
+      .catch((err) => setProvidersError(err instanceof Error ? err.message : 'Erreur'))
       .finally(() => setLoadingProviders(false))
   }, [corpusId])
 
-  // Load models when provider changes
   useEffect(() => {
     if (!selectedProvider) return
     setModels([])
@@ -215,13 +181,8 @@ function ModelPanel({ corpusId, onSaved }: ModelPanelProps) {
     setModelsError(null)
     setLoadingModels(true)
     fetchProviderModels(selectedProvider)
-      .then((ms) => {
-        setModels(ms)
-        if (ms.length > 0) setSelectedModelId(ms[0].model_id)
-      })
-      .catch((err) => {
-        setModelsError(err instanceof Error ? err.message : 'Erreur inconnue')
-      })
+      .then((ms) => { setModels(ms); if (ms.length > 0) setSelectedModelId(ms[0].model_id) })
+      .catch((err) => setModelsError(err instanceof Error ? err.message : 'Erreur'))
       .finally(() => setLoadingModels(false))
   }, [selectedProvider])
 
@@ -235,124 +196,83 @@ function ModelPanel({ corpusId, onSaved }: ModelPanelProps) {
       await selectModel(corpusId, selectedModelId, model?.display_name ?? selectedModelId, selectedProvider)
       const updated = await getCorpusModel(corpusId)
       setCurrentModel(updated)
-      setSaveSuccess(`Modèle « ${model?.display_name ?? selectedModelId} » associé au corpus.`)
+      setSaveSuccess(`Modele "${model?.display_name ?? selectedModelId}" associe.`)
       onSaved()
     } catch (err) {
-      setSaveError(err instanceof Error ? err.message : 'Erreur inconnue')
+      setSaveError(err instanceof Error ? err.message : 'Erreur')
     } finally {
       setSavingModel(false)
     }
   }
 
-  const availableProviders = providers.filter((p) => p.available)
-
   return (
-    <>
+    <div className="flex flex-col gap-2">
       {currentModel && (
-        <div className="mb-4 text-sm bg-stone-50 border border-stone-200 rounded px-3 py-2 text-stone-600">
-          Modèle actuel :{' '}
-          <span className="font-medium text-stone-800">{currentModel.selected_model_display_name}</span>
+        <div className="text-retro-sm border border-retro-black p-2 bg-retro-light">
+          Modele actuel: <span className="font-bold">{currentModel.selected_model_display_name}</span>
           {' '}({currentModel.provider_type})
         </div>
       )}
 
-      {loadingProviders && (
-        <p className="text-sm text-stone-400">Détection des providers disponibles…</p>
-      )}
+      {loadingProviders && <div className="text-retro-sm text-retro-darkgray">Detection providers...</div>}
       {!loadingProviders && providersError && <ErrorMsg message={providersError} />}
       {!loadingProviders && providers.length > 0 && (
-        <div className="mb-4">
-          <p className="text-xs font-semibold text-stone-500 uppercase tracking-wide mb-2">
-            Providers IA détectés
-          </p>
-          <div className="flex flex-wrap gap-2">
-            {providers.map((p) => (
-              <span
-                key={p.provider_type}
-                className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border ${
-                  p.available
-                    ? 'bg-green-50 border-green-200 text-green-800 cursor-pointer hover:bg-green-100'
-                    : 'bg-stone-50 border-stone-200 text-stone-400 cursor-default'
-                } ${selectedProvider === p.provider_type ? 'ring-2 ring-stone-500' : ''}`}
-                onClick={() => p.available && setSelectedProvider(p.provider_type)}
-              >
-                <span className={`w-1.5 h-1.5 rounded-full ${p.available ? 'bg-green-500' : 'bg-stone-300'}`} />
-                {p.display_name}
-                {p.available && <span className="text-green-600">({p.model_count})</span>}
-                {!p.available && <span className="text-stone-400">— clé manquante</span>}
-              </span>
-            ))}
-          </div>
-          {availableProviders.length === 0 && (
-            <p className="text-sm text-amber-600 bg-amber-50 border border-amber-200 rounded px-3 py-2 mt-3">
-              Aucun provider disponible. Vérifiez les secrets{' '}
-              <code className="font-mono">GOOGLE_AI_STUDIO_API_KEY</code>,{' '}
-              <code className="font-mono">VERTEX_API_KEY</code> ou{' '}
-              <code className="font-mono">MISTRAL_API_KEY</code>.
-            </p>
-          )}
+        <div className="flex flex-wrap gap-[2px]">
+          {providers.map((p) => (
+            <RetroButton
+              key={p.provider_type}
+              size="sm"
+              pressed={selectedProvider === p.provider_type}
+              disabled={!p.available}
+              onClick={() => p.available && setSelectedProvider(p.provider_type)}
+            >
+              {p.display_name} {p.available ? `(${p.model_count})` : '— N/A'}
+            </RetroButton>
+          ))}
         </div>
       )}
 
       {selectedProvider && (
-        <form onSubmit={(e) => void handleSelectModel(e)} className="space-y-3 max-w-sm">
-          {loadingModels && <p className="text-sm text-stone-400">Chargement des modèles…</p>}
+        <form onSubmit={(e) => void handleSelectModel(e)} className="flex flex-col gap-2 max-w-sm">
+          {loadingModels && <div className="text-retro-sm text-retro-darkgray">Chargement modeles...</div>}
           {!loadingModels && modelsError && <ErrorMsg message={modelsError} />}
           {!loadingModels && models.length > 0 && (
-            <div>
-              <label className="block text-xs font-semibold text-stone-500 uppercase tracking-wide mb-1">
-                Modèle — {providers.find((p) => p.provider_type === selectedProvider)?.display_name}
-              </label>
-              <select
-                value={selectedModelId}
-                onChange={(e) => setSelectedModelId(e.target.value)}
-                className="border border-stone-300 rounded px-3 py-2 text-sm w-full bg-white focus:outline-none focus:ring-2 focus:ring-stone-400"
-              >
-                {models.map((m) => (
-                  <option key={m.model_id} value={m.model_id}>
-                    {m.display_name}{m.supports_vision ? ' (vision)' : ''}
-                  </option>
-                ))}
-              </select>
-            </div>
+            <RetroSelect
+              label={`Modele — ${providers.find((p) => p.provider_type === selectedProvider)?.display_name}`}
+              value={selectedModelId}
+              onChange={(e) => setSelectedModelId(e.target.value)}
+              options={models.map((m) => ({
+                value: m.model_id,
+                label: `${m.display_name}${m.supports_vision ? ' (vision)' : ''}`,
+              }))}
+            />
           )}
           {saveError && <ErrorMsg message={saveError} />}
           {saveSuccess && <SuccessMsg message={saveSuccess} />}
           {!loadingModels && models.length > 0 && (
-            <button
-              type="submit"
-              disabled={savingModel || !selectedModelId}
-              className="bg-stone-800 text-white px-5 py-2 rounded text-sm font-medium hover:bg-stone-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            >
-              {savingModel ? 'Enregistrement…' : 'Sélectionner ce modèle'}
-            </button>
+            <RetroButton type="submit" disabled={savingModel || !selectedModelId}>
+              {savingModel ? 'Enregistrement...' : 'Selectionner'}
+            </RetroButton>
           )}
         </form>
       )}
-    </>
+    </div>
   )
 }
 
 // ── IngestPanel ───────────────────────────────────────────────────────────
 
-interface IngestPanelProps {
-  corpusId: string
-}
-
-function IngestPanel({ corpusId }: IngestPanelProps) {
+function IngestPanel({ corpusId }: { corpusId: string }) {
   const [subTab, setSubTab] = useState<IngestSubTab>('urls')
-
   const [urlsText, setUrlsText] = useState('')
   const [folioLabelsText, setFolioLabelsText] = useState('')
   const [urlsLoading, setUrlsLoading] = useState(false)
   const [urlsError, setUrlsError] = useState<string | null>(null)
   const [urlsSuccess, setUrlsSuccess] = useState<string | null>(null)
-
   const [manifestUrl, setManifestUrl] = useState('')
   const [manifestLoading, setManifestLoading] = useState(false)
   const [manifestError, setManifestError] = useState<string | null>(null)
   const [manifestSuccess, setManifestSuccess] = useState<string | null>(null)
-
   const [selectedFiles, setSelectedFiles] = useState<File[]>([])
   const [filesLoading, setFilesLoading] = useState(false)
   const [filesError, setFilesError] = useState<string | null>(null)
@@ -360,174 +280,98 @@ function IngestPanel({ corpusId }: IngestPanelProps) {
 
   const handleUrlsSubmit = async (e: FormEvent) => {
     e.preventDefault()
-    setUrlsError(null)
-    setUrlsSuccess(null)
+    setUrlsError(null); setUrlsSuccess(null)
     const urls = urlsText.split('\n').map((l) => l.trim()).filter(Boolean)
     const labels = folioLabelsText.split('\n').map((l) => l.trim()).filter(Boolean)
-    if (urls.length === 0) { setUrlsError('Aucune URL renseignée.'); return }
-    if (labels.length !== urls.length) {
-      setUrlsError(`Le nombre de folio_labels (${labels.length}) doit être égal au nombre d'URLs (${urls.length}).`)
-      return
-    }
+    if (urls.length === 0) { setUrlsError('Aucune URL.'); return }
+    if (labels.length !== urls.length) { setUrlsError(`Labels (${labels.length}) != URLs (${urls.length})`); return }
     setUrlsLoading(true)
     try {
       const resp = await ingestImages(corpusId, urls, labels)
-      setUrlsSuccess(`${resp.pages_created} page(s) ingérée(s).`)
-      setUrlsText('')
-      setFolioLabelsText('')
-    } catch (err) {
-      setUrlsError(err instanceof Error ? err.message : 'Erreur inconnue')
-    } finally {
-      setUrlsLoading(false)
-    }
+      setUrlsSuccess(`${resp.pages_created} page(s) ingeree(s).`)
+      setUrlsText(''); setFolioLabelsText('')
+    } catch (err) { setUrlsError(err instanceof Error ? err.message : 'Erreur') }
+    finally { setUrlsLoading(false) }
   }
 
   const handleManifestSubmit = async (e: FormEvent) => {
     e.preventDefault()
-    setManifestError(null)
-    setManifestSuccess(null)
-    setManifestLoading(true)
+    setManifestError(null); setManifestSuccess(null); setManifestLoading(true)
     try {
       const resp = await ingestManifest(corpusId, manifestUrl)
-      setManifestSuccess(`${resp.pages_created} page(s) ingérée(s) depuis le manifest.`)
+      setManifestSuccess(`${resp.pages_created} page(s) ingeree(s).`)
       setManifestUrl('')
-    } catch (err) {
-      setManifestError(err instanceof Error ? err.message : 'Erreur inconnue')
-    } finally {
-      setManifestLoading(false)
-    }
+    } catch (err) { setManifestError(err instanceof Error ? err.message : 'Erreur') }
+    finally { setManifestLoading(false) }
   }
 
   const handleFilesSubmit = async (e: FormEvent) => {
     e.preventDefault()
-    setFilesError(null)
-    setFilesSuccess(null)
-    if (selectedFiles.length === 0) { setFilesError('Aucun fichier sélectionné.'); return }
+    setFilesError(null); setFilesSuccess(null)
+    if (selectedFiles.length === 0) { setFilesError('Aucun fichier.'); return }
     setFilesLoading(true)
     try {
       const resp = await ingestFiles(corpusId, selectedFiles)
-      setFilesSuccess(`${resp.pages_created} page(s) ingérée(s).`)
+      setFilesSuccess(`${resp.pages_created} page(s) ingeree(s).`)
       setSelectedFiles([])
-    } catch (err) {
-      setFilesError(err instanceof Error ? err.message : 'Erreur inconnue')
-    } finally {
-      setFilesLoading(false)
-    }
+    } catch (err) { setFilesError(err instanceof Error ? err.message : 'Erreur') }
+    finally { setFilesLoading(false) }
   }
 
-  const subTabClass = (tab: IngestSubTab) =>
-    `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-      subTab === tab
-        ? 'border-stone-800 text-stone-900'
-        : 'border-transparent text-stone-500 hover:text-stone-700'
-    }`
-
-  const textareaClass =
-    'border border-stone-300 rounded px-3 py-2 text-sm w-full font-mono focus:outline-none focus:ring-2 focus:ring-stone-400'
-  const submitBtnClass =
-    'bg-stone-800 text-white px-5 py-2 rounded text-sm font-medium hover:bg-stone-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors'
-
   return (
-    <>
-      <div className="flex border-b border-stone-200 mb-4 -mt-1">
-        <button className={subTabClass('urls')} onClick={() => setSubTab('urls')}>URLs directes</button>
-        <button className={subTabClass('manifest')} onClick={() => setSubTab('manifest')}>Manifest IIIF</button>
-        <button className={subTabClass('files')} onClick={() => setSubTab('files')}>Fichiers locaux</button>
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-[2px]">
+        {(['urls', 'manifest', 'files'] as IngestSubTab[]).map((t) => (
+          <RetroButton key={t} size="sm" pressed={subTab === t} onClick={() => setSubTab(t)}>
+            {t === 'urls' ? 'URLs' : t === 'manifest' ? 'Manifest' : 'Fichiers'}
+          </RetroButton>
+        ))}
       </div>
 
       {subTab === 'urls' && (
-        <form onSubmit={(e) => void handleUrlsSubmit(e)} className="space-y-3 max-w-lg">
-          <div>
-            <label className="block text-xs font-semibold text-stone-500 uppercase tracking-wide mb-1">
-              URLs d'images <span className="font-normal normal-case text-stone-400">(1 par ligne)</span>
-            </label>
-            <textarea
-              value={urlsText}
-              onChange={(e) => setUrlsText(e.target.value)}
-              rows={4}
-              placeholder="https://gallica.bnf.fr/iiif/ark:/…/f1/full/max/0/native.jpg"
-              className={textareaClass}
-            />
-          </div>
-          <div>
-            <label className="block text-xs font-semibold text-stone-500 uppercase tracking-wide mb-1">
-              Folio labels <span className="font-normal normal-case text-stone-400">(1 par ligne, même ordre)</span>
-            </label>
-            <textarea
-              value={folioLabelsText}
-              onChange={(e) => setFolioLabelsText(e.target.value)}
-              rows={4}
-              placeholder={'001r\n001v\n002r'}
-              className={textareaClass}
-            />
-          </div>
+        <form onSubmit={(e) => void handleUrlsSubmit(e)} className="flex flex-col gap-2">
+          <RetroTextarea label="URLs d'images (1/ligne)" value={urlsText} onChange={(e) => setUrlsText(e.target.value)} rows={4} placeholder="https://..." />
+          <RetroTextarea label="Folio labels (1/ligne)" value={folioLabelsText} onChange={(e) => setFolioLabelsText(e.target.value)} rows={4} placeholder={'001r\n001v'} />
           {urlsError && <ErrorMsg message={urlsError} />}
           {urlsSuccess && <SuccessMsg message={urlsSuccess} />}
-          <button type="submit" disabled={urlsLoading} className={submitBtnClass}>
-            {urlsLoading ? 'Ingestion…' : 'Ingérer les images'}
-          </button>
+          <RetroButton type="submit" disabled={urlsLoading}>{urlsLoading ? 'Ingestion...' : 'Ingerer'}</RetroButton>
         </form>
       )}
 
       {subTab === 'manifest' && (
-        <form onSubmit={(e) => void handleManifestSubmit(e)} className="space-y-3 max-w-lg">
-          <div>
-            <label className="block text-xs font-semibold text-stone-500 uppercase tracking-wide mb-1">
-              URL du manifest IIIF
-            </label>
-            <input
-              type="url"
-              value={manifestUrl}
-              onChange={(e) => setManifestUrl(e.target.value)}
-              required
-              placeholder="https://gallica.bnf.fr/iiif/ark:/…/manifest.json"
-              className="border border-stone-300 rounded px-3 py-2 text-sm w-full font-mono focus:outline-none focus:ring-2 focus:ring-stone-400"
-            />
-          </div>
+        <form onSubmit={(e) => void handleManifestSubmit(e)} className="flex flex-col gap-2">
+          <RetroInput label="URL manifest IIIF" type="url" value={manifestUrl} onChange={(e) => setManifestUrl(e.target.value)} required placeholder="https://.../manifest.json" />
           {manifestError && <ErrorMsg message={manifestError} />}
           {manifestSuccess && <SuccessMsg message={manifestSuccess} />}
-          <button type="submit" disabled={manifestLoading || !manifestUrl} className={submitBtnClass}>
-            {manifestLoading ? 'Ingestion…' : 'Importer le manifest'}
-          </button>
+          <RetroButton type="submit" disabled={manifestLoading || !manifestUrl}>{manifestLoading ? 'Ingestion...' : 'Importer'}</RetroButton>
         </form>
       )}
 
       {subTab === 'files' && (
-        <form onSubmit={(e) => void handleFilesSubmit(e)} className="space-y-3 max-w-lg">
-          <div>
-            <label className="block text-xs font-semibold text-stone-500 uppercase tracking-wide mb-1">
-              Fichiers images
-            </label>
+        <form onSubmit={(e) => void handleFilesSubmit(e)} className="flex flex-col gap-2">
+          <div className="flex flex-col gap-[2px]">
+            <label className="text-retro-xs font-bold">Fichiers images</label>
             <input
-              type="file"
-              multiple
-              accept="image/*"
+              type="file" multiple accept="image/*"
               onChange={(e) => setSelectedFiles(Array.from(e.target.files ?? []))}
-              className="block text-sm text-stone-600 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-medium file:bg-stone-100 file:text-stone-700 hover:file:bg-stone-200"
+              className="text-retro-sm font-retro border border-retro-black bg-retro-white p-1"
             />
             {selectedFiles.length > 0 && (
-              <p className="text-xs text-stone-500 mt-1">{selectedFiles.length} fichier(s) sélectionné(s)</p>
+              <span className="text-retro-xs text-retro-darkgray">{selectedFiles.length} fichier(s)</span>
             )}
           </div>
           {filesError && <ErrorMsg message={filesError} />}
           {filesSuccess && <SuccessMsg message={filesSuccess} />}
-          <button type="submit" disabled={filesLoading || selectedFiles.length === 0} className={submitBtnClass}>
-            {filesLoading ? 'Envoi…' : 'Envoyer les fichiers'}
-          </button>
+          <RetroButton type="submit" disabled={filesLoading || selectedFiles.length === 0}>{filesLoading ? 'Envoi...' : 'Envoyer'}</RetroButton>
         </form>
       )}
-    </>
+    </div>
   )
 }
 
 // ── RunPanel ──────────────────────────────────────────────────────────────
 
-interface RunPanelProps {
-  corpusId: string
-  hasModel: boolean
-}
-
-function RunPanel({ corpusId, hasModel }: RunPanelProps) {
+function RunPanel({ corpusId, hasModel }: { corpusId: string; hasModel: boolean }) {
   const [pageCount, setPageCount] = useState<number | null>(null)
   const [launching, setLaunching] = useState(false)
   const [launchError, setLaunchError] = useState<string | null>(null)
@@ -535,7 +379,6 @@ function RunPanel({ corpusId, hasModel }: RunPanelProps) {
   const [jobs, setJobs] = useState<Record<string, Job>>({})
   const [polling, setPolling] = useState(false)
 
-  // Fetch page count from manuscripts + pages
   useEffect(() => {
     fetchManuscripts(corpusId)
       .then(async (manuscripts) => {
@@ -555,28 +398,19 @@ function RunPanel({ corpusId, hasModel }: RunPanelProps) {
         for (const job of results) map[job.id] = job
         setJobs(map)
         if (results.every((j) => j.status === 'done' || j.status === 'failed')) setPolling(false)
-      } catch {
-        // Erreur réseau transitoire — on continue
-      }
+      } catch { /* transient */ }
     }
     const id = setInterval(() => void poll(), 3000)
     return () => clearInterval(id)
   }, [polling, jobIds])
 
   const handleRun = async () => {
-    setLaunchError(null)
-    setJobIds([])
-    setJobs({})
-    setLaunching(true)
+    setLaunchError(null); setJobIds([]); setJobs({}); setLaunching(true)
     try {
       const resp = await runCorpus(corpusId)
-      setJobIds(resp.job_ids)
-      setPolling(true)
-    } catch (err) {
-      setLaunchError(err instanceof Error ? err.message : 'Erreur inconnue')
-    } finally {
-      setLaunching(false)
-    }
+      setJobIds(resp.job_ids); setPolling(true)
+    } catch (err) { setLaunchError(err instanceof Error ? err.message : 'Erreur') }
+    finally { setLaunching(false) }
   }
 
   const handleRetryFailed = async () => {
@@ -591,84 +425,51 @@ function RunPanel({ corpusId, hasModel }: RunPanelProps) {
   const failedCount = jobList.filter((j) => j.status === 'failed').length
   const totalCount = jobList.length
 
-  const statusBadge = (status: string) => {
-    const classes: Record<string, string> = {
-      pending: 'bg-stone-100 text-stone-600',
-      running: 'bg-blue-100 text-blue-700',
-      done: 'bg-green-100 text-green-700',
-      failed: 'bg-red-100 text-red-700',
-    }
-    return (
-      <span className={`text-xs px-2 py-0.5 rounded font-medium ${classes[status] ?? 'bg-stone-100 text-stone-500'}`}>
-        {status}
-      </span>
-    )
+  const statusVariant = (s: string): 'default' | 'success' | 'warning' | 'error' | 'info' => {
+    if (s === 'done') return 'success'
+    if (s === 'failed') return 'error'
+    if (s === 'running') return 'info'
+    return 'default'
   }
 
   if (!hasModel) {
-    return (
-      <p className="text-sm text-amber-600 bg-amber-50 border border-amber-200 rounded px-3 py-2">
-        Configurez d'abord un modèle IA pour ce corpus.
-      </p>
-    )
+    return <div className="text-retro-sm border border-retro-black p-2 bg-retro-white">Configurez d'abord un modele IA.</div>
   }
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-2">
       {pageCount !== null && (
-        <p className="text-sm text-stone-600">
-          {pageCount === 0
-            ? 'Aucune page ingérée.'
-            : `${pageCount} page(s) dans ce corpus.`}
-        </p>
+        <div className="text-retro-sm">{pageCount === 0 ? 'Aucune page ingeree.' : `${pageCount} page(s).`}</div>
       )}
-
       {launchError && <ErrorMsg message={launchError} />}
-
-      <div className="flex flex-wrap gap-3 items-center">
-        <button
-          onClick={() => void handleRun()}
-          disabled={launching || polling || pageCount === 0}
-          className="bg-stone-800 text-white px-5 py-2 rounded text-sm font-medium hover:bg-stone-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        >
-          {launching ? 'Démarrage…' : polling ? 'Traitement en cours…' : 'Analyser tout le corpus'}
-        </button>
-
+      <div className="flex flex-wrap gap-[2px]">
+        <RetroButton onClick={() => void handleRun()} disabled={launching || polling || pageCount === 0}>
+          {launching ? 'Demarrage...' : polling ? 'En cours...' : 'Analyser tout'}
+        </RetroButton>
         {failedCount > 0 && !polling && (
-          <button
-            onClick={() => void handleRetryFailed()}
-            className="border border-stone-300 text-stone-700 px-5 py-2 rounded text-sm font-medium hover:bg-stone-50 transition-colors"
-          >
-            Relancer {failedCount} page(s) en erreur
-          </button>
+          <RetroButton onClick={() => void handleRetryFailed()}>
+            Relancer {failedCount} erreur(s)
+          </RetroButton>
         )}
       </div>
-
       {totalCount > 0 && (
         <div>
-          <p className="text-sm text-stone-600 mb-3">
-            Progression : <strong>{doneCount}</strong> / {totalCount} pages traitées
-            {failedCount > 0 && <span className="text-red-600 ml-2">· {failedCount} en erreur</span>}
-            {polling && <span className="text-blue-600 ml-2">· actualisation toutes les 3 s</span>}
-          </p>
-          <ul className="space-y-1 max-h-64 overflow-y-auto border border-stone-200 rounded p-2 bg-white">
+          <div className="text-retro-sm mb-1">
+            <span className="font-bold">{doneCount}</span>/{totalCount} traitees
+            {failedCount > 0 && <span className="ml-2 font-bold">{failedCount} erreur(s)</span>}
+            {polling && <span className="ml-2 text-retro-darkgray">(actualisation 3s)</span>}
+          </div>
+          <div className="border border-retro-black bg-retro-white max-h-48 overflow-y-auto retro-scroll">
             {jobList.map((job) => (
-              <li
-                key={job.id}
-                className="flex items-center justify-between text-xs text-stone-600 py-1 px-2 rounded hover:bg-stone-50"
-              >
-                <span className="font-mono truncate max-w-xs">{job.page_id ?? job.id}</span>
-                <div className="flex items-center gap-2 ml-2 shrink-0">
-                  {statusBadge(job.status)}
-                  {job.error_message && (
-                    <span className="text-red-500 truncate max-w-xs" title={job.error_message}>
-                      {job.error_message}
-                    </span>
-                  )}
+              <div key={job.id} className="flex items-center justify-between text-retro-xs px-2 py-[2px] border-b border-retro-gray last:border-0">
+                <span className="truncate max-w-[200px]">{job.page_id ?? job.id}</span>
+                <div className="flex items-center gap-1 shrink-0">
+                  <RetroBadge variant={statusVariant(job.status)}>{job.status}</RetroBadge>
+                  {job.error_message && <span className="text-retro-xs truncate max-w-[120px]" title={job.error_message}>{job.error_message}</span>}
                 </div>
-              </li>
+              </div>
             ))}
-          </ul>
+          </div>
         </div>
       )}
     </div>
@@ -677,99 +478,68 @@ function RunPanel({ corpusId, hasModel }: RunPanelProps) {
 
 // ── CorpusDetail ──────────────────────────────────────────────────────────
 
-interface CorpusDetailProps {
-  corpus: Corpus
-  onDeleted: () => void
-}
-
-function CorpusDetail({ corpus, onDeleted }: CorpusDetailProps) {
+function CorpusDetail({ corpus, onDeleted }: { corpus: Corpus; onDeleted: () => void }) {
   const [hasModel, setHasModel] = useState(false)
   const [deleting, setDeleting] = useState(false)
   const [deleteError, setDeleteError] = useState<string | null>(null)
   const [confirmDelete, setConfirmDelete] = useState(false)
 
   useEffect(() => {
-    getCorpusModel(corpus.id)
-      .then((m) => setHasModel(m !== null))
-      .catch(() => {})
+    getCorpusModel(corpus.id).then((m) => setHasModel(m !== null)).catch(() => {})
   }, [corpus.id])
 
   const handleDelete = async () => {
-    setDeleteError(null)
-    setDeleting(true)
-    try {
-      await deleteCorpus(corpus.id)
-      onDeleted()
-    } catch (err) {
-      setDeleteError(err instanceof Error ? err.message : 'Erreur inconnue')
-      setDeleting(false)
-      setConfirmDelete(false)
-    }
+    setDeleteError(null); setDeleting(true)
+    try { await deleteCorpus(corpus.id); onDeleted() }
+    catch (err) { setDeleteError(err instanceof Error ? err.message : 'Erreur'); setDeleting(false); setConfirmDelete(false) }
   }
 
   return (
-    <div>
-      {/* Corpus header */}
-      <div className="flex items-start justify-between mb-6">
+    <div className="flex flex-col gap-2">
+      {/* Header */}
+      <div className="flex items-center justify-between border border-retro-black bg-retro-light p-2">
         <div>
-          <h2 className="text-xl font-semibold text-stone-800">{corpus.title}</h2>
-          <p className="text-sm text-stone-500 mt-0.5">
-            <span className="font-mono">{corpus.slug}</span>
-            {' · '}
-            <span>{corpus.profile_id}</span>
-          </p>
+          <span className="text-retro-lg font-bold">{corpus.title}</span>
+          <div className="text-retro-xs text-retro-darkgray">{corpus.slug} — {corpus.profile_id}</div>
         </div>
-        <div className="flex items-center gap-2">
-          {deleteError && <span className="text-xs text-red-600">{deleteError}</span>}
+        <div className="flex items-center gap-1">
+          {deleteError && <span className="text-retro-xs">{deleteError}</span>}
           {confirmDelete ? (
             <>
-              <span className="text-xs text-stone-600">Confirmer la suppression ?</span>
-              <button
-                onClick={() => void handleDelete()}
-                disabled={deleting}
-                className="px-3 py-1.5 bg-red-600 text-white text-xs rounded font-medium hover:bg-red-700 disabled:opacity-50 transition-colors"
-              >
-                {deleting ? 'Suppression…' : 'Supprimer'}
-              </button>
-              <button
-                onClick={() => setConfirmDelete(false)}
-                className="px-3 py-1.5 border border-stone-300 text-stone-600 text-xs rounded font-medium hover:bg-stone-50 transition-colors"
-              >
-                Annuler
-              </button>
+              <span className="text-retro-xs">Confirmer?</span>
+              <RetroButton size="sm" onClick={() => void handleDelete()} disabled={deleting}>
+                {deleting ? '...' : 'Oui'}
+              </RetroButton>
+              <RetroButton size="sm" onClick={() => setConfirmDelete(false)}>Non</RetroButton>
             </>
           ) : (
-            <button
-              onClick={() => setConfirmDelete(true)}
-              className="px-3 py-1.5 border border-red-200 text-red-600 text-xs rounded font-medium hover:bg-red-50 transition-colors"
-            >
-              Supprimer
-            </button>
+            <RetroButton size="sm" onClick={() => setConfirmDelete(true)}>Supprimer</RetroButton>
           )}
         </div>
       </div>
 
-      {/* Section cards */}
-      <SectionCard title="Modèle IA">
-        <ModelPanel
-          key={corpus.id}
-          corpusId={corpus.id}
-          onSaved={() => setHasModel(true)}
-        />
-      </SectionCard>
+      <RetroWindow title="Modele IA">
+        <div className="p-2">
+          <ModelPanel key={corpus.id} corpusId={corpus.id} onSaved={() => setHasModel(true)} />
+        </div>
+      </RetroWindow>
 
-      <SectionCard title="Ingestion">
-        <IngestPanel key={corpus.id} corpusId={corpus.id} />
-      </SectionCard>
+      <RetroWindow title="Ingestion">
+        <div className="p-2">
+          <IngestPanel key={corpus.id} corpusId={corpus.id} />
+        </div>
+      </RetroWindow>
 
-      <SectionCard title="Traitement">
-        <RunPanel key={corpus.id} corpusId={corpus.id} hasModel={hasModel} />
-      </SectionCard>
+      <RetroWindow title="Traitement">
+        <div className="p-2">
+          <RunPanel key={corpus.id} corpusId={corpus.id} hasModel={hasModel} />
+        </div>
+      </RetroWindow>
     </div>
   )
 }
 
-// ── Admin (composant principal) ─────────────────────────────────────────────
+// ── Admin (main component) ─────────────────────────────────────────────────
 
 export default function Admin({ onHome }: Props) {
   const [corpora, setCorpora] = useState<Corpus[]>([])
@@ -781,85 +551,71 @@ export default function Admin({ onHome }: Props) {
     fetchCorpora()
       .then((cs) => {
         setCorpora(cs)
-        if (selectId) {
-          setSelectedCorpusId(selectId)
-          setShowCreate(false)
-        } else if (!didInit.current) {
+        if (selectId) { setSelectedCorpusId(selectId); setShowCreate(false) }
+        else if (!didInit.current) {
           didInit.current = true
-          if (cs.length > 0) {
-            setSelectedCorpusId(cs[0].id)
-            setShowCreate(false)
-          } else {
-            setShowCreate(true)
-          }
+          if (cs.length > 0) { setSelectedCorpusId(cs[0].id); setShowCreate(false) }
+          else setShowCreate(true)
         }
       })
       .catch(() => {})
   }
 
-  useEffect(() => {
-    refreshCorpora()
-  }, [])
+  useEffect(() => { refreshCorpora() }, [])
 
   const selectedCorpus = corpora.find((c) => c.id === selectedCorpusId) ?? null
 
   return (
-    <div className="h-screen flex flex-col bg-stone-50">
-      {/* Top bar */}
-      <header className="bg-stone-900 text-stone-100 px-6 py-4 flex items-center gap-4 shrink-0">
-        <button
-          onClick={onHome}
-          className="text-stone-400 hover:text-stone-100 text-sm transition-colors"
-        >
-          ← Accueil
-        </button>
-        <h1 className="text-xl font-semibold tracking-tight">Administration</h1>
-      </header>
-
-      <div className="flex flex-1 overflow-hidden">
+    <div className="h-screen flex flex-col bg-retro-dither">
+      <RetroMenuBar
+        items={[
+          { label: 'IIIF Studio', onClick: onHome },
+          { label: 'Administration' },
+        ]}
+      />
+
+      <div className="flex flex-1 overflow-hidden p-1 gap-1">
         {/* Sidebar */}
-        <aside className="w-64 bg-white border-r border-stone-200 flex flex-col shrink-0 overflow-y-auto">
-          <div className="p-3 border-b border-stone-100">
+        <RetroWindow title="Corpus" className="w-56 shrink-0" scrollable>
+          <div className="flex flex-col">
             <button
               onClick={() => { setShowCreate(true); setSelectedCorpusId(null) }}
-              className={`w-full text-left px-3 py-2 rounded text-sm font-medium transition-colors ${
-                showCreate && !selectedCorpusId
-                  ? 'bg-stone-800 text-white'
-                  : 'text-stone-600 hover:bg-stone-100'
-              }`}
+              className={`
+                w-full text-left px-2 py-[4px] text-retro-sm font-bold
+                border-b border-retro-gray
+                ${showCreate && !selectedCorpusId ? 'bg-retro-select text-retro-select-text' : 'hover:bg-retro-select hover:text-retro-select-text'}
+              `}
             >
               + Nouveau corpus
             </button>
-          </div>
-          <nav className="flex-1 p-3 space-y-0.5">
             {corpora.length === 0 && (
-              <p className="text-xs text-stone-400 px-3 py-2">Aucun corpus</p>
+              <div className="px-2 py-2 text-retro-xs text-retro-darkgray">Aucun corpus</div>
             )}
             {corpora.map((c) => (
               <button
                 key={c.id}
                 onClick={() => { setSelectedCorpusId(c.id); setShowCreate(false) }}
-                className={`w-full text-left px-3 py-2 rounded text-sm transition-colors ${
-                  selectedCorpusId === c.id && !showCreate
-                    ? 'bg-stone-100 text-stone-900 font-medium'
-                    : 'text-stone-600 hover:bg-stone-50'
-                }`}
+                className={`
+                  w-full text-left px-2 py-[4px] text-retro-sm
+                  border-b border-retro-gray
+                  ${selectedCorpusId === c.id && !showCreate
+                    ? 'bg-retro-select text-retro-select-text'
+                    : 'hover:bg-retro-select hover:text-retro-select-text'}
+                `}
               >
-                <span className="block truncate">{c.title}</span>
-                <span className="block truncate text-xs text-stone-400 font-mono">{c.slug}</span>
+                <div className="truncate font-bold">{c.title}</div>
+                <div className={`truncate text-retro-xs ${selectedCorpusId === c.id && !showCreate ? 'opacity-70' : 'text-retro-darkgray'}`}>
+                  {c.slug}
+                </div>
               </button>
             ))}
-          </nav>
-        </aside>
+          </div>
+        </RetroWindow>
 
         {/* Main panel */}
-        <main className="flex-1 overflow-y-auto p-8">
+        <div className="flex-1 overflow-y-auto retro-scroll p-2">
           {showCreate && !selectedCorpusId && (
-            <CreateCorpusPanel
-              onCreated={(corpus) => {
-                refreshCorpora(corpus.id)
-              }}
-            />
+            <CreateCorpusPanel onCreated={(corpus) => refreshCorpora(corpus.id)} />
           )}
           {!showCreate && selectedCorpus && (
             <CorpusDetail
@@ -868,20 +624,15 @@ export default function Admin({ onHome }: Props) {
               onDeleted={() => {
                 const remaining = corpora.filter((c) => c.id !== selectedCorpus.id)
                 setCorpora(remaining)
-                if (remaining.length > 0) {
-                  setSelectedCorpusId(remaining[0].id)
-                  setShowCreate(false)
-                } else {
-                  setSelectedCorpusId(null)
-                  setShowCreate(true)
-                }
+                if (remaining.length > 0) { setSelectedCorpusId(remaining[0].id); setShowCreate(false) }
+                else { setSelectedCorpusId(null); setShowCreate(true) }
               }}
             />
           )}
           {!showCreate && !selectedCorpus && corpora.length > 0 && (
-            <p className="text-sm text-stone-400">Sélectionnez un corpus dans la barre latérale.</p>
+            <div className="text-retro-sm text-retro-darkgray p-2">Selectionnez un corpus.</div>
           )}
-        </main>
+        </div>
       </div>
     </div>
   )

frontend/src/pages/Editor.tsx

@@ -7,6 +7,14 @@ import {
   type VersionInfo,
 } from '../lib/api.ts'
 import Viewer from '../components/Viewer.tsx'
+import {
+  RetroMenuBar,
+  RetroWindow,
+  RetroButton,
+  RetroTextarea,
+  RetroSelect,
+  RetroBadge,
+} from '../components/retro'
 
 interface Props {
   pageId: string
@@ -15,6 +23,13 @@ interface Props {
 
 type Panel = 'transcription' | 'commentary' | 'regions' | 'history'
 
+const PANEL_LABELS: Record<Panel, string> = {
+  transcription: 'Transcription',
+  commentary: 'Commentaire',
+  regions: 'Regions',
+  history: 'Historique',
+}
+
 export default function Editor({ pageId, onBack }: Props) {
   const [master, setMaster] = useState<PageMaster | null>(null)
   const [history, setHistory] = useState<VersionInfo[]>([])
@@ -25,7 +40,6 @@ export default function Editor({ pageId, onBack }: Props) {
   const [saveError, setSaveError] = useState<string | null>(null)
   const [saveSuccess, setSaveSuccess] = useState(false)
 
-  // Editable field values
   const [ocrText, setOcrText] = useState('')
   const [commentaryPublic, setCommentaryPublic] = useState('')
   const [commentaryScholarly, setCommentaryScholarly] = useState('')
@@ -45,7 +59,6 @@ export default function Editor({ pageId, onBack }: Props) {
       setCommentaryPublic(m.commentary?.public ?? '')
       setCommentaryScholarly(m.commentary?.scholarly ?? '')
       setEditorialStatus(m.editorial.status)
-      // Restore existing region validations from extensions
       const ext = (m as unknown as { extensions?: { region_validations?: Record<string, string> } }).extensions
       setRegionValidations(ext?.region_validations ?? {})
     } catch (e: unknown) {
@@ -107,249 +120,239 @@ export default function Editor({ pageId, onBack }: Props) {
     setRegionValidations((prev) => ({ ...prev, [regionId]: val }))
   }
 
+  // ── Loading / Error ─────────────────────────────────────────────────
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-screen text-stone-500">
-        Chargement…
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Chargement" className="w-64">
+          <div className="p-4 text-retro-sm text-center">Chargement...</div>
+        </RetroWindow>
       </div>
     )
   }
 
   if (error) {
-    return <div className="p-8 text-red-600">Erreur : {error}</div>
+    return (
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Erreur" className="w-80">
+          <div className="p-4 text-retro-sm">
+            {error}
+            <div className="mt-2"><RetroButton onClick={onBack}>Retour</RetroButton></div>
+          </div>
+        </RetroWindow>
+      </div>
+    )
   }
 
   const imageUrl = master?.image?.derivative_web ?? master?.image?.master ?? ''
   const regions = master?.layout?.regions ?? []
 
   return (
-    <div className="flex flex-col h-screen bg-stone-100">
-      {/* ── Header ──────────────────────────────────────────────────────────── */}
-      <header className="flex items-center gap-3 bg-stone-900 text-stone-100 px-5 py-2.5 shrink-0">
-        <button
-          onClick={onBack}
-          className="text-stone-400 hover:text-stone-100 text-sm transition-colors"
-        >
-          ← Retour
-        </button>
-        <span className="text-stone-600">|</span>
-        <span className="text-sm font-medium text-stone-200">
-          Éditeur — {master?.folio_label ?? pageId}
-        </span>
-        {master && (
-          <span className="ml-2 text-xs text-stone-400">
-            v{master.editorial.version} · {master.editorial.status}
-          </span>
-        )}
+    <div className="flex flex-col h-screen bg-retro-dither">
+      {/* ── Menu bar ───────────────────────────────────────────────── */}
+      <RetroMenuBar
+        items={[
+          { label: 'IIIF Studio', onClick: onBack },
+          { label: `Editeur — ${master?.folio_label ?? pageId}` },
+        ]}
+        right={
+          <div className="flex items-center gap-1">
+            {master && (
+              <span className="text-retro-xs px-2">
+                v{master.editorial.version} — {master.editorial.status}
+              </span>
+            )}
+            {saveSuccess && <RetroBadge variant="success">OK</RetroBadge>}
+            {saveError && <RetroBadge variant="error">Err</RetroBadge>}
+            <RetroButton
+              size="sm"
+              onClick={() => void handleSave()}
+              disabled={saving}
+            >
+              {saving ? 'Saving...' : 'Sauvegarder'}
+            </RetroButton>
+          </div>
+        }
+      />
 
-        <div className="ml-auto flex items-center gap-3">
-          {saveSuccess && (
-            <span className="text-green-400 text-xs">Enregistré</span>
-          )}
-          {saveError && (
-            <span className="text-red-400 text-xs">{saveError}</span>
-          )}
-          <button
-            onClick={() => void handleSave()}
-            disabled={saving}
-            className="px-4 py-1.5 bg-amber-600 hover:bg-amber-500 disabled:opacity-40 text-white text-sm rounded transition-colors"
-          >
-            {saving ? 'Enregistrement…' : 'Enregistrer'}
-          </button>
-        </div>
-      </header>
+      {/* ── Main layout 50/50 ──────────────────────────────────────── */}
+      <div className="flex flex-1 overflow-hidden p-1 gap-1">
 
-      {/* ── Layout 50 / 50 ──────────────────────────────────────────────────── */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* Visionneuse gauche */}
-        <div className="relative" style={{ width: '50%' }}>
-          <Viewer imageUrl={imageUrl} onViewerReady={() => {}} />
-          {!imageUrl && (
-            <div className="absolute inset-0 flex items-center justify-center bg-stone-200 text-stone-400 text-sm">
-              Aperçu image non disponible
-            </div>
-          )}
-        </div>
-
-        {/* Panneaux droite */}
-        <div
-          className="flex flex-col border-l border-stone-200 bg-white"
-          style={{ width: '50%' }}
+        {/* ── Viewer window (left) ───────────────────────────────── */}
+        <RetroWindow
+          title={`Image — ${master?.folio_label ?? pageId}`}
+          className="flex-1 min-w-0"
         >
-          {/* Onglets */}
-          <div className="flex border-b border-stone-200 shrink-0">
-            {(['transcription', 'commentary', 'regions', 'history'] as Panel[]).map((p) => (
-              <button
-                key={p}
-                onClick={() => setActivePanel(p)}
-                className={`flex-1 py-2.5 text-xs font-medium capitalize transition-colors ${
-                  activePanel === p
-                    ? 'border-b-2 border-amber-500 text-amber-700 bg-amber-50'
-                    : 'text-stone-500 hover:text-stone-800'
-                }`}
-              >
-                {p === 'transcription' ? 'Transcription' :
-                 p === 'commentary' ? 'Commentaire' :
-                 p === 'regions' ? 'Régions' : 'Historique'}
-              </button>
-            ))}
+          <div className="relative w-full h-full">
+            <Viewer imageUrl={imageUrl} onViewerReady={() => {}} />
+            {!imageUrl && (
+              <div className="absolute inset-0 flex items-center justify-center bg-retro-gray text-retro-darkgray text-retro-sm">
+                Apercu non disponible
+              </div>
+            )}
           </div>
+        </RetroWindow>
+
+        {/* ── Editor window (right) ──────────────────────────────── */}
+        <RetroWindow
+          title="Editeur"
+          className="flex-1 min-w-0"
+          scrollable
+        >
+          <div className="flex flex-col">
+            {/* ── Tab bar ──────────────────────────────────────── */}
+            <div className="flex shrink-0 border-b border-retro-black bg-retro-gray">
+              {(['transcription', 'commentary', 'regions', 'history'] as Panel[]).map((p) => (
+                <RetroButton
+                  key={p}
+                  size="sm"
+                  pressed={activePanel === p}
+                  onClick={() => setActivePanel(p)}
+                  className="flex-1 border-0 border-r border-retro-darkgray last:border-r-0"
+                >
+                  {PANEL_LABELS[p]}
+                </RetroButton>
+              ))}
+            </div>
 
-          {/* Contenu du panneau actif */}
-          <div className="flex-1 overflow-y-auto p-4">
+            {/* ── Panel content ─────────────────────────────────── */}
+            <div className="p-2">
 
-            {/* ── Transcription ─────────────────────────────────────────── */}
-            {activePanel === 'transcription' && (
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-xs font-semibold text-stone-600 mb-1.5 uppercase tracking-wide">
-                    Texte diplomatique (OCR)
-                  </label>
-                  <textarea
+              {/* Transcription */}
+              {activePanel === 'transcription' && (
+                <div className="flex flex-col gap-2">
+                  <RetroTextarea
+                    label="Texte diplomatique (OCR)"
                     value={ocrText}
                     onChange={(e) => setOcrText(e.target.value)}
                     rows={12}
-                    className="w-full border border-stone-300 rounded-md px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-amber-400 resize-y"
                   />
-                </div>
-                <div>
-                  <label className="block text-xs font-semibold text-stone-600 mb-1.5 uppercase tracking-wide">
-                    Statut éditorial
-                  </label>
-                  <select
+                  <RetroSelect
+                    label="Statut editorial"
                     value={editorialStatus}
                     onChange={(e) => setEditorialStatus(e.target.value)}
-                    className="w-full border border-stone-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400"
-                  >
-                    <option value="machine_draft">machine_draft</option>
-                    <option value="needs_review">needs_review</option>
-                    <option value="reviewed">reviewed</option>
-                    <option value="validated">validated</option>
-                    <option value="published">published</option>
-                  </select>
+                    options={[
+                      { value: 'machine_draft', label: 'machine_draft' },
+                      { value: 'needs_review', label: 'needs_review' },
+                      { value: 'reviewed', label: 'reviewed' },
+                      { value: 'validated', label: 'validated' },
+                      { value: 'published', label: 'published' },
+                    ]}
+                  />
+                  {master?.ocr && (
+                    <div className="text-retro-xs text-retro-darkgray">
+                      Langue: {master.ocr.language} — Confiance: {(master.ocr.confidence * 100).toFixed(0)}%
+                    </div>
+                  )}
                 </div>
-                {master?.ocr && (
-                  <div className="text-xs text-stone-400 space-y-0.5">
-                    <div>Langue : {master.ocr.language}</div>
-                    <div>Confiance : {(master.ocr.confidence * 100).toFixed(0)} %</div>
-                  </div>
-                )}
-              </div>
-            )}
+              )}
 
-            {/* ── Commentaire ───────────────────────────────────────────── */}
-            {activePanel === 'commentary' && (
-              <div className="space-y-5">
-                <div>
-                  <label className="block text-xs font-semibold text-stone-600 mb-1.5 uppercase tracking-wide">
-                    Commentaire public
-                  </label>
-                  <textarea
+              {/* Commentary */}
+              {activePanel === 'commentary' && (
+                <div className="flex flex-col gap-2">
+                  <RetroTextarea
+                    label="Commentaire public"
                     value={commentaryPublic}
                     onChange={(e) => setCommentaryPublic(e.target.value)}
                     rows={6}
-                    className="w-full border border-stone-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 resize-y"
                   />
-                </div>
-                <div>
-                  <label className="block text-xs font-semibold text-stone-600 mb-1.5 uppercase tracking-wide">
-                    Commentaire savant
-                  </label>
-                  <textarea
+                  <RetroTextarea
+                    label="Commentaire savant"
                     value={commentaryScholarly}
                     onChange={(e) => setCommentaryScholarly(e.target.value)}
                     rows={8}
-                    className="w-full border border-stone-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 resize-y"
                   />
                 </div>
-              </div>
-            )}
+              )}
 
-            {/* ── Régions ───────────────────────────────────────────────── */}
-            {activePanel === 'regions' && (
-              <div className="space-y-2">
-                {regions.length === 0 ? (
-                  <p className="text-sm text-stone-400 italic">Aucune région détectée.</p>
-                ) : (
-                  regions.map((region) => {
-                    const validation = regionValidations[region.id]
-                    return (
+              {/* Regions */}
+              {activePanel === 'regions' && (
+                <div className="flex flex-col gap-[2px]">
+                  {regions.length === 0 ? (
+                    <p className="text-retro-sm text-retro-darkgray p-2">Aucune region detectee.</p>
+                  ) : (
+                    regions.map((region) => {
+                      const validation = regionValidations[region.id]
+                      return (
+                        <div
+                          key={region.id}
+                          className="
+                            flex items-center justify-between
+                            border border-retro-black p-2
+                            bg-retro-white
+                          "
+                        >
+                          <div>
+                            <span className="text-retro-sm font-bold capitalize">
+                              {region.type.replace(/_/g, ' ')}
+                            </span>
+                            <span className="ml-2 text-retro-xs text-retro-darkgray">
+                              {region.id}
+                            </span>
+                            <div className="text-retro-xs text-retro-darkgray">
+                              confiance: {(region.confidence * 100).toFixed(0)}%
+                            </div>
+                          </div>
+                          <div className="flex gap-[2px] ml-2 shrink-0">
+                            <RetroButton
+                              size="sm"
+                              pressed={validation === 'validated'}
+                              onClick={() => setRegionValidation(region.id, 'validated')}
+                            >
+                              OK
+                            </RetroButton>
+                            <RetroButton
+                              size="sm"
+                              pressed={validation === 'rejected'}
+                              onClick={() => setRegionValidation(region.id, 'rejected')}
+                            >
+                              X
+                            </RetroButton>
+                          </div>
+                        </div>
+                      )
+                    })
+                  )}
+                </div>
+              )}
+
+              {/* History */}
+              {activePanel === 'history' && (
+                <div className="flex flex-col gap-[2px]">
+                  {history.length === 0 ? (
+                    <p className="text-retro-sm text-retro-darkgray p-2">Aucune version archivee.</p>
+                  ) : (
+                    history.map((v) => (
                       <div
-                        key={region.id}
-                        className="flex items-center justify-between border border-stone-200 rounded-lg px-3 py-2.5 text-sm"
+                        key={v.version}
+                        className="
+                          flex items-center justify-between
+                          border border-retro-black p-2
+                          bg-retro-white
+                        "
                       >
                         <div>
-                          <span className="font-medium text-stone-800 capitalize">
-                            {region.type.replace(/_/g, ' ')}
-                          </span>
-                          <span className="ml-2 text-xs text-stone-400 font-mono">{region.id}</span>
-                          <div className="text-xs text-stone-400">
-                            confiance : {(region.confidence * 100).toFixed(0)} %
+                          <span className="text-retro-sm font-bold">v{v.version}</span>
+                          <RetroBadge className="ml-2">{v.status}</RetroBadge>
+                          <div className="text-retro-xs text-retro-darkgray mt-[2px]">
+                            {new Date(v.saved_at).toLocaleString('fr-FR')}
                           </div>
                         </div>
-                        <div className="flex gap-2 ml-4 shrink-0">
-                          <button
-                            onClick={() => setRegionValidation(region.id, 'validated')}
-                            className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
-                              validation === 'validated'
-                                ? 'bg-green-600 text-white'
-                                : 'bg-stone-100 text-stone-600 hover:bg-green-100'
-                            }`}
-                          >
-                            Valider
-                          </button>
-                          <button
-                            onClick={() => setRegionValidation(region.id, 'rejected')}
-                            className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
-                              validation === 'rejected'
-                                ? 'bg-red-600 text-white'
-                                : 'bg-stone-100 text-stone-600 hover:bg-red-100'
-                            }`}
-                          >
-                            Rejeter
-                          </button>
-                        </div>
+                        <RetroButton
+                          size="sm"
+                          onClick={() => void handleRestore(v.version)}
+                          disabled={saving}
+                        >
+                          Restaurer
+                        </RetroButton>
                       </div>
-                    )
-                  })
-                )}
-              </div>
-            )}
-
-            {/* ── Historique ────────────────────────────────────────────── */}
-            {activePanel === 'history' && (
-              <div className="space-y-2">
-                {history.length === 0 ? (
-                  <p className="text-sm text-stone-400 italic">
-                    Aucune version archivée.
-                  </p>
-                ) : (
-                  history.map((v) => (
-                    <div
-                      key={v.version}
-                      className="flex items-center justify-between border border-stone-200 rounded-lg px-3 py-2.5 text-sm"
-                    >
-                      <div>
-                        <span className="font-medium text-stone-800">v{v.version}</span>
-                        <span className="ml-2 text-xs text-stone-500">{v.status}</span>
-                        <div className="text-xs text-stone-400 mt-0.5">
-                          {new Date(v.saved_at).toLocaleString('fr-FR')}
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => void handleRestore(v.version)}
-                        disabled={saving}
-                        className="ml-4 px-3 py-1 text-xs bg-stone-100 text-stone-600 hover:bg-amber-100 hover:text-amber-700 disabled:opacity-40 rounded-md transition-colors"
-                      >
-                        Restaurer
-                      </button>
-                    </div>
-                  ))
-                )}
-              </div>
-            )}
+                    ))
+                  )}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
+        </RetroWindow>
       </div>
     </div>
   )

frontend/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import AdminNav from '../components/AdminNav.tsx'
 import SearchBar from '../components/SearchBar.tsx'
+import { RetroMenuBar, RetroWindow, RetroIcon } from '../components/retro'
 import {
   fetchCorpora,
   fetchManuscripts,
@@ -8,6 +9,14 @@ import {
   type Manuscript,
 } from '../lib/api.ts'
 
+/** Map profile IDs to desktop icon glyphs */
+const PROFILE_GLYPHS: Record<string, string> = {
+  'medieval-illuminated': '\u{1F4DC}',
+  'medieval-textual':     '\u{1F4D6}',
+  'early-modern-print':   '\u{1F5A8}',
+  'modern-handwritten':   '\u{270D}',
+}
+
 interface Props {
   onOpenManuscript: (manuscriptId: string, profileId: string) => void
   onOpenPage?: (pageId: string) => void
@@ -20,6 +29,7 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
   const [error, setError] = useState<string | null>(null)
   const [manuscripts, setManuscripts] = useState<Record<string, Manuscript[]>>({})
   const [expanding, setExpanding] = useState<string | null>(null)
+  const [selectedCorpus, setSelectedCorpus] = useState<Corpus | null>(null)
 
   useEffect(() => {
     fetchCorpora()
@@ -29,7 +39,8 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
   }, [])
 
   const handleCorpusClick = async (corpus: Corpus) => {
-    // Si déjà chargé, naviguer directement si un seul manuscrit
+    setSelectedCorpus(corpus)
+
     const cached = manuscripts[corpus.id]
     if (cached) {
       if (cached.length === 1) onOpenManuscript(cached[0].id, corpus.profile_id)
@@ -42,95 +53,171 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
       setManuscripts((prev) => ({ ...prev, [corpus.id]: ms }))
       if (ms.length === 1) onOpenManuscript(ms[0].id, corpus.profile_id)
     } catch {
-      // Échec silencieux — la liste reste vide
+      // silent
     } finally {
       setExpanding(null)
     }
   }
 
+  // ── Loading state ───────────────────────────────────────────────────
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-screen text-stone-500">
-        Chargement…
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="IIIF Studio" className="w-72">
+          <div className="p-4 text-retro-sm text-center">
+            Chargement...
+          </div>
+        </RetroWindow>
       </div>
     )
   }
 
+  // ── Error state ─────────────────────────────────────────────────────
   if (error) {
     return (
-      <div className="p-8 text-red-600">
-        Erreur : {error}
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Erreur" className="w-80">
+          <div className="p-4 text-retro-sm">
+            <p className="font-bold mb-2">Erreur de connexion</p>
+            <p className="text-retro-xs">{error}</p>
+          </div>
+        </RetroWindow>
       </div>
     )
   }
 
+  const selectedMs = selectedCorpus ? manuscripts[selectedCorpus.id] : undefined
+
   return (
-    <div className="min-h-screen bg-stone-50">
-      <header className="bg-stone-900 text-stone-100 px-8 py-6 flex items-start justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">IIIF Studio</h1>
-          <p className="text-stone-400 text-sm mt-1">
-            Plateforme de génération d'éditions savantes augmentées
-          </p>
+    <div className="min-h-screen bg-retro-dither flex flex-col">
+      {/* ── Menu bar (top of screen) ─────────────────────────────── */}
+      <RetroMenuBar
+        items={[
+          { label: 'IIIF Studio' },
+          { label: 'Fichier' },
+          { label: 'Corpus' },
+          { label: 'Aide' },
+        ]}
+        right={
+          <div className="flex items-center gap-1">
+            <SearchBar onSelectResult={onOpenPage ? (r) => onOpenPage(r.page_id) : undefined} />
+            <AdminNav onClick={onAdmin} />
+          </div>
+        }
+      />
+
+      {/* ── Desktop area ─────────────────────────────────────────── */}
+      <div className="flex-1 flex flex-col">
+
+        {/* ── Corpus list window (center) ──────────────────────── */}
+        <div className="flex-1 flex items-start justify-center p-6 gap-4">
+          <RetroWindow
+            title="Corpus disponibles"
+            statusBar={`${corpora.length} corpus enregistre${corpora.length > 1 ? 's' : ''}`}
+            className="w-full max-w-2xl"
+            scrollable
+          >
+            {corpora.length === 0 ? (
+              <div className="p-4 text-retro-sm text-retro-darkgray">
+                Aucun corpus enregistre. Creez-en un via Administration.
+              </div>
+            ) : (
+              <div className="divide-y divide-retro-gray">
+                {corpora.map((corpus) => (
+                  <div key={corpus.id}>
+                    <button
+                      onClick={() => void handleCorpusClick(corpus)}
+                      className={`
+                        w-full text-left px-3 py-[6px] flex items-center gap-3
+                        text-retro-sm font-retro
+                        ${selectedCorpus?.id === corpus.id
+                          ? 'bg-retro-select text-retro-select-text'
+                          : 'hover:bg-retro-select hover:text-retro-select-text'
+                        }
+                      `}
+                    >
+                      <span className="text-[18px] leading-none shrink-0">
+                        {PROFILE_GLYPHS[corpus.profile_id] || '\u{1F4C1}'}
+                      </span>
+                      <div className="flex-1 min-w-0">
+                        <div className="font-bold truncate">{corpus.title}</div>
+                        <div className={`text-retro-xs truncate ${
+                          selectedCorpus?.id === corpus.id ? 'opacity-70' : 'text-retro-darkgray'
+                        }`}>
+                          {corpus.profile_id} — {corpus.slug}
+                        </div>
+                      </div>
+                    </button>
+
+                    {expanding === corpus.id && (
+                      <div className="px-3 py-1 text-retro-xs text-retro-darkgray bg-retro-light">
+                        Chargement...
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </RetroWindow>
+
+          {/* ── Manuscripts sub-window (appears when a corpus has multiple) ── */}
+          {selectedMs && selectedMs.length > 1 && selectedCorpus && (
+            <RetroWindow
+              title={`Manuscrits — ${selectedCorpus.title}`}
+              onClose={() => setSelectedCorpus(null)}
+              statusBar={`${selectedMs.length} manuscrit${selectedMs.length > 1 ? 's' : ''}`}
+              className="w-80"
+              scrollable
+            >
+              <div className="divide-y divide-retro-gray">
+                {selectedMs.map((ms) => (
+                  <button
+                    key={ms.id}
+                    onClick={() => onOpenManuscript(ms.id, selectedCorpus.profile_id)}
+                    className="
+                      w-full text-left px-3 py-[6px]
+                      text-retro-sm font-retro
+                      hover:bg-retro-select hover:text-retro-select-text
+                    "
+                  >
+                    <div className="font-bold truncate">{ms.title}</div>
+                    {ms.total_pages > 0 && (
+                      <div className="text-retro-xs text-retro-darkgray">
+                        {ms.total_pages} pages
+                      </div>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </RetroWindow>
+          )}
         </div>
-        <div className="flex items-center gap-4">
-          <SearchBar onSelectResult={onOpenPage ? (r) => onOpenPage(r.page_id) : undefined} />
-          <AdminNav onClick={onAdmin} />
+
+        {/* ── Desktop icons (bottom dock) ────────────────────────── */}
+        <div
+          className="
+            shrink-0 flex items-end justify-center gap-1 px-4 py-3
+            border-t-retro border-retro-black
+            bg-retro-gray
+            shadow-retro-outset
+          "
+        >
+          {corpora.map((corpus) => (
+            <RetroIcon
+              key={corpus.id}
+              glyph={PROFILE_GLYPHS[corpus.profile_id] || '\u{1F4C1}'}
+              label={corpus.slug}
+              selected={selectedCorpus?.id === corpus.id}
+              onClick={() => void handleCorpusClick(corpus)}
+            />
+          ))}
+          {corpora.length === 0 && (
+            <div className="text-retro-xs text-retro-darkgray py-2">
+              Aucun corpus
+            </div>
+          )}
         </div>
-      </header>
-
-      <main className="max-w-3xl mx-auto py-10 px-8">
-        <h2 className="text-sm font-semibold text-stone-500 uppercase tracking-wide mb-6">
-          Corpus disponibles
-        </h2>
-
-        {corpora.length === 0 ? (
-          <p className="text-stone-400 text-sm">
-            Aucun corpus enregistré. Créez-en un via{' '}
-            <code className="bg-stone-200 px-1 rounded text-xs">POST /api/v1/corpora</code>.
-          </p>
-        ) : (
-          <ul className="space-y-3">
-            {corpora.map((corpus) => (
-              <li key={corpus.id}>
-                <button
-                  onClick={() => void handleCorpusClick(corpus)}
-                  className="w-full text-left bg-white border border-stone-200 rounded-lg px-6 py-4 hover:border-stone-400 hover:shadow-sm transition-all"
-                >
-                  <div className="font-medium text-stone-900">{corpus.title}</div>
-                  <div className="text-xs text-stone-400 mt-1">
-                    Profil : {corpus.profile_id} · Slug : {corpus.slug}
-                  </div>
-                </button>
-
-                {expanding === corpus.id && (
-                  <div className="mt-2 ml-4 text-xs text-stone-400">Chargement…</div>
-                )}
-
-                {manuscripts[corpus.id] && manuscripts[corpus.id].length > 1 && (
-                  <ul className="mt-2 ml-4 space-y-1">
-                    {manuscripts[corpus.id].map((ms) => (
-                      <li key={ms.id}>
-                        <button
-                          onClick={() => onOpenManuscript(ms.id, corpus.profile_id)}
-                          className="text-sm text-stone-600 hover:text-stone-900 hover:underline text-left"
-                        >
-                          {ms.title}
-                          {ms.total_pages > 0 && (
-                            <span className="text-stone-400 ml-1">
-                              ({ms.total_pages} pages)
-                            </span>
-                          )}
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </li>
-            ))}
-          </ul>
-        )}
-      </main>
+      </div>
     </div>
   )
 }

frontend/src/pages/Reader.tsx

@@ -15,6 +15,7 @@ import LayerPanel from '../components/LayerPanel.tsx'
 import TranscriptionPanel from '../components/TranscriptionPanel.tsx'
 import TranslationPanel from '../components/TranslationPanel.tsx'
 import CommentaryPanel from '../components/CommentaryPanel.tsx'
+import { RetroMenuBar, RetroWindow, RetroButton, RetroBadge } from '../components/retro'
 
 interface Props {
   manuscriptId: string
@@ -34,7 +35,6 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  // Chargement initial : liste des pages + profil
   useEffect(() => {
     Promise.all([fetchPages(manuscriptId), fetchProfile(profileId)])
       .then(([pgs, prof]) => {
@@ -47,7 +47,6 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
       .finally(() => setLoading(false))
   }, [manuscriptId, profileId])
 
-  // Chargement du master.json à chaque changement de page
   useEffect(() => {
     if (pages.length === 0) return
     setMaster(null)
@@ -68,25 +67,38 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
     })
   }, [])
 
+  // ── Loading ─────────────────────────────────────────────────────────
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-screen text-stone-500">
-        Chargement…
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Chargement" className="w-64">
+          <div className="p-4 text-retro-sm text-center">Chargement...</div>
+        </RetroWindow>
       </div>
     )
   }
 
   if (error) {
-    return <div className="p-8 text-red-600">Erreur : {error}</div>
+    return (
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Erreur" className="w-80">
+          <div className="p-4 text-retro-sm">{error}</div>
+        </RetroWindow>
+      </div>
+    )
   }
 
   if (pages.length === 0) {
     return (
-      <div className="p-8 text-stone-500">
-        Aucune page dans ce manuscrit.{' '}
-        <button onClick={onBack} className="underline">
-          Retour
-        </button>
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Manuscrit vide" className="w-80">
+          <div className="p-4 text-retro-sm">
+            Aucune page dans ce manuscrit.
+            <div className="mt-2">
+              <RetroButton onClick={onBack}>Retour</RetroButton>
+            </div>
+          </div>
+        </RetroWindow>
       </div>
     )
   }
@@ -96,106 +108,119 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
   const regions: Region[] = master?.layout?.regions ?? []
 
   return (
-    <div className="flex flex-col h-screen bg-stone-100">
-      {/* ── Barre de navigation ─────────────────────────────────────────────── */}
-      <header className="flex items-center gap-3 bg-stone-900 text-stone-100 px-5 py-2.5 shrink-0">
-        <button
-          onClick={onBack}
-          className="text-stone-400 hover:text-stone-100 text-sm transition-colors"
-        >
-          ← Corpus
-        </button>
-        <span className="text-stone-600">|</span>
-        <span className="text-sm font-medium text-stone-200 truncate max-w-xs">
-          {profile?.label ?? profileId}
-        </span>
-
-        <div className="ml-auto flex items-center gap-2">
-          <span className="text-stone-400 text-xs">
-            {currentPage.folio_label} — {currentIndex + 1} / {pages.length}
-          </span>
-          {onEdit && (
-            <button
-              onClick={() => onEdit(currentPage.id)}
-              className="px-3 py-1 bg-amber-600 hover:bg-amber-500 rounded text-sm text-white transition-colors"
+    <div className="flex flex-col h-screen bg-retro-dither">
+      {/* ── Menu bar ───────────────────────────────────────────────── */}
+      <RetroMenuBar
+        items={[
+          { label: 'IIIF Studio', onClick: onBack },
+          { label: profile?.label ?? profileId },
+        ]}
+        right={
+          <div className="flex items-center gap-1">
+            <span className="text-retro-xs px-2">
+              {currentPage.folio_label} — {currentIndex + 1}/{pages.length}
+            </span>
+            <RetroButton
+              size="sm"
+              disabled={currentIndex === 0}
+              onClick={() => setCurrentIndex((i) => i - 1)}
             >
-              Éditer cette page
-            </button>
-          )}
-          <button
-            disabled={currentIndex === 0}
-            onClick={() => setCurrentIndex((i) => i - 1)}
-            className="px-3 py-1 bg-stone-700 hover:bg-stone-600 disabled:opacity-30 rounded text-sm transition-colors"
-          >
-            ←
-          </button>
-          <button
-            disabled={currentIndex === pages.length - 1}
-            onClick={() => setCurrentIndex((i) => i + 1)}
-            className="px-3 py-1 bg-stone-700 hover:bg-stone-600 disabled:opacity-30 rounded text-sm transition-colors"
-          >
-            →
-          </button>
-        </div>
-      </header>
-
-      {/* ── Contenu principal ───────────────────────────────────────────────── */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* Visionneuse 70% */}
-        <div className="relative flex flex-col" style={{ width: '70%' }}>
-          <Viewer imageUrl={imageUrl} onViewerReady={handleViewerReady} />
-          <RegionOverlay
-            viewer={osdViewer}
-            regions={regions}
-            onRegionClick={setSelectedRegion}
-          />
-
-          {/* Fiche région (popup) */}
-          {selectedRegion && (
-            <div className="absolute bottom-14 left-4 bg-white/95 backdrop-blur-sm rounded-lg shadow-xl border border-stone-200 p-3 max-w-xs text-xs">
-              <div className="flex items-center justify-between gap-4 mb-1.5">
-                <span className="font-semibold text-stone-800 capitalize">
-                  {selectedRegion.type.replace(/_/g, ' ')}
-                </span>
-                <button
-                  onClick={() => setSelectedRegion(null)}
-                  className="text-stone-400 hover:text-stone-700 leading-none"
-                >
-                  ✕
-                </button>
-              </div>
-              <div className="space-y-0.5 text-stone-500">
-                <div>id : <span className="font-mono">{selectedRegion.id}</span></div>
-                <div>confiance : {(selectedRegion.confidence * 100).toFixed(0)} %</div>
-                <div>bbox : [{selectedRegion.bbox.join(', ')}]</div>
+              Prev
+            </RetroButton>
+            <RetroButton
+              size="sm"
+              disabled={currentIndex === pages.length - 1}
+              onClick={() => setCurrentIndex((i) => i + 1)}
+            >
+              Next
+            </RetroButton>
+            {onEdit && (
+              <RetroButton size="sm" onClick={() => onEdit(currentPage.id)}>
+                Editer
+              </RetroButton>
+            )}
+          </div>
+        }
+      />
+
+      {/* ── Main content ───────────────────────────────────────────── */}
+      <div className="flex flex-1 overflow-hidden p-1 gap-1">
+
+        {/* ── Viewer window (left, 70%) ──────────────────────────── */}
+        <RetroWindow
+          title={`Folio ${currentPage.folio_label}`}
+          statusBar={
+            master
+              ? `${master.editorial.status} — v${master.editorial.version}`
+              : imageUrl ? 'Page non analysee' : 'Aucune image'
+          }
+          className="flex-[7] min-w-0"
+        >
+          <div className="relative w-full h-full">
+            <Viewer imageUrl={imageUrl} onViewerReady={handleViewerReady} />
+            <RegionOverlay
+              viewer={osdViewer}
+              regions={regions}
+              onRegionClick={setSelectedRegion}
+            />
+
+            {/* Region info popup */}
+            {selectedRegion && (
+              <div
+                className="
+                  absolute bottom-12 left-2
+                  border-retro border-retro-black
+                  bg-retro-white shadow-retro
+                  text-retro-xs p-2 max-w-[220px]
+                "
+              >
+                <div className="flex items-center justify-between gap-2 mb-1">
+                  <span className="font-bold capitalize">
+                    {selectedRegion.type.replace(/_/g, ' ')}
+                  </span>
+                  <button
+                    onClick={() => setSelectedRegion(null)}
+                    className="text-retro-black font-bold hover:bg-retro-black hover:text-retro-white px-1"
+                  >
+                    x
+                  </button>
+                </div>
+                <div className="space-y-[1px] text-retro-darkgray">
+                  <div>id: {selectedRegion.id}</div>
+                  <div>confiance: {(selectedRegion.confidence * 100).toFixed(0)}%</div>
+                  <div>bbox: [{selectedRegion.bbox.join(', ')}]</div>
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-          {/* Indicateur page non analysée */}
-          {!master && !loading && imageUrl && (
-            <div className="absolute top-3 left-3 bg-amber-500/90 text-white text-xs px-3 py-1 rounded-full">
-              Page non analysée
-            </div>
-          )}
-        </div>
+            {/* Not analyzed badge */}
+            {!master && !loading && imageUrl && (
+              <div className="absolute top-2 left-2">
+                <RetroBadge variant="warning">Non analysee</RetroBadge>
+              </div>
+            )}
+          </div>
+        </RetroWindow>
 
-        {/* Panneaux droite 30% */}
-        <div
-          className="flex flex-col overflow-hidden border-l border-stone-200 bg-white"
-          style={{ width: '30%' }}
+        {/* ── Right panels (30%) ─────────────────────────────────── */}
+        <RetroWindow
+          title="Analyse"
+          className="flex-[3] min-w-0"
+          scrollable
         >
-          {profile && (
-            <LayerPanel
-              activeLayers={profile.active_layers}
-              visibleLayers={visibleLayers}
-              onToggle={toggleLayer}
-            />
-          )}
+          <div className="flex flex-col">
+            {/* Layer toggles */}
+            {profile && (
+              <LayerPanel
+                activeLayers={profile.active_layers}
+                visibleLayers={visibleLayers}
+                onToggle={toggleLayer}
+              />
+            )}
 
-          <div className="flex-1 overflow-y-auto divide-y divide-stone-100">
+            {/* Content panels */}
             {master ? (
-              <>
+              <div className="divide-y divide-retro-gray">
                 <TranscriptionPanel
                   ocr={master.ocr}
                   editorial={master.editorial}
@@ -212,18 +237,17 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
                   visiblePublic={visibleLayers.has('public_commentary')}
                   visibleScholarly={visibleLayers.has('scholarly_commentary')}
                 />
-              </>
+              </div>
             ) : (
-              <div className="p-4 text-sm text-stone-400 italic">
-                {imageUrl ? (
-                  <span>Page non encore analysée par l&apos;IA.</span>
-                ) : (
-                  <span>Aucune image associée à cette page.</span>
-                )}
+              <div className="p-3 text-retro-sm text-retro-darkgray">
+                {imageUrl
+                  ? 'Page non encore analysee par l\'IA.'
+                  : 'Aucune image associee a cette page.'
+                }
               </div>
             )}
           </div>
-        </div>
+        </RetroWindow>
       </div>
     </div>
   )

frontend/tailwind.config.js

@@ -2,7 +2,53 @@
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      /* ── Retro palette ─────────────────────────────────────────── */
+      colors: {
+        retro: {
+          white:    '#ffffff',
+          light:    '#dfdfdf',
+          gray:     '#c0c0c0',
+          darkgray: '#808080',
+          black:    '#000000',
+          /* Accent for selected / active items */
+          select:   '#000080',
+          'select-text': '#ffffff',
+        },
+      },
+
+      /* ── Retro fonts ───────────────────────────────────────────── */
+      fontFamily: {
+        retro:  ['"IBM Plex Mono"', '"Courier New"', 'Courier', 'monospace'],
+        mono:   ['"IBM Plex Mono"', '"Courier New"', 'Courier', 'monospace'],
+      },
+
+      /* ── Hard drop shadows (no blur) ───────────────────────────── */
+      boxShadow: {
+        'retro':       '2px 2px 0px 0px #000000',
+        'retro-lg':    '3px 3px 0px 0px #000000',
+        /* Outset bevel (button at rest) */
+        'retro-outset': 'inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff',
+        /* Inset bevel (button pressed) */
+        'retro-inset':  'inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff',
+        /* Window inner area */
+        'retro-well':   'inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf',
+      },
+
+      /* ── Spacing / sizing tokens ───────────────────────────────── */
+      borderWidth: {
+        'retro': '2px',
+      },
+
+      fontSize: {
+        'retro-xs':  ['11px', { lineHeight: '16px' }],
+        'retro-sm':  ['12px', { lineHeight: '18px' }],
+        'retro-base': ['13px', { lineHeight: '20px' }],
+        'retro-lg':  ['15px', { lineHeight: '22px' }],
+        'retro-xl':  ['18px', { lineHeight: '26px' }],
+        'retro-2xl': ['22px', { lineHeight: '30px' }],
+      },
+    },
   },
   plugins: [],
 }