/* ##########################################################################
   BLOC 40c — HISTORIQUE : layout fiable (sans pièges Bootstrap)
   Dernière MàJ : 28/02/2026
   ########################################################################## */
/* wrapper de lecture (évite l'effet “colonne à droite”) */
.sep-history-page .sep-wrap{
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--sep-gutter, 12px);
}

/* HERO : version sans photo => pas de voile blanc */
.sep-hero--plain::after{ display:none; }

/* Vidéos : largeur maîtrisée (évite l’iframe géante) */
.sep-media{
  max-width: 780px;
  margin-inline: auto;
}
.sep-media .ratio{
  border-radius: var(--sep-radius-lg, 26px);
  overflow: hidden;
  border: 1px solid rgba(27,19,39,.10);
  box-shadow: 0 10px 26px rgba(27,19,39,.08);
}

/* Bloc personne : grille robuste (gauche/droite) */
.sep-person{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.2rem;
  align-items: start;
}
.sep-person--reverse{
  grid-template-columns: 1fr 240px;
}
.sep-person--reverse .sep-person__media{ order: 2; }
.sep-person--reverse .sep-person__body{ order: 1; }

@media (max-width: 767.98px){
  .sep-person,
  .sep-person--reverse{
    grid-template-columns: 1fr;
  }
  .sep-person--reverse .sep-person__media,
  .sep-person--reverse .sep-person__body{ order: initial; }
}

/* Portraits fixés (propre + homogène) */
.sep-portrait{
  width: 240px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(27,19,39,.10);
  box-shadow: 0 10px 26px rgba(27,19,39,.08);
  display:block;
}

/* Photos “action / archives” */
.sep-photo{
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(27,19,39,.10);
  box-shadow: 0 10px 26px rgba(27,19,39,.08);
  display:block;
}

.sep-credit{
  margin-top: .45rem;
  opacity: .72;
  line-height: 1.35;
}

/* Galerie stèle */
.sep-gallery{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 1rem;
}
.sep-gallery > figure{ grid-column: span 12; margin:0; }
@media (min-width: 768px){
  .sep-gallery > figure{ grid-column: span 4; }
}

/* Portraits : wrapper lecture (même logique que Historique) */
.sep-portrait-page .sep-wrap{
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--sep-gutter, 12px);
}