/* =========================================================
   IAGen — Tree V2
   ========================================================= */

.tree-v2-page {
  --tree-bg: #f5f7fb;
  --tree-card: #ffffff;
  --tree-border: #dfe5ec;
  --tree-text: #1e293b;
  --tree-muted: #64748b;

  --tree-root: #16a34a;
  --tree-father: #2563eb;
  --tree-mother: #db2777;
  --tree-partner: #7c3aed;
  --tree-child: #0891b2;

  background: var(--tree-bg);
}


/* =========================================================
   Application
   ========================================================= */

#tree-v2-app {
  min-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}


/* =========================================================
   Header
   ========================================================= */

.tree-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 22px;

  background: var(--tree-card);
  border-bottom: 1px solid var(--tree-border);

  position: sticky;
  top: 0;
  z-index: 20;
}

.tree-v2-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tree-v2-title-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tree-muted);
}

.tree-v2-title strong {
  font-size: 1.05rem;
  color: var(--tree-text);
}

.tree-v2-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tree-v2-tool {
  width: 36px;
  height: 36px;

  border-radius: 9px;
  border: 1px solid var(--tree-border);

  background: white;
  cursor: pointer;

  font-size: 1rem;
}

.tree-v2-tool:hover {
  background: #f1f5f9;
}

.tree-v2-current-name {
  font-size: 0.9rem;
  color: var(--tree-muted);
}


/* =========================================================
   Viewport
   ========================================================= */

#tree-v2-viewport {
  flex: 1;

  overflow: auto;

  padding:
    45px
    max(30px, calc((100vw - 1500px) / 2));

  min-height: 700px;
}

#tree-v2-tree {
  width: max-content;
  min-width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 30px;
}


/* =========================================================
   Generations
   ========================================================= */

.tree-v2-generation {
  display: flex;
  justify-content: center;
  align-items: flex-start;

  gap: 28px;
}

.tree-v2-generation-label {
  text-align: center;

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.07em;
  text-transform: uppercase;

  color: #94a3b8;

  margin-bottom: -18px;
}


/* =========================================================
   Cartes
   ========================================================= */

.tree-person {
  width: 190px;
  min-height: 92px;

  padding: 14px 14px 12px;

  background: var(--tree-card);

  border: 1px solid var(--tree-border);
  border-radius: 12px;

  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.06);

  cursor: pointer;

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease;

  position: relative;

  color: var(--tree-text);
}

.tree-person:hover {
  transform: translateY(-3px);

  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.12);
}

.tree-person-name {
  font-size: 0.94rem;
  font-weight: 750;

  line-height: 1.2;
}

.tree-person-lastname {
  text-transform: uppercase;
}

.tree-person-years {
  margin-top: 7px;

  color: var(--tree-muted);

  font-size: 0.78rem;
}

.tree-person-place {
  margin-top: 5px;

  color: var(--tree-muted);

  font-size: 0.73rem;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* =========================================================
   Types
   ========================================================= */

.tree-person.root {
  width: 220px;
  min-height: 105px;

  border: 2px solid var(--tree-root);

  box-shadow:
    0 10px 28px rgba(22, 163, 74, 0.15);
}

.tree-person.root::before {
  content: attr(data-root-label);

  position: absolute;

  top: -11px;
  left: 50%;

  transform: translateX(-50%);

  background: var(--tree-root);
  color: white;

  padding: 3px 9px;

  border-radius: 999px;

  font-size: 0.63rem;
  font-weight: 700;

  white-space: nowrap;
}

.tree-person.father {
  border-top: 3px solid var(--tree-father);
}

.tree-person.mother {
  border-top: 3px solid var(--tree-mother);
}

.tree-person.partner {
  border-top: 3px solid var(--tree-partner);
}

.tree-person.child {
  border-top: 3px solid var(--tree-child);
}

.tree-person.sibling {
  opacity: 0.92;
}


/* =========================================================
   Unknown
   ========================================================= */

.tree-person.unknown {
  cursor: default;

  opacity: 0.55;

  border-style: dashed;

  box-shadow: none;
}

.tree-person.unknown:hover {
  transform: none;
}


/* =========================================================
   Separators
   ========================================================= */

.tree-v2-line {
  width: 2px;
  height: 24px;

  background: #cbd5e1;

  border-radius: 2px;
}


/* =========================================================
   Loading
   ========================================================= */

.tree-v2-loading {
  text-align: center;

  color: var(--tree-muted);

  padding: 50px;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

  #tree-v2-viewport {
    padding: 35px 18px;
  }

  .tree-person {
    width: 165px;
  }

  .tree-person.root {
    width: 185px;
  }

  .tree-v2-generation {
    gap: 15px;
  }

}



/* =========================================================
   Tree V2 — structure généalogique
   ========================================================= */

#tree-v2-tree {
  position: relative;

  width: max-content;
  min-width: 100%;

  padding: 30px 60px 80px;
}


#tree-v2-content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 85px;
}


/* SVG de liaison */

#tree-v2-connectors {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  overflow: visible;
}


.tree-connector {
  fill: none;

  stroke: #aab6c5;
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.tree-connector.paternal {
  stroke: #8daff4;
}


.tree-connector.maternal {
  stroke: #ee8ab7;
}


.tree-connector.direct {
  stroke: #8ba99a;
  stroke-width: 2.5;
}


.tree-connector.union {
  stroke: #a78bfa;
  stroke-dasharray: 4 4;
}


.tree-connector.descendant {
  stroke: #7dbcc8;
}


/* =========================================================
   Couples
   ========================================================= */

.tree-couple {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 0;

  position: relative;
}


.tree-couple-link {
  width: 38px;
  height: 2px;

  background: #94a3b8;

  position: relative;

  flex: 0 0 38px;
}


.tree-couple-label {
  position: absolute;

  left: 50%;
  top: -27px;

  transform: translateX(-50%);

  white-space: nowrap;

  font-size: 0.65rem;

  padding: 3px 7px;

  background: white;

  border: 1px solid #ddd6fe;
  border-radius: 999px;

  color: #6d28d9;
}


/* Deux couples de grands-parents */

.tree-v2-generation {
  gap: 70px;
}


/* =========================================================
   Espacements
   ========================================================= */

.tree-v2-section {
  position: relative;

  display: flex;
  flex-direction: column;

  align-items: center;
}


.tree-v2-generation-label {
  margin-bottom: 18px;
}


/* Fratrie plus compacte */

.tree-v2-section:nth-of-type(3)
.tree-v2-generation {
  gap: 18px;
}


/* =========================================================
   Hover navigation
   ========================================================= */

.tree-person:not(.root):not(.unknown)::after {
  content: "Centrer";

  position: absolute;

  right: 8px;
  bottom: 6px;

  font-size: 0.58rem;

  color: #64748b;

  opacity: 0;

  transition: opacity 120ms ease;
}


.tree-person:not(.root):hover::after {
  opacity: 1;
}



/* =========================================================
   TREE V2 — Layout horizontal type Geneanet
   ========================================================= */

.tree-central-family-unit {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 22px;
  flex: 0 0 auto;
  position: relative;
  overflow: visible;
}

.tree-inline-partners {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  overflow: visible;
}

.tree-inline-partners-left {
  justify-content: flex-end;
}

.tree-inline-partners-right {
  justify-content: flex-start;
}

.tree-inline-partner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  overflow: visible;
}

.tree-inline-partner .tree-person.partner {
  flex: 0 0 auto;
  opacity: 1;
}

.tree-inline-union-badge {
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  z-index: 20;
  padding: 4px 9px;
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  background: #faf5ff;
  color: #6d28d9;
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.08);
}

.tree-v2-section
.tree-v2-generation {
  align-items: flex-end;
}

.tree-children-section {
  width: max-content;
  min-width: 100%;
  margin-top: 45px;
}

.tree-children-generation {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: max-content;
  overflow: visible !important;
}

.tree-children-generation
.tree-person.child {
  flex: 0 0 auto;
}

.tree-connector.union {
  stroke: #8b5cf6;
  stroke-width: 1.7;
  stroke-dasharray: none;
}

.tree-connector.descendant {
  stroke: #0891b2;
  stroke-width: 1.8;
}



/* =========================================================
   TREE V2 — génération enfants transparente
   ========================================================= */

/*
 * La section générique .tree-v2-section avait un fond/bloc
 * visuel qui passait AU-DESSUS des connecteurs SVG.
 *
 * Pour les enfants, on veut seulement les cartes et le titre.
 */
.tree-children-section {
  position: relative;

  width: max-content !important;
  min-width: 100% !important;

  margin-top: 45px !important;

  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/*
 * Le conteneur de la ligne des enfants ne doit lui non plus
 * masquer aucune branche.
 */
.tree-children-section
.tree-v2-generation {
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/* Le titre reste visible mais très léger. */
.tree-children-section
.tree-v2-generation-label {
  position: relative;
  z-index: 3;

  width: auto;

  margin-bottom: 18px;

  padding: 0;

  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}


/* Les cartes restent au-dessus des traits. */
.tree-children-generation
.tree-person {
  position: relative;
  z-index: 3;
}



/* =========================================================
   TREE V2 — connecteurs descendants propres
   ========================================================= */

/* Le mot ENFANTS n'apporte rien et traverse les branches. */
.tree-children-section
.tree-v2-generation-label {
  display: none !important;
}


/*
 * On laisse une vraie zone libre aux connecteurs
 * entre les couples et les enfants.
 */
.tree-children-section {
  margin-top: 70px !important;
}


/* Aucun panneau blanc autour de la génération */
.tree-children-section,
.tree-children-section .tree-v2-generation {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}



/* =========================================================
   Tree V2 — génération centrale sans panneau blanc
   ========================================================= */

.tree-family-section {
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  overflow: visible !important;
}


.tree-family-section
.tree-v2-generation {
  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/*
 * On conserve "FRATRIE" si tu veux le libellé,
 * mais sans rectangle.
 */
.tree-family-section
.tree-v2-generation-label {
  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}



/* =========================================================
   Tree V2 — sections Parents / Grands-parents transparentes
   ========================================================= */

/*
 * Les deux premières sections sont :
 * 1. Grands-parents
 * 2. Parents
 *
 * On conserve les cartes, les titres et les connecteurs,
 * mais on supprime le grand panneau blanc autour.
 */

#tree-v2-content
> .tree-v2-section:nth-child(1),
#tree-v2-content
> .tree-v2-section:nth-child(2) {
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  overflow: visible !important;
}


/* Au cas où le fond soit porté par la génération interne */

#tree-v2-content
> .tree-v2-section:nth-child(1)
.tree-v2-generation,

#tree-v2-content
> .tree-v2-section:nth-child(2)
.tree-v2-generation {
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/* Titres conservés, sans panneau */

#tree-v2-content
> .tree-v2-section:nth-child(1)
.tree-v2-generation-label,

#tree-v2-content
> .tree-v2-section:nth-child(2)
.tree-v2-generation-label {
  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}



/* =========================================================
   Tree V2 — titres des générations
   ========================================================= */

.tree-v2-generation-label {
  display: flex !important;
  align-items: center;
  justify-content: center;

  gap: 12px;

  width: 100%;

  margin: 0 0 20px 0 !important;

  color: #7c8ca3 !important;

  font-size: 0.67rem !important;
  font-weight: 700 !important;

  letter-spacing: 0.13em !important;
  text-transform: uppercase;

  white-space: nowrap;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* Petits traits décoratifs */

.tree-v2-generation-label::before,
.tree-v2-generation-label::after {
  content: "";

  width: 34px;
  height: 1px;

  background: #cbd5e1;

  opacity: 0.85;
}


/* FRATRIE doit de nouveau afficher son titre */

.tree-family-section
.tree-v2-generation-label {
  display: flex !important;
}


/* Le titre reste au-dessus des connecteurs */

.tree-v2-generation-label {
  position: relative;
  z-index: 4;
}



/* =========================================================
   Tree V2 — afficher le titre ENFANTS
   ========================================================= */

.tree-children-section
.tree-v2-generation-label {
  display: flex !important;
}



/* =========================================================
   Tree V2 — labels de générations au-dessus des lignes
   ========================================================= */

.tree-v2-generation-label {
  position: relative;
  z-index: 6;

  width: auto !important;

  padding: 3px 10px !important;

  background: var(--tree-bg) !important;

  border-radius: 999px;
}


/*
 * Les pseudo-lignes décoratives ne doivent pas traverser
 * les connecteurs réels.
 */
.tree-v2-generation-label::before,
.tree-v2-generation-label::after {
  display: none !important;
}



/* =========================================================
   Tree V2 — correction ciblée du label ENFANTS
   ========================================================= */

/*
 * Les labels généraux redeviennent transparents.
 */
.tree-v2-generation-label {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}


/*
 * Seul ENFANTS reçoit un fond pour masquer
 * proprement la ligne bleue derrière le texte.
 */
.tree-children-section
.tree-v2-generation-label {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  width: auto !important;

  padding: 2px 9px !important;

  background: var(--tree-bg) !important;

  border-radius: 999px;

  position: relative;
  z-index: 6;
}


/*
 * Aucun pseudo-trait décoratif sur ENFANTS.
 */
.tree-children-section
.tree-v2-generation-label::before,
.tree-children-section
.tree-v2-generation-label::after {
  display: none !important;
}



/* =========================================================
   Tree V2 — menu d'ajout sur la personne centrale
   ========================================================= */

.tree-v2-add-menu {
  position: absolute;

  right: -15px;
  top: -15px;

  z-index: 30;
}


.tree-v2-add-trigger {
  width: 31px;
  height: 31px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border:
    2px solid #ffffff;

  border-radius: 50%;

  background: #16a34a;
  color: #ffffff;

  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 4px 12px
    rgba(15, 23, 42, 0.18);
}


.tree-v2-add-trigger:hover {
  background: #15803d;

  transform:
    scale(1.06);
}


.tree-v2-add-popover {
  position: absolute;

  top: 38px;
  right: 0;

  display: none;

  width: 180px;

  padding: 6px;

  border:
    1px solid #dfe5ec;

  border-radius: 11px;

  background: #ffffff;

  box-shadow:
    0 12px 30px
    rgba(15, 23, 42, 0.16);
}


.tree-v2-add-menu.is-open
.tree-v2-add-popover {
  display: flex;

  flex-direction: column;

  gap: 2px;
}


.tree-v2-add-action {
  width: 100%;

  padding: 8px 10px;

  border: 0;
  border-radius: 7px;

  background: transparent;

  color: #334155;

  text-align: left;

  font-size: 0.78rem;
  font-weight: 600;

  cursor: pointer;
}


.tree-v2-add-action:hover {
  background: #f1f5f9;

  color: #0f172a;
}


/* =========================================================
   Modale d'ajout
   ========================================================= */

.tree-v2-relative-modal {
  position: fixed;

  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 24px;

  z-index: 10000;

  background:
    rgba(15, 23, 42, 0.45);

  backdrop-filter:
    blur(2px);
}


.tree-v2-relative-modal.is-open {
  display: flex;
}


.tree-v2-relative-dialog {
  width:
    min(620px, 100%);

  max-height:
    calc(100vh - 48px);

  overflow-y: auto;

  padding: 22px;

  border:
    1px solid #dfe5ec;

  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 24px 70px
    rgba(15, 23, 42, 0.25);
}


.tree-v2-relative-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 20px;
}


.tree-v2-relative-kicker {
  margin-bottom: 3px;

  color: #94a3b8;

  font-size: 0.66rem;
  font-weight: 750;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.tree-v2-relative-header h3 {
  margin: 0;

  color: #1e293b;

  font-size: 1.15rem;
}


.tree-v2-relative-close {
  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 8px;

  background: #f1f5f9;

  color: #64748b;

  font-size: 1.25rem;

  cursor: pointer;
}


.tree-v2-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}


.tree-v2-form-grid label,
.tree-v2-relative-child-union label {
  display: flex;

  flex-direction: column;

  gap: 5px;

  color: #475569;

  font-size: 0.73rem;
  font-weight: 650;
}


.tree-v2-form-wide {
  grid-column: 1 / -1;
}


.tree-v2-form-grid input,
.tree-v2-form-grid select,
.tree-v2-relative-child-union select {
  width: 100%;

  box-sizing: border-box;

  padding: 9px 10px;

  border:
    1px solid #cbd5e1;

  border-radius: 8px;

  background: #ffffff;

  color: #1e293b;

  font: inherit;
}


.tree-v2-form-grid input:focus,
.tree-v2-form-grid select:focus,
.tree-v2-relative-child-union select:focus {
  outline:
    2px solid
    rgba(37, 99, 235, 0.16);

  border-color: #2563eb;
}


.tree-v2-relative-union-fields,
.tree-v2-relative-child-union {
  margin-top: 20px;

  padding-top: 18px;

  border-top:
    1px solid #e2e8f0;
}


.tree-v2-relative-subtitle {
  margin-bottom: 12px;

  color: #64748b;

  font-size: 0.72rem;
  font-weight: 750;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.tree-v2-relative-error {
  margin-top: 16px;

  padding: 9px 11px;

  border-radius: 8px;

  background: #fef2f2;

  color: #b91c1c;

  font-size: 0.77rem;
}


.tree-v2-relative-actions {
  display: flex;

  justify-content: flex-end;

  gap: 9px;

  margin-top: 22px;
}


.tree-v2-relative-cancel,
.tree-v2-relative-submit {
  padding: 9px 14px;

  border-radius: 8px;

  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;
}


.tree-v2-relative-cancel {
  border:
    1px solid #cbd5e1;

  background: #ffffff;

  color: #475569;
}


.tree-v2-relative-submit {
  border:
    1px solid #15803d;

  background: #16a34a;

  color: #ffffff;
}


.tree-v2-relative-submit:disabled {
  opacity: 0.55;

  cursor: wait;
}


@media (max-width: 620px) {

  .tree-v2-form-grid {
    grid-template-columns: 1fr;
  }

  .tree-v2-form-wide {
    grid-column: auto;
  }

}



/* =========================================================
   Tree V2 — modifier une personne
   ========================================================= */

.tree-person-edit {
  position: absolute;

  top: 7px;
  right: 7px;

  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid #dbe3ec;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.94);
  color: #64748b;

  font-size: 0.75rem;
  line-height: 1;

  cursor: pointer;

  opacity: 0;

  z-index: 12;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.08);

  transition:
    opacity 120ms ease,
    transform 120ms ease,
    color 120ms ease;
}


.tree-person:hover
.tree-person-edit {
  opacity: 1;
}


.tree-person-edit:hover {
  color: #16a34a;

  border-color: #86efac;

  transform: scale(1.08);
}


/*
 * La personne centrale possède déjà le bouton +
 * dans le coin supérieur droit.
 *
 * On déplace légèrement le crayon vers la gauche.
 */
.tree-person.root
.tree-person-edit,
.tree-person.inline-root
.tree-person-edit {
  right: 28px;
}


/* Sur écran tactile : bouton toujours visible */

@media (hover: none) {
  .tree-person-edit {
    opacity: 1;
  }
}



/* =========================================================
   Tree V2 — suppression d'un individu
   ========================================================= */

.tree-v2-relative-actions {
  align-items: center;
}


.tree-v2-relative-actions-spacer {
  flex: 1;
}


.tree-v2-relative-delete {
  padding: 9px 13px;

  border: 1px solid #fecaca;
  border-radius: 8px;

  background: #fff;

  color: #dc2626;

  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;
}


.tree-v2-relative-delete:hover {
  background: #fef2f2;
  border-color: #f87171;

  color: #b91c1c;
}


.tree-v2-relative-delete:disabled {
  opacity: 0.55;
  cursor: wait;
}



/* =========================================================
   Tree V2 — bouton fiche individu
   ========================================================= */

.tree-person-profile {
  position: absolute;

  top: 7px;
  left: 7px;

  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid #dbe3ec;
  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.95);

  color: #2563eb;

  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  opacity: 0;

  z-index: 12;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.08);

  transition:
    opacity 120ms ease,
    transform 120ms ease,
    border-color 120ms ease;
}


.tree-person:hover
.tree-person-profile {
  opacity: 1;
}


.tree-person-profile:hover {
  transform: scale(1.08);

  border-color: #93c5fd;

  background: #eff6ff;
}


/* Tactile */

@media (hover: none) {

  .tree-person-profile {
    opacity: 1;
  }

}


/* =========================================================
   Tree V2 — bouton fiche individu
   ========================================================= */

.tree-person-profile {
  position: absolute;
  top: 7px;
  left: 7px;

  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid #dbe3ec;
  border-radius: 50%;

  background: #ffffff;
  color: #2563eb;

  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;

  z-index: 30;

  opacity: 1;
}

.tree-person-profile:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  transform: scale(1.08);
}



/* =========================================================
   Tree V2 — avatar
   ========================================================= */

.tree-person-avatar {
  width: 58px;
  height: 58px;

  margin:
    0 auto
    8px;

  overflow: hidden;

  border-radius: 8px;

  background: #f1f5f9;

  box-shadow:
    inset 0 0 0 1px
    rgba(148, 163, 184, 0.25);
}


.tree-person-avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/*
 * Avec une image, la carte peut naturellement
 * devenir légèrement plus haute.
 */
.tree-person:has(.tree-person-avatar) {
  min-height: 155px;
}

/* =========================================================
   Tree V2 — souche et ascendance directe
   ========================================================= */

/*
 * La carte doit servir de repère au badge.
 * isolation crée aussi un contexte d'empilement propre :
 * la pastille reste devant la carte en permanence.
 */
.tree-person {
  position: relative;
  isolation: isolate;
}


/* Pastille commune */




/* Souche */




/* Ancêtres directs */




/*
 * IMPORTANT :
 * aucune apparition/disparition au hover.
 * La pastille est permanente.
 */





/* =========================================================
   Tree V2 — pastilles souche / ancêtres
   ========================================================= */

/*
 * Vraie pastille DOM.
 *
 * Elle ne dépend donc plus du ::after de la carte,
 * déjà utilisé par le bouton/texte "Centrer".
 */

.tree-genealogy-pin {
  position: absolute;

  top: -8px;
  left: -8px;
  right: auto;

  width: 18px;
  height: 18px;

  display: block;

  box-sizing: border-box;

  border: 2px solid #ffffff;
  border-radius: 999px;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none;

  z-index: 1000;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.30);
}


/* Souche : jaune */

.tree-genealogy-pin-souche {
  background: #facc15;
}


/* Ancêtre direct : rouge */

.tree-genealogy-pin-ancestor {
  background: #ef4444;
}


/*
 * Aucune dépendance au hover.
 */

.tree-person:hover
.tree-genealogy-pin {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}




/* =========================================================
   Tree V2 — neutralisation anciennes pastilles ::after
   ========================================================= */

/*
 * ::after reste utilisé ailleurs pour "Centrer".
 * Les marqueurs généalogiques utilisent désormais
 * exclusivement .tree-genealogy-pin.
 */

.tree-person-souche::after,
.tree-person-direct-ancestor::after {
  content: none !important;
  display: none !important;
}


/* La vraie pastille reste toujours visible */

.tree-person-souche
.tree-genealogy-pin,
.tree-person-direct-ancestor
.tree-genealogy-pin {
  opacity: 1 !important;
  visibility: visible !important;
}


/* Placement à gauche pour ne pas gêner le bouton + */

.tree-genealogy-pin {
  left: -8px !important;
  right: auto !important;
}



/* =========================================================
   Tree V2 — empêcher la sélection de texte pendant le drag
   ========================================================= */

#tree-v2-viewport,
#tree-v2-tree,
#tree-v2-content,
.tree-person,
.tree-v2-generation,
.tree-family-generation,
.tree-children-generation {
  -webkit-user-select: none;
  user-select: none;
}


/*
 * Les champs éditables doivent évidemment rester
 * sélectionnables normalement.
 */
.tree-v2-relative-modal input,
.tree-v2-relative-modal textarea,
.tree-v2-relative-modal select,
.tree-v2-relative-modal [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}



/* =========================================================
   Tree V2 — boutons de navigation / zoom visibles
   ========================================================= */

.tree-v2-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #334155 !important;

  background: #ffffff;

  border: 1px solid #d8e0e8;

  font-size: 1rem;
  font-weight: 700;

  line-height: 1;

  box-shadow:
    0 1px 3px
    rgba(15, 23, 42, 0.06);
}


/* Icônes SVG éventuelles */

.tree-v2-tool svg {
  width: 17px;
  height: 17px;

  stroke: currentColor !important;
  fill: none;

  color: #334155 !important;
}


/* Si certaines icônes sont des caractères */

.tree-v2-tool span,
.tree-v2-tool i {
  color: #334155 !important;
}


/* Survol plus lisible */

.tree-v2-tool:hover {
  color: #0f172a !important;

  background: #f1f5f9;

  border-color: #cbd5e1;
}


/* Clic */

.tree-v2-tool:active {
  background: #e2e8f0;
}




/* =========================================================
   Tree V2 — améliorations mode sombre
   ========================================================= */

body.dark-mode .tree-v2-page,
body.dark-mode #tree-v2-viewport {
  background: #0f151c;
}

body.dark-mode .tree-v2-header {
  background: #141d26;
  border-bottom-color: #263241;
}

body.dark-mode .tree-person {
  background: #18222d;
  border-color: #334155;
  color: #f1f5f9;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28);
}

body.dark-mode .tree-person-name {
  color: #f1f5f9;
}

body.dark-mode .tree-person-years,
body.dark-mode .tree-person-place {
  color: #94a3b8;
}

body.dark-mode .tree-v2-generation-label {
  color: #b8c4d3;
}

body.dark-mode .tree-v2-tool {
  background: #18222d;
  border-color: #334155;
  color: #dbe7f3 !important;
}

body.dark-mode .tree-v2-tool:hover {
  background: #223041;
  border-color: #475569;
  color: #ffffff !important;
}

body.dark-mode .tree-inline-union-badge,
body.dark-mode .tree-couple-label {
  background: #201a2c;
  border-color: #6d4bb8;
  color: #d8c8ff;
}


/* ===== TREE V2 MODERN V3 : START ===== */

/* ============================================================
   IAGEN — TREE V2 / MODERN APPLICATION UI
   ============================================================ */

.tree-v2-page{
  --tv-bg:#f4f7f5;
  --tv-card:#ffffff;
  --tv-card-soft:#f8faf9;

  --tv-ink:#17271f;
  --tv-muted:#738078;

  --tv-line:#dce6e0;
  --tv-line-strong:#cbd9d1;

  --tv-green:#08704d;
  --tv-green-dark:#07583e;
  --tv-green-soft:#eaf5ef;

  --tv-gold:#b8934e;

  --tv-shadow:
    0 12px 34px rgba(20,54,37,.065);

  --tv-shadow-hover:
    0 19px 44px rgba(20,54,37,.115);

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(16,113,76,.055),
      transparent 30rem
    ),
    radial-gradient(
      circle at 88% 4%,
      rgba(184,147,78,.04),
      transparent 27rem
    ),
    var(--tv-bg) !important;

  color:var(--tv-ink);
}


/* ============================================================
   APPLICATION
   ============================================================ */

#tree-v2-app{
  min-height:
    calc(100vh - var(--site-header-h,68px)) !important;

  position:relative;

  background:
    transparent !important;
}


/* ============================================================
   HEADER INTERNE
   ============================================================ */

.tree-v2-header{
  position:sticky !important;

  top:0 !important;

  z-index:30 !important;

  min-height:70px;

  margin:
    14px 22px 0 !important;

  padding:
    10px 12px 10px 20px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:24px !important;

  border:
    1px solid rgba(205,219,211,.88) !important;

  border-radius:
    18px !important;

  background:
    rgba(255,255,255,.90) !important;

  box-shadow:
    0 12px 34px rgba(20,54,37,.075) !important;

  backdrop-filter:
    blur(18px) saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(18px) saturate(145%) !important;
}


/* titre */

.tree-v2-title{
  min-width:170px;

  gap:2px !important;
}


.tree-v2-title-label{
  color:
    #87948d !important;

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .61rem !important;

  font-weight:
    800 !important;

  letter-spacing:
    .13em !important;

  text-transform:
    uppercase;
}


.tree-v2-title strong{
  color:
    var(--tv-ink) !important;

  font-family:
    var(--font-display,Georgia,serif);

  font-size:
    1.18rem !important;

  font-weight:
    650 !important;

  letter-spacing:
    -.02em;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.tree-v2-toolbar{
  min-width:0;

  padding:
    5px !important;

  display:flex !important;

  align-items:center !important;

  gap:
    5px !important;

  border:
    1px solid #e1e8e4;

  border-radius:
    13px;

  background:
    #f7faf8;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75);
}


.tree-v2-tool{
  width:
    35px !important;

  height:
    35px !important;

  min-width:
    35px !important;

  padding:
    0 !important;

  display:grid !important;

  place-items:center !important;

  border:
    1px solid transparent !important;

  border-radius:
    9px !important;

  background:
    transparent !important;

  color:
    #486056 !important;

  box-shadow:
    none !important;

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .91rem !important;

  font-weight:
    750 !important;

  transition:
    transform .16s ease,
    background .16s ease,
    color .16s ease,
    border-color .16s ease !important;
}


.tree-v2-tool:hover{
  transform:
    translateY(-1px) !important;

  border-color:
    #d3e2da !important;

  background:
    #edf6f1 !important;

  color:
    var(--tv-green) !important;
}


.tree-v2-tool:active{
  transform:
    translateY(0) !important;

  background:
    #e2f0e8 !important;
}


.tree-v2-toolbar-separator{
  width:
    1px !important;

  height:
    23px !important;

  margin:
    0 3px !important;

  background:
    #dce5e0 !important;
}


/* zoom */

.tree-v2-zoom-value{
  min-width:
    58px;

  height:
    32px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:
    1px solid #dde7e1;

  border-radius:
    8px;

  background:
    #fff;

  color:
    #52635a;

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .69rem;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}


/* personne sélectionnée */

.tree-v2-current-name{
  max-width:
    260px !important;

  overflow:
    hidden;

  padding:
    0 10px;

  color:
    #617168 !important;

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .72rem !important;

  font-weight:
    650;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


/* ============================================================
   VIEWPORT
   ============================================================ */

#tree-v2-viewport{
  position:relative !important;

  flex:1 !important;

  min-height:
    calc(100vh - 170px) !important;

  margin:
    12px 14px 14px !important;

  padding:
    54px
    max(34px,calc((100vw - 1760px)/2))
    100px !important;

  overflow:
    auto !important;

  border:
    1px solid rgba(211,224,216,.72);

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(8,112,77,.055),
      transparent 32rem
    ),
    linear-gradient(
      rgba(71,105,88,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(71,105,88,.035) 1px,
      transparent 1px
    ),
    #f8faf9 !important;

  background-size:
    auto,
    34px 34px,
    34px 34px,
    auto !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8);
}


/* scrollbar du viewport */

#tree-v2-viewport{
  scrollbar-width:
    thin;

  scrollbar-color:
    #bfcfc6 transparent;
}


#tree-v2-viewport::-webkit-scrollbar{
  width:10px;
  height:10px;
}


#tree-v2-viewport::-webkit-scrollbar-thumb{
  border:
    3px solid transparent;

  border-radius:
    999px;

  background:
    #bdcdc4;

  background-clip:
    content-box;
}


/* ============================================================
   TREE CONTENT
   ============================================================ */

#tree-v2-tree{
  position:relative !important;

  width:
    max-content !important;

  min-width:
    100% !important;

  padding:
    24px 70px 90px !important;

  gap:
    36px !important;
}


#tree-v2-content{
  gap:
    92px !important;
}


/* ============================================================
   SECTIONS / GÉNÉRATIONS
   ============================================================ */

.tree-v2-section{
  position:relative;
}


.tree-v2-generation{
  gap:
    62px !important;
}


.tree-v2-generation-label{
  position:relative;

  width:
    fit-content;

  min-width:
    145px;

  margin:
    0 auto 24px !important;

  padding:
    6px 14px !important;

  border:
    1px solid #dbe6e0;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.92);

  color:
    #617168 !important;

  box-shadow:
    0 5px 15px rgba(20,54,37,.04);

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .61rem !important;

  font-weight:
    800 !important;

  letter-spacing:
    .11em !important;

  text-transform:
    uppercase;
}


/*
 * Certains anciens styles dessinent des traits décoratifs autour
 * des labels. On les neutralise pour un rendu plus moderne.
 */

.tree-v2-generation-label::before,
.tree-v2-generation-label::after{
  display:
    none !important;
}


/* ============================================================
   CARTES INDIVIDUS
   ============================================================ */

.tree-person{
  width:
    198px !important;

  min-height:
    104px !important;

  padding:
    14px 15px 13px !important;

  overflow:
    visible;

  border:
    1px solid var(--tv-line) !important;

  border-radius:
    15px !important;

  background:
    rgba(255,255,255,.96) !important;

  color:
    var(--tv-ink) !important;

  box-shadow:
    var(--tv-shadow) !important;

  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease !important;
}


.tree-person:hover{
  transform:
    translateY(-4px) !important;

  border-color:
    #bcd4c7 !important;

  background:
    #fff !important;

  box-shadow:
    var(--tv-shadow-hover) !important;
}


/* petit accent supérieur commun */

.tree-person:not(.unknown)::before{
  border-radius:
    15px 15px 0 0;
}


/* nom */

.tree-person-name{
  color:
    #182a21 !important;

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .88rem !important;

  font-weight:
    760 !important;

  line-height:
    1.22 !important;

  letter-spacing:
    -.015em;
}


.tree-person-lastname{
  color:
    #096748 !important;

  font-weight:
    820 !important;

  letter-spacing:
    .015em;
}


/* années */

.tree-person-years{
  margin-top:
    8px !important;

  color:
    #6f7d75 !important;

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .72rem !important;

  font-weight:
    600;
}


/* lieu */

.tree-person-place{
  margin-top:
    4px !important;

  color:
    #8a968f !important;

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .67rem !important;
}


/* ============================================================
   PERSONNE CENTRALE
   ============================================================ */

.tree-person.root,
.tree-person.inline-root{
  width:
    226px !important;

  min-height:
    116px !important;

  border:
    1px solid rgba(8,112,77,.46) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f3faf6
    ) !important;

  box-shadow:
    0 0 0 4px rgba(8,112,77,.055),
    0 20px 48px rgba(8,91,62,.14) !important;
}


.tree-person.root:hover,
.tree-person.inline-root:hover{
  border-color:
    rgba(8,112,77,.7) !important;

  box-shadow:
    0 0 0 5px rgba(8,112,77,.07),
    0 24px 54px rgba(8,91,62,.17) !important;
}


/* badge root */

.tree-person.root::before{
  top:
    -12px !important;

  padding:
    4px 10px !important;

  border:
    3px solid #f8faf9;

  border-radius:
    999px !important;

  background:
    var(--tv-green) !important;

  color:
    #fff !important;

  box-shadow:
    0 5px 14px rgba(8,112,77,.18);

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .58rem !important;

  font-weight:
    800 !important;

  letter-spacing:
    .04em;
}


/* ============================================================
   COULEURS DES RÔLES
   ============================================================ */

.tree-person.father{
  border-top:
    2px solid #7ca5d9 !important;
}


.tree-person.mother{
  border-top:
    2px solid #d994ad !important;
}


.tree-person.partner{
  border-top:
    2px solid #a98ac8 !important;
}


.tree-person.child{
  border-top:
    2px solid #71ad9c !important;
}


.tree-person.sibling{
  border-top:
    2px solid #b5bfb9 !important;

  opacity:
    .96 !important;
}


/* ============================================================
   INCONNUS
   ============================================================ */

.tree-person.unknown{
  opacity:
    .62 !important;

  border:
    1px dashed #b9c6bf !important;

  background:
    rgba(247,249,248,.82) !important;

  box-shadow:
    none !important;
}


/* ============================================================
   AVATARS
   ============================================================ */

.tree-person-avatar{
  border:
    2px solid rgba(255,255,255,.96) !important;

  box-shadow:
    0 3px 11px rgba(20,54,37,.12) !important;
}


/* ============================================================
   CONNECTEURS
   ============================================================ */

.tree-connector{
  stroke:
    #aebdb5 !important;

  stroke-width:
    1.55 !important;

  opacity:
    .82;
}


.tree-connector.paternal{
  stroke:
    #99b6d6 !important;
}


.tree-connector.maternal{
  stroke:
    #d7a4b7 !important;
}


.tree-connector.direct{
  stroke:
    #77a48e !important;

  stroke-width:
    1.85 !important;
}


.tree-connector.union{
  stroke:
    #b6a4c8 !important;

  stroke-width:
    1.35 !important;

  stroke-dasharray:
    4 5 !important;
}


.tree-connector.descendant{
  stroke:
    #87b6aa !important;
}


/* ============================================================
   COUPLES / UNIONS
   ============================================================ */

.tree-couple-link{
  height:
    1px !important;

  background:
    #aab9b1 !important;
}


.tree-couple-label,
.tree-inline-union-badge{
  border:
    1px solid #e1ddd2 !important;

  border-radius:
    999px !important;

  background:
    rgba(255,255,255,.96) !important;

  color:
    #846b39 !important;

  box-shadow:
    0 4px 12px rgba(52,45,30,.04);

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .58rem !important;

  font-weight:
    700;
}


/* ============================================================
   BOUTONS SUR LES CARTES
   ============================================================ */

.tree-person-edit,
.tree-person-profile,
.tree-v2-add-trigger{
  border:
    1px solid #d8e4dd !important;

  background:
    rgba(255,255,255,.94) !important;

  color:
    #507063 !important;

  box-shadow:
    0 5px 14px rgba(20,54,37,.07) !important;

  backdrop-filter:
    blur(8px);

  transition:
    transform .16s ease,
    background .16s ease,
    color .16s ease,
    border-color .16s ease !important;
}


.tree-person-edit:hover,
.tree-person-profile:hover,
.tree-v2-add-trigger:hover{
  transform:
    translateY(-1px);

  border-color:
    #b7d0c2 !important;

  background:
    #edf6f1 !important;

  color:
    var(--tv-green) !important;
}


/* ============================================================
   MENU D'AJOUT
   ============================================================ */

.tree-v2-add-popover{
  overflow:
    hidden;

  border:
    1px solid var(--tv-line) !important;

  border-radius:
    14px !important;

  background:
    rgba(255,255,255,.97) !important;

  box-shadow:
    0 20px 50px rgba(20,54,37,.14) !important;

  backdrop-filter:
    blur(14px);
}


.tree-v2-add-action{
  color:
    #344a40 !important;

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .75rem !important;

  transition:
    background .15s ease,
    color .15s ease;
}


.tree-v2-add-action:hover{
  background:
    #edf6f1 !important;

  color:
    var(--tv-green) !important;
}


/* ============================================================
   MODAL AJOUT / MODIFICATION
   ============================================================ */

.tree-v2-relative-modal{
  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);
}


.tree-v2-relative-dialog{
  border:
    1px solid #d8e4dd !important;

  border-radius:
    22px !important;

  background:
    #fff !important;

  box-shadow:
    0 30px 90px rgba(11,35,24,.24) !important;
}


.tree-v2-relative-kicker{
  color:
    var(--tv-green) !important;

  font-size:
    .62rem !important;

  letter-spacing:
    .12em !important;
}


.tree-v2-relative-header h3{
  color:
    var(--tv-ink) !important;

  font-family:
    var(--font-display,Georgia,serif);

  font-weight:
    650 !important;
}


.tree-v2-form-grid input,
.tree-v2-form-grid select,
.tree-v2-relative-child-union select{
  border:
    1px solid #d7e2dc !important;

  border-radius:
    10px !important;

  background:
    #fbfcfb !important;

  color:
    var(--tv-ink) !important;

  box-shadow:
    none !important;
}


.tree-v2-form-grid input:focus,
.tree-v2-form-grid select:focus,
.tree-v2-relative-child-union select:focus{
  border-color:
    rgba(8,112,77,.46) !important;

  box-shadow:
    0 0 0 4px rgba(8,112,77,.07) !important;
}


/* ============================================================
   LOADING
   ============================================================ */

.tree-v2-loading{
  width:
    fit-content;

  margin:
    80px auto;

  padding:
    14px 19px !important;

  border:
    1px solid #dce6e0;

  border-radius:
    12px;

  background:
    rgba(255,255,255,.9);

  color:
    #75837b !important;

  box-shadow:
    0 10px 28px rgba(20,54,37,.055);

  font-family:
    var(--font-ui,system-ui,sans-serif);

  font-size:
    .76rem;
}


/* ============================================================
   DARK MODE
   ============================================================ */

html[data-theme="dark"] .tree-v2-page,
body.dark-mode.tree-v2-page{
  --tv-bg:#101612;
  --tv-card:#17201b;
  --tv-card-soft:#141c17;

  --tv-ink:#e8f0eb;
  --tv-muted:#98a79f;

  --tv-line:#2b3931;
  --tv-line-strong:#35473d;

  background:
    #101612 !important;
}


html[data-theme="dark"] .tree-v2-header,
body.dark-mode .tree-v2-header{
  border-color:
    #2b3931 !important;

  background:
    rgba(22,31,26,.92) !important;
}


html[data-theme="dark"] .tree-v2-title strong,
body.dark-mode .tree-v2-title strong{
  color:
    #eef5f0 !important;
}


html[data-theme="dark"] .tree-v2-toolbar,
body.dark-mode .tree-v2-toolbar{
  border-color:
    #29372f;

  background:
    #121a15;
}


html[data-theme="dark"] .tree-v2-tool,
body.dark-mode .tree-v2-tool{
  color:
    #a9bbb1 !important;
}


html[data-theme="dark"] .tree-v2-tool:hover,
body.dark-mode .tree-v2-tool:hover{
  border-color:
    #355042 !important;

  background:
    #1a2c22 !important;

  color:
    #9ed5b8 !important;
}


html[data-theme="dark"] .tree-v2-zoom-value,
body.dark-mode .tree-v2-zoom-value{
  border-color:
    #2c3b33;

  background:
    #18211c;

  color:
    #abbab2;
}


html[data-theme="dark"] #tree-v2-viewport,
body.dark-mode #tree-v2-viewport{
  border-color:
    #25332b;

  background:
    linear-gradient(
      rgba(160,190,174,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(160,190,174,.025) 1px,
      transparent 1px
    ),
    #111914 !important;

  background-size:
    34px 34px,
    34px 34px,
    auto !important;
}


html[data-theme="dark"] .tree-person,
body.dark-mode .tree-person{
  border-color:
    #2d3d34 !important;

  background:
    #18211c !important;

  color:
    #e6eee9 !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.20) !important;
}


html[data-theme="dark"] .tree-person:hover,
body.dark-mode .tree-person:hover{
  border-color:
    #42604f !important;

  background:
    #1a261f !important;

  box-shadow:
    0 18px 38px rgba(0,0,0,.28) !important;
}


html[data-theme="dark"] .tree-person-name,
body.dark-mode .tree-person-name{
  color:
    #e9f1ec !important;
}


html[data-theme="dark"] .tree-person-lastname,
body.dark-mode .tree-person-lastname{
  color:
    #93cfaf !important;
}


html[data-theme="dark"] .tree-person.root,
body.dark-mode .tree-person.root{
  border-color:
    #3a8c68 !important;

  background:
    linear-gradient(
      145deg,
      #18251e,
      #142018
    ) !important;
}


html[data-theme="dark"] .tree-v2-generation-label,
body.dark-mode .tree-v2-generation-label{
  border-color:
    #2e3d35;

  background:
    #17201b;

  color:
    #9caba3 !important;
}


html[data-theme="dark"] .tree-v2-relative-dialog,
body.dark-mode .tree-v2-relative-dialog{
  border-color:
    #304138 !important;

  background:
    #17201b !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1000px){

  .tree-v2-header{
    margin:
      10px 12px 0 !important;

    padding:
      9px 10px 9px 15px !important;
  }


  .tree-v2-current-name{
    display:
      none;
  }


  #tree-v2-viewport{
    margin:
      10px 8px !important;

    padding:
      44px 25px 80px !important;
  }

}


@media(max-width:700px){

  .tree-v2-header{
    align-items:
      flex-start !important;

    flex-direction:
      column;

    gap:
      8px !important;
  }


  .tree-v2-toolbar{
    width:
      100%;

    overflow-x:
      auto;

    justify-content:
      flex-start;
  }


  .tree-v2-title{
    padding-left:
      3px;
  }


  #tree-v2-viewport{
    min-height:
      calc(100vh - 210px) !important;

    border-radius:
      16px;

    padding:
      35px 18px 70px !important;
  }


  #tree-v2-tree{
    padding:
      20px 36px 70px !important;
  }


  .tree-person{
    width:
      172px !important;
  }


  .tree-person.root,
  .tree-person.inline-root{
    width:
      195px !important;
  }


  .tree-v2-generation{
    gap:
      24px !important;
  }

}


/* ============================================================
   MOTION ACCESSIBLE
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .tree-person,
  .tree-v2-tool,
  .tree-person-edit,
  .tree-person-profile,
  .tree-v2-add-trigger{
    transition:
      none !important;
  }

}

/* ===== TREE V2 MODERN V3 : END ===== */



/* IAGEN TREE V2 BACK FAMILY MODERN */

.tree-v2-back-family{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  min-height:38px;

  padding:
    0 14px;

  border:
    1px solid rgba(10,105,72,.16);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.88);

  color:
    #08704d;

  font-family:
    var(--font-ui, system-ui, sans-serif);

  font-size:
    .78rem;

  font-weight:
    750;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

  box-shadow:
    0 7px 18px rgba(20,70,48,.055);

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.tree-v2-back-family:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(10,105,72,.28);

  background:
    #f7fbf8;

  color:
    #075f42;

  box-shadow:
    0 10px 24px rgba(20,70,48,.085);

  text-decoration:
    none;
}


.tree-v2-back-family:active{
  transform:
    translateY(0);

  box-shadow:
    0 4px 12px rgba(20,70,48,.06);
}


.tree-v2-back-family:focus-visible{
  outline:
    3px solid rgba(12,124,85,.16);

  outline-offset:
    2px;
}


/* ---------- Mode sombre ---------- */

html[data-theme="dark"]
.tree-v2-back-family{
  border-color:
    rgba(118,190,151,.18);

  background:
    rgba(25,38,31,.9);

  color:
    #9ed2b8;

  box-shadow:
    0 8px 20px rgba(0,0,0,.16);
}


html[data-theme="dark"]
.tree-v2-back-family:hover{
  border-color:
    rgba(118,190,151,.32);

  background:
    #1d3026;

  color:
    #b9e1ca;
}


/* ---------- Mobile ---------- */

@media(max-width:720px){

  .tree-v2-back-family{
    min-height:
      36px;

    padding:
      0 11px;

    font-size:
      .74rem;
  }

}


/* === IAGEN FULL-SIZE MISSING PARENT CARDS V2 === */

/* ============================================================
   Vraies cartes pour les parents inconnus
   ============================================================ */

.tree-person {
  position: relative;
}


/*
 * Le conteneur des parents se trouve au-dessus de la carte.
 *
 * Sa largeur correspond à deux cartes + l'espace entre elles.
 * Il est centré par rapport à l'individu.
 */
.tree-parent-placeholders {
  --parent-gap: 14px;
  --parent-card-width: 100%;

  position: absolute;

  left: 50%;
  bottom: calc(100% + 72px);

  transform: translateX(-50%);

  width: calc(
    200% + var(--parent-gap)
  );

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  column-gap:
    var(--parent-gap);

  align-items: stretch;

  z-index: 7;

  /*
   * Le conteneur lui-même ne doit jamais bloquer
   * les interactions avec l'arbre.
   */
  pointer-events: none;
}


/*
 * La carte est volontairement dimensionnée comme une vraie
 * .tree-person.
 *
 * On laisse les règles existantes de .tree-person définir
 * largeur/min-height autant que possible.
 */
.tree-person.tree-parent-placeholder {
  position: relative;

  box-sizing: border-box;

  width: 100%;
  min-width: 0;

  /*
   * Même présence visuelle qu'une vraie fiche.
   */
  min-height: inherit;

  margin: 0;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 18px 16px;

  border:
    1.5px dashed
    rgba(56, 111, 81, .27);

  border-radius: inherit;

  background:
    rgba(250, 253, 251, .72);

  box-shadow:
    0 8px 24px
    rgba(30, 72, 49, .035);

  color:
    #587064;

  cursor: pointer;

  pointer-events: auto;

  overflow: visible;

  font-family: inherit;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}


/*
 * On neutralise les décorations héritées des vraies cartes.
 */
.tree-person.tree-parent-placeholder::before,
.tree-person.tree-parent-placeholder::after {
  content: none !important;
}


/* Père : très légère nuance froide */

.tree-person.tree-parent-placeholder.father {
  border-color:
    rgba(79, 132, 174, .28);
}


/* Mère : très légère nuance chaude */

.tree-person.tree-parent-placeholder.mother {
  border-color:
    rgba(178, 108, 133, .28);
}


/*
 * Gros + central, comme un véritable emplacement vide.
 */
.tree-parent-placeholder-plus {
  display: block;

  font-size: 1.85rem;
  font-weight: 300;

  line-height: .85;

  color: #167047;
}


/*
 * Label secondaire.
 */
.tree-parent-placeholder-label {
  display: block;

  font-size: .72rem;
  font-weight: 700;

  line-height: 1;

  letter-spacing: .01em;

  color: #5f7569;
}


/*
 * Hover très discret : l'emplacement doit rester
 * une case généalogique, pas ressembler à un CTA.
 */
.tree-person.tree-parent-placeholder:hover {
  transform: none;

  background:
    rgba(255, 255, 255, .94);

  border-color:
    rgba(22, 112, 71, .48);

  color:
    #155f40;

  box-shadow:
    0 11px 28px
    rgba(25, 72, 47, .075);
}


/* ============================================================
   Connecteurs visuels des parents vers l'individu
   ============================================================ */

/*
 * Trait descendant de chaque parent.
 */
.tree-person.tree-parent-placeholder > :first-child::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 100%;

  width: 1px;
  height: 36px;

  background:
    rgba(79, 128, 102, .34);

  pointer-events: none;
}


/*
 * Petit bus horizontal situé sous les deux emplacements.
 *
 * Le père dessine sa moitié gauche -> centre.
 */
.tree-person.tree-parent-placeholder.father > :first-child::after {
  content: "";

  position: absolute;

  left: 50%;
  top: calc(100% + 36px);

  width:
    calc(50% + 7px);

  height: 1px;

  background:
    rgba(79, 128, 102, .34);

  pointer-events: none;
}


/*
 * La mère dessine centre -> moitié droite.
 */
.tree-person.tree-parent-placeholder.mother > :first-child::after {
  content: "";

  position: absolute;

  right: 50%;
  top: calc(100% + 36px);

  width:
    calc(50% + 7px);

  height: 1px;

  background:
    rgba(79, 128, 102, .34);

  pointer-events: none;
}


/*
 * Trait central entre le bus des parents et la carte enfant.
 *
 * On le porte sur le conteneur pour qu'il existe également
 * lorsqu'un seul parent est inconnu.
 */
.tree-parent-placeholders::after {
  content: "";

  position: absolute;

  left: 50%;
  top: calc(100% + 36px);

  width: 1px;
  height: 36px;

  background:
    rgba(79, 128, 102, .34);

  pointer-events: none;
}


/* ============================================================
   Personne centrale
   ============================================================ */

/*
 * Le badge "Personne centrale" et les cases de parents sont
 * tous les deux au-dessus de la carte : on garantit que le
 * badge reste au premier plan.
 */
.tree-person.root::before {
  z-index: 12;
}


/* ============================================================
   Dark mode
   ============================================================ */

body.dark-mode
.tree-person.tree-parent-placeholder,
html[data-theme="dark"]
.tree-person.tree-parent-placeholder {
  background:
    rgba(22, 31, 26, .76);

  border-color:
    rgba(190, 214, 200, .22);

  color:
    #c5d2ca;

  box-shadow:
    0 9px 24px
    rgba(0, 0, 0, .14);
}

body.dark-mode
.tree-parent-placeholder-label,
html[data-theme="dark"]
.tree-parent-placeholder-label {
  color:
    #b8c9bf;
}

body.dark-mode
.tree-parent-placeholder-plus,
html[data-theme="dark"]
.tree-parent-placeholder-plus {
  color:
    #70c496;
}


/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 700px) {

  .tree-parent-placeholders {
    --parent-gap: 8px;

    bottom:
      calc(100% + 58px);
  }

  .tree-person.tree-parent-placeholder {
    padding:
      12px 8px;

    gap:
      5px;
  }

  .tree-parent-placeholder-plus {
    font-size:
      1.45rem;
  }

  .tree-parent-placeholder-label {
    font-size:
      .62rem;
  }
}



/* === IAGEN PARENT PLACEHOLDER SPACING V3 === */

/* ============================================================
   Espacement des générations virtuelles Père / Mère
   ============================================================ */

/*
 * Les vraies générations de Tree V2 sont largement séparées.
 * Les placeholders doivent respecter le même rythme vertical.
 *
 * Avant :
 *     carte + parent à seulement ~72px au-dessus
 *
 * Maintenant :
 *     vraie "génération" virtuelle au-dessus.
 */
.tree-parent-placeholders{
  /*
   * Distance entre le HAUT de l'enfant et le BAS
   * des cartes de ses parents.
   *
   * 150px donne visuellement un espacement comparable
   * aux générations Parents / Grands-parents existantes.
   */
  bottom:
    calc(100% + 150px) !important;

  /*
   * Deux vraies cartes + espace généalogique entre elles.
   */
  --parent-gap:
    18px !important;
}


/* ============================================================
   Connecteurs
   ============================================================ */

/*
 * Du bas de chaque parent jusqu'au bus horizontal.
 */
.tree-person.tree-parent-placeholder
> :first-child::before{
  height:
    72px !important;
}


/*
 * Bus horizontal père -> centre
 */
.tree-person.tree-parent-placeholder.father
> :first-child::after{
  top:
    calc(100% + 72px) !important;
}


/*
 * Bus horizontal mère -> centre
 */
.tree-person.tree-parent-placeholder.mother
> :first-child::after{
  top:
    calc(100% + 72px) !important;
}


/*
 * Puis du bus jusqu'à la carte enfant.
 *
 * 78 + 72 ≈ 150 px :
 * on retrouve donc le rythme d'une vraie génération.
 */
.tree-parent-placeholders::after{
  top:
    calc(100% + 72px) !important;

  height:
    78px !important;
}


/* ============================================================
   Couples ayant des parents virtuels
   ============================================================ */

/*
 * Deux conjoints occupent normalement peu d'espace car leurs
 * cartes sont proches.
 *
 * Mais chacun peut maintenant avoir DEUX cartes de parents.
 * Il faut donc donner davantage d'air au couple.
 */
.tree-couple:has(.tree-parent-placeholders),
.tree-inline-couple:has(.tree-parent-placeholders),
.tree-central-family-unit:has(.tree-parent-placeholders){
  column-gap:
    92px !important;

  gap:
    92px !important;
}


/*
 * Certains couples Tree V2 sont des flex containers.
 */
.tree-couple:has(.tree-parent-placeholders),
.tree-inline-couple:has(.tree-parent-placeholders){
  justify-content:
    center !important;
}


/* ============================================================
   Sécurité : pas de clipping
   ============================================================ */

.tree-v2-generation,
.tree-v2-section,
.tree-couple,
.tree-inline-couple,
.tree-central-family-unit,
.tree-family-generation{
  overflow:
    visible !important;
}


/* ============================================================
   Mobile
   ============================================================ */

@media(max-width:700px){

  .tree-parent-placeholders{
    bottom:
      calc(100% + 112px) !important;
  }

  .tree-person.tree-parent-placeholder
  > :first-child::before{
    height:
      54px !important;
  }

  .tree-person.tree-parent-placeholder.father
  > :first-child::after,
  .tree-person.tree-parent-placeholder.mother
  > :first-child::after{
    top:
      calc(100% + 54px) !important;
  }

  .tree-parent-placeholders::after{
    top:
      calc(100% + 54px) !important;

    height:
      58px !important;
  }
}



/* === IAGEN ROOT ONLY PARENT CARDS V4 === */

/*
 * Sécurité visuelle :
 * même si une ancienne carte contenait encore le DOM des
 * placeholders, on ne les affiche jamais hors de la racine.
 */
.tree-person:not(.root)
> .tree-parent-placeholders {
  display: none !important;
}



/* === IAGEN UNIFORM TREE CARDS V1 === */

/* ============================================================
   Cartes généalogiques de taille uniforme
   ============================================================ */

.tree-v2-page{
  --tree-card-width: 176px;
  --tree-card-height: 142px;
}


/*
 * Toutes les cartes d'individus ont exactement
 * les mêmes dimensions.
 */
.tree-person{
  width:
    var(--tree-card-width) !important;

  min-width:
    var(--tree-card-width) !important;

  max-width:
    var(--tree-card-width) !important;

  height:
    var(--tree-card-height) !important;

  min-height:
    var(--tree-card-height) !important;

  max-height:
    var(--tree-card-height) !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden;
}


/*
 * Les cartes d'ajout Père / Mère utilisent
 * exactement les mêmes dimensions.
 */
.tree-person.tree-parent-placeholder{
  width:
    var(--tree-card-width) !important;

  min-width:
    var(--tree-card-width) !important;

  max-width:
    var(--tree-card-width) !important;

  height:
    var(--tree-card-height) !important;

  min-height:
    var(--tree-card-height) !important;

  max-height:
    var(--tree-card-height) !important;
}


/* ============================================================
   Structure interne
   ============================================================ */

/*
 * Le contenu est centré verticalement,
 * avec une hiérarchie stable quelle que soit
 * la quantité d'informations.
 */
.tree-person:not(.tree-parent-placeholder){
  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  padding:
    14px 12px 12px !important;
}


/* ============================================================
   Portrait
   ============================================================ */

.tree-person-avatar{
  width:
    46px !important;

  height:
    46px !important;

  min-width:
    46px !important;

  min-height:
    46px !important;

  margin:
    0 auto 7px !important;

  flex:
    0 0 46px !important;

  overflow:
    hidden !important;

  border-radius:
    7px !important;
}


.tree-person-avatar img{
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;
}


/* ============================================================
   Nom
   ============================================================ */

.tree-person-name{
  width:
    100% !important;

  min-height:
    34px;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  line-height:
    1.12 !important;

  text-align:
    center !important;
}


/*
 * Maximum 1 ligne pour les prénoms
 * et 1 ligne pour le nom.
 */
.tree-person-firstnames,
.tree-person-lastname{
  display:
    block !important;

  width:
    100% !important;

  overflow:
    hidden !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


/* ============================================================
   Dates
   ============================================================ */

.tree-person-years{
  width:
    100% !important;

  min-height:
    18px;

  margin-top:
    5px !important;

  overflow:
    hidden !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;

  text-align:
    center !important;
}


/* ============================================================
   Lieu
   ============================================================ */

.tree-person-place{
  width:
    100% !important;

  min-height:
    17px;

  margin-top:
    3px !important;

  overflow:
    hidden !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;

  text-align:
    center !important;
}


/* ============================================================
   Boutons fiche / édition
   ============================================================ */

/*
 * Ces contrôles restent en surimpression et ne modifient
 * jamais la hauteur de la carte.
 */
.tree-person-edit,
.tree-person-profile{
  position:
    absolute !important;
}


/* ============================================================
   Cartes root / rôles
   ============================================================ */

/*
 * Aucune carte ne devient plus grande simplement parce
 * qu'elle est centrale.
 */
.tree-person.root,
.tree-person.inline-root,
.tree-person.father,
.tree-person.mother,
.tree-person.partner,
.tree-person.child,
.tree-person.sibling{
  width:
    var(--tree-card-width) !important;

  height:
    var(--tree-card-height) !important;

  min-width:
    var(--tree-card-width) !important;

  min-height:
    var(--tree-card-height) !important;
}


/* ============================================================
   Mobile
   ============================================================ */

@media(max-width:700px){

  .tree-v2-page{
    --tree-card-width:
      154px;

    --tree-card-height:
      130px;
  }

  .tree-person:not(.tree-parent-placeholder){
    padding:
      12px 9px 10px !important;
  }

  .tree-person-avatar{
    width:
      40px !important;

    height:
      40px !important;

    min-width:
      40px !important;

    min-height:
      40px !important;

    flex:
      0 0 40px !important;
  }
}



/* ============================================================
   TREE V2 — badges au premier plan + labels de génération
   ============================================================ */


/* ------------------------------------------------------------
   1. Les cartes restent sous leurs badges
   ------------------------------------------------------------ */

.tree-person {
  position: relative;
  overflow: visible !important;
}


/* ------------------------------------------------------------
   2. Badge "Personne centrale"
   ------------------------------------------------------------ */

.tree-person.root::before,
.tree-person.inline-root::before {
  z-index: 30 !important;

  /* Le badge doit franchement sortir de la carte */
  top: -17px !important;

  /* évite qu'il soit masqué par un parent */
  pointer-events: none;
}


/* ------------------------------------------------------------
   3. Pastilles d'état rouge / jaune
   ------------------------------------------------------------ */

/*
 * Plusieurs versions de tree.css ont utilisé ::after ou des
 * éléments dédiés pour les pastilles. On garantit ici que tout
 * indicateur placé autour de la carte passe devant.
 */

.tree-person::after {
  z-index: 35 !important;
}

.tree-person > [class*="status"],
.tree-person > [class*="indicator"],
.tree-person > [class*="complet"],
.tree-person > [class*="warning"],
.tree-person > [class*="alert"] {
  position: absolute;
  z-index: 35 !important;
}


/* ------------------------------------------------------------
   4. Boutons profil / édition également au-dessus
   ------------------------------------------------------------ */

.tree-person-profile,
.tree-person-edit {
  z-index: 32 !important;
}


/* ------------------------------------------------------------
   5. Le SVG des connecteurs doit rester SOUS les cartes
   ------------------------------------------------------------ */

.tree-v2-connectors,
.tree-connectors,
svg.tree-connectors {
  z-index: 1 !important;
  pointer-events: none;
}


/* ------------------------------------------------------------
   6. Les générations restent au-dessus des connecteurs
   ------------------------------------------------------------ */

.tree-generation,
.tree-family-section {
  position: relative;
  z-index: 2;
}


/* ------------------------------------------------------------
   7. Le titre FRATRIE masque proprement la ligne verticale
   ------------------------------------------------------------ */

/*
 * La ligne généalogique peut maintenant passer derrière le
 * titre : on ne coupe PAS le connecteur, on masque seulement
 * quelques pixels derrière le texte.
 */

.tree-generation-title {
  position: relative;
  z-index: 20 !important;

  display: table;

  margin-left: auto;
  margin-right: auto;

  padding: 4px 18px !important;

  /*
   * Même fond que le canvas de l'arbre.
   * Cela crée une vraie interruption visuelle de la ligne.
   */
  background: #f8fbf9 !important;

  border-radius: 999px;

  line-height: 1 !important;
}


/*
 * Si le fond général est légèrement transparent / différent,
 * on ajoute un halo pour être certain que le connecteur ne
 * transparaisse jamais à travers FRATRIE.
 */
.tree-generation-title::before {
  content: "";
  position: absolute;

  inset: -3px -8px;

  z-index: -1;

  background: #f8fbf9;
  border-radius: 999px;
}


/* ------------------------------------------------------------
   8. Spécifiquement la section centrale
   ------------------------------------------------------------ */

.tree-family-section > .tree-generation-title,
.tree-family-section .tree-generation-title {
  z-index: 25 !important;
}


/* ------------------------------------------------------------
   9. Dark mode
   ------------------------------------------------------------ */

body.dark-mode .tree-generation-title,
body.dark-mode .tree-generation-title::before {
  background: #101915 !important;
}



/* === IAGEN TREE BADGES + DIRECT LINE V2 === */


/* ============================================================
   1. Les éléments qui dépassent des cartes ne sont plus coupés
   ============================================================ */

.tree-person {
  overflow: visible !important;
  position: relative !important;
}


/* ============================================================
   2. Badge "Personne centrale"
   ============================================================ */

.tree-person.root::before,
.tree-person.inline-root::before {
  z-index: 80 !important;

  /*
   * Il doit dépasser franchement du bord supérieur.
   */
  top: -16px !important;

  opacity: 1 !important;

  filter:
    drop-shadow(
      0 3px 5px
      rgba(15, 80, 49, .16)
    );
}


/* ============================================================
   3. Pastilles rouge / jaune
   ============================================================ */

/*
 * Les différentes versions du CSS de Tree V2 utilisent
 * notamment ces classes pour les indicateurs de lignée.
 */
.tree-person-souche::after,
.tree-person-direct-ancestor::after,
.tree-person.root::after {
  z-index: 90 !important;

  opacity: 1 !important;

  overflow: visible !important;
}


/*
 * Sécurité pour les indicateurs matérialisés par un élément DOM.
 */
.tree-person > [class*="status"],
.tree-person > [class*="indicator"],
.tree-person > [class*="marker"],
.tree-person > [class*="badge"] {
  z-index: 90 !important;
}


/* Boutons ↗ et édition également au premier plan */
.tree-person-profile,
.tree-person-edit {
  z-index: 75 !important;
}


/* ============================================================
   4. Ligne directe parents -> root
   ============================================================ */

.tree-connector.direct-root {
  /*
   * Trait légèrement plus affirmé que la grille,
   * mais pas plus fort que les autres relations.
   */
  stroke:
    rgba(53, 126, 88, .56) !important;

  stroke-width:
    1.35px !important;

  fill:
    none !important;
}


/* ============================================================
   5. FRATRIE doit être LISIBILITÉ avant tout
   ============================================================ */

/*
 * Selon les générations de Tree V2, le titre peut porter
 * différents noms de classe.
 *
 * On couvre les variantes existantes sans toucher au JS.
 */
.tree-v2-generation-title,
.tree-generation-title,
.tree-generation-label,
.tree-v2-generation > .tree-v2-section-title,
.tree-family-section > .tree-v2-generation-title {

  position: relative !important;

  z-index: 70 !important;

  width: max-content;

  margin-left: auto !important;
  margin-right: auto !important;

  padding:
    5px 20px !important;

  /*
   * Ce fond masque la ligne verticale derrière le mot.
   *
   * La ligne reste géométriquement continue dans le SVG,
   * elle n'est simplement pas visible derrière l'étiquette.
   */
  background:
    rgba(248, 251, 249, .98) !important;

  border-radius:
    999px !important;

  box-shadow:
    0 0 0 7px
    rgba(248, 251, 249, .98) !important;

  isolation:
    isolate;
}


/* ============================================================
   6. Le titre ne doit jamais être sous le SVG
   ============================================================ */

.tree-v2-generation,
.tree-family-section,
.tree-family-generation {
  position:
    relative !important;

  overflow:
    visible !important;
}


/* ============================================================
   7. Le SVG reste derrière le contenu
   ============================================================ */

.tree-v2-connectors,
.tree-connectors {
  z-index:
    1 !important;

  pointer-events:
    none !important;
}


/* ============================================================
   8. Mode sombre
   ============================================================ */

html[data-theme="dark"]
.tree-v2-generation-title,

html[data-theme="dark"]
.tree-generation-title,

html[data-theme="dark"]
.tree-generation-label,

body.dark-mode
.tree-v2-generation-title,

body.dark-mode
.tree-generation-title,

body.dark-mode
.tree-generation-label {

  background:
    rgba(18, 27, 22, .98) !important;

  box-shadow:
    0 0 0 7px
    rgba(18, 27, 22, .98) !important;
}



/* === IAGEN GENERATION LABEL FIX V1 === */

/* ============================================================
   Labels de génération : FRATRIE / PARENTS / GRANDS-PARENTS
   ============================================================ */

.tree-v2-generation-label{
  position: relative !important;
  z-index: 100 !important;

  width: max-content !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding:
    5px 18px !important;

  line-height:
    1 !important;

  /*
   * Le fond masque proprement les connecteurs SVG
   * qui passent derrière.
   */
  background:
    rgba(248, 251, 249, .98) !important;

  border-radius:
    999px !important;

  /*
   * Halo supplémentaire pour éviter que la ligne
   * transparaisse sur les bords du texte.
   */
  box-shadow:
    0 0 0 8px
    rgba(248, 251, 249, .98) !important;

  pointer-events:
    none !important;

  isolation:
    isolate !important;
}


/*
 * Le conteneur de génération ne doit jamais couper
 * le label.
 */
.tree-v2-section,
.tree-v2-generation{
  overflow:
    visible !important;
}


/*
 * Les connecteurs doivent rester derrière les labels.
 */
.tree-v2-connectors,
.tree-connectors{
  z-index:
    1 !important;

  pointer-events:
    none !important;
}


/* ============================================================
   Mode sombre
   ============================================================ */

html[data-theme="dark"]
.tree-v2-generation-label,
body.dark-mode
.tree-v2-generation-label{
  background:
    rgba(18, 27, 22, .98) !important;

  box-shadow:
    0 0 0 8px
    rgba(18, 27, 22, .98) !important;
}



/* === IAGEN ACTIVE TREE CONNECTOR POLISH V1 === */


/* ============================================================
   Cartes : rien de ce qui dépasse ne doit être coupé
   ============================================================ */

.tree-person{
  position:
    relative !important;

  overflow:
    visible !important;
}


/* ============================================================
   Pastilles rouges / jaunes
   ============================================================ */

.tree-person-souche::after,
.tree-person-direct-ancestor::after,
.tree-person.root::after{
  z-index:
    90 !important;

  opacity:
    1 !important;
}


/*
 * Sécurité pour les variantes où l'indicateur
 * est un véritable élément HTML.
 */
.tree-person > [class*="status"],
.tree-person > [class*="indicator"],
.tree-person > [class*="marker"]{
  z-index:
    90 !important;
}


/* ============================================================
   Badge Personne centrale
   ============================================================ */

.tree-person.root::before,
.tree-person.inline-root::before{
  z-index:
    100 !important;

  top:
    -17px !important;

  opacity:
    1 !important;

  filter:
    drop-shadow(
      0 3px 6px
      rgba(12, 82, 49, .20)
    );
}


/*
 * Les boutons ↗ / édition restent eux aussi visibles.
 */
.tree-person-profile,
.tree-person-edit{
  z-index:
    80 !important;
}


/* ============================================================
   Connecteur parents -> personne centrale
   ============================================================ */

#tree-v2-connectors{
  position:
    absolute !important;

  z-index:
    1 !important;

  pointer-events:
    none !important;
}


.tree-connector.direct-root{
  fill:
    none !important;

  stroke:
    rgba(43, 119, 79, .56) !important;

  stroke-width:
    1.35px !important;
}


/* ============================================================
   Contenu de l'arbre au-dessus du SVG
   ============================================================ */

#tree-v2-content{
  position:
    relative !important;

  z-index:
    2 !important;
}


/* ============================================================
   FRATRIE / PARENTS / GRANDS-PARENTS
   ============================================================ */

.tree-v2-generation-label{
  /*
   * Très important :
   * le label doit être AU-DESSUS de la ligne SVG.
   */
  position:
    relative !important;

  z-index:
    120 !important;

  width:
    max-content !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  padding:
    5px 18px !important;

  line-height:
    1 !important;


  /*
   * Fond opaque identique au canvas.
   *
   * La ligne reste géométriquement continue,
   * mais disparaît derrière FRATRIE.
   */
  background:
    #f8fbf9 !important;

  border-radius:
    999px !important;


  /*
   * Petit halo supplémentaire :
   * aucun trait ne peut toucher les lettres.
   */
  box-shadow:
    0 0 0 8px
    #f8fbf9 !important;

  pointer-events:
    none !important;

  isolation:
    isolate !important;
}


/*
 * Les sections ne doivent jamais couper le label.
 */
.tree-v2-section,
.tree-v2-generation{
  overflow:
    visible !important;
}


/* ============================================================
   Dark mode
   ============================================================ */

html[data-theme="dark"]
.tree-v2-generation-label,

body.dark-mode
.tree-v2-generation-label{
  background:
    #121b16 !important;

  box-shadow:
    0 0 0 8px
    #121b16 !important;
}



/* === IAGEN HORIZONTAL TREE LAYOUT V1 === */

/* ============================================================
   Objectif :
   - arbre moins vertical
   - branches davantage étalées horizontalement
   - meilleure occupation du viewport
   ============================================================ */


/* ------------------------------------------------------------
   1. Générations : plus de largeur entre groupes
   ------------------------------------------------------------ */

.tree-v2-generation{
  gap:
    110px !important;
}


/* ------------------------------------------------------------
   2. Couples : restent compacts
   ------------------------------------------------------------ */

.tree-couple{
  gap:
    0 !important;
}


/* ------------------------------------------------------------
   3. Groupe central : plus d'air autour de la racine
   ------------------------------------------------------------ */

.tree-central-family-unit{
  gap:
    42px !important;
}


/* ------------------------------------------------------------
   4. Conjoints latéraux
   ------------------------------------------------------------ */

.tree-inline-partners{
  gap:
    38px !important;
}


/* ------------------------------------------------------------
   5. Génération centrale / enfants
   ------------------------------------------------------------ */

.tree-family-generation,
.tree-children-generation{
  column-gap:
    72px !important;

  row-gap:
    28px !important;
}


/* ------------------------------------------------------------
   6. Espacement vertical des sections
   ------------------------------------------------------------ */

/*
 * On resserre légèrement les générations verticalement.
 * Cela permet au fit() de choisir un zoom plus grand.
 */

#tree-v2-content
> .tree-v2-section{
  margin-top:
    34px !important;

  margin-bottom:
    34px !important;
}


/*
 * Première génération :
 * inutile d'ajouter un gros espace au-dessus.
 */

#tree-v2-content
> .tree-v2-section:first-child{
  margin-top:
    8px !important;
}


/*
 * Enfants :
 * on conserve une respiration correcte,
 * mais moins haute qu'avant.
 */

.tree-children-section{
  margin-top:
    48px !important;
}


/* ------------------------------------------------------------
   7. Labels de génération
   ------------------------------------------------------------ */

.tree-v2-generation-label{
  margin-bottom:
    16px !important;
}


/* ------------------------------------------------------------
   8. Responsive
   ------------------------------------------------------------ */

@media(max-width:1100px){

  .tree-v2-generation{
    gap:
      72px !important;
  }

  .tree-central-family-unit{
    gap:
      28px !important;
  }

  .tree-inline-partners{
    gap:
      24px !important;
  }

  .tree-family-generation,
  .tree-children-generation{
    column-gap:
      44px !important;
  }
}


/* === IAGEN CENTRAL PERSON POLISH V1 === */

/*
 * La personne centrale garde STRICTEMENT les mêmes dimensions
 * que toutes les autres cartes.
 */
.tree-person.root,
.tree-person.inline-root {
  width: var(--tree-card-width) !important;
  min-width: var(--tree-card-width) !important;
  max-width: var(--tree-card-width) !important;

  height: var(--tree-card-height) !important;
  min-height: var(--tree-card-height) !important;
  max-height: var(--tree-card-height) !important;

  /*
   * Différenciation par la couleur et non par la taille.
   */
  border:
    1.5px solid rgba(25, 112, 72, .72) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f4faf6 100%
    ) !important;

  box-shadow:
    0 0 0 3px rgba(25, 112, 72, .055),
    0 9px 26px rgba(25, 90, 58, .12) !important;
}


/*
 * Badge personne centrale.
 *
 * Il flotte au-dessus de la carte et ne modifie donc
 * absolument pas le layout.
 */
.tree-person.root::before,
.tree-person.inline-root::before {
  top: -17px !important;

  left: 50% !important;
  right: auto !important;

  transform:
    translateX(-50%) !important;

  z-index:
    120 !important;

  padding:
    4px 11px !important;

  border:
    3px solid #f8faf9 !important;

  border-radius:
    999px !important;

  background:
    #16734b !important;

  color:
    #ffffff !important;

  font-size:
    .59rem !important;

  font-weight:
    800 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    .035em !important;

  white-space:
    nowrap !important;

  opacity:
    1 !important;

  box-shadow:
    0 4px 12px rgba(16, 91, 58, .18) !important;

  filter:
    none !important;

  pointer-events:
    none !important;
}


/*
 * Hover spécifique : un peu plus marqué que les autres cartes,
 * sans changement de dimensions.
 */
.tree-person.root:hover,
.tree-person.inline-root:hover {
  border-color:
    rgba(17, 104, 64, .92) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #eef8f2 100%
    ) !important;

  box-shadow:
    0 0 0 4px rgba(25, 112, 72, .07),
    0 15px 34px rgba(25, 90, 58, .16) !important;
}


/*
 * Mode sombre.
 */
html[data-theme="dark"] .tree-person.root,
html[data-theme="dark"] .tree-person.inline-root,
body.dark-mode .tree-person.root,
body.dark-mode .tree-person.inline-root {
  border-color:
    #47916e !important;

  background:
    linear-gradient(
      145deg,
      #19271f,
      #15221b
    ) !important;

  box-shadow:
    0 0 0 3px rgba(71, 145, 110, .08),
    0 10px 28px rgba(0, 0, 0, .28) !important;
}


html[data-theme="dark"] .tree-person.root::before,
html[data-theme="dark"] .tree-person.inline-root::before,
body.dark-mode .tree-person.root::before,
body.dark-mode .tree-person.inline-root::before {
  border-color:
    #121b16 !important;

  background:
    #2e855d !important;
}


/* === IAGEN CARD ACTIONS CLEAN V1 === */

/* ============================================================
   Actions des cartes : interface allégée

   Desktop :
     - boutons presque invisibles au repos
     - apparition au survol de la carte

   Tactile :
     - boutons toujours visibles
   ============================================================ */


/* ------------------------------------------------------------
   État normal
   ------------------------------------------------------------ */

.tree-person .tree-person-edit,
.tree-person .tree-person-profile {
  opacity: 0 !important;

  transform:
    translateY(3px) scale(.92) !important;

  pointer-events:
    none !important;

  transition:
    opacity 150ms ease,
    transform 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease !important;
}


/* ------------------------------------------------------------
   Survol / clavier
   ------------------------------------------------------------ */

.tree-person:hover .tree-person-edit,
.tree-person:hover .tree-person-profile,
.tree-person:focus-within .tree-person-edit,
.tree-person:focus-within .tree-person-profile {
  opacity: 1 !important;

  transform:
    translateY(0) scale(1) !important;

  pointer-events:
    auto !important;
}


/* ------------------------------------------------------------
   Boutons plus sobres
   ------------------------------------------------------------ */

.tree-person-edit,
.tree-person-profile {
  width:
    25px !important;

  height:
    25px !important;

  min-width:
    25px !important;

  min-height:
    25px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  padding:
    0 !important;

  border:
    1px solid rgba(45, 86, 64, .14) !important;

  border-radius:
    8px !important;

  background:
    rgba(255, 255, 255, .94) !important;

  color:
    #42604f !important;

  box-shadow:
    0 2px 7px rgba(24, 59, 40, .08) !important;

  font-size:
    13px !important;

  line-height:
    1 !important;

  z-index:
    90 !important;
}


/* ------------------------------------------------------------
   Hover du bouton lui-même
   ------------------------------------------------------------ */

.tree-person-edit:hover,
.tree-person-profile:hover {
  background:
    #f0f7f3 !important;

  border-color:
    rgba(35, 116, 73, .30) !important;

  color:
    #176b45 !important;

  box-shadow:
    0 4px 10px rgba(24, 80, 50, .13) !important;
}


/* ------------------------------------------------------------
   Sur appareil tactile : pas de hover fiable.
   Les actions restent donc visibles.
   ------------------------------------------------------------ */

@media (hover: none), (pointer: coarse) {

  .tree-person .tree-person-edit,
  .tree-person .tree-person-profile {
    opacity:
      .82 !important;

    transform:
      none !important;

    pointer-events:
      auto !important;
  }
}


/* ------------------------------------------------------------
   Mode sombre
   ------------------------------------------------------------ */

html[data-theme="dark"] .tree-person-edit,
html[data-theme="dark"] .tree-person-profile,
body.dark-mode .tree-person-edit,
body.dark-mode .tree-person-profile {
  background:
    rgba(28, 40, 33, .96) !important;

  border-color:
    rgba(139, 177, 155, .18) !important;

  color:
    #b5c9bd !important;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, .22) !important;
}


html[data-theme="dark"] .tree-person-edit:hover,
html[data-theme="dark"] .tree-person-profile:hover,
body.dark-mode .tree-person-edit:hover,
body.dark-mode .tree-person-profile:hover {
  background:
    #243b2e !important;

  color:
    #d6eadc !important;

  border-color:
    rgba(105, 174, 133, .38) !important;
}


/* === IAGEN CENTER LABEL BELOW CARD V1 === */

/* ============================================================
   "Centrer" sous la carte
   ============================================================ */


/*
 * Neutralise les anciennes variantes qui plaçaient
 * "Centrer" à l'intérieur de la fiche.
 */
.tree-person:not(.root):not(.unknown)::after {
  content:
    "Centrer" !important;

  position:
    absolute !important;

  left:
    50% !important;

  right:
    auto !important;

  top:
    calc(100% + 8px) !important;

  bottom:
    auto !important;

  transform:
    translateX(-50%) translateY(-3px) !important;

  z-index:
    120 !important;

  display:
    block !important;

  width:
    max-content !important;

  max-width:
    none !important;

  padding:
    4px 9px !important;

  border:
    1px solid rgba(49, 100, 72, .16) !important;

  border-radius:
    999px !important;

  background:
    rgba(255, 255, 255, .96) !important;

  color:
    #577064 !important;

  box-shadow:
    0 4px 10px rgba(24, 65, 43, .08) !important;

  font-family:
    inherit !important;

  font-size:
    .60rem !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  letter-spacing:
    .01em !important;

  white-space:
    nowrap !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;

  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms ease !important;
}


/*
 * Affichage au survol ou au focus clavier.
 */
.tree-person:not(.root):not(.unknown):hover::after,
.tree-person:not(.root):not(.unknown):focus-within::after {
  opacity:
    1 !important;

  visibility:
    visible !important;

  transform:
    translateX(-50%) translateY(0) !important;
}


/*
 * La carte doit laisser dépasser l'étiquette.
 */
.tree-person {
  overflow:
    visible !important;
}


/*
 * Personne centrale : jamais de "Centrer".
 */
.tree-person.root::after,
.tree-person.inline-root::after {
  content:
    none !important;
}


/* ============================================================
   Mode sombre
   ============================================================ */

html[data-theme="dark"]
.tree-person:not(.root):not(.unknown)::after,

body.dark-mode
.tree-person:not(.root):not(.unknown)::after {
  background:
    rgba(24, 35, 29, .97) !important;

  border-color:
    rgba(129, 177, 149, .18) !important;

  color:
    #bdd0c3 !important;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, .24) !important;
}


/* ============================================================
   Tactile
   ============================================================ */

/*
 * Sur tactile, le label de hover n'a pas vraiment d'intérêt.
 * On le masque pour ne pas encombrer.
 */
@media (hover: none), (pointer: coarse) {

  .tree-person:not(.root):not(.unknown)::after {
    display:
      none !important;
  }
}



/* === IAGEN RECURSIVE ANCESTORS LAYOUT V1 === */

/* ============================================================
   Ascendance récursive
   ============================================================ */


/*
 * Chaque génération d'ancêtres utilise une grille.
 *
 * Cela garantit l'ordre :
 *
 * FF  FM  MF  MM
 *
 * au lieu de laisser flex redistribuer librement les cartes.
 */
.tree-ancestor-generation{
  display:
    grid !important;

  grid-template-columns:
    repeat(
      var(--ancestor-columns),
      var(--tree-card-width)
    ) !important;

  column-gap:
    26px !important;

  align-items:
    end !important;

  justify-content:
    center !important;

  width:
    max-content !important;

  max-width:
    none !important;

  overflow:
    visible !important;
}


/*
 * Les branches inconnues gardent leur emplacement géométrique
 * mais ne produisent aucune carte visible.
 */
.tree-ancestor-empty-slot{
  width:
    var(--tree-card-width);

  height:
    var(--tree-card-height);

  visibility:
    hidden;

  pointer-events:
    none;
}


/*
 * Lignes ascendantes : même style général que Tree V2.
 */
.tree-connector.ancestor{
  fill:
    none;

  stroke:
    rgba(76, 122, 96, .45);

  stroke-width:
    1.2px;
}


/*
 * Un peu moins de hauteur entre les anciennes générations,
 * sinon quatre niveaux prennent énormément de place.
 */
.tree-ancestor-section{
  margin-top:
    22px !important;

  margin-bottom:
    22px !important;
}


/*
 * Les titres très anciens restent subtils.
 */
.tree-ancestor-section
.tree-v2-generation-label{
  font-size:
    .62rem !important;

  letter-spacing:
    .07em !important;
}


/* ============================================================
   Responsive
   ============================================================ */

@media(max-width:900px){

  .tree-ancestor-generation{
    column-gap:
      18px !important;
  }
}


/* === IAGEN ANCESTOR CLEAN LAYOUT V1 === */

/*
 * Les générations d'ancêtres ne sont PAS des panneaux.
 *
 * On veut uniquement :
 *   - le label ;
 *   - les cartes ;
 *   - les connecteurs.
 */
.tree-ancestor-section{
  background:
    transparent !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  padding-left:
    0 !important;

  padding-right:
    0 !important;

  width:
    max-content !important;

  min-width:
    0 !important;

  overflow:
    visible !important;
}


/*
 * Même règle pour la ligne contenant les cartes.
 */
.tree-ancestor-generation{
  background:
    transparent !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  padding:
    0 !important;
}


/*
 * Important :
 *
 * certains anciens styles de .tree-v2-section peuvent créer
 * visuellement une grande plaque blanche.
 *
 * Pour les sections d'ancêtres, on neutralise explicitement
 * tout habillage de conteneur.
 */
#tree-v2-content > .tree-v2-section.tree-ancestor-section{
  background:
    transparent !important;

  border:
    none !important;

  box-shadow:
    none !important;

  padding:
    0 !important;
}


/*
 * On conserve une séparation verticale suffisante pour que
 * les connecteurs restent lisibles.
 */
.tree-ancestor-section{
  margin-top:
    26px !important;

  margin-bottom:
    26px !important;
}


/*
 * Le label reste indépendant des cartes.
 */
.tree-ancestor-section
.tree-v2-generation-label{
  position:
    relative !important;

  z-index:
    120 !important;

  width:
    max-content !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/*
 * Les emplacements généalogiques inexistants restent invisibles.
 * Ils sont uniquement là pour préserver l'alignement des branches.
 */
.tree-ancestor-empty-slot{
  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  visibility:
    hidden !important;
}



/* === IAGEN COUPLE UNION LINKS CSS V1 === */

.tree-connector.ancestor-union,
.tree-connector.direct-union {
  fill: none !important;

  stroke:
    rgba(67, 114, 88, .48) !important;

  stroke-width:
    1.2px !important;

  stroke-linecap:
    round !important;
}



/* === IAGEN ANCESTOR BRANCH HOVER CSS V1 === */


/* ============================================================
   Survol d'une branche d'ascendance
   ============================================================ */

.tree-person[data-ancestor-path]{
  transition:
    opacity 150ms ease,
    filter 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    transform 150ms ease !important;
}


/*
 * Ancêtres non concernés.
 *
 * Atténuation volontairement modérée :
 * ils doivent rester lisibles.
 */
.tree-person.tree-branch-dimmed{
  opacity:
    .38 !important;

  filter:
    saturate(.55) !important;
}


/*
 * Personne survolée.
 */
.tree-person.tree-branch-focus{
  opacity:
    1 !important;

  filter:
    none !important;

  z-index:
    150 !important;

  border-color:
    rgba(26, 121, 76, .68) !important;

  box-shadow:
    0 10px 26px rgba(20, 82, 51, .16) !important;
}


/*
 * Père / mère directs.
 */
.tree-person.tree-branch-parent{
  opacity:
    1 !important;

  filter:
    none !important;

  z-index:
    145 !important;

  box-shadow:
    0 7px 20px rgba(30, 77, 53, .11) !important;
}


/* ============================================================
   Connecteurs
   ============================================================ */

.tree-connector{
  transition:
    opacity 150ms ease,
    stroke-width 150ms ease,
    stroke 150ms ease !important;
}


.tree-connector.tree-branch-connector-dimmed{
  opacity:
    .16 !important;
}


.tree-connector.tree-branch-connector-focus{
  opacity:
    1 !important;

  stroke:
    rgba(27, 112, 70, .78) !important;

  stroke-width:
    1.8px !important;
}


/* ============================================================
   Pas d'effet hover sur tactile
   ============================================================ */

@media (hover: none), (pointer: coarse){

  .tree-person.tree-branch-dimmed{
    opacity:
      1 !important;

    filter:
      none !important;
  }

  .tree-connector.tree-branch-connector-dimmed{
    opacity:
      1 !important;
  }
}