/*
 * Page Victimes — composition documentaire du thème Genocost.
 * Les couleurs, la typographie, les boutons, le hero et les formulaires sont
 * fournis par le socle public. Ce fichier ne décrit que la mise en page métier.
 */

body[data-page="victimes"] {
  background: var(--surface-ivory);
  color: var(--text-on-light);
}

.victims-page {
  overflow: clip;
  background: var(--surface-ivory);
}

.victims-page [data-victims-chapter] {
  scroll-margin-top: var(--header-height);
}

.victims-page h2,
.victims-page h3 {
  color: inherit;
}

.victims-chapter-label,
.victims-record__meta {
  margin: 0 0 var(--space-4);
  color: var(--text-on-light-secondary);
}

.victims-lead {
  max-width: 720px;
  color: var(--text-on-light);
}

.victims-text-link {
  margin-top: var(--space-4);
}

/* Médias documentaires : la légende reste attachée à son image. */
.victims-photo {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--surface-stone);
}

.victims-photo picture {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.victims-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.victims-photo figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-on-light);
  background: var(--surface-paper);
  color: var(--text-on-light-secondary);
}

.victims-photo figcaption span,
.victims-photo figcaption small {
  display: block;
}

.victims-photo figcaption a,
.victims-official-source a,
.victims-sources__documents a {
  color: var(--accent-on-light);
}

.victims-section-heading,
.victims-directory__header {
  margin-bottom: var(--space-8);
}

.victims-section-heading p:last-child,
.victims-directory__header p:last-child {
  max-width: 540px;
  margin: 0;
  color: var(--text-on-light-secondary);
}

/* 01 — Ouverture éditoriale. */
.victims-before__media {
  min-height: 720px;
}

.victims-before__copy {
  padding: var(--space-8) 0 var(--space-8) var(--space-8);
}

.victims-before__copy h2 {
  margin-bottom: var(--space-6);
}

.victims-before__copy > p {
  margin-bottom: var(--space-4);
  color: var(--text-on-light-secondary);
}

.victims-before__copy .victims-lead {
  color: var(--text-on-light);
}

.victims-source-note {
  margin-top: var(--space-6);
  padding: var(--space-5) 0 var(--space-5) var(--space-5);
  border-left: 1px solid var(--border-on-light-strong);
}

.victims-source-note span,
.victims-official-source span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-on-light-secondary);
}

.victims-source-note p {
  margin: 0;
  color: var(--text-on-light-secondary);
}

/* 02 — Cadre légal sur surface sombre. */
.victims-definition,
.victims-protection,
.victims-sources {
  color: var(--text-on-dark);
}

.victims-definition .victims-chapter-label,
.victims-definition .victims-lead,
.victims-protection .victims-chapter-label,
.victims-protection .victims-lead,
.victims-sources .victims-chapter-label,
.victims-sources .victims-lead {
  color: var(--text-on-dark-secondary);
}

.victims-definition h2,
.victims-protection h2,
.victims-sources h2,
.victims-sources h3 {
  color: var(--text-on-dark);
}

.victims-definition__list,
.victims-recognition__steps,
.victims-records,
.victims-trace__list,
.victims-sources__criteria,
.victims-sources__documents ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.victims-definition__list {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border-dark-default);
}

.victims-definition__list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-dark-default);
}

.victims-definition__list li > span {
  flex: 0 0 44px;
  color: var(--text-on-dark-secondary);
}

.victims-definition__list p {
  margin: 0;
  color: var(--text-on-dark-secondary);
}

.victims-definition__photo {
  min-height: 650px;
}

.victims-official-source {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark-default);
}

.victims-official-source a {
  color: var(--accent-on-dark);
}

/* 03 — Parcours de reconnaissance. */
.victims-recognition__photo {
  min-height: 520px;
  max-height: 680px;
}

.victims-recognition__track {
  position: relative;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
}

.victims-recognition__line {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  overflow: hidden;
  background: var(--border-on-light);
}

.victims-recognition__line > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--border-on-light-strong);
  transform: scaleX(0);
  transform-origin: left center;
}

.victims-recognition__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.victims-recognition__steps li > span {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--text-on-light-secondary);
}

.victims-recognition__steps li {
  min-width: 180px;
  flex: 1 1 180px;
}

.victims-recognition__steps h3 {
  margin-bottom: var(--space-3);
}

.victims-recognition__steps p {
  margin: 0;
  color: var(--text-on-light-secondary);
}

/* 04 — Protection, image et texte en continuité. */
.victims-protection__media {
  position: relative;
  min-height: 720px;
}

.victims-protection__photo {
  position: absolute;
  inset: 0;
}

.victims-protection__media > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, var(--color-overlay-image-medium) 100%);
  pointer-events: none;
}

.victims-protection__copy {
  max-width: 590px;
  padding: var(--space-8);
}

.victims-protection dl {
  margin: var(--space-6) 0;
  border-top: 1px solid var(--color-border-dark-default);
}

.victims-protection dl > div {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-dark-default);
}

.victims-protection dt {
  margin-bottom: var(--space-2);
  color: var(--text-on-dark);
}

.victims-protection dd {
  margin: 0;
  color: var(--text-on-dark-secondary);
}

/* 05 — Notices validées. */
.victims-memories__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.victims-memory {
  border-top: 1px solid var(--border-on-light);
  border-bottom: 1px solid var(--border-on-light);
  background: var(--surface-paper);
}

.victims-memory__visual,
.victims-memory__photo {
  min-height: 520px;
}

.victims-memory__copy {
  width: 100%;
  padding: var(--space-8);
}

.victims-memory__copy h3 {
  margin-bottom: var(--space-5);
}

.victims-memory__summary {
  color: var(--text-on-light-secondary);
}

.victims-memory__copy dl {
  margin: var(--space-5) 0;
  border-top: 1px solid var(--border-on-light);
}

.victims-memory__copy dl > div {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-on-light);
}

.victims-memory__copy dt,
.victims-memory__copy dd {
  margin: 0;
}

.victims-memory__copy dt {
  flex: 0 0 120px;
}

.victims-memory__copy dd {
  color: var(--text-on-light-secondary);
}

.victims-memories__empty {
  background: var(--surface-paper);
}

.victims-memories__empty-photo {
  min-height: 440px;
}

.victims-memories__empty .col-lg-5 > div {
  padding: var(--space-8);
}

/* 06 — Recherche dans le fonds public. */
.victims-directory {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: var(--color-background-primary);
  color: var(--text-on-dark);
  isolation: isolate;
}

.victims-directory__background,
.victims-directory__veil {
  position: absolute;
  inset: 0;
}

.victims-directory__background {
  z-index: -2;
}

.victims-directory__background figcaption {
  display: none;
}

.victims-directory__veil {
  z-index: -1;
  background: linear-gradient(90deg, var(--color-overlay-text-side-start) 0%, var(--color-overlay-text-side-middle) 58%, var(--color-overlay-image-strong) 100%);
}

.victims-directory__header p:last-child,
.victims-directory .victims-chapter-label,
.victims-directory__status,
.victims-directory__empty {
  color: var(--text-on-dark-secondary);
}

.victims-search {
  padding: var(--space-6);
  border: 1px solid var(--color-border-dark-default);
  background: var(--color-panel-overlay-memorial-dark);
}

.victims-search__primary > div {
  display: flex;
  gap: var(--space-3);
}

.victims-search__primary > div > input {
  flex: 1 1 auto;
}

.victims-search__filters {
  margin-top: var(--space-4);
}

.victims-search__reset,
.victims-search__more {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-on-dark);
}

.victims-search__reset {
  margin-top: var(--space-3);
}

.victims-directory__status,
.victims-directory__error,
.victims-directory__empty {
  min-height: 44px;
  margin-top: var(--space-5);
}

.victims-directory__error {
  color: var(--color-error);
}

.victims-records {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.victims-records > li {
  min-width: 320px;
  flex: 1 1 480px;
}

.victims-record {
  height: 100%;
  padding: var(--space-6);
  border: 1px solid var(--color-border-dark-default);
  background: var(--color-panel-overlay-memorial-dark);
}

.victims-record > h3 {
  margin-bottom: var(--space-4);
  color: var(--text-on-dark);
}

.victims-record > div,
.victims-record > p:not(.victims-record__meta),
.victims-record__content {
  color: var(--text-on-dark-secondary);
}

.victims-record dl {
  margin: var(--space-5) 0;
  border-top: 1px solid var(--color-border-dark-default);
}

.victims-record dl > div {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-dark-default);
}

.victims-record dt,
.victims-record dd {
  margin: 0;
}

.victims-record dt {
  flex: 0 0 140px;
}

.victims-record dd {
  color: var(--text-on-dark-secondary);
}

.victims-record summary {
  min-height: 44px;
  color: var(--accent-on-dark);
}

.victims-search__more {
  display: block;
  margin: var(--space-5) auto 0;
}

/* 07 — Frise de provenance. */
.victims-trace__composition {
  border-top: 1px solid var(--border-on-light);
  border-bottom: 1px solid var(--border-on-light);
  background: var(--surface-paper);
}

.victims-trace__visual,
.victims-trace__photo {
  min-height: 700px;
}

.victims-trace__timeline {
  position: relative;
  padding: var(--space-8);
}

.victims-trace__axis {
  position: absolute;
  top: var(--space-8);
  bottom: var(--space-8);
  left: var(--space-6);
  width: 1px;
  overflow: hidden;
  background: var(--border-on-light);
}

.victims-trace__axis > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--border-on-light-strong);
  transform: scaleY(0);
  transform-origin: top center;
}

.victims-trace__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-left: var(--space-7);
}

.victims-trace__list li {
  position: relative;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-on-light);
}

.victims-trace__list li::before {
  position: absolute;
  top: 9px;
  left: -41px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface-paper);
  background: var(--border-on-light-strong);
  content: "";
}

.victims-trace__list p:not(.victims-record__meta),
.victims-trace__empty p {
  color: var(--text-on-light-secondary);
}

/* 08 — Méthode et sources. */
.victims-sources__composition {
  border: 1px solid var(--color-border-dark-default);
}

.victims-sources__visual,
.victims-sources__photo {
  min-height: 820px;
}

.victims-sources__copy {
  padding: var(--space-8);
}

.victims-sources__criteria {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border-dark-default);
}

.victims-sources__criteria li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-dark-default);
}

.victims-sources__criteria li > span,
.victims-sources__criteria p {
  color: var(--text-on-dark-secondary);
}

.victims-sources__criteria li > span {
  flex: 0 0 44px;
}

.victims-sources__criteria h3,
.victims-sources__criteria p {
  margin: 0;
}

.victims-sources__documents {
  margin-top: var(--space-7);
}

.victims-sources__documents li {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-dark-default);
}

.victims-sources__documents h3 {
  margin-bottom: var(--space-2);
}

.victims-sources__documents a {
  color: var(--accent-on-dark);
}

/* 09 — Actions éditoriales. */
.victims-actions__header {
  max-width: 820px;
  margin-bottom: var(--space-8);
}

.victims-actions__header > p:last-child {
  color: var(--text-on-light-secondary);
}

.victims-action-panel {
  display: flex;
  width: 100%;
  flex-direction: column;
  border: 1px solid var(--border-on-light);
  background: var(--surface-paper);
}

.victims-action-panel__photo {
  min-height: 380px;
}

.victims-action-panel__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6);
}

.victims-action-panel__copy > p:not(.victims-chapter-label) {
  color: var(--text-on-light-secondary);
}

.victims-action-panel__copy .victims-confidentiality {
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-light);
}

/* 10 — Conclusion photographique. */
.victims-conclusion {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-background-primary);
  color: var(--text-on-dark);
  isolation: isolate;
}

.victims-conclusion__photo,
.victims-conclusion__veil {
  position: absolute;
  inset: 0;
}

.victims-conclusion__photo {
  z-index: -2;
}

.victims-conclusion__photo figcaption {
  display: none;
}

.victims-conclusion__veil {
  z-index: -1;
  background: linear-gradient(90deg, var(--color-overlay-text-side-start) 0%, var(--color-overlay-text-side-middle) 55%, var(--color-overlay-text-side-end) 100%);
}

.victims-conclusion__copy {
  padding: var(--space-9) 0;
}

.victims-conclusion__copy .victims-chapter-label,
.victims-conclusion__copy > p:not(.victims-chapter-label) {
  color: var(--text-on-dark-secondary);
}

.victims-conclusion__copy > p:not(.victims-chapter-label) {
  max-width: 660px;
  margin: var(--space-5) 0 var(--space-6);
}

@media (min-width: 992px) {
  .victims-before__media {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

@media (max-width: 1199px) {
  .victims-before__copy,
  .victims-protection__copy,
  .victims-memory__copy,
  .victims-trace__timeline,
  .victims-sources__copy {
    padding: var(--space-7);
  }

}

@media (max-width: 991px) {
  .victims-before__media,
  .victims-definition__photo,
  .victims-protection__media,
  .victims-memory__visual,
  .victims-memory__photo,
  .victims-trace__visual,
  .victims-trace__photo,
  .victims-sources__visual,
  .victims-sources__photo {
    min-height: 520px;
  }

  .victims-before__copy,
  .victims-protection__copy,
  .victims-memory__copy,
  .victims-trace__timeline,
  .victims-sources__copy {
    max-width: none;
    padding: var(--space-7) 0;
  }

  .victims-protection__photo {
    position: relative;
  }

  .victims-protection__media > span {
    display: none;
  }

  .victims-section-heading,
  .victims-directory__header,
  .victims-actions__header {
    margin-bottom: var(--space-7);
  }

  .victims-records > li {
    min-width: 0;
    flex-basis: 100%;
  }

  .victims-trace__axis {
    left: 0;
  }
}

@media (max-width: 767px) {
  .victims-before__media,
  .victims-definition__photo,
  .victims-protection__media,
  .victims-memory__visual,
  .victims-memory__photo,
  .victims-trace__visual,
  .victims-trace__photo,
  .victims-sources__visual,
  .victims-sources__photo,
  .victims-action-panel__photo {
    min-height: 380px;
  }

  .victims-photo figcaption {
    padding: var(--space-3);
  }

  .victims-recognition__steps li {
    min-width: 0;
    flex-basis: 100%;
  }

  .victims-recognition__track {
    padding-top: 0;
  }

  .victims-recognition__line {
    display: none;
  }

  .victims-search,
  .victims-record,
  .victims-action-panel__copy {
    padding: var(--space-5);
  }

  .victims-search__primary > div {
    align-items: stretch;
    flex-direction: column;
  }

  .victims-search__primary > div > button {
    width: 100%;
  }

  .victims-record dl > div,
  .victims-memory__copy dl > div {
    flex-direction: column;
    gap: var(--space-1);
  }

  .victims-conclusion {
    min-height: 620px;
  }
}

@media (max-width: 420px) {
  .victims-before__copy,
  .victims-protection__copy,
  .victims-memory__copy,
  .victims-trace__timeline,
  .victims-sources__copy {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .victims-page [data-victims-chapter],
  .victims-page .victims-photo img {
    opacity: 1;
    transform: none;
  }
}