/* Présentation — dossier éditorial monochrome, simple et lisible. */
.presentation-page {
  --presentation-paper: #f2eee4;
  --presentation-paper-light: #faf7ef;
  --presentation-mat: #fffdf8;
  --presentation-ink: #111111;
  --presentation-muted: #626262;
  --presentation-accent: #111111;
  --presentation-accent-deep: #111111;
  --presentation-accent-soft: #8d8980;
  --presentation-line: rgba(21, 19, 15, .18);
  --presentation-shadow: rgba(21, 19, 15, .08);
}

/* Hero photographique : la scène nocturne devient l'ancrage plein cadre. */
.presentation-page .presentation-hero {
  height: clamp(620px, 76svh, 820px) !important;
  min-height: clamp(620px, 76svh, 820px) !important;
  max-height: 820px !important;
  background: #090806 !important;
}

.presentation-page .presentation-hero__media {
  overflow: hidden !important;
  background: #090806 !important;
}

.presentation-page .presentation-hero__media img {
  object-fit: cover !important;
  /* Reprend le cadrage de l'ancienne photographie de fin de page. */
  object-position: 50% calc(52% + 3cm) !important;
  transform: none !important;
  filter: saturate(.88) contrast(1.04) !important;
}

.presentation-page .presentation-hero::after {
  content: none !important;
  display: none !important;
}

.presentation-page .presentation-hero__credit {
  position: absolute !important;
  right: clamp(20px, 3.2vw, 54px) !important;
  bottom: clamp(14px, 1.6vw, 24px) !important;
  z-index: 3 !important;
  max-width: min(58ch, 46vw) !important;
  margin: 0 !important;
  color: rgba(250, 247, 239, .7) !important;
  font-family: var(--font-clean) !important;
  font-size: clamp(8px, .58vw, 10px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: .055em !important;
  text-align: right !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72) !important;
}

/* Le sous-titre devient une ouverture de dossier, sans surlignage jaune. */
.presentation-page .presentation-subtitle {
  border-bottom: 1px solid var(--presentation-line) !important;
  color: var(--presentation-ink) !important;
  background: var(--presentation-paper) !important;
}

.presentation-page .presentation-subtitle__inner {
  width: min(calc(100% - (2 * clamp(24px, 5vw, 76px))), 1440px) !important;
}

.presentation-page .presentation-subtitle p {
  color: var(--presentation-ink) !important;
}

.presentation-page .presentation-subtitle__highlight {
  display: inline !important;
  padding: 0 !important;
  color: inherit !important;
  background: none !important;
  border-bottom: 0 !important;
  font-size: 1.15em !important;
  line-height: .9 !important;
}

.presentation-page #presentation.presentation-story {
  position: relative !important;
  padding: clamp(46px, 6vw, 88px) clamp(24px, 5vw, 76px) clamp(104px, 11vw, 174px) !important;
  background: var(--presentation-paper-light) !important;
}

.presentation-page .presentation-story__inner {
  display: grid !important;
  width: min(100%, 1440px) !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(350px, .78fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: clamp(42px, 5vw, 78px) !important;
  row-gap: 0 !important;
  align-items: start !important;
  color: var(--presentation-ink) !important;
}

.presentation-page .presentation-panel--manifesto {
  display: contents !important;
}

.presentation-page .presentation-panel::before,
.presentation-page .presentation-panel::after {
  content: none !important;
  display: none !important;
}

/* Ouverture sur papier : gravure originale et texte sans encadré. */
.presentation-page .presentation-manifesto__lead {
  position: relative !important;
  isolation: isolate !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: clamp(38px, 5vw, 80px) !important;
  align-items: center !important;
  padding: 0 0 clamp(48px, 6vw, 88px) !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--presentation-paper-light) !important;
  box-shadow: none !important;
}

.presentation-page .presentation-manifesto__lead::before {
  content: none !important;
  display: none !important;
}

.presentation-page .presentation-manifesto__lead::after {
  content: none !important;
  display: none !important;
}

.presentation-page .presentation-manifesto__mark {
  display: flex !important;
  mix-blend-mode: multiply !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--presentation-ink) !important;
}

.presentation-page .presentation-manifesto__mark::before,
.presentation-page .presentation-manifesto__mark::after {
  content: none !important;
  display: none !important;
}

.presentation-page .presentation-manifesto__mark img {
  display: block !important;
  width: min(100%, 520px) !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: multiply !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border: 0 !important;
}

.presentation-page .presentation-manifesto__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.presentation-page .presentation-manifesto__lead p {
  max-width: 74ch !important;
  margin: 0 !important;
  color: var(--presentation-ink) !important;
  font-family: var(--font-clean) !important;
  font-size: clamp(18px, 1.25vw, 21px) !important;
  font-weight: 500 !important;
  line-height: 1.66 !important;
  text-wrap: pretty !important;
}

.presentation-page .presentation-manifesto__quote {
  margin: 0 0 clamp(32px, 3.4vw, 48px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.presentation-page .presentation-manifesto__quote p {
  max-width: none !important;
  color: var(--presentation-ink) !important;
  font-size: clamp(19px, 1.45vw, 25px) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.presentation-page .presentation-manifesto__quote cite {
  display: block !important;
  margin-top: 12px !important;
  color: #57534c !important;
  font-family: var(--font-clean) !important;
  font-size: clamp(12px, .84vw, 14px) !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
}

/* Fiche 02 : corps du dossier, colonne gauche du L. */
.presentation-page .presentation-manifesto__body {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  padding: 0 clamp(40px, 4.8vw, 68px) clamp(58px, 6vw, 88px) !important;
  border: 1px solid var(--presentation-line) !important;
  border-top: 0 !important;
  background: var(--presentation-paper-light) !important;
  box-shadow:
    10px 12px 0 var(--presentation-shadow),
    0 24px 62px rgba(21, 19, 15, .06) !important;
}

.presentation-page .presentation-manifesto__body section {
  min-width: 0 !important;
  padding-top: clamp(42px, 4.6vw, 64px) !important;
  border-top: 1px solid var(--presentation-line) !important;
}

.presentation-page .presentation-manifesto__body section:first-child {
  border-top-color: transparent !important;
}

.presentation-page .presentation-manifesto__body section + section {
  margin-top: clamp(34px, 3.8vw, 54px) !important;
}

.presentation-page .presentation-manifesto__body h3 {
  position: relative !important;
  max-width: 16ch !important;
  margin: 0 0 clamp(24px, 2.8vw, 38px) !important;
  padding-top: 20px !important;
  color: var(--presentation-ink) !important;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: clamp(28px, 2.7vw, 43px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  line-height: 1.03 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance !important;
  border: 0 !important;
}

.presentation-page .presentation-manifesto__body h3::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  display: block !important;
  width: 58px !important;
  height: 3px !important;
  background: var(--presentation-accent) !important;
}

.presentation-page .presentation-manifesto__body p {
  max-width: 64ch !important;
  margin: 0 !important;
  color: #292929 !important;
  font-family: var(--font-clean) !important;
  font-size: clamp(16px, 1.06vw, 18.5px) !important;
  font-weight: 400 !important;
  line-height: 1.76 !important;
  text-wrap: pretty !important;
}

.presentation-page .presentation-manifesto__body p + p {
  margin-top: 1.45em !important;
}

.presentation-page .presentation-manifesto__body cite {
  font-family: inherit !important;
  font-style: italic !important;
}

/* Fiche 03 : portrait et biographie, comme une page rapportée dans le dossier. */
.presentation-page .presentation-panel--bio {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  width: 100% !important;
  margin: clamp(54px, 5.5vw, 82px) 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--presentation-line) !important;
  outline: 10px solid var(--presentation-mat) !important;
  background: var(--presentation-paper-light) !important;
  box-shadow:
    -10px 12px 0 var(--presentation-shadow),
    0 26px 66px rgba(21, 19, 15, .07) !important;
}

.presentation-page .presentation-panel--bio::before {
  content: none !important;
  display: none !important;
}

.presentation-page .presentation-panel--bio::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: var(--presentation-ink) !important;
  border: 0 !important;
}

.presentation-page .presentation-bio__portrait {
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--presentation-ink) !important;
}

.presentation-page .presentation-bio__portrait::after {
  background: linear-gradient(180deg, transparent 64%, rgba(21, 19, 15, .22)) !important;
}

.presentation-page .presentation-bio__portrait img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: 50% 43% !important;
  filter: saturate(.78) contrast(1.04) !important;
}

.presentation-page .presentation-bio__content {
  padding: clamp(38px, 4vw, 58px) !important;
}

.presentation-page .presentation-bio__content h2 {
  position: relative !important;
  max-width: none !important;
  margin: 0 0 clamp(30px, 3.2vw, 46px) !important;
  padding-top: 22px !important;
  color: var(--presentation-ink) !important;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: clamp(36px, 3.7vw, 56px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  line-height: .96 !important;
  letter-spacing: -.04em !important;
  border: 0 !important;
}

.presentation-page .presentation-bio__content h2::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 70px !important;
  height: 3px !important;
  background: var(--presentation-accent) !important;
}

.presentation-page .presentation-bio__content h2::after {
  content: none !important;
  display: none !important;
}

.presentation-page .presentation-story .presentation-bio__content p {
  max-width: 58ch !important;
  margin: 0 !important;
  color: #292929 !important;
  font-family: var(--font-clean) !important;
  font-size: clamp(15.5px, .95vw, 17px) !important;
  line-height: 1.74 !important;
  text-wrap: pretty !important;
}

.presentation-page .presentation-story .presentation-bio__content p + p {
  margin-top: 1.4em !important;
}

/* L'ancienne image du hero conclut désormais la présentation en pleine largeur. */
.presentation-page .presentation-closing {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #090806 !important;
}

.presentation-page .presentation-closing__figure,
.presentation-page .presentation-closing__figure picture {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: clamp(480px, 64svh, 760px) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.presentation-page .presentation-closing__figure img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% calc(52% + 3cm) !important;
  filter: saturate(.88) contrast(1.04) !important;
}

.presentation-page .presentation-closing__figure::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(0deg, rgba(5, 5, 4, .62), transparent 34%) !important;
}

.presentation-page .presentation-closing__figure figcaption {
  position: absolute !important;
  right: clamp(20px, 3.2vw, 54px) !important;
  bottom: clamp(16px, 2vw, 28px) !important;
  z-index: 2 !important;
  max-width: min(58ch, 52vw) !important;
  color: rgba(250, 247, 239, .78) !important;
  font-family: var(--font-clean) !important;
  font-size: clamp(8px, .58vw, 10px) !important;
  line-height: 1.35 !important;
  letter-spacing: .055em !important;
  text-align: right !important;
}

@media (hover: hover) and (pointer: fine) {
  .presentation-page .presentation-bio__portrait img {
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1), filter 700ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  .presentation-page .presentation-panel--bio:hover .presentation-bio__portrait img {
    transform: scale(1.012) !important;
    filter: saturate(.84) contrast(1.04) !important;
  }
}

@media (max-width: 1120px) {
  .presentation-page .presentation-story__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(330px, .94fr) !important;
    column-gap: 38px !important;
  }

  .presentation-page .presentation-manifesto__lead {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  }

  .presentation-page .presentation-bio__content {
    padding: 36px 30px 44px !important;
  }
}

@media (max-width: 900px) {
  .presentation-page .presentation-story__inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .presentation-page .presentation-manifesto__lead,
  .presentation-page .presentation-manifesto__body,
  .presentation-page .presentation-panel--bio {
    grid-column: 1 !important;
  }

  .presentation-page .presentation-manifesto__lead {
    grid-row: 1 !important;
  }

  .presentation-page .presentation-manifesto__body {
    grid-row: 2 !important;
  }

  .presentation-page .presentation-panel--bio {
    grid-row: 3 !important;
    width: min(100% - 20px, 680px) !important;
    margin: 72px 10px 0 auto !important;
  }
}

@media (max-width: 680px) {
  .presentation-page .presentation-hero {
    height: clamp(500px, 72svh, 660px) !important;
    min-height: clamp(500px, 72svh, 660px) !important;
    max-height: 660px !important;
  }

  .presentation-page .presentation-subtitle__highlight {
    font-size: 1.04em !important;
  }

  .presentation-page .presentation-hero__credit {
    right: 16px !important;
    bottom: 12px !important;
    max-width: min(46ch, calc(100% - 32px)) !important;
    font-size: 7.5px !important;
    letter-spacing: .035em !important;
  }

  .presentation-page .presentation-subtitle__inner {
    width: 100% !important;
  }

  .presentation-page .presentation-subtitle p {
    font-size: clamp(27px, 8.5vw, 35px) !important;
  }

  .presentation-page #presentation.presentation-story {
    padding: 30px 18px 96px !important;
  }

  .presentation-page .presentation-manifesto__lead {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 0 8px 44px !important;
    box-shadow: none !important;
  }

  .presentation-page .presentation-manifesto__mark {
    justify-content: center !important;
    padding: 0 !important;
  }

  .presentation-page .presentation-manifesto__mark img {
    width: min(100%, 350px) !important;
  }

  .presentation-page .presentation-manifesto__lead p {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  .presentation-page .presentation-manifesto__body {
    padding: 0 26px 46px !important;
    box-shadow:
      6px 8px 0 var(--presentation-shadow),
      0 20px 48px rgba(21, 19, 15, .06) !important;
  }

  .presentation-page .presentation-manifesto__body h3 {
    font-size: clamp(28px, 8.8vw, 39px) !important;
  }

  .presentation-page .presentation-manifesto__body p {
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  .presentation-page .presentation-panel--bio {
    width: calc(100% - 16px) !important;
    margin: 68px 8px 0 auto !important;
    outline-width: 8px !important;
    box-shadow:
      -6px 8px 0 var(--presentation-shadow),
      0 20px 50px rgba(21, 19, 15, .07) !important;
  }

  .presentation-page .presentation-bio__content {
    padding: 36px 26px 44px !important;
  }

  .presentation-page .presentation-bio__content h2 {
    font-size: clamp(36px, 11vw, 48px) !important;
  }

  .presentation-page .presentation-hero__media img {
    object-position: 50% calc(50% + 1cm) !important;
    transform: none !important;
  }

  .presentation-page .presentation-closing__figure,
  .presentation-page .presentation-closing__figure picture {
    min-height: 440px !important;
  }

  .presentation-page .presentation-closing__figure img {
    object-position: 50% calc(50% + 1cm) !important;
  }

  .presentation-page .presentation-closing__figure figcaption {
    right: 16px !important;
    bottom: 14px !important;
    max-width: calc(100% - 32px) !important;
    font-size: 7.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .presentation-page .presentation-bio__portrait img {
    transition: none !important;
  }
}
