body{
   background-image: url("../img/imagefondhistoire.jpg");
   color: white;
   font-family: "Helvetica", sans-serif;
}

.background-image {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('../img/imagefondhistoire.jpg');
   background-size: cover;
   background-position: center;
   z-index: -2;
}
   
h1{
   text-align: center;
   font-size: xx-large;
}
   
   
/* NAV */
.nav{
   display: flex;
   justify-content: center; 
   width: 100%;
   padding: 30px 0;
}
   
.nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
}
   
.nav li {
   margin: 0 10px;
}
   
.nav a {
   text-decoration: none;
   margin: 0 35px;
   color: white;
   font-weight: bold;
   opacity: 0.5;
   font-size: x-large;
}
   
.nav a:hover {
   color: white;
   opacity: 1;
   transition-duration: 0.8s;
}
   
#melodeez-logo{
   width: 80%;
   position: relative;
   left: 20px;
}
   
#page-actuelle{
   opacity: 1;
}
   
#scroll-up{
   width: 20%;
}
   
#scrollUp{
   position: fixed;
   bottom : 10px;
   right: -130px;
   opacity: 0.5;
}

/* BODY */
*{
   box-sizing: border-box;
}
   
.ancre{
   display: center;
   text-align: center;
   margin-bottom: 50px;
}
   
a[href^="#"]{
   text-decoration: none;
   color: white;
}
   
/* TIMELINE */
.timeline {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 40px;
}

.timeline-item {
   display: flex;
   justify-content: center;
   align-items: center; 
   width: 80%;
   margin: 20px;
}

.content1,.content2,.content3,.content4 {
   width: 50%;
   padding: 20px;
   text-align: justify;
}

/*barre*/
body::before {
   content: "";
   position: absolute;
   top: 40%;
   bottom: 0;
   left: 50%;
   transform: translateX(-1px); /* Pour centrer la ligne */
   width: 5px;
   background: #ffffff;
   z-index: -1;
   content: '';
   margin-top: 50px; 
   height: 100rem;
}



.vertical-line {
   width: 2px;
   background: #ccc;
   margin: 0 40px; 
}

.content1, .content2, .content3, .content4 {
   width: 75%;
   padding: 20px;
   background-color: white;
   color: #000000;
   border-radius: 5px; /* Coins arrondis */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Ombre légère */
   text-align: justify;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;  
}

.content1,.content3 {
   width: 65%;
   padding: 20px;
   text-align: justify;
   margin-bottom : 7rem;
   margin-right : 10rem;
}

.content2,.content4{
   width: 65%;
   padding: 20px;
   text-align: justify;
   margin-bottom : 7rem;
   margin-left : 10rem;
}

.image {
   width: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left : 2rem;
   margin-right : 2rem;
   margin-bottom : 7rem;
}

.timeline-item:nth-child(even) .content1,.timeline-item:nth-child(even) .content2,.timeline-item:nth-child(even) .content3,.timeline-item:nth-child(even) .content4 {
   order: 2;
}

.timeline-item:nth-child(even) .image {
   order: 1;
}

.image img {
   max-width: 100%;
   max-height: 100%;
   border-radius: 10px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

h2 {
   font-size: large;
   margin-bottom: 10px;
}



.timeline-item:nth-child(odd)::before {
   left: 40rem;
   top: 50%;
   transform: translateY(-50%);
}

.timeline-item:nth-child(even)::before {
   left: 40rem;
   top: 105%;
   transform: translateY(-50%);
}



/* Pied de page */

footer{
   marker-end: 100px;
   margin-top: 50px;
 }
 li{
   text-align: center;
 }
 footer{
     min-height: 100px;
     padding: 20px 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
 
 footer .social_icon, footer .menu{
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 10px 0;
     flex-wrap: wrap;
 }
 
 footer .social_icon a{
     font-size: 2em;
     color: #ffff;
     margin: 0 10px;
     display: inline-block;
     transition: 0.5s;
 }
 
 footer .social_icon .box {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
 }
 
 .box :first-child {
     align-self: center;
 }
 footer a:hover{
     transform: translateY(-10px)
 }
 
 footer p{
     color:#fff;
     text-align: center;
     margin-top: 15px;
     margin-bottom: 10px;
     font-size: 1.1em;
 }
 
 .facebook{
     width: 37px;
     height: 37px;
 }
 
 .twitter{
     width: 35px;
     height: 35px;
 }
 
 .instagram{
     width: 33px;
     height: 33px;
 }
 
 .linkedin{
     width: 27px;
     height: 27px;
 }