-
Profil lié dans cet arbre
-
-
- {linkedPerson?.photo ? (
-
- ) : (
-
{(linkedPerson?.firstName || userDisplayName || 'C').charAt(0).toUpperCase()}
- )}
-
-
-
- {linkedPerson ? `${linkedPerson.firstName || ''} ${linkedPerson.lastName || ''}`.trim() : userDisplayName || 'Compte'}
-
-
- {linkedPerson
- ? 'Cette personne est utilisée pour votre nom et photo de profil.'
- : 'Aucune personne liée pour le moment.'}
-
-
+
+
+
+ setQuery(event.target.value)}
+ placeholder="Chercher votre prénom"
+ autoComplete="off"
+ />
-
-
-
Je suis cette personne
-
setQuery(event.target.value)}
- placeholder="Rechercher une personne..."
- />
-
-
+
{filteredPeople.length === 0 ? (
-
Aucun résultat.
+
Personne ne correspond à cette recherche.
) : (
filteredPeople.map((person) => {
const isSelected = String(selectedPersonId) === String(person.id)
@@ -81,30 +80,29 @@ const AccountPanel = ({
)
})
)}
-
- {selectedPersonId && (
-
- )}
+
+ {selectedPersonId && (
+
+
+
+ )}
-
)
}
diff --git a/frontend/src/components/AccountScreens.css b/frontend/src/components/AccountScreens.css
new file mode 100644
index 0000000..0058537
--- /dev/null
+++ b/frontend/src/components/AccountScreens.css
@@ -0,0 +1,57 @@
+/* Accueil, connexion, création de compte, liste des arbres (DA terracotta) */
+
+.pz-auth-head { display: grid; gap: 8px; }
+.pz-auth-form { display: grid; gap: 16px; }
+.pz-auth-legal { text-align: center; }
+.pz-auth-switch { text-align: center; }
+.pz-auth-switch .pz-link { font-size: 13.5px; }
+
+.pz-auth-note {
+ margin: 0; padding: 12px 14px; border-radius: var(--pz-r-s);
+ background: var(--pz-a50); border: 1px solid var(--pz-a100);
+ font: 400 13.5px/1.5 var(--pz-sans); color: var(--pz-ink-2);
+}
+
+/* Liste des arbres */
+.pz-tree-list { display: grid; gap: 8px; }
+.pz-tree-item {
+ display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px;
+ border: 1px solid var(--pz-line); border-radius: var(--pz-r-m); background: var(--pz-surface);
+ cursor: pointer; text-align: left; transition: border-color 160ms ease, background-color 160ms ease, transform 140ms var(--pz-ease);
+}
+.pz-tree-item:active { transform: scale(.99); }
+.pz-tree-item.active { border-color: var(--pz-a300); background: var(--pz-a50); }
+@media (hover: hover) and (pointer: fine) { .pz-tree-item:hover { border-color: var(--pz-a300); } }
+.pz-tree-mono {
+ width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px;
+ background: var(--pz-a100); color: var(--pz-a700); font: 400 20px/1 var(--pz-serif);
+}
+.pz-tree-item .pz-tree-name { flex: 1; min-width: 0; font: 400 19px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pz-tree-chevron { color: var(--pz-faint); flex: none; }
+.pz-tree-empty { display: grid; gap: 4px; padding: 20px; text-align: center; border: 1px dashed var(--pz-a300); border-radius: var(--pz-r-m); background: var(--pz-a50); }
+
+.pz-account-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
+.pz-account-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
+
+.pz-delete-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font: 400 14px/1.5 var(--pz-sans); color: var(--pz-ink-2); }
+
+/* Arbre partagé (mot de passe) */
+.pz-gate-owner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--pz-r-m); background: var(--pz-a50); border: 1px solid var(--pz-a100); }
+.pz-gate-mono { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--pz-a100); color: var(--pz-a700); font: 400 18px/1 var(--pz-serif); }
+.pz-gate-owner-text { display: grid; gap: 2px; min-width: 0; }
+.pz-gate-owner-text strong { color: var(--pz-ink); font-weight: 500; }
+
+/* Fenêtre « Mon compte » (personne liée) */
+.ap-linked { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--pz-r-m); background: var(--pz-a50); border: 1px solid var(--pz-a100); }
+.ap-avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--pz-a100); color: var(--pz-a700); font: 400 20px/1 var(--pz-serif); }
+.ap-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.ap-pick { display: grid; gap: 10px; }
+.ap-list { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; padding: 4px; border: 1px solid var(--pz-line); border-radius: var(--pz-r-m); scrollbar-width: thin; scrollbar-color: var(--pz-line) transparent; }
+.ap-empty { padding: 14px; text-align: center; }
+.ap-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
+.ap-item.is-active { background: var(--pz-a50); }
+@media (hover: hover) and (pointer: fine) { .ap-item:hover { background: var(--pz-line-soft); } .ap-item.is-active:hover { background: var(--pz-a100); } }
+.ap-item-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--pz-a100); color: var(--pz-a700); font: 400 14px/1 var(--pz-serif); }
+.ap-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.ap-item-name { flex: 1; min-width: 0; font: 400 16px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ap-item-name em { font-style: italic; font-weight: 300; }
diff --git a/frontend/src/components/AddPersonButton.css b/frontend/src/components/AddPersonButton.css
index 1ae4fab..ad59fb0 100644
--- a/frontend/src/components/AddPersonButton.css
+++ b/frontend/src/components/AddPersonButton.css
@@ -8,14 +8,14 @@
height: 64px;
border-radius: 50%;
- background: rgba(247, 236, 217, 0.95);
+ background: rgba(242, 239, 234, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
- border: 2px solid rgba(166, 124, 82, 0.3);
+ border: 2px solid rgba(147, 64, 42, 0.3);
box-shadow:
- 0 8px 32px rgba(93, 82, 75, 0.25),
- 0 2px 8px rgba(93, 82, 75, 0.12);
+ 0 8px 32px rgba(42, 38, 34, 0.25),
+ 0 2px 8px rgba(42, 38, 34, 0.12);
cursor: grab;
user-select: none;
@@ -35,18 +35,18 @@
.add-person-button:hover {
transform: scale(1.12);
box-shadow:
- 0 12px 40px rgba(166, 124, 82, 0.35),
- 0 4px 12px rgba(93, 82, 75, 0.18);
- border-color: rgba(166, 124, 82, 0.5);
+ 0 12px 40px rgba(147, 64, 42, 0.35),
+ 0 4px 12px rgba(42, 38, 34, 0.18);
+ border-color: rgba(147, 64, 42, 0.5);
}
.add-person-button.dragging {
cursor: grabbing;
transform: scale(1.2) rotate(5deg);
box-shadow:
- 0 16px 48px rgba(166, 124, 82, 0.45),
- 0 6px 16px rgba(93, 82, 75, 0.25);
- border-color: rgba(166, 124, 82, 0.7);
+ 0 16px 48px rgba(147, 64, 42, 0.45),
+ 0 6px 16px rgba(42, 38, 34, 0.25);
+ border-color: rgba(147, 64, 42, 0.7);
z-index: 1100;
}
@@ -54,9 +54,9 @@
.add-person-button-icon {
font-size: 32px;
font-weight: 300;
- color: #A67C52;
+ color: #93402A;
line-height: 1;
- filter: drop-shadow(0 1px 3px rgba(93, 82, 75, 0.15));
+ filter: drop-shadow(0 1px 3px rgba(42, 38, 34, 0.15));
transition: transform 0.2s ease;
}
@@ -95,8 +95,8 @@
transform: translateY(-50%);
padding: 8px 14px;
- background: rgba(93, 82, 75, 0.95);
- color: #FEF9ED;
+ background: rgba(42, 38, 34, 0.95);
+ color: #FFFFFF;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
@@ -106,7 +106,7 @@
pointer-events: none;
transition: opacity 0.2s ease;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 4px 12px rgba(42, 38, 34, 0.2);
}
.add-person-button:hover .add-person-button-tooltip {
@@ -126,18 +126,18 @@
z-index: 1050;
padding: 10px 18px;
- background: rgba(247, 236, 217, 0.98);
+ background: rgba(242, 239, 234, 0.98);
backdrop-filter: blur(24px);
border-radius: 50px;
- border: 1px solid rgba(166, 124, 82, 0.2);
+ border: 1px solid rgba(147, 64, 42, 0.2);
font-size: 14px;
font-weight: 450;
- color: #5D524B;
+ color: #2A2622;
box-shadow:
- 0 6px 24px rgba(93, 82, 75, 0.18),
- 0 2px 8px rgba(93, 82, 75, 0.08);
+ 0 6px 24px rgba(42, 38, 34, 0.18),
+ 0 2px 8px rgba(42, 38, 34, 0.08);
animation: hintSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
diff --git a/frontend/src/components/AddPersonPanel.css b/frontend/src/components/AddPersonPanel.css
index 1029ca6..9db624c 100644
--- a/frontend/src/components/AddPersonPanel.css
+++ b/frontend/src/components/AddPersonPanel.css
@@ -1,413 +1,106 @@
/* ============================================================
- Add Person Panel - Slide-in gauche ajout de personne
- 400px desktop, 90% mobile
+ Ajouter une personne (DA terracotta)
+ Panneau flottant à gauche, de la même famille que la fiche.
+ Sur téléphone, panneau qui monte par le bas.
============================================================ */
.add-person-panel {
position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- width: 400px;
+ top: 24px;
+ left: 24px;
+ bottom: 24px;
z-index: 1050;
-
- background: rgba(254, 249, 237, 0.98);
- backdrop-filter: blur(24px);
- -webkit-backdrop-filter: blur(24px);
- border-right: 1px solid rgba(166, 124, 82, 0.15);
- box-shadow: 6px 0 32px rgba(93, 82, 75, 0.15);
-
- transform: translateX(-100%);
- transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
-
+ width: 400px;
display: flex;
flex-direction: column;
- overflow: hidden;
+ gap: 18px;
+ padding: 22px 20px 18px;
+ background: var(--pz-surface);
+ border: 1px solid var(--pz-line);
+ border-radius: var(--pz-r-l);
+ box-shadow: var(--pz-shadow-lg);
+ transform: translateX(calc(-100% - 40px));
+ opacity: 0;
+ visibility: hidden;
+ transition: transform 320ms var(--pz-ease), opacity 220ms ease, visibility 0s linear 320ms;
}
-
.add-person-panel--open {
- transform: translateX(0);
+ transform: none;
+ opacity: 1;
+ visibility: visible;
+ transition: transform 320ms var(--pz-ease), opacity 220ms ease, visibility 0s;
}
-/* --- Header --- */
+.apn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.apn-close { flex: none; margin: -6px -6px 0 0; }
-.add-person-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 20px 24px 16px;
- border-bottom: 1px solid rgba(166, 124, 82, 0.1);
- flex-shrink: 0;
-}
+.apn-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
+.apn-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 16px; align-content: start; margin: 0 -6px; padding: 2px 6px 4px; scrollbar-width: thin; scrollbar-color: var(--pz-line) transparent; }
-.add-person-header-title {
- display: flex;
- align-items: center;
- gap: 10px;
- color: #5D524B;
-}
+.apn-optional { font-weight: 400; color: var(--pz-faint); margin-left: 4px; }
+.apn-input--error { border-color: var(--pz-danger) !important; box-shadow: 0 0 0 3px var(--pz-danger-bg) !important; }
+.apn-error-text { margin: -8px 0 0; font: 500 12.5px var(--pz-sans); color: var(--pz-danger); }
-.add-person-header-title h2 {
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 18px;
- font-weight: 700;
- margin: 0;
- color: #5D524B;
-}
+.apn-section { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--pz-line-soft); }
+.apn-types .pz-tab { font-size: 13px; padding: 0 6px; }
-.add-person-close {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- border: none;
- background: transparent;
- color: #8B7355;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
-}
+.apn-relation { position: relative; }
+.apn-search { position: relative; display: flex; align-items: center; }
+.apn-search input { padding-left: 38px !important; padding-right: 36px !important; }
+.apn-search-icon { position: absolute; left: 13px; color: var(--pz-muted); pointer-events: none; }
+.apn-search-chevron { position: absolute; right: 13px; color: var(--pz-faint); pointer-events: none; }
-.add-person-close:hover {
- background: rgba(93, 82, 75, 0.1);
- color: #5D524B;
-}
-
-/* --- Form --- */
-
-.add-person-form {
- flex: 1;
- overflow-y: auto;
- padding: 20px 24px 24px;
- display: flex;
- flex-direction: column;
- gap: 16px;
-}
-
-.add-person-field {
- display: flex;
- flex-direction: column;
- gap: 6px;
-}
-
-.add-person-label {
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- font-weight: 450;
- color: #8B7355;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.add-person-required {
- color: #C0392B;
-}
-
-.add-person-input {
- padding: 10px 14px;
- border-radius: 10px;
- border: 1.5px solid rgba(166, 124, 82, 0.2);
- background: rgba(255, 255, 255, 0.6);
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- color: #5D524B;
- transition: all 0.2s ease;
- outline: none;
-}
-
-.add-person-input::placeholder {
- color: #B8A898;
-}
-
-.add-person-input:focus {
- border-color: #A67C52;
- box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.12);
-}
-
-.add-person-input--error {
- border-color: rgba(192, 57, 43, 0.5);
-}
-
-.add-person-input--error:focus {
- border-color: #C0392B;
- box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
-}
-
-.add-person-error-text {
- font-size: 14px;
- color: #C0392B;
-}
-
-.add-person-row {
- display: flex;
- gap: 12px;
-}
-
-.add-person-row .add-person-field {
- flex: 1;
-}
-
-/* --- Section Relations --- */
-
-.add-person-section {
- margin-top: 8px;
- padding-top: 16px;
- border-top: 1px solid rgba(166, 124, 82, 0.1);
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
-
-.add-person-section-title {
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- font-weight: 700;
- color: #5D524B;
- margin: 0;
-}
-
-/* Relation type pills */
-.relation-type-pills {
- display: flex;
- gap: 6px;
- flex-wrap: wrap;
-}
-
-.relation-type-pill {
- padding: 5px 12px;
- border-radius: 20px;
- border: 1.5px solid rgba(166, 124, 82, 0.2);
- background: transparent;
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- font-weight: 450;
- color: #8B7355;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.relation-type-pill:hover {
- border-color: rgba(166, 124, 82, 0.4);
- background: rgba(166, 124, 82, 0.05);
-}
-
-.relation-type-pill--active {
- border-color: #A67C52;
- background: rgba(166, 124, 82, 0.1);
- color: #A67C52;
-}
-
-/* Relation search */
-.relation-search-wrapper {
- position: relative;
-}
-
-.relation-search-icon {
+.apn-dropdown {
position: absolute;
- left: 12px;
- top: 50%;
- transform: translateY(-50%);
- color: #B8A898;
- pointer-events: none;
-}
-
-.relation-search-input {
- padding-left: 32px !important;
- padding-right: 28px !important;
-}
-
-.relation-search-chevron {
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- color: #B8A898;
- pointer-events: none;
-}
-
-/* Relation dropdown */
-.relation-dropdown-wrapper {
- position: relative;
-}
-
-.relation-dropdown-list {
- position: absolute;
- top: 100%;
+ top: calc(100% + 6px);
left: 0;
right: 0;
- z-index: 10;
- margin: 4px 0 0;
- padding: 4px;
+ z-index: 5;
list-style: none;
- background: rgba(254, 249, 237, 0.99);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(166, 124, 82, 0.2);
- border-radius: 12px;
- box-shadow: 0 8px 24px rgba(93, 82, 75, 0.15);
- max-height: 200px;
+ margin: 0;
+ padding: 5px;
+ max-height: 260px;
overflow-y: auto;
+ background: var(--pz-surface);
+ border: 1px solid var(--pz-line);
+ border-radius: var(--pz-r-m);
+ box-shadow: var(--pz-shadow-lg);
+ animation: pz-rise 160ms var(--pz-ease) both;
}
+.apn-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 5px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
+@media (hover: hover) and (pointer: fine) { .apn-dropdown-item:hover { background: var(--pz-a50); } }
+.apn-avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--pz-a100); color: var(--pz-a700); font: 400 14px/1 var(--pz-serif); }
+.apn-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.apn-dropdown-name { flex: 1; min-width: 0; font: 400 16px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.apn-dropdown-name em { font-style: italic; font-weight: 300; }
+.apn-dropdown-date { flex: none; font: 400 12px var(--pz-sans); color: var(--pz-muted); font-variant-numeric: tabular-nums; }
-.relation-dropdown-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- padding: 8px 12px;
- border: none;
- background: transparent;
- border-radius: 8px;
- cursor: pointer;
- transition: background 0.15s ease;
- text-align: left;
-}
+.apn-links { display: grid; gap: 6px; }
+.apn-link { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--pz-a50); border: 1px solid var(--pz-a100); }
+.apn-link-type { flex: none; font: 500 12px var(--pz-sans); color: var(--pz-a700); }
+.apn-link-name { flex: 1; min-width: 0; font: 400 15px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.apn-link-remove { width: 30px; min-height: 30px; color: var(--pz-muted); }
-.relation-dropdown-item:hover {
- background: rgba(166, 124, 82, 0.08);
-}
-
-.relation-dropdown-name {
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- font-weight: 450;
- color: #5D524B;
-}
-
-.relation-dropdown-date {
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- color: #B8A898;
-}
-
-/* Relation tags */
-.relation-tags {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
-}
-
-.relation-tag {
- display: flex;
- align-items: center;
- gap: 6px;
- padding: 4px 6px 4px 10px;
- border-radius: 20px;
- background: rgba(166, 124, 82, 0.08);
- border: 1px solid rgba(166, 124, 82, 0.15);
-}
-
-.relation-tag-type {
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 12px;
- font-weight: 700;
- color: #A67C52;
- text-transform: uppercase;
- letter-spacing: 0.3px;
-}
-
-.relation-tag-name {
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- font-weight: 450;
- color: #5D524B;
-}
-
-.relation-tag-remove {
- width: 18px;
- height: 18px;
- border-radius: 50%;
- border: none;
- background: transparent;
- color: #8B7355;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.15s ease;
-}
-
-.relation-tag-remove:hover {
- background: rgba(192, 57, 43, 0.1);
- color: #C0392B;
-}
-
-/* --- Error --- */
-
-.add-person-error {
- padding: 10px 14px;
- border-radius: 10px;
- background: rgba(192, 57, 43, 0.08);
- border: 1px solid rgba(192, 57, 43, 0.2);
- color: #C0392B;
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
-}
-
-/* --- Actions --- */
-
-.add-person-actions {
- margin-top: auto;
- padding-top: 16px;
- border-top: 1px solid rgba(166, 124, 82, 0.1);
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-.add-person-submit {
- padding: 12px 20px;
- border-radius: 12px;
- border: none;
- background: #A67C52;
- color: #FEF9ED;
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- font-weight: 700;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.add-person-submit:hover:not(:disabled) {
- background: #96703E;
- box-shadow: 0 4px 16px rgba(166, 124, 82, 0.3);
-}
-
-.add-person-submit:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.add-person-cancel {
- padding: 10px 20px;
- border-radius: 12px;
- border: none;
- background: transparent;
- color: #8B7355;
- font-family: 'Red Hat Mono', ui-monospace, monospace;
- font-size: 14px;
- font-weight: 450;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.add-person-cancel:hover {
- background: rgba(93, 82, 75, 0.08);
- color: #5D524B;
-}
-
-/* --- Responsive Mobile --- */
+.apn-actions { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--pz-line); }
@media (max-width: 768px) {
.add-person-panel {
- width: 90vw;
- }
-
- .add-person-header {
- padding: 16px 18px 12px;
- }
-
- .add-person-form {
- padding: 16px 18px 20px;
+ top: auto;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: auto;
+ max-height: 90dvh;
+ border-radius: 26px 26px 0 0;
+ border-bottom: 0;
+ padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
+ transform: translateY(100%);
+ transition: transform 400ms var(--pz-ease-drawer), opacity 220ms ease, visibility 0s linear 400ms;
}
+ .add-person-panel--open { transform: none; transition: transform 400ms var(--pz-ease-drawer), opacity 220ms ease, visibility 0s; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .add-person-panel, .add-person-panel--open { transform: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
+ .add-person-panel--open { transition: opacity 180ms ease, visibility 0s; }
}
diff --git a/frontend/src/components/AddPersonPanel.jsx b/frontend/src/components/AddPersonPanel.jsx
index c9590b2..ba1528b 100644
--- a/frontend/src/components/AddPersonPanel.jsx
+++ b/frontend/src/components/AddPersonPanel.jsx
@@ -140,203 +140,167 @@ function AddPersonPanel({ visible, persons = [], loading = false, error = '', on
}
return (
-
-
-
-
-
Ajouter une personne
+
+
+
+
Nouvelle fiche
+
Ajouter quelqu'un
-
-
-