/* Miroirs de chairs — édition illustrée d'automne R3 (Figma 437:588/2294/2504).
   Le hero et la couverture restent des images distinctes du texte HTML. */
.miroirs-canvas {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  background: var(--paper);
}

.miroirs-page .global-nav a[aria-current="location"] { color: var(--rust); }
.miroirs-page .global-nav a[aria-current="location"]::after {
  position: absolute;
  right: 19%; bottom: 1px; left: 19%; height: 1px;
  background: currentColor; content: "";
}

/* Explicit order: landscape, reading veil, then interactive content. */
.miroirs-hero { position: relative; min-height: 68.3cqw; isolation: isolate; overflow: hidden; }
.miroirs-landscape { position: absolute; z-index: 0; inset: 0; display: block; overflow: hidden; pointer-events: none; }
.miroirs-landscape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.miroirs-hero::before {
  position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(90deg, rgba(250,245,236,.74) 0%, rgba(250,245,236,.43) 27%, transparent 58%);
  pointer-events: none; content: "";
}
.miroirs-heading { position: relative; z-index: 2; width: 48%; padding-top: 16cqw; margin-left: 5.7cqw; }
.miroirs-return {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 48px; padding: 9px 19px; border: 1px solid var(--rust);
  border-radius: 3px; background: rgba(250,245,236,.91); color: var(--ink);
  font-family: var(--serif); font-size: 16px; font-weight: 600; text-decoration: none;
}
.miroirs-return:hover { background: #fff8ee; color: var(--rust); }
.miroirs-return:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.miroirs-return-hat {
  display: block; width: 29px; height: 22px; flex: 0 0 29px; background: var(--rust);
  -webkit-mask: url("assets/buttons/editorial-premium-hat.svg") center / contain no-repeat;
  mask: url("assets/buttons/editorial-premium-hat.svg") center / contain no-repeat;
}
.miroirs-return-divider { display: block; width: 1px; height: 25px; flex: 0 0 1px; background: #c08a5a; }
.miroirs-kicker {
  margin: .8cqw 0 1.2cqw; color: var(--rust);
  font-family: "DM Sans", var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .08em;
}
.miroirs-heading h1 {
  max-width: 520px; margin: 0; color: var(--ink);
  font-family: var(--display); font-size: clamp(70px, 7.8cqw, 112px); font-weight: 500;
  line-height: .82; letter-spacing: -.035em;
}
.miroirs-title-line { display: block; }
.miroirs-title-de { color: var(--rust); font-style: italic; font-size: .67em; }
.miroirs-author { margin: 3.1cqw 0 0; font-family: var(--display); font-size: 2.3cqw; line-height: 1.1; }
.miroirs-edition { margin: .45cqw 0 0; font-family: var(--serif); font-size: 16px; }
.miroirs-cover { position: absolute; z-index: 2; top: 17cqw; right: 8.5cqw; width: 28.125cqw; margin: 0; }
.miroirs-cover img { display: block; width: 100%; height: auto; box-shadow: 0 12px 28px rgba(29,26,23,.12); }

.miroirs-editorial {
  padding-top: 0;
  background: linear-gradient(rgba(250,245,236,.72),rgba(250,245,236,.72)),
    url("assets/papier-ivoire.webp") center top / 100% auto repeat-y;
}
.miroirs-story, .miroirs-notice, .miroirs-related { width: calc(100% - 6.8cqw); max-width: 1310px; margin-inline: auto; }
.miroirs-story { display: grid; grid-template-columns: 31% minmax(0,1fr); gap: 20px; padding-top: 24px; padding-bottom: 28px; }
.miroirs-story-heading { position: relative; min-width: 0; }
.miroirs-chapter {
  box-sizing: border-box; display: inline-flex; width: min(378px,100%); min-height: 58px;
  align-items: center; gap: 14px;
  margin: 0; padding: 5px 20px 5px 15px;
  border-radius: 0 38px 38px 0; background: #f8ecdf;
  color: var(--rust); font-family: "DM Sans", var(--sans); font-size: 12px;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.miroirs-chapter-number { flex: 0 0 auto; font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: 0; line-height: 1; }
.miroirs-chapter-rule { flex: 0 0 50px; height: 1px; background: currentColor; }
.miroirs-story-heading h2 {
  position: relative; margin: 16px 0 0; color: var(--ink);
  font-family: var(--display); font-size: clamp(56px, 5.1cqw, 72px); font-weight: 600;
  line-height: .98; letter-spacing: -.025em;
}
.miroirs-story-heading h2 span { color: var(--rust); }
.miroirs-story-heading h2::after { display: block; width: 62px; height: 1px; margin-top: 20px; background: var(--rust); content: ""; }
.miroirs-vine { display: block; width: min(54%, 220px); height: 240px; margin: 12px auto 0; object-fit: contain; }
.miroirs-story-paper {
  align-self: start; min-width: 0; padding: 34px 40px 30px;
  border: 1px solid #dec6b1;
  background: linear-gradient(rgba(250,245,236,.84),rgba(250,245,236,.84)),
    url("assets/papier-ivoire.webp") center / cover;
}
.miroirs-synopsis { max-width: 72ch; font-family: var(--serif); font-size: 21px; line-height: 1.43; }
.miroirs-synopsis p { margin: 0 0 24px; }
.miroirs-synopsis p:last-child { margin-bottom: 0; }
.miroirs-synopsis p:first-child::first-letter {
  float: left; margin: .025em .10em -.04em 0; color: var(--rust);
  font-family: var(--display); font-size: 5.4em; line-height: .8;
}
.miroirs-source-note {
  position: relative; margin: 28px 0 0; padding: 15px 76px 0 0; color: var(--rust);
  font-family: var(--serif); font-size: 13px; font-style: italic;
}
.miroirs-source-note::before {
  position: absolute; top: 0; left: 0; width: calc(100% - 76px); height: 1px;
  background: #d9c2ae; content: "";
}
.miroirs-source-note::after {
  position: absolute; top: -28px; right: 0; width: 55px; height: 78px;
  background: url("assets/romans/vigne-colophon.webp") center / contain no-repeat;
  content: ""; pointer-events: none;
}

.miroirs-notice { padding-bottom: 26px; }
.miroirs-notice h2 { margin-bottom: 0; }
.miroirs-notice dl {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; padding: 24px 26px 22px;
  border: 1px solid #dec6b1; background: rgba(250,245,236,.78);
}
.miroirs-notice dl > div {
  display: grid; min-width: 0; grid-template-columns: 44px minmax(0,1fr);
  grid-template-rows: auto auto; column-gap: 10px; align-content: center; padding: 15px 8px;
}
.miroirs-notice dl > div:nth-child(-n+4) { border-bottom: 1px solid #dec6b1; }
.miroirs-notice dl > div::before { grid-row: 1 / 3; align-self: center; width: 38px; height: 40px; background-position: center; background-size: contain; background-repeat: no-repeat; content: ""; }
.miroirs-notice dl > div:nth-child(1)::before { background-image: url("assets/romans/icons-r3/book.svg"); }
.miroirs-notice dl > div:nth-child(2)::before { background-image: url("assets/romans/icons-r3/feather.svg"); }
.miroirs-notice dl > div:nth-child(3)::before { background-image: url("assets/romans/icons-r3/publisher.svg"); }
.miroirs-notice dl > div:nth-child(4)::before { background-image: url("assets/romans/icons-r3/collection.svg"); }
.miroirs-notice dl > div:nth-child(5)::before { background-image: url("assets/romans/icons-r3/calendar.svg"); }
.miroirs-notice dl > div:nth-child(6)::before { background-image: url("assets/romans/icons-r3/pages.svg"); }
.miroirs-notice dl > div:nth-child(7)::before { background-image: url("assets/romans/icons-r3/barcode.svg"); }
.miroirs-notice dl > div:nth-child(8)::before { background-image: url("assets/romans/icons-r3/format.svg"); }
.miroirs-notice dt { color: var(--rust); font-family: var(--serif); font-size: 15px; font-style: italic; }
.miroirs-notice dd { min-width: 0; margin: 2px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }

/* The mirrored halves reuse the validated landscape without a flattened text image. */
.miroirs-discover {
  position: relative; display: flex; min-height: 288px; flex-direction: column; align-items: center;
  justify-content: center; overflow: hidden; isolation: isolate; padding: 28px 24px;
}
.miroirs-discover-art { position: absolute; z-index: 0; inset: 0; display: flex; pointer-events: none; }
.miroirs-discover-art span { width: 50%; background: url("assets/romans/hero-paysage-encre-2101.webp") right center / auto 100% no-repeat; }
.miroirs-discover-art span:first-child { transform: scaleX(-1); }
.miroirs-discover::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(to bottom,rgba(250,245,236,.35),rgba(250,245,236,.18)); content: ""; pointer-events: none; }
.miroirs-discover h2 { position: relative; z-index: 2; margin: 0 0 17px; font-family: var(--display); font-size: 62px; font-weight: 600; line-height: 1; text-align: center; }
.miroirs-cta {
  position: relative; z-index: 2; width: min(460px,100%); min-height: 64px;
  padding: 10px 22px; border-color: #be8a69; border-radius: 4px;
  font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: 0;
  line-height: 1.15; text-transform: none;
}
.miroirs-cta .button-editorial-premium__icon-group { gap: 15px; }
.miroirs-cta .button-editorial-premium__divider { height: 35px; background: #e9c3af; }
.miroirs-cta .button-editorial-premium__hat { width: 29px; height: 22px; }
.miroirs-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.miroirs-related { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding-block: 32px 36px; }
.miroirs-card {
  position: relative; display: grid; min-width: 0; min-height: 178px;
  grid-template-columns: 58px 1px minmax(0,1fr); align-items: center; gap: 18px;
  padding: 23px 22px; overflow: hidden; border: 1px solid #d2b8a4;
  background-color: var(--paper);
  background-image: linear-gradient(90deg,rgba(250,245,236,.99),rgba(250,245,236,.95) 42%,rgba(250,245,236,.54) 72%,rgba(250,245,236,.12)),url("assets/romans/hero-paysage-encre-1200.webp");
  background-size: auto, auto 230%; background-position: center, right 44%; background-repeat: no-repeat;
  color: var(--ink); text-decoration: none;
  box-shadow: 0 4px 9px rgba(91,48,28,.08);
}
.miroirs-card:nth-child(1) { background-position: center, right 28%; }
.miroirs-card:nth-child(2) { background-position: center, 78% 40%; }
.miroirs-card:nth-child(3) { background-position: center, 95% 54%; }
.miroirs-card:hover { border-color: var(--rust); box-shadow: 0 5px 12px rgba(91,48,28,.12); }
.miroirs-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.miroirs-card-icon { position: relative; display: block; width: 58px; height: 62px; object-fit: contain; }
.miroirs-card-divider { position: relative; width: 1px; height: 96px; background: #d5ae93; }
.miroirs-card-content { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 13px; }
.miroirs-card-title { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.02; }
.miroirs-card-action {
  display: inline-flex; max-width: 100%; min-height: 39px; align-items: center; justify-content: center; gap: 9px;
  padding: 7px 12px; border: 1px solid #c89275; border-radius: 24px;
  background: rgba(250,245,236,.91); color: var(--rust); box-shadow: 0 2px 5px rgba(91,48,28,.07);
  font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.15; text-align: center;
}
.miroirs-card-action span { flex: 0 0 auto; font-size: 23px; line-height: .7; }
.miroirs-card:hover .miroirs-card-action, .miroirs-card:focus-visible .miroirs-card-action { background: #fff9f0; border-color: var(--rust); }

@media (max-width: 1100px) {
  .miroirs-hero { min-height: clamp(820px,calc(920px - 8cqw),860px); margin-top: -80px; }
  .miroirs-heading { width: 48%; padding-top: calc(5.8cqw + 80px); margin-left: 6.25cqw; }
  .miroirs-kicker { margin-top: 4cqw; font-size: 12px; }
  .miroirs-heading h1 { font-size: clamp(61px,8.4cqw,86px); }
  .miroirs-author { margin-top: 3cqw; font-size: 3.2cqw; }
  .miroirs-edition { font-size: 13px; }
  .miroirs-cover { top: 24cqw; right: 6.25cqw; width: 38cqw; }
  .miroirs-story, .miroirs-notice, .miroirs-related { width: calc(100% - 12.5cqw); }
  .miroirs-story { display: block; padding-block: 24px 48px; }
  .miroirs-story-heading { min-height: 235px; }
  .miroirs-story-heading h2 { font-size: 64px; }
  .miroirs-vine { position: absolute; right: 9%; top: 75px; width: 130px; height: 180px; margin: 0; }
  .miroirs-story-paper { padding: 26px 30px; }
  .miroirs-notice dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .miroirs-notice dl > div { border-bottom: 1px solid #dec6b1; }
  .miroirs-notice dl > div:nth-last-child(-n+2) { border-bottom: 0; }
  .miroirs-related { grid-template-columns: 1fr; gap: 14px; padding-top: 28px; padding-bottom: 32px; }
  .miroirs-card { min-height: 172px; grid-template-columns: 68px 1px minmax(0,1fr); gap: 24px; background-size: auto, auto 260%; }
  .miroirs-card-icon { width: 68px; height: 72px; }
  .miroirs-card-divider { height: 104px; }
  .miroirs-card-title { font-size: 36px; }
  .miroirs-card-action { min-height: 42px; padding-inline: 18px; font-size: 17px; }
}

@media (max-width: 600px) {
  .miroirs-hero { min-height: max(640px,218cqw); margin-top: -140px; }
  .miroirs-hero::before { background: linear-gradient(to bottom,rgba(250,245,236,.67),rgba(250,245,236,.22) 40%,transparent 73%); }
  .miroirs-heading { width: auto; margin-inline: 24px; padding-top: 151px; }
  .miroirs-return { min-height: 42px; padding: 6px 12px; gap: 8px; font-size: 14px; }
  .miroirs-return-hat { width: 24px; height: 18px; flex-basis: 24px; }
  .miroirs-return-divider { height: 21px; }
  .miroirs-kicker { margin: 24px 0 10px; font-size: 10px; }
  .miroirs-heading h1 { max-width: 330px; font-size: clamp(52px,15.5cqw,66px); }
  .miroirs-author { margin-top: 18px; font-size: 24px; }
  .miroirs-edition { margin-top: 5px; font-size: 11px; }
  .miroirs-cover { top: auto; right: auto; bottom: 48px; left: 50%; width: 68cqw; transform: translateX(-50%); }
  .miroirs-story, .miroirs-notice, .miroirs-related { width: calc(100% - 32px); }
  .miroirs-story { padding: 22px 0 32px; }
  .miroirs-story-heading { min-height: 190px; }
  .miroirs-chapter { min-height: 58px; gap: 12px; padding-inline: 12px; font-size: 10px; letter-spacing: .1em; }
  .miroirs-chapter-number { font-size: 28px; }
  .miroirs-chapter-rule { flex-basis: 32px; }
  .miroirs-story-heading h2 { margin-top: 16px; font-size: clamp(48px,13cqw,60px); }
  .miroirs-story-heading h2::after { margin-top: 12px; }
  .miroirs-vine { top: 75px; right: 0; width: 54px; height: 105px; }
  .miroirs-story-paper { padding: 26px 20px 28px; }
  .miroirs-synopsis { font-size: 20px; line-height: 1.43; }
  .miroirs-synopsis p { margin-bottom: 28px; }
  .miroirs-synopsis p:first-child::first-letter { font-size: 4.8em; }
  .miroirs-source-note { padding-right: 58px; }
  .miroirs-source-note::before { width: calc(100% - 58px); }
  .miroirs-source-note::after { top: -21px; width: 42px; height: 61px; }
  .miroirs-notice { padding-bottom: 24px; }
  .miroirs-notice dl { padding: 8px 16px; }
  .miroirs-notice dl > div { display: block; padding: 17px 4px; }
  .miroirs-notice dl > div::before { display: block; height: 38px; margin-bottom: 10px; }
  .miroirs-notice dt { font-size: 14px; }
  .miroirs-notice dd { margin-top: 7px; font-size: 19px; line-height: 1.25; }
  .miroirs-discover { min-height: 286px; padding-inline: 16px; }
  .miroirs-discover-art span { background-size: auto 100%; }
  .miroirs-discover h2 { max-width: 300px; margin-bottom: 12px; font-size: 47px; }
  .miroirs-cta { width: 100%; min-height: 72px; padding-inline: 12px; gap: 10px; font-size: 17px; }
  .miroirs-cta .button-editorial-premium__icon-group { gap: 10px; }
  .miroirs-cta .button-editorial-premium__divider { height: 38px; }
  .miroirs-related { gap: 14px; padding-top: 24px; padding-bottom: 32px; }
  .miroirs-card { min-height: 156px; grid-template-columns: 48px 1px minmax(0,1fr); gap: 16px; padding: 16px 18px; background-size: auto, auto 285%; }
  .miroirs-card-icon { width: 48px; height: 54px; }
  .miroirs-card-divider { height: 96px; }
  .miroirs-card-content { gap: 10px; }
  .miroirs-card-title { font-size: 29px; }
  .miroirs-card-action { min-height: 39px; padding-inline: 12px; font-size: 15px; }
}

@media (max-width: 350px) {
  .miroirs-hero { min-height: 760px; }
  .miroirs-heading { margin-inline: 16px; }
  .miroirs-story, .miroirs-notice, .miroirs-related { width: calc(100% - 32px); }
  .miroirs-story-heading h2 { font-size: 48px; }
  .miroirs-synopsis { font-size: 19px; }
  .miroirs-notice dl > div:nth-child(n+7) { grid-column: 1 / -1; }
  .miroirs-cta { font-size: 16px; }
  .miroirs-card { grid-template-columns: 42px 1px minmax(0,1fr); gap: 11px; padding-inline: 12px; }
  .miroirs-card-icon { width: 42px; height: 48px; }
  .miroirs-card-title { font-size: 25px; }
  .miroirs-card-action { font-size: 14px; }
}