/* ============================================================
   RÉCITS DU LAOS — « Le livre du récit » (accueil, chapitre III)
   Un livre dont les pages se tournent : à gauche le texte du chapitre,
   à droite une illustration encre + lavis (assets/js/livre-recit.js).
   Mobile : une seule page, en grand ; le texte du chapitre passe dessous.
   Markup : includes/livre-recit.php.
   ============================================================ */
.lr { --page: #FBF6EC; --pen: #A0522D; --lr-board: #26392C; --f-ui: var(--f-body); }
.lr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.lr-stage { container-type: inline-size; margin-top: clamp(2rem, 4vw, 3.2rem); }
@media (min-width: 900px) {
  .lr-stage, #etapes .hp-steps-cta, #etapes .hp-steps-more { margin-left: var(--hang); }
}
.lr-scene {
  --pw: max(150px, min(calc(50cqw - 6px), 440px, calc((100svh - 280px) * .75)));
  --ph: calc(var(--pw) / .75);
  display: flex; flex-direction: column; align-items: center; gap: 2.2rem;
}

/* ---------- le livre ---------- */
.lr-view { position: relative; padding-block: 6px; }
.lr-book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); perspective: calc(var(--pw) * 5);
  cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.lr-book::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -22px; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(50,35,20,.26), transparent 70%); z-index: -1; }
.lr-board { position: absolute; left: 50%; top: -6px; width: calc(var(--pw) + 6px); height: calc(var(--ph) + 12px);
  background: var(--lr-board); border-radius: 0 5px 5px 0; z-index: 0; }
.lr-leaf { position: absolute; left: 50%; top: 0; width: var(--pw); height: var(--ph); transform-origin: 0 50%; transform-style: preserve-3d; }
.lr-leaf.lr-cv { top: -6px; width: calc(var(--pw) + 6px); height: calc(var(--ph) + 12px); }
.lr-base { position: absolute; left: 50%; top: 0; width: var(--pw); height: var(--ph); z-index: 1;
  box-shadow: 1px 0 0 #EAE2D3, 2px 0 0 #D5CBB8, 3px 0 0 #EAE2D3, 4px 0 0 #D2C7B3; }
.lr-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.lr-back { transform: rotateY(180deg); }
.lr-paper { position: absolute; inset: 0; container-type: size; overflow: hidden;
  background: radial-gradient(ellipse at 60% 40%, #FDFAF3 0%, var(--page) 55%, #F3EBDC 100%); }
.lr-r .lr-paper, .lr-base .lr-paper { box-shadow: inset 16px 0 20px -16px rgba(70,45,20,.4); border-radius: 0 3px 3px 0; }
.lr-l .lr-paper { box-shadow: inset -16px 0 20px -16px rgba(70,45,20,.4); border-radius: 3px 0 0 3px; }
.lr-board-face { background: var(--lr-board); border-radius: 5px 0 0 5px; }
.lr-board-face .lr-paper { inset: 6px 0 6px 6px; }
.lr-shade { position: absolute; inset: 0; background: #2A2016; opacity: 0; pointer-events: none; }
.lr-illu, .lr-illu svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* couverture */
.lr-cover { position: absolute; inset: 0; border-radius: 0 5px 5px 0; overflow: hidden; color: var(--gold);
  background: radial-gradient(ellipse at 40% 30%, #36533F 0%, #2E4736 55%, #243A2C 100%);
  box-shadow: inset 10px 0 14px -8px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; container-type: size; }
.lr-cover::before { content: ""; position: absolute; inset: 5.5cqw; border: 1px solid rgba(200,164,107,.55); }
.lr-cover::after  { content: ""; position: absolute; inset: 7cqw; border: 1px solid rgba(200,164,107,.25); }
.lr-cover svg { width: 18cqw; height: 18cqw; margin-bottom: 6cqw; }
.lr .lr-c-t { font: 400 10cqw/1.05 var(--f-display); letter-spacing: -.01em; margin: 0; color: var(--gold); }
.lr .lr-c-t em { display: block; font-size: 1.2em; }
.lr .lr-c-s { font: 600 2.6cqw/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; margin: 7cqw 0 0; opacity: .8; color: var(--gold); }

/* page de texte */
.lr-lp { position: absolute; inset: 0; padding: 13cqw 11cqw 10cqw 12cqw; display: flex; flex-direction: column; }
.lr .lr-eye { margin: 0 0 6cqw; font: 600 max(2.6cqw, 9px)/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.lr .lr-num { font: italic 300 24cqw/.8 var(--f-display); color: rgba(200,164,107,.35); margin: 0 0 2cqw -1cqw; }
.lr .lr-h { margin: 0; font: 400 8.2cqw/1.12 var(--f-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.lr .lr-h em { font-style: italic; color: var(--gold-text); }
.lr-orn { width: 14cqw; height: 1px; background: var(--gold); margin: 6cqw 0 5cqw; flex: none; }
.lr .lr-cap { margin: 0; font: 400 max(3.8cqw, 12px)/1.6 var(--f-ui); color: var(--ink-soft); text-wrap: pretty; }
.lr .lr-folio { position: absolute; bottom: 6cqw; margin: 0; font: italic 400 max(3cqw, 9px)/1 var(--f-display); color: var(--ink-mute); }
.lr-l .lr-folio { left: 12cqw; }
.lr-r .lr-folio, .lr-base .lr-folio { right: 10cqw; }

/* ---------- illustrations (unités : page de 300 × 400) ---------- */
.lr-illu .ink { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.lr-illu .ink-l { fill: none; stroke: var(--ink); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.lr-illu .steam { fill: none; stroke: #8A8072; stroke-width: 1; stroke-linecap: round; }
.lr-illu .steam.g { stroke: var(--gold); stroke-width: 1.3; }
.lr-illu .petal { fill: #FFFDF7; stroke: var(--ink); stroke-width: 1.2; }
.lr-illu .w { font: italic 400 13px var(--f-display); fill: var(--ink-soft); text-anchor: middle; }
.lr-illu .w.g { fill: var(--gold-text); }
.lr-illu .lab { font: 600 7.5px var(--f-ui); letter-spacing: .2em; text-transform: uppercase; fill: var(--ink-mute); text-anchor: middle; }
.lr-illu .lab-m { font: 22px var(--f-script); fill: var(--gold-text); text-anchor: middle; }
.lr-illu .sheet { fill: #FFFDF8; stroke: var(--ink); stroke-width: .9; }
.lr-illu .sh-title { font: 34px var(--f-script); fill: var(--gold-text); text-anchor: middle; }
.lr-illu .route { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.lr-illu .ico-bg { fill: #FFFDF8; }
.lr-illu .r-day { font: 600 6.5px var(--f-ui); letter-spacing: .18em; text-transform: uppercase; fill: var(--gold-text); }
.lr-illu .r-t { font: italic 400 11px var(--f-display); fill: var(--ink); }
.lr-illu .stamp circle { fill: none; stroke: var(--pen); stroke-width: 1.1; }
.lr-illu .stamp text { fill: var(--pen); text-anchor: middle; }
.lr-illu .st-s { font: 600 5.5px var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
.lr-illu .st-b { font: italic 600 11px var(--f-display); }
.lr-illu .sign { font: 28px var(--f-script); fill: var(--ink); text-anchor: middle; }
.lr-illu .pen-ink { fill: none; stroke: var(--pen); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.lr-illu .pen-t { font: italic 400 11px var(--f-display); fill: var(--pen); }
.lr-illu .pen-s { font: 22px var(--f-script); fill: var(--pen); }
.lr-illu .bub rect { fill: #FFFDF8; stroke: var(--ink); stroke-width: .8; }
.lr-illu .bub .tail { fill: #FFFDF8; stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.lr-illu .bub .av { fill: var(--gold); }
.lr-illu .bub .av-t { font: 15px var(--f-script); fill: #FFFDF8; text-anchor: middle; }
.lr-illu .bub .msg { font: italic 400 10.5px var(--f-display); fill: var(--ink); }
.lr-illu .bub .who { font: 600 5.5px var(--f-ui); letter-spacing: .2em; text-transform: uppercase; fill: var(--gold-text); }
.lr-illu .day { font: italic 400 15px var(--f-display); fill: var(--gold-text); text-anchor: middle; }
.lr-illu .boat-hull { fill: #6E5238; stroke: var(--ink); stroke-width: .8; }
.lr-illu .khom { fill: #F4C274; stroke: #8A5A2B; stroke-width: .5; }
.lr-illu .fin { font: 30px var(--f-script); fill: var(--gold-text); text-anchor: middle; }

/* ---------- navigation ---------- */
.lr-nav { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.6vw, 18px); flex-wrap: wrap; }
.lr-arr { flex: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px;
  border: 1px solid var(--rule); background: var(--paper-soft); color: var(--ink);
  font: 400 1.6rem/1 var(--f-display); transition: background .2s, border-color .2s, opacity .2s; }
.lr-arr:hover:not(:disabled) { background: #fff; border-color: var(--gold); }
.lr-arr:disabled { opacity: .3; cursor: default; }
.lr-ctrl { padding: 0; margin-left: clamp(4px, 1.4vw, 14px); }
.lr-ctrl svg { width: 15px; height: 15px; fill: currentColor; display: none; }
.lr-ctrl[data-state="play"] .i-pause, .lr-ctrl[data-state="pause"] .i-play, .lr-ctrl[data-state="end"] .i-replay { display: block; }
.lr-steps { display: flex; justify-content: center; gap: clamp(2px, .8vw, 10px); list-style: none; margin: 0; padding: 0; }
.lr-steps li { opacity: .6; color: var(--ink-mute); }
.lr-steps button { display: flex; align-items: baseline; gap: .5em; min-height: 42px; padding: .7em .55em; border: 0; border-bottom: 1px solid transparent;
  background: none; cursor: pointer; color: inherit; font: 600 .75rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.lr-steps button:hover { border-bottom-color: currentColor; }
.lr-n { font: italic 500 1.05rem/1 var(--f-display); letter-spacing: 0; text-transform: none; }
.lr-fl { align-self: center; }
.lr-fl svg { width: 14px; height: 14px; }
.lr button:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }

/* ---------- légendes ---------- */
.lr .lr-uc p { margin: 0; }
.lr .lr-uc-eye { font: 600 .75rem/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.lr .lr-uc-h { margin-top: .5rem; font: 400 1.35rem/1.25 var(--f-display); color: var(--ink); }
.lr .lr-uc-h em { font-style: italic; color: var(--gold-text); }
.lr .lr-uc-p { margin-top: .5rem; font-size: .98rem; line-height: 1.65; color: var(--ink-soft); }

/* Sans JavaScript (ou si l'animation n'a pas pu se charger) : les chapitres en liste. */
.lr:not(.is-live) :is(.lr-view, .lr-nav) { display: none; }
.lr:not(.is-live) .lr-under { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem 2.4rem; width: 100%; }
.lr:not(.is-live) .lr-uc { padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.lr.is-live .lr-under { display: none; }

/* ---------- mobile : une seule page, en grand ---------- */
@media (max-width: 760px) {
  .lr-scene { --pw: max(220px, min(calc(100cqw - 8px), 420px, calc((100svh - 360px) * .75))); gap: 1.2rem; }
  /* On ne montre que la moitié droite du livre ; la page tournée s'efface derrière le dos. */
  .lr-view { width: calc(var(--pw) + 8px); overflow-x: clip; overflow-y: visible; }
  .lr-book { margin-left: calc(var(--pw) * -1); }
  .lr-book::after { left: 52%; }
  .lr-lab { display: none; }
  .lr-steps button { padding: .7em .45em; }
  .lr-arr { width: 40px; height: 40px; }
  .lr.is-live .lr-under { display: grid; order: -1; width: 100%; max-width: 30rem; text-align: center; }
  /* Légendes superposées, calées en bas : la plus courte reste collée au livre. */
  .lr.is-live .lr-uc { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; }
}