From e75ff5e040cfca91d1026c3d38125333c8810219 Mon Sep 17 00:00:00 2001
From: IliesAllali <pro.allali.ilies@gmail.com>
Date: Sun, 18 Oct 2026 22:43:19 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20portrait=20=C3=A0=20la=20hauteur=20des?=
 =?UTF-8?q?=20champs=20en=20modification,=20symbole=20du=20logo=20sur=20t?=
 =?UTF-8?q?=C3=A9l=C3=A9phone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fiche en modification : le portrait prend la hauteur des champs Prénom et Nom (écart compris), carré (align-self stretch + aspect-ratio 1)
- Landing, téléphone (≤ 820 px) : symbole du logo seul, nom accessible « Parenthèse, accueil » conservé

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 frontend/src/components/PersonCard.css |  5 +++++
 landing/src/App.jsx                    |  6 +++++-
 landing/src/LogoLockup.jsx             | 24 ++++++++++++++----------
 landing/src/index.css                  |  5 ++++-
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/PersonCard.css b/frontend/src/components/PersonCard.css
index a8ac8d7..a4c3709 100644
--- a/frontend/src/components/PersonCard.css
+++ b/frontend/src/components/PersonCard.css
@@ -57,6 +57,11 @@
 /* Menu du choix de source du portrait : au-dessus de la fiche (z-index 1000), sous la modale Immich (2200) */
 .pc-source-backdrop { position: fixed; inset: 0; z-index: 1100; }
 .pc-source-menu { position: fixed; z-index: 1150; min-width: 220px; }
+/* Mode modification : le portrait prend la hauteur des deux champs Prénom et Nom (écart compris) et reste carré */
+.person-card--edit-mode .pc-id { padding-top: 0; }
+.person-card--edit-mode .pc-photo-wrap { align-self: stretch; display: block; }
+.person-card--edit-mode .pc-photo-wrap > .pc-photo { width: auto; height: 100%; aspect-ratio: 1 / 1; }
+
 .pc-photo-badge {
   position: absolute; right: -6px; bottom: -6px; z-index: 1;
   width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
diff --git a/landing/src/App.jsx b/landing/src/App.jsx
index e458592..55f80ae 100644
--- a/landing/src/App.jsx
+++ b/landing/src/App.jsx
@@ -773,7 +773,11 @@ function Header({ t, onCta, loginHref, elevated }) {
   return (
     <header className={`site-nav${elevated ? ' is-elevated' : ''}`}>
       <div className="wrap nav-in">
-        <a href={t.home} aria-label={t.logoHome}><LogoLockup height={22} /></a>
+        <a href={t.home} aria-label={t.logoHome} className="site-logo">
+          {/* Sur téléphone, le symbole seul : le nom « Parenthèse » reste dans le nom accessible du lien */}
+          <LogoLockup height={22} className="lg lk lk-full" decorative />
+          <LogoLockup height={24} mark className="lg lk lk-mark" decorative />
+        </a>
         <nav aria-label="Sections">
           <a href="#comment">{t.nav.how}</a>
           <a href="#demo">{t.nav.demo}</a>
diff --git a/landing/src/LogoLockup.jsx b/landing/src/LogoLockup.jsx
index 7dbccf5..5b46c79 100644
--- a/landing/src/LogoLockup.jsx
+++ b/landing/src/LogoLockup.jsx
@@ -4,25 +4,29 @@ import { LOGO_NOM } from './logoNomPaths.js'
 // Logo de l'en-tête en SVG en ligne, pour animer son arrivée : les parenthèses s'ouvrent,
 // le rond se pose, le nom suit. Une fois par visite, décidé dans index.html (classe
 // logo-intro sur <html>), animation dans index.css. Même dessin que /logo.svg, rapport 7,541.
-export default function LogoLockup({ height = 22 }) {
+// Symbole seul (parenthèses et rond, sans le nom) : emprise mesurée sur le dessin, pour le téléphone
+export default function LogoLockup({ height = 22, mark = false, decorative = false, className = 'lg lk' }) {
+  const viewBox = mark ? '-940 -1585 1880 1680' : '-951.9 -1596.5 12857.7 1704.9'
+  const width = mark ? Math.round(height * 1880 / 1680) : Math.round(height * 7.541)
   return (
     <svg
-      className="lg lk"
-      viewBox="-951.9 -1596.5 12857.7 1704.9"
-      width={Math.round(height * 7.541)}
+      className={className}
+      viewBox={viewBox}
+      width={width}
       height={height}
       style={{ height }}
-      role="img"
-      aria-label="Parenthèse"
+      {...(decorative ? { 'aria-hidden': 'true', focusable: 'false' } : { role: 'img', 'aria-label': 'Parenthèse' })}
     >
       <g className="lk-pl"><path transform="scale(1,-1)" d={PAREN_LEFT} /></g>
       <g className="lk-pr"><path transform="scale(1,-1)" d={PAREN_RIGHT} /></g>
       <circle className="lk-dot" cx="0" cy="-744" r="424.3" />
-      <g className="lk-nom">
-        <g transform="scale(1,-1)">
-          {LOGO_NOM.map((d, i) => <path key={i} d={d} />)}
+      {!mark && (
+        <g className="lk-nom">
+          <g transform="scale(1,-1)">
+            {LOGO_NOM.map((d, i) => <path key={i} d={d} />)}
+          </g>
         </g>
-      </g>
+      )}
     </svg>
   )
 }
diff --git a/landing/src/index.css b/landing/src/index.css
index cdc3e8e..2c05c97 100644
--- a/landing/src/index.css
+++ b/landing/src/index.css
@@ -89,6 +89,7 @@ em.s { font-style: italic; font-weight: 300; }
 }
 @media (hover: hover) { .nav-in nav a:hover { background: var(--a100); } }
 .lg { display: block; width: auto; }
+.site-logo .lk-mark { display: none; }
 
 /* logo de l'en-tête (SVG en ligne) */
 .lk-pl path, .lk-pr path { fill: var(--encre); stroke: var(--encre); stroke-width: 48.1; stroke-linejoin: round; }
@@ -242,7 +243,9 @@ html.logo-intro .lk-nom { animation: lk-nom 700ms var(--ease-out) 380ms both; }
 @media (max-width: 820px) {
   .steps, .promise, .guides { grid-template-columns: 1fr; }
   .nav-in nav { display: none; }
-  /* Téléphone : icône de profil ronde à gauche de « Créer mon arbre », le texte passe en aria-label */
+  /* Téléphone : symbole du logo seul, icône de profil ronde à gauche de « Créer mon arbre », le texte passe en aria-label */
+  .site-logo .lk-full { display: none; }
+  .site-logo .lk-mark { display: block; }
   .btn.s.nav-login { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
   .nav-in { gap: 10px; }
   .nav-cta { gap: 6px; }