/* CNB Story / Chroniques du CNB — feuille dédiée */
.histoire-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 20px 50px;
}
.histoire-entete {
  text-align: center;
  margin: 0 0 26px;
}
.histoire-entete h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
}
.histoire-entete p {
  margin: 8px 0 0;
  opacity: .78;
}
.histoire-layout {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.histoire-menu {
  position: sticky;
  top: 18px;
  border-radius: 14px;
  padding: 18px;
  background: var(--page-secondary, #f3f7fb);
  box-shadow: 0 5px 18px rgba(0,0,0,.08);
}
.histoire-menu h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
}
.histoire-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.histoire-menu li + li { margin-top: 5px; }
.histoire-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  line-height: 1.25;
}
.histoire-menu a:hover,
.histoire-menu a.actif {
  background: #0b5ea8;
  color: #fff;
}
.histoire-article {
  min-width: 0;
  border-radius: 14px;
  padding: clamp(18px, 3vw, 34px);
  background: var(--page-secondary, #fff);
  box-shadow: 0 5px 18px rgba(0,0,0,.08);
}
.histoire-article h2 {
  text-align: center;
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}
.histoire-episode {
  text-align: center;
  font-weight: 600;
  margin: 0 0 22px;
}
.histoire-article .histoire-photo-titre,
.histoire-article .histoire-contenu img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto !important;
  margin: 20px auto;
  border-radius: 10px;
}
.histoire-article .histoire-photo-titre {
  max-height: 520px;
  object-fit: contain;
}
.histoire-contenu {
  font-size: 1.04rem;
  line-height: 1.72;
  text-align: justify;
}
.histoire-contenu p { margin: 0 0 1rem; }
.histoire-contenu ul { margin: .5rem 0 1.2rem; }
.histoire-contenu .signature-story {
  max-width: 180px;
  opacity: .5;
}
.histoire-navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(128,128,128,.25);
}
.histoire-navigation a {
  text-decoration: none;
  font-weight: 600;
}
@media (max-width: 850px) {
  .histoire-page { padding: 18px 12px 36px; }
  .histoire-layout { display: block; }
  .histoire-menu {
    position: static;
    margin-bottom: 18px;
    padding: 12px;
  }
  .histoire-menu h2 { text-align: center; }
  .histoire-menu ul {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
  }
  .histoire-menu li { flex: 0 0 auto; margin: 0 !important; }
  .histoire-menu a { white-space: nowrap; }
  .histoire-article { padding: 18px 15px; }
  .histoire-contenu { text-align: left; font-size: 1rem; }
}


/* =========================================================
   CORRECTION SUPERPOSITION AVEC LE MENU PRINCIPAL
   ========================================================= */

/* Le header du site doit toujours rester au premier plan. */
body > header {
    position: relative;
    z-index: 1000;
}

/* La navigation des Chroniques reste sous le header. */
.histoire-sidebar {
    position: sticky;
    top: 100px;
    z-index: 1;
}

/* Aucun élément de la partie historique ne doit recouvrir le header. */
.histoire-page,
.histoire-layout,
.histoire-content,
.histoire-article {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .histoire-sidebar {
        position: relative;
        top: auto;
    }
}