/*
🌳 : Arbre
🧓 : Aieul
🧓🧓🧓 : Aieuls
👫 : Couple
🧒 : Enfant
🔚 : Fin
*/

.Arbre,.Arbre div,.Arbre ol,.Arbre ul {
  border: 0;
  margin: 0;
  position: relative;
  white-space: nowrap
}

.Arbre div,.Arbre ul {
  padding: 0
}

.Arbre {
  overflow: scroll;
  padding: 2em 0;
  min-height: 430px
}

.Arbre ol {
  padding: 2em 0 0;
  z-index: 0
}

.Arbre li>a {
  margin: 1em 1em 0 -1em
}

.Arbre li li>a {
  margin: 1em 1em 0;
  z-index: 0
}

.Arbre ol>li>a {
  margin: 0 1em
}

.Arbre span[itemprop=name] {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block
}

.Arbre div[itemprop=conjoint],.Arbre li {
  white-space: normal;
  vertical-align: top;
  position: relative;
  list-style-type: none;
  text-align: center;
  display: inline-block;
  z-index: 1
}

.Arbre div[itemprop=conjoint]>a,.Arbre li>a {
  background: #fff;
  width: 5em;
  padding: .5em;
  height: 6em;
  font-size: .8em;
  font-weight: 400;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: inline-block
}

.Arbre ul>li>a::before {
  right: 50%
}

.Arbre ul>li>a::after,.Arbre ul>li>a::before {
  content: "";
  position: absolute;
  border-top: 1px solid #ccc;
  width: 52%
}

.Arbre ol li::before {
  right: 50%
}

.Arbre ol li::after,.Arbre ol li::before {
  content: "";
  position: absolute;
  top: -1em;
  border-top: 1px solid #ccc;
  width: 52%;
  height: 1em
}

.Arbre ul>li>a::after,.Arbre ul>li>a::before {
  top: -3.5em;
  height: 3.5em;
  z-index: -1
}

.Arbre>li>ol::before {
  border-right: 1px solid #ccc
}

.Arbre ol::before,.Arbre>li>ol::after,.Arbre>li>ol::before {
  content: "";
  position: absolute;
  right: 50%
}

.Arbre ol::before {
  width: 60%;
  height: 2em;
  border-top: none;
  border-right: 1px solid #ccc;
  top: -1em;
  z-index: -1
}

.Arbre>li>ol::after,.Arbre>li>ol::before {
  border-top: 1px solid #ccc;
  top: -4em;
  height: 5em;
  z-index: -1
}

.Arbre>li>ol::after {
  border-right: none;
  left: 50%
}

.Arbre ol li::after,.Arbre ul>li>a::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc
}

.Arbre time {
  font-size: .8em
}

.Arbre div[itemprop=conjoint]:is(:first-of-type) a::before {
  content: "";
  position: absolute;
  left: -3em;
  width: 3em;
  height: 3em;
  border-bottom: 1px solid #ccc;
  z-index: -1
}

.Arbre .Couple>a {
  margin-left: 7em;
  z-index: 2
}

.Arbre li:not(.Couple):not(:first-child)+.Couple {
  margin-left: -5em
}

.Arbre>li>ol::before {
  width: 4em
}

.Arbre>li>ol::after {
  width: 6em
}

.Arbre.Aieul>li>ol::after {
  width: 2em
}

.Arbre.Aieuls>li>ol::after,.Arbre.Aieuls>li>ol::before {
  width: 12em
}

.Arbre>li>ul>li>a::before {
  width: 60%
}

.Arbre.Aieuls>li>ul>li>a::before,.Arbre>li>ul>li>a::after {
  width: 100%
}

.Arbre .Fin a::after,.Arbre .Fin a::before {
  content: none
}

.Arbre ol li:first-child::before {
  border: 0
}

.Arbre ol li:last-child::after {
  width: 0
}

.Arbre li ul .Aieul>a::after,.Arbre li ul .Aieul>a::before,.Arbre ol .Enfant.Fin>a::after,.Arbre ol .Enfant.Fin>a::before {
  top: -28px;
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute
}

.Arbre li ul .Aieul>a::after {
  border-bottom-color: #fff;
  border-width: 16px;
  margin-left: -16px;
  z-index: 2
}

.Arbre li ul .Aieul>a::before {
  border-bottom-color: #ccc;
  border-width: 14px;
  margin-left: -14px
}

.Arbre ol .Enfant.Fin>a::after,.Arbre ol .Enfant.Fin>a::before {
  top: 100%;
  bottom: 28px
}

.Arbre ol .Enfant.Fin>a::after {
  border-top-color: #fff;
  border-width: 14px;
  margin-left: -14px;
  z-index: 2
}

.Arbre ol .Enfant.Fin>a::before {
  border-top-color: #ccc;
  border-width: 16px;
  margin-left: -16px
}

#cible {
  background-color: lightgreen;
}