/* D-031 / D-032 — Des préférences locales qui laissent de la place à la lecture.
   Chargé après les scènes : seul le halo lumineux reçoit un flou. */
.reading-tool {
  position: fixed; z-index: 60;
  bottom: max(var(--reading-edge), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 48px; min-height: 48px; padding: 12px;
  border: 1px solid var(--gold-deep); border-radius: 999px;
  background: var(--night-2); color: var(--ink); box-shadow: var(--reading-shadow);
  font-family: 'Outfit', sans-serif; font-size: .875rem; line-height: 1.3;
  text-decoration: none; transition: background .18s var(--ease), color .18s var(--ease);
}
.reading-tool--settings { left: max(var(--reading-edge), env(safe-area-inset-left)); max-width: calc(100% - 100px); padding-inline: 16px; }
.reading-tool--top { right: max(var(--reading-edge), env(safe-area-inset-right)); }
.reading-tool svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reading-tool:hover { background: var(--night-3); color: var(--gold); }
.reading-tool[hidden], .intro .reading-tools, .menu-open .reading-tools { display: none; }
/* D-032 : le lien natif reste visible sans JS. Le halo est séparé de la flèche. */
.reading-tool--top.is-managed {
  isolation: isolate; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s .16s, background .18s var(--ease), color .18s var(--ease);
}
.reading-tool--top.is-managed::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  border: 2px solid var(--gold); border-radius: inherit; opacity: 0; filter: blur(12px);
  transition: opacity .16s var(--ease), filter .16s var(--ease);
}
.reading-tool--top.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity 1s var(--ease), transform 1s var(--ease), visibility 0s, background .18s var(--ease), color .18s var(--ease);
}
.reading-tool--top.is-visible::before { opacity: .5; filter: blur(3px); transition-duration: 1s; }
.reading-contrast .reading-tool--top::before { display: none; }
.footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
/* Les liens atteints au clavier restent au-dessus des commandes flottantes. */
html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

.reading-panel {
  position: fixed; inset: auto auto max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  width: min(440px, calc(100% - 32px)); max-width: none;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-bottom));
  margin: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--gold-deep); border-radius: 20px;
  background: var(--night-2); color: var(--ink); box-shadow: var(--reading-shadow);
  font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere;
  color-scheme: dark;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reading-panel:not([open]) { display: none; }
.reading-panel::backdrop { background: rgba(3, 5, 15, .65); opacity: 0; transition: opacity 1s var(--ease); }
.reading-panel.is-visible { opacity: 1; transform: translateY(0); }
.reading-panel.is-visible::backdrop { opacity: 1; }
.reading-panel.is-closing { opacity: 0; transform: translateY(6px); transition-duration: .16s; }
.reading-panel.is-closing::backdrop { opacity: 0; transition-duration: .16s; }
.reading-panel__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.reading-panel h2 { font-family: 'Outfit', sans-serif; font-size: 1.45rem; font-weight: 500; line-height: 1.2; padding-top: 8px; }
.reading-panel__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; }
.reading-panel__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.reading-panel__intro { margin: 8px 0 24px; color: var(--ink-soft); }
.reading-panel__size { display: grid; gap: 10px; margin-bottom: 12px; }
.reading-panel__size label, .reading-option strong { font-weight: 600; }
.reading-panel select { width: 100%; min-width: 0; min-height: 48px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; background: var(--night); color: var(--ink); }
.reading-option { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.reading-option input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--gold); cursor: pointer; }
.reading-option strong, .reading-option small { display: block; }
.reading-option small { margin-top: 4px; font-size: .8rem; color: var(--ink-soft); line-height: 1.6; }
.reading-panel__reset { min-height: 44px; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 8px; text-align: left; }
.reading-panel__reset:hover, .reading-panel__close:hover { border-color: var(--gold); }
.reading-panel__note { margin-top: 14px; font-size: .75rem; color: var(--ink-soft); }
.reading-panel__status { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); }

/* La taille suit aussi le réglage de police du navigateur. */
html.text-125 { font-size: 125%; --reading-scale: 1.25; }
html.text-150 { font-size: 150%; --reading-scale: 1.5; }
html.text-200 { font-size: 200%; --reading-scale: 2; }
.reading-spaced body { line-height: 1.8; }
.reading-spaced :is(p, li, h1, h2, h3, h4, label, button, a, small, select, .serif, .lline, .hero__l1, .hero__l2, .drop, .door__num, .envelope__label) {
  font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal;
  letter-spacing: .035em; word-spacing: .08em; line-height: 1.8; text-align: left;
}
.reading-spaced :is(em, .serif) { font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal; }
.reading-spaced p + p { margin-top: 1.2em; }
.reading-spaced .drop { float: none; font-size: 1em; margin: 0; }
.reading-spaced :is(.hero__center, .hero__title) { justify-items: start; }

/* Les compositions fixes se déplient quand le texte demande plus de place. */
.reading-flow :is(main, footer) { overflow-wrap: anywhere; }
.reading-flow :is(.wrap, .hero__center, .hero__title, .reading-panel, .nav__brand, .nav__right) { min-width: 0; }
.reading-flow :is(.histoire__grid, .voyage__grid, .atelier__grid, .traineaux__grid, .assoc__grid, .faq__grid, .finale__layout, .footer__grid) { grid-template-columns: minmax(0, 1fr); }
.reading-flow :is(.ecards, .team, .doors) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.reading-flow :is(.lecture, .voyage, .impact) { height: auto; }
.reading-flow :is(.lecture__pin, .voyage__pin, .impact__pin) { position: relative; height: auto; min-height: 0; padding: 70px 0; }
.reading-flow .lline { opacity: 1; transform: none; }
.reading-flow .faq__head { position: static; }
.reading-flow .vstep__text { max-height: none; opacity: 1; overflow: visible; }
.reading-flow .hero { padding-block: 80px 130px; }
.reading-flow .hero__center { width: 100%; grid-template-columns: minmax(0, 1fr); }
.reading-flow .hero__center > *, .reading-flow .hero__title > * { min-width: 0; max-width: 100%; }
.reading-flow .hero__eyebrow { white-space: normal; }
.reading-flow .hero__l1 { white-space: normal; font-size: clamp(3.2rem, calc(10.5vw * var(--reading-scale)), 9.4rem); }
.reading-flow .hero__l2 { font-size: clamp(3rem, calc(9.6vw * var(--reading-scale)), 8.6rem); }
.reading-flow :is(.hero__l1, .hero__l2, .h2, .finale__title, .lline) { overflow-wrap: anywhere; }
.reading-flow .hero__cue { position: static; margin-top: 32px; transform: none; }
.reading-flow .nav { position: relative; }
.reading-flow .nav__inner { height: auto; min-height: var(--nav-h); padding-block: 16px; flex-wrap: wrap; }
.reading-flow .nav__brand { white-space: normal; flex: 1 1 100%; }
.reading-flow .nav__right { flex-wrap: wrap; }
.reading-flow .nav__links { display: none; }
.reading-flow .nav__burger { display: block; flex: none; }
.reading-flow .mobile-menu { top: 0; padding-top: 90px; }
.reading-flow .menu-open .nav { position: fixed; }
.reading-flow .menu-open .nav__brand, .reading-flow .menu-open .nav__right > :not(.nav__burger) { display: none; }
.reading-flow .menu-open .nav__inner { justify-content: flex-end; }
.reading-flow .bauble__label { max-width: 100%; }
.reading-flow .bauble__ball { width: max(100px, 5rem); }
.reading-flow .book__page { transform: none; }
.reading-flow .vstage { height: auto; width: 100%; max-width: 650px; display: grid; gap: 24px; }
.reading-flow .vstage .fiche { position: relative; top: auto; left: auto; width: 100%; transform: none; }
.reading-flow .vstage :is(.vgift, .vsled, .vwindow), .reading-flow .vstage::before { display: none; }
.reading-flow .vstage__caption { position: static; flex-wrap: wrap; }
.reading-flow :is(.fiche__top, .fiche__meta, .workshop__label, .map__legend, .impact__stats) { flex-wrap: wrap; }
.reading-flow .h2 { font-size: clamp(2.2rem, calc(5vw * var(--reading-scale)), 3.9rem); }
.reading-flow .lead { font-size: clamp(1.04rem, calc(1.4vw * var(--reading-scale)), 1.18rem); }
.reading-flow .book__text { font-size: clamp(1.05rem, calc(1.5vw * var(--reading-scale)), 1.24rem); }
.reading-flow .lline { font-size: clamp(2rem, calc(5.6vw * var(--reading-scale)), 4.6rem); }
.reading-flow .bauble__ball b { font-size: clamp(1rem, calc(1.6vw * var(--reading-scale)), 1.3rem); }
.reading-flow .impact__count { font-size: clamp(4.4rem, calc(13vw * var(--reading-scale)), 10rem); }
.reading-flow .impact__sub { font-size: clamp(1.1rem, calc(2vw * var(--reading-scale)), 1.5rem); }
.reading-flow .stat b { font-size: clamp(1.4rem, calc(2.6vw * var(--reading-scale)), 2.1rem); }
.reading-flow .door { height: auto; display: grid; border-radius: 8px; }
.reading-flow :is(.door__back, .door__front) { position: relative; inset: auto; grid-area: 1 / 1; padding: 24px; min-height: 260px; border-radius: 8px; }
.reading-flow .door__back { align-content: center; }
.reading-flow .door__front { transform: none; }
.reading-flow .door[aria-expanded="true"] .door__front { visibility: hidden; transform: none; }
.reading-flow :is(.bigtag, .tcard) { width: 100%; max-width: 100%; transform: none; }
.reading-flow .bigtag { animation: none; }
.reading-flow .collective { height: auto; padding-bottom: 260px; }
.reading-flow .morning { margin-inline: 0; }
.reading-flow .btn { white-space: normal; text-align: center; }
.reading-flow .workshop__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reading-flow .wtag { width: min(220px, 80%); }
.reading-flow .tcard { display: block; }

/* Contraste : des surfaces opaques, des liens soulignés et des états nommés. */
.reading-contrast {
  --ink-soft: #F8F5EE; --ink-mute: #F8F5EE; --ink-dark-mu: #1B1A2E;
  --line: #AAB5D1; --line-strong: #C5CDE0;
}
.reading-contrast :is(.nav, .footer, .reading-panel, .qa, .ecard, .tcard, .atelier, .voyage, .entreprises) { background: var(--night); }
.reading-contrast :is(.sky, .grain, .aurora) { visibility: hidden; }
.reading-contrast :is(.lead, .note, .eyebrow, .hero__cue, .door__summary, .workshop__label, .workshop__label span, .workshop__status) { color: var(--ink); }
.reading-contrast :is(.shimmer, .ecard__big, .impact__count) { background: none; color: var(--gold); -webkit-text-fill-color: currentColor; }
.reading-contrast :is(.book__page, .fiche, .bigtag, .door__back) { background: var(--paper); color: var(--ink-dark); }
.reading-contrast :is(.book__page, .fiche, .bigtag, .door__back) :is(p, span, b, em, strong, div) { color: var(--ink-dark); }
.reading-contrast .fiche__status { background: var(--paper); border: 2px solid var(--ink-dark); }
.reading-contrast a:not(.btn):not(.nav__brand):not(.reading-tool) { text-decoration: underline; text-underline-offset: .2em; }
.reading-contrast :focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.reading-contrast :is(.book__page, .fiche, .bigtag, .door__back) :focus-visible { outline-color: var(--ink-dark); }
.reading-contrast .lline { opacity: 1; }
/* Un changement de forme complète la couleur, y compris sans préférence activée. */
.relais button[aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 3px; }
.relais button[aria-pressed="true"] .relais__dot { border-radius: 0; transform: rotate(45deg); }
.nav__link.is-active { text-decoration: underline; text-underline-offset: .25em; }

@media (max-width: 860px) {
  .reading-flow .voyage__copy .h2 { font-size: clamp(2.2rem, calc(7vw * var(--reading-scale)), 3.6rem); }
  .reading-flow .finale__title { font-size: clamp(2.7rem, calc(8vw * var(--reading-scale)), 4rem); }
}

@media (max-width: 600px) {
  .reading-flow .hero__l1 { font-size: clamp(2.8rem, calc(15vw * var(--reading-scale)), 5rem); }
  .reading-flow .hero__l2 { font-size: clamp(2.6rem, calc(14vw * var(--reading-scale)), 4.6rem); }
  .reading-panel { padding: 20px; transform: translateY(6px); }
  .reading-panel.is-visible { transform: translateY(0); }
  .reading-panel.is-closing { transform: translateY(3px); }
  .reading-tool--top.is-managed { transform: translateY(4px); }
  .reading-tool--top.is-visible { transform: translateY(0); }
  .reading-flow .doors { padding: 16px; }
  .reading-flow .book__page { padding: 28px 24px; }
  .reading-flow .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Inclure le backdrop : il n’est pas couvert par le repli global des éléments. */
.motion-paused .reading-panel, .motion-paused .reading-panel::backdrop,
.motion-paused .reading-tool--top, .motion-paused .reading-tool--top::before { transition: none !important; transform: none; }
.motion-paused .reading-tool--top::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .reading-panel, .reading-panel::backdrop, .reading-tool--top, .reading-tool--top::before { transition: none !important; transform: none !important; }
  .reading-tool--top::before { display: none; }
}