/* ============================================================
   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: 24px;
  left: 24px;
  bottom: 24px;
  z-index: 1050;
  width: 400px;
  display: flex;
  flex-direction: column;
  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: none;
  opacity: 1;
  visibility: visible;
  transition: transform 320ms var(--pz-ease), opacity 220ms ease, visibility 0s;
}

.apn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.apn-close { flex: none; margin: -6px -6px 0 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; }

.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); }

.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; }
/* Sexe : quatre choix, chacun sur une ligne même dans la colonne étroite du panneau */
.apn-sex .pz-tab { white-space: nowrap; padding: 0 4px; }

.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; }

.apn-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  list-style: none;
  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; }

.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); }

.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 {
    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; }
}

/* Décédé(e) sans date connue (issue #77) */
.apn-deceased { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font: 400 13px var(--pz-sans); color: var(--pz-ink-2); cursor: pointer; }
.apn-deceased input { width: 15px; height: 15px; accent-color: var(--pz-a500); }
/* Case sous une ligne de deux champs (« Je ne connais pas son prénom », « Décédé(e), date inconnue ») : sur une ligne,
   sous les deux champs sur ordinateur, sous son champ sur téléphone (ordre du DOM) */
.apn-row > .apn-row-check { grid-column: 1 / -1; grid-row: 2; margin-top: -6px; white-space: nowrap; justify-self: start; }
@media (max-width: 480px) { .apn-row > .apn-row-check { grid-row: auto; } }

/* Colonnes alignées en haut : la case « décédé(e) » sous le décès ne décale pas la naissance */
.apn-row { align-items: start; }

/* Titre de section en casse normale (pas de sur-titre en capitales dans le panneau d'ajout) */
.apn-section-title { font: 500 14px/1.3 var(--pz-sans); color: var(--pz-ink); margin: 0 0 10px; }