body { margin: 0; padding: 1rem; font-family: sans-serif; background: #f5f5f5; color: #222; }
header { margin-bottom: 1rem; }
nav, label, select { margin: .5rem; }
.timeline_flex { min-width: 650px; }
#PAGE_cours_histoire { overflow-x: auto; margin: 0; }
#detail img { max-width: 100%; height: auto; }
#infobulle-1 {
    position: fixed;
    background: rgba(0, 0, 0, 0.50);
    top: 0;
    
    /*left: 50%; transform: translate(-50%, 0);*/ /* Dans le javascript*/
    color: white;
    margin: 0 auto;
    padding: 8px;
    border-radius: 5px;
    font-size: 1rem;
    white-space: wrap;
    /*pointer-events: none;*/
    z-index: 20000;
    height: auto;
    max-width: 48%;
    display: none;
}

#infobulle-1-head {
    position: relative;
    top:0;
    background: rgba(0, 0, 0, 1);
    text-align: center;
    font-size: 1.4rem;
    padding-bottom: 5px;
}

#infobulle-1-body {
    position: relative;
    font-size: 1rem;
    margin-bottom: 5px;
    overflow: scroll;
    line-height: 1.5rem;
}
.infobulle-1-body-img-top {
    display: block;
    margin: 0 auto;
    height: 200px;
}

.infobulle-1-body-img-bottom{
    display: block;
    margin: 0 auto;
    height: 400px;
}