*{box-sizing:border-box;}

body{font-family: Arial, sans-serif; padding: 40px; overflow-x:hidden;}
#tree-wrapper{width:100%; height: 100%; overflow-x: auto;}
#tree{justify-content:start; width:max-content; overflow: scroll; }
.centered-tree{margin:0 auto;}
.generation{ display: flex; gap: 2rem; width: max-content;  } /* flex-direction: column; */
.fraterie{ display: flex; gap: 2rem; width: max-content; justify-content: center; margin-bottom: 60px; }
.famille{position:relative; display: flex; gap: 0; flex-direction: column; align-items: center; }

.couple{position:relative; display: flex; gap: 0; width: max-content; justify-content: center; margin-bottom: 60px; }
.couple.has-children:after{content:""; position:absolute; top:100%; left:50%; translate:-50% 0; width:1px; height:30px; background-color:#000;}


.fiche{position:relative; min-width:180px; height: auto; padding: 15px; display: flex; justify-content: center; align-items: center; background: #f1f1f1; color: #000; cursor:pointer; transition:0.3s all ease 0s;}
.fiche:hover{background: #f1f1f1; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; font-size:105%;}
.fiche:not([data-parent="0"]):not([data-parent=""]):after{content:""; position:absolute; bottom:100%; left:50%; translate:-50% 0; width:1px; height:30px; background-color:#000;}

.fiche.m{ background: lightblue; }
.fiche.f{ background: lightpink; }
.fiche.m:hover, .fiche.f:hover{background: #f1f1f1;}
.fiche[data-vivant="0"]{background: #f1f1f1;}
.bond{position:absolute; top:-30px; height:1px; background-color:#000;}


#volet{position:fixed; top:0; right:-100%; width:500px; max-width:100%; height:100vh; background-color:#f1f1f1; transition:0.3s all ease 0s; z-index:100;}
#volet.active{right:0;}
.volet-close{position:absolute; top:10px; right:10px; cursor:pointer; z-index:1;}
.volet-content{display:block; width:100%; height:100vh; overflow-y:scroll; padding:60px 30px 30px;}

.volet-content img{width:200px; max-width:100%; border-radius:50%;}

.volet-content i{margin-right:5px;}

.timeline {
  position: relative;
  margin: 20px 0;
  max-width:100%;
  padding-bottom:100px;
}

.timeline:before{content:""; position:absolute; top:0; left:25px; height:100%; width:1px; background-color:#444; z-index:-1;}

.timeline-year {
  font-weight: bold;
  font-size: 1.2em;
  margin: 20px 0 10px;
  padding:10px 0;
  background-color:#f1f1f1;
}

.timeline-item {
    display:flex;
    gap:1rem;
    margin-bottom:1rem;
    align-items:center;
}

.timeline-date {
    flex:0 0 50px;
    border-radius:50px;
    background-color:#f1f1f1;
    border:1px solid #444;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size: 80%;
    aspect-ratio:1;
}


@media all and (max-width:600px){
    body{padding:15px; font-size:80%;}
    .timeline:before{left:20px;}
    .timeline-date{flex-basis:40px;}
}