/* RESET */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Segoe UI", Roboto, sans-serif;
  background: #f9f9f9;
  color: #333;
  overflow: hidden; /* pas d'ascenseur global */
}

/* HEADER */
header.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(135deg, #01060b, #042c54);
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1000;
}
header.hero h1, header.hero p {
  margin: 0;
}

/* NAV */
nav {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #003366;
  z-index: 1000;
}
nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
  font-weight: 500;
}
nav a:hover { color: rgb(144, 79, 213); }

/* MAIN */
main {
  position: absolute;
  top: 10px; /* header + nav */
  left: 0;
  right: 0;
  bottom: 0px; /* footer */
  overflow-y: auto;
}

/* IFRAME */
iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* FOOTER */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #003366;
  color: rgb(10, 7, 52);
  text-align: center;
  line-height: 50px;
  z-index: 1000;
}

/* TIMELINE */
 /* Ajustement spécifique pour cette page */
    .timeline {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin: 2rem auto;
      max-width: 800px; /* même largeur que les capsules précédentes */
    }

    .timeline-item {
      display: flex;
      justify-content: center; /* centrer le texte */
    }

    .timeline-content {
      background: #fff;
      padding: 1rem 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      width: 100%; 
      max-width: 500px; /* même max-width que précédemment */
      text-align: center; /* texte centré */
    }

   
.timeline-image img { width: 150px; height: 80px; overflow :hidden; object-fit: cover; cursor: pointer; transition: transform 0.8s; }
.timeline-image img:hover { transform: scale(1.05); }

/* POPUP */
.popup { display: none; position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); overflow: auto; }
.popup-content { margin: auto; display: block; max-width: 90%; max-height: 80%; }
.close { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }
.close:hover { color: #bbb; }

/* Timeline générale */
.timeline {
  position: relative; /* nécessaire pour que les ::before des enfants se positionnent correctement */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 800px;
}

/* Ligne verticale */
.timeline::before {
  content: '';
  position: absolute;
  left: 20px;          /* distance depuis le bord gauche */
  top: 0;
  bottom: 0;
  width: 4px;
  background: #0a74da;
  z-index: 0;          /* derrière le contenu */
}

/* Chaque élément du timeline */
.timeline-item {
  position: relative;  /* pour que sa boule soit positionnée par rapport à lui */
  display: flex;
}

/* Boule par élément */
.timeline-item::before {
  content: '';
  position: absolute;
  left: 26px;          /* centré sur la ligne (ligne 4px + boule 12px) */
  top: 10px;           /* ajuster pour centrer par rapport au contenu */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5c0909;
  z-index: 1;          /* devant la ligne mais derrière le texte */
}

/* Contenu du timeline (texte/fenêtre) */
.timeline-content {
  background: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-left: 60px;   /* espace pour la ligne + boule */
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 2;          /* devant la ligne et la boule */
}