/* PAGE ARCHIVES */
body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  margin: 0;
}

/* Fond + overlay */
.bg-image,
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg-image {
  background-size: cover;
  background-position: center top 35%;
  background-repeat: no-repeat;
}

.overlay {
  background: rgba(0, 0, 0, 0.1);
}


.page-title {
  text-align: center;
  padding: 30px 0;
  font-size: 2.6rem;
  color: #042e54;
  font-weight: 800;
}

.archives-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* SECTIONS DÉPLIANTES */
.section-toggle {
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  font-size: 1.4rem;
  font-weight: 700;
  background: #042e54;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: 0.3s ease;
}

.section-toggle:hover {
  background: #064070;
}

.section-content {
  display: none;
  margin-bottom: 25px;
  animation: fadeIn 0.5s ease;
}

/* BLOCS ARCHIVES */
.archive-block {
  display: flex;
  gap: 40px;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  margin-bottom: 25px;
}

/* Couleurs */
.block-blue   { background:#e6f0ff; border-left:6px solid #003c8f; }
.block-yellow { background:#fff8d6; border-left:6px solid #d4a300; }
.block-purple { background:#f3e6ff; border-left:6px solid #7a00b3; }
.block-green  { background:#e8ffe6; border-left:6px solid #0b7d00; }
.block-orange { background:#ffe6cc; border-left:6px solid #ff8c00; }
.block-red    { background:#ffe6e6; border-left:6px solid #b30000; }
.block-grey   { background:#eeeeee; border-left:6px solid #555; }

/* Photo */
.archive-photo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.archive-photo img {
  width: 100%;
  max-width: 350px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Texte */
.archive-text {
  flex: 2;
}

.archive-text h2 {
  font-size: 2rem;
  color: #042e54;
  margin-bottom: 15px;
}

.archive-text p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #333;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 900px) {
  .archive-block {
    flex-direction: column;
    text-align: center;
  }

  .archive-photo img {
    max-width: 260px;
  }
}