diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f7f3839..8aa19fc 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3535,6 +3535,7 @@ function App() {
         userDisplayName={accountDisplayName}
         userEmail={accountEmail}
         userAvatarPhoto={accountAvatarPhoto}
+        userAvatarCrop={linkedSelfPerson?.avatarCrop ?? null}
         linkedPersonName={linkedSelfPerson ? `${linkedSelfPerson.firstName || ''} ${linkedSelfPerson.lastName || ''}`.trim() : ''}
         activeTreeName={activeAccountTreeName}
         annotationTools={editMode.isActive ? {
diff --git a/frontend/src/components/AccountPanel.jsx b/frontend/src/components/AccountPanel.jsx
index 0302b9c..3b3bb84 100644
--- a/frontend/src/components/AccountPanel.jsx
+++ b/frontend/src/components/AccountPanel.jsx
@@ -3,6 +3,7 @@ import { X } from 'lucide-react'
 import './AccountScreens.css'
 import { t } from '../i18n/index.js'
 import { initialOf } from '../utils/initial.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 const AccountPanel = ({
   visible,
@@ -51,7 +52,7 @@ const AccountPanel = ({
 
         <div className="ap-linked">
           <span className="ap-avatar" aria-hidden="true">
-            {linkedPerson?.photo ? <img src={linkedPerson.photo} alt="" /> : initialOf(linkedPerson?.firstName || userDisplayName, 'C')}
+            {linkedPerson?.photo ? <PortraitThumb src={linkedPerson.photo} crop={linkedPerson.avatarCrop} /> : initialOf(linkedPerson?.firstName || userDisplayName, 'C')}
           </span>
           <p className="pz-small">
             {linkedPerson
@@ -87,7 +88,7 @@ const AccountPanel = ({
                     onClick={() => onSelectPerson?.(person.id)}
                   >
                     <span className="ap-item-avatar" aria-hidden="true">
-                      {person.photo ? <img src={person.photo} alt="" /> : initialOf(person.firstName)}
+                      {person.photo ? <PortraitThumb src={person.photo} crop={person.avatarCrop} /> : initialOf(person.firstName)}
                     </span>
                     <span className="ap-item-name">{person.firstName} <em>{person.lastName || ''}</em></span>
                     {isSelected && <span className="pz-tag pz-tag--accent">{t("C'est moi")}</span>}
diff --git a/frontend/src/components/AddPersonPanel.jsx b/frontend/src/components/AddPersonPanel.jsx
index a1c6fb5..4cb1dce 100644
--- a/frontend/src/components/AddPersonPanel.jsx
+++ b/frontend/src/components/AddPersonPanel.jsx
@@ -8,6 +8,7 @@ import { firstNameLabel } from '../utils/personName.js'
 import { SEX_CHOICES } from '../utils/personSex.js'
 import { initialOf } from '../utils/initial.js'
 import { findLikelyDuplicates } from '../utils/duplicates.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 // Titre traduit d'un bloc : le passage entre <em> et </em> garde son italique
 function withEmphasis(text) {
@@ -392,7 +393,7 @@ function AddPersonPanel({ visible, persons = [], loading = false, error = '', on
                     <li key={p.id}>
                       <button type="button" className="apn-dropdown-item" onClick={() => handleAddRelation(p)}>
                         <span className="apn-avatar" aria-hidden="true">
-                          {p.photo ? <img src={p.photo} alt="" /> : initialOf(p.firstName)}
+                          {p.photo ? <PortraitThumb src={p.photo} crop={p.avatarCrop} /> : initialOf(p.firstName)}
                         </span>
                         <span className="apn-dropdown-name">{firstNameLabel(p)} <em>{p.lastName || ''}</em></span>
                         {(p.birthYear || p.birthDate) && (
diff --git a/frontend/src/components/FamilyOnboarding.jsx b/frontend/src/components/FamilyOnboarding.jsx
index 958f5fe..293c925 100644
--- a/frontend/src/components/FamilyOnboarding.jsx
+++ b/frontend/src/components/FamilyOnboarding.jsx
@@ -3,6 +3,7 @@ import { ImagePlus, Search, UserPlus, X } from 'lucide-react'
 import './FamilyOnboarding.css'
 import { t } from '../i18n/index.js'
 import { HELP_URL } from '../utils/siteLinks.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 // Carte d'accueil de la famille qui arrive par le lien : ce qu'on peut faire, en deux phrases
 export function FamilyWelcome({ visible, treeName, onAddSouvenir, onLook }) {
@@ -117,7 +118,7 @@ export function SouvenirPicker({ visible, persons = [], rootPersonId = null, onP
             <li key={person.id}>
               <button type="button" className="fo-person" onClick={() => onPick?.(person)}>
                 <span className="fo-thumb" aria-hidden="true">
-                  {person.photo ? <img src={person.photo} alt="" /> : <span>{person.firstName?.[0] || '?'}</span>}
+                  {person.photo ? <PortraitThumb src={person.photo} crop={person.avatarCrop} /> : <span>{person.firstName?.[0] || '?'}</span>}
                 </span>
                 <span className="fo-name">
                   <strong>{person.firstName} {person.lastName}</strong>
diff --git a/frontend/src/components/MediaPeople.jsx b/frontend/src/components/MediaPeople.jsx
index 8af404a..4ad578f 100644
--- a/frontend/src/components/MediaPeople.jsx
+++ b/frontend/src/components/MediaPeople.jsx
@@ -3,6 +3,7 @@ import { Check, Search, UserPlus, X } from 'lucide-react'
 import { t } from '../i18n/index.js'
 import { firstNameLabel, fullNameLabel } from '../utils/personName.js'
 import './MediaPeople.css'
+import PortraitThumb from './PortraitThumb.jsx'
 
 const MAX_RESULTS = 6
 
@@ -10,7 +11,7 @@ const normalize = (value) => String(value || '').normalize('NFD').replace(/[̀-
 
 function PersonAvatar({ person }) {
   return person?.photo
-    ? <img className="mp-avatar" src={person.photo} alt="" />
+    ? <PortraitThumb className="mp-avatar" src={person.photo} crop={person.avatarCrop} />
     : <span className="mp-avatar mp-avatar--initial" aria-hidden="true">{person?.firstName?.[0] || '?'}</span>
 }
 
diff --git a/frontend/src/components/MediaViewer.jsx b/frontend/src/components/MediaViewer.jsx
index 1080004..f397af7 100644
--- a/frontend/src/components/MediaViewer.jsx
+++ b/frontend/src/components/MediaViewer.jsx
@@ -15,6 +15,7 @@ import { eventTitle } from '../utils/lifeTimeline.js'
 import { getAccountErrorMessage } from '../utils/errorMessages.js'
 import { growFromTransform, takeOrigin } from '../utils/openOrigin.js'
 import { useSheetDrag, useSheetMode } from '../hooks/useSheetDrag.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 const HTTP_URL_RE = /^https?:\/\/\S+$/i
 const MAX_TITLE_LENGTH = 280
@@ -648,7 +649,7 @@ const MediaViewer = ({
           <div className="mv-meta">
             <span className="mv-person">
               {person?.photo ? (
-                <img className="mv-person-avatar" src={person.photo} alt="" />
+                <PortraitThumb className="mv-person-avatar" src={person.photo} crop={person.avatarCrop} />
               ) : (
                 <span className="mv-person-avatar mv-person-initial">{person?.firstName?.[0] || '?'}</span>
               )}
diff --git a/frontend/src/components/PersonCard.jsx b/frontend/src/components/PersonCard.jsx
index 7b3d23f..1a4c7a3 100644
--- a/frontend/src/components/PersonCard.jsx
+++ b/frontend/src/components/PersonCard.jsx
@@ -25,6 +25,7 @@ import { normalizeSex, SEX_CHOICES } from '../utils/personSex.js'
 import { ProposalBanner } from './ProposalCard.jsx'
 import { initialsOf } from '../utils/initial.js'
 import { blurPlaceholder } from '../utils/blurhash.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 // Aucune modification en cours (référence stable)
 const NO_EDITS = Object.freeze({})
@@ -647,7 +648,7 @@ const PersonCard = ({
   const renderRelationRow = (target, relationType, meta, removable = true) => (
     <div key={`${relationType}-${target?.id}`} className="pc-rel-row">
       <span className="pc-rel-avatar" aria-hidden="true">
-        {target?.photo ? <img src={target.photo} alt="" /> : <span>{target?.firstName?.[0] || '?'}</span>}
+        {target?.photo ? <PortraitThumb src={target.photo} crop={target.avatarCrop} /> : <span>{target?.firstName?.[0] || '?'}</span>}
       </span>
       <span className="pc-rel-name">{target ? fullNameLabel(target) : ''}</span>
       {meta && <span className="pc-rel-meta">{meta}</span>}
@@ -1353,7 +1354,7 @@ const RelationSearchInline = forwardRef(function RelationSearchInline(
             <li key={p.id}>
               <button type="button" className="pc-search-item" onClick={() => onSelect(p)}>
                 <span className="pc-rel-avatar" aria-hidden="true">
-                  {p.photo ? <img src={p.photo} alt="" /> : <span>{p.firstName[0]}</span>}
+                  {p.photo ? <PortraitThumb src={p.photo} crop={p.avatarCrop} /> : <span>{p.firstName[0]}</span>}
                 </span>
                 <span className="pc-rel-name">{firstNameLabel(p)} <em>{p.lastName || ''}</em></span>
                 {p.birthYear && <span className="pc-rel-meta">{p.birthYear}</span>}
diff --git a/frontend/src/components/PortraitThumb.css b/frontend/src/components/PortraitThumb.css
new file mode 100644
index 0000000..8e0064d
--- /dev/null
+++ b/frontend/src/components/PortraitThumb.css
@@ -0,0 +1,5 @@
+/* Cadre de la miniature : remplit son conteneur, sauf si une classe passée (mp-avatar, nav-avatar-photo…) en décide
+   autrement. :where ne pèse rien, la classe passée l'emporte toujours. */
+:where(.portrait-thumb) { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; }
+.portrait-thumb { overflow: hidden; }
+.portrait-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
diff --git a/frontend/src/components/PortraitThumb.jsx b/frontend/src/components/PortraitThumb.jsx
new file mode 100644
index 0000000..544ac07
--- /dev/null
+++ b/frontend/src/components/PortraitThumb.jsx
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+import { imagePlacement } from '../utils/portraitCrop.js'
+import './PortraitThumb.css'
+
+// Portrait en miniature (listes, puces, visionneuse, menu du compte) avec le recadrage enregistré :
+// le même cadrage que la fiche et l'arbre (portraitCrop.js). Le cadre est carré ; l'image se place
+// une fois sa taille connue, et reste en « cover » centré jusque-là ou sans cadrage.
+export default function PortraitThumb({ src, crop = null, alt = '', className = '' }) {
+  const [size, setSize] = useState(null)
+  useEffect(() => { setSize(null) }, [src])
+  const placement = size && crop ? imagePlacement(size.w, size.h, 1, crop) : null
+  const style = placement
+    ? { position: 'absolute', maxWidth: 'none', left: `${placement.left}%`, top: `${placement.top}%`, width: `${placement.width}%`, height: `${placement.height}%` }
+    : undefined
+  return (
+    <span className={`portrait-thumb${className ? ` ${className}` : ''}`}>
+      <img
+        src={src}
+        alt={alt}
+        onLoad={(event) => setSize({ w: event.currentTarget.naturalWidth, h: event.currentTarget.naturalHeight })}
+        style={style}
+      />
+    </span>
+  )
+}
diff --git a/frontend/src/components/SearchSourcesPanel.jsx b/frontend/src/components/SearchSourcesPanel.jsx
index cd5f932..c9b176a 100644
--- a/frontend/src/components/SearchSourcesPanel.jsx
+++ b/frontend/src/components/SearchSourcesPanel.jsx
@@ -9,6 +9,7 @@ import { SEARCH_LINKS, SEARCH_LINK_REGIONS } from '../data/searchLinks.js'
 import { changesFromResult, personFromResult } from '../utils/searchResultChanges.js'
 import { fullNameLabel } from '../utils/personName.js'
 import Skeleton from './Skeleton.jsx'
+import PortraitThumb from './PortraitThumb.jsx'
 
 // Ce que chaque source interrogée couvre et ce qui part vers elle : affiché avant qu'on coche
 const SOURCE_INFO = {
@@ -387,7 +388,7 @@ function SearchSourcesPanel({ visible, treeId, token, persons = [], canApply = f
                         {candidates.map(({ person, yearOff }) => (
                           <li key={person.id}>
                             <button type="button" className={`apn-dropdown-item${picker.relative?.id === person.id ? ' is-selected' : ''}`} aria-pressed={picker.mode === 'new' ? picker.relative?.id === person.id : undefined} onClick={() => handlePick(person)} disabled={picker.saving}>
-                              <span className="apn-avatar" aria-hidden="true">{person.photo ? <img src={person.photo} alt="" /> : (person.firstName || '?').charAt(0)}</span>
+                              <span className="apn-avatar" aria-hidden="true">{person.photo ? <PortraitThumb src={person.photo} crop={person.avatarCrop} /> : (person.firstName || '?').charAt(0)}</span>
                               <span className="apn-dropdown-name">{person.firstName} <em>{person.lastName}</em></span>
                               <span className={`apn-dropdown-date${yearOff && picker.mode === 'existing' ? ' sp-year-off' : ''}`} title={yearOff && picker.mode === 'existing' ? t("Pas la même année de naissance que ce résultat") : undefined}>{personYears(person)}</span>
                             </button>
diff --git a/frontend/src/components/navbar/ContextualNavbar.jsx b/frontend/src/components/navbar/ContextualNavbar.jsx
index 0fa2d43..d2538a5 100644
--- a/frontend/src/components/navbar/ContextualNavbar.jsx
+++ b/frontend/src/components/navbar/ContextualNavbar.jsx
@@ -13,6 +13,7 @@ import { PHONE_QUERY } from '../../utils/sheetDrag'
 import './ContextualNavbar.css'
 import { initialOf } from '../../utils/initial.js'
 import Kbd from '../Kbd.jsx'
+import PortraitThumb from '../PortraitThumb.jsx'
 
 const ANNOT_TOOLS = [
   { id: 'pointer', label: t('Sélection'), Icon: MousePointer2 },
@@ -42,6 +43,7 @@ function ContextualNavbar({
   userDisplayName = '',
   userEmail = '',
   userAvatarPhoto = '',
+  userAvatarCrop = null,
   linkedPersonName = '',
   activeTreeName = '',
   onEditClick,
@@ -399,7 +401,7 @@ function ContextualNavbar({
                 {!authenticated ? (
                   <User size={20} strokeWidth={2} aria-hidden="true" />
                 ) : userAvatarPhoto ? (
-                  <img className="nav-avatar-photo" src={userAvatarPhoto} alt="" />
+                  <PortraitThumb className="nav-avatar-photo" src={userAvatarPhoto} crop={userAvatarCrop} />
                 ) : (
                   <span className="nav-avatar-initial" aria-hidden="true">{avatarInitial}</span>
                 )}
diff --git a/frontend/src/components/search/SearchResultsDropdown.jsx b/frontend/src/components/search/SearchResultsDropdown.jsx
index edf46fc..727c6ee 100644
--- a/frontend/src/components/search/SearchResultsDropdown.jsx
+++ b/frontend/src/components/search/SearchResultsDropdown.jsx
@@ -1,6 +1,7 @@
 import './SearchResultsDropdown.css'
 import { t } from '../../i18n/index.js'
 import { firstNameLabel } from '../../utils/personName.js'
+import PortraitThumb from '../PortraitThumb.jsx'
 
 // Raison du match renvoyée par usePersonSearch (valeur française), traduite à l'affichage
 const REASON_LABELS = {
@@ -58,7 +59,7 @@ function SearchResultsDropdown({
             {/* Photo miniature */}
             <div className="search-result-thumb">
               {person.photo ? (
-                <img src={person.photo} alt="" />
+                <PortraitThumb src={person.photo} crop={person.avatarCrop} />
               ) : (
                 <div className="search-result-initials">
                   {person.firstName?.[0] || '?'}