.detail {
    text-align: unset;
    padding: 3rem 1rem;
    max-width: 1300px;
    margin: auto;
}

.schedules-day {
    padding: 1rem 1rem;
}
.card-schedule {
    width: 450px;
}

.planning-global{
    max-width:1000px;
    margin:auto;
    padding:1rem 1rem;
}

.planning-item{
    display:flex;
    gap:2rem;
    padding:1rem;
    border-bottom:1px solid #e7e7e7;
    align-items: center;
}

.heure{
    width:80px;
    font-weight:bold;
    color:var(--blue-ocean);
}

.timeline{
    position:relative;
}

.timeline::before{
    content:"";
    position:absolute;
    left:75px;
    top:0;
    bottom:0;
    width:3px;
    background:var(--sand-gold);
}

.event{
    display:flex;
    gap:2rem;
    align-items:center;
    margin-bottom:1.5rem;
    position:relative;
}

.event::before{
    content:"";
    position:absolute;
    left:70px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--blue-ocean);
}

.time, .time-end{
    width:60px;
    font-weight:bold;
}

.timeline-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.timeline-label::after {
    content: "";
    flex: 1;
    height: 3px;
    background: var(--sand-gold);
    border-radius: 2px;
}

.time-end {
    position: relative;
    margin-left: -20px;
}

.time-end::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--energy-orange);
    transform: translateY(-50%);
}

@media screen and (max-width: 465px) {
    .detail p {
        text-align: justify
    }

    .planning-item {
        gap: 1rem;
        padding: 8px 0px;
    }

    .schedules-day {
        padding-top: 0px;
    }

    .planning-item span, .event span {
        font-size: small;
    }

    .cards {
        margin-top: 16px;
    }

    .card-body {
        padding: 8px 0px;
    }
    
    .timeline::before {
        left: 60px;
    }

    .event::before {
        left: 55px;
    }

    .event {
        gap: 1rem;
    }

    .time-end::before {
        left: -8px;
    }

}