:root { --ink:#10243a; --muted:#607088; --paper:#f4f7fa; --surface:#fff; --line:#dbe4ec; --soft:#eaf0f5; --accent:#d57938; --focus:#166b7a; --map-width:1840px; --shadow:0 18px 48px rgba(19,40,65,.12); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } html { scroll-behavior:auto; overflow-anchor:none; } body { margin:0; min-width:320px; overflow-anchor:none; background:linear-gradient(120deg,#fafcff,#f1f5f8 54%,#f8fafb); } button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible,.landscape-scroll:focus-visible { outline:3px solid #a9dce4; outline-offset:2px; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.app-header { position:sticky; z-index:30; top:0; min-height:4.25rem; display:flex; align-items:center; gap:.55rem; padding:.6rem clamp(1rem,3vw,3rem); border-bottom:1px solid rgba(211,223,233,.92); background:rgba(250,252,253,.9); backdrop-filter:blur(16px); }.brand { display:flex; flex:none; align-items:center; gap:.55rem; margin-right:.35rem; color:var(--ink); font-size:.98rem; font-weight:780; letter-spacing:-.025em; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:1.85rem; height:1.85rem; border-radius:50%; color:#ffd48d; background:#132a46; font-size:.78rem; }.search-control { display:flex; align-items:center; gap:.45rem; width:min(19rem,22vw); height:2.4rem; padding:0 .72rem; border:1px solid var(--line); border-radius:.55rem; color:var(--muted); background:#fff; }.search-control input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:.88rem; }.scene-control select,.filters-control summary,.zoom-control { height:2.4rem; border:1px solid var(--line); border-radius:.55rem; color:var(--ink); background:#fff; font-size:.82rem; }.scene-control select { max-width:13rem; padding:0 .7rem; font-weight:620; }.filters-control { position:relative; }.filters-control summary { display:flex; align-items:center; padding:0 .72rem; cursor:pointer; list-style:none; }.filters-control summary::-webkit-details-marker { display:none; }.filters-control summary::after { content:"⌄"; margin-left:.42rem; color:var(--muted); }.category-filters { position:absolute; right:0; top:2.8rem; width:17rem; display:flex; flex-wrap:wrap; gap:.4rem; padding:.75rem; border:1px solid var(--line); border-radius:.65rem; background:#fff; box-shadow:var(--shadow); }.filter-chip { padding:.38rem .52rem; border:1px solid transparent; border-radius:99px; color:var(--muted); background:var(--soft); font-size:.74rem; }.filter-chip::before { content:""; display:inline-block; width:.5rem; height:.5rem; margin-right:.34rem; border-radius:50%; background:var(--cat); }.filter-chip[aria-pressed="true"] { color:var(--ink); border-color:color-mix(in srgb,var(--cat),#fff 45%); background:#fff; }.zoom-control { display:flex; align-items:center; margin-left:auto; overflow:hidden; }.zoom-control button { width:2.25rem; height:100%; border:0; color:var(--ink); background:transparent; font-size:1.25rem; }.zoom-control button:hover { background:var(--soft); }.zoom-control span { min-width:7rem; padding:0 .35rem; border-inline:1px solid var(--line); color:var(--muted); font-size:.72rem; text-align:center; }
.explorer-layout { display:grid; grid-template-columns:minmax(0,70%) minmax(20rem,30%); width:100%; max-width:none; margin:0; padding:0 0 0 clamp(.75rem,1.5vw,1.5rem); }.landscape-column { position:relative; padding:clamp(2rem,4vw,4.5rem) clamp(1.5rem,3vw,3rem) 50vh 0; min-width:0; }.landscape-intro { max-width:58rem; padding-bottom:2.2rem; }.eyebrow { margin:0; color:var(--muted); font-size:.68rem; font-weight:760; letter-spacing:.12em; text-transform:uppercase; }.landscape-intro h1 { margin:.55rem 0 .75rem; font-size:clamp(2.1rem,3.7vw,4.2rem); letter-spacing:-.068em; line-height:.97; font-weight:650; }.landscape-intro h1 em { color:#687990; font-style:normal; }.timeline-status { margin:0; color:var(--muted); font-size:.84rem; }
.current-cut { position:sticky; z-index:20; top:48vh; display:grid; grid-template-columns:minmax(1rem,1fr) auto auto minmax(1rem,1fr); align-items:center; gap:.55rem; height:0; margin:0 -.2rem; pointer-events:none; }.current-cut span { height:1px; background:linear-gradient(90deg,transparent,#2a6071 28%,#2a6071); box-shadow:0 0 0 2px rgba(244,247,250,.7); }.current-cut span:last-child { background:linear-gradient(90deg,#2a6071 72%,transparent); }.current-cut strong { padding:.18rem .4rem; border-radius:.28rem; color:#fff; background:#205f70; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.84rem; letter-spacing:.02em; }.current-cut small { color:#285b6a; font-size:.62rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.landscape-scroll { min-width:0; overflow-x:auto; outline:0; scrollbar-color:#bdcbd8 transparent; }.domain-headers { position:relative; z-index:6; width:var(--map-width); height:2.5rem; }.domain-label { position:absolute; top:.1rem; width:8rem; color:var(--cat); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-align:center; text-transform:uppercase; transform:translateX(-50%); }.domain-label::after { content:""; display:block; width:1px; height:.8rem; margin:.25rem auto 0; background:color-mix(in srgb,var(--cat),transparent 40%); }
.timeline-map { --map-height:2000px; position:relative; width:var(--map-width); min-height:var(--map-height); overflow:visible; overflow-anchor:none; border-radius:1.25rem; background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.82),rgba(255,255,255,.28) 55%,transparent 100%); }.rivers-layer,.connections-layer,.presence-layer,.year-markers,.events-layer { position:absolute; inset:0; width:100%; height:100%; }.rivers-layer { z-index:0; overflow:visible; }.river { fill:none; stroke:var(--cat); stroke-width:2.3; stroke-linecap:round; opacity:.26; }.river.is-active { opacity:.58; stroke-width:3.2; }.year-markers { z-index:1; }.year-marker { position:absolute; left:0; width:100%; height:1px; border-top:1px solid rgba(184,198,211,.5); }.year-marker span { position:absolute; top:-.55rem; left:.4rem; padding:.06rem .35rem; color:#718198; background:rgba(244,247,250,.88); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.67rem; }.presence-layer { z-index:2; pointer-events:none; }.presence-trail { position:absolute; width:4px; border-radius:99px; background:linear-gradient(to bottom,color-mix(in srgb,var(--cat),transparent 38%),color-mix(in srgb,var(--cat),transparent 88%)); opacity:.52; transform:translateX(-50%); }.presence-trail::after { content:""; position:absolute; bottom:-.1rem; left:50%; width:.32rem; height:.32rem; border:1px solid color-mix(in srgb,var(--cat),#fff 35%); border-radius:50%; background:#fff; transform:translateX(-50%); }.connections-layer { z-index:3; pointer-events:none; overflow:visible; }.relation-line { fill:none; stroke:#315e76; stroke-width:2.1; stroke-linecap:round; opacity:.75; }.route-line { fill:none; stroke:#d57938; stroke-width:3; stroke-linecap:round; stroke-dasharray:2 8; opacity:.78; }.entity-line { fill:none; stroke:#592e86; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:5 6; opacity:.75; }.events-layer { z-index:5; }.landmark-card { --cat:#60728b; --drift:0px; position:absolute; width:9.4rem; padding:.42rem .48rem .45rem .55rem; border:1px solid transparent; border-radius:.62rem; color:var(--ink); background:rgba(255,255,255,.82); box-shadow:0 4px 15px rgba(23,43,66,.05); text-align:left; transform:translate(calc(-50% + var(--drift)),-.35rem); transition:opacity .18s ease,transform .18s ease,background .18s ease,box-shadow .18s ease; }.landmark-card::before { content:""; position:absolute; top:.88rem; left:-.45rem; width:.68rem; height:.68rem; border:2px solid #fff; border-radius:50%; background:var(--cat); box-shadow:0 1px 6px rgba(15,32,55,.2); }.landmark-card[data-kind="organization-founding"]::before,.landmark-card[data-kind="publication"]::before { border-radius:1px; }.landmark-card[data-kind="standardization"]::before { border-radius:1px; transform:rotate(45deg); }.landmark-card[data-kind="proposal"]::before { border-radius:50% 50% 50% 0; transform:rotate(-45deg); }.landmark-card[data-importance="5"] { background:color-mix(in srgb,var(--cat),#fff 91%); }.landmark-card[data-importance="5"]::before { width:.95rem; height:.95rem; top:.74rem; left:-.58rem; box-shadow:0 0 0 3px #fff,0 4px 12px color-mix(in srgb,var(--cat),transparent 72%); }.landmark-card:hover,.landmark-card:focus-visible { z-index:10; border-color:color-mix(in srgb,var(--cat),#fff 45%); background:#fff; box-shadow:0 9px 24px rgba(23,43,66,.16); transform:translate(calc(-50% + var(--drift)),-.35rem) scale(1.035); outline:0; }.landmark-card.is-selected { z-index:12; border-color:var(--cat); background:#fff; box-shadow:0 12px 28px color-mix(in srgb,var(--cat),transparent 78%); }.landmark-card.is-related,.landmark-card.is-entity-related { z-index:9; border-color:color-mix(in srgb,var(--cat),#fff 36%); background:#fff; }.landmark-card.is-muted { opacity:.18; }.landmark-card.is-context { opacity:.36; }.landmark-card.is-context.is-route { opacity:.78; }.landmark-card.is-convergence::after { content:"convergence"; display:block; margin-top:.22rem; color:var(--cat); font-size:.56rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.landmark-card.is-convergence:not(.is-context) { box-shadow:0 0 0 1px color-mix(in srgb,var(--cat),transparent 62%),0 8px 23px color-mix(in srgb,var(--cat),transparent 80%); }.landmark-date { display:block; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; }.landmark-title { display:block; margin-top:.08rem; color:var(--ink); font-size:.78rem; font-weight:760; line-height:1.14; }.landmark-card[data-importance="5"] .landmark-title { font-size:.88rem; letter-spacing:-.02em; }.landmark-meta { display:block; overflow:hidden; margin-top:.16rem; color:var(--muted); font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }.landmark-card[data-importance="3"] .landmark-meta,.landmark-card[data-importance="2"] .landmark-meta { display:none; }.landscape-help { margin:1.2rem 0 0; color:var(--muted); font-size:.74rem; }.landscape-help kbd { padding:.08rem .28rem; border:1px solid var(--line); border-radius:.2rem; background:#fff; font:inherit; }
.document-pane { align-self:start; position:sticky; top:4.25rem; height:calc(100vh - 4.25rem); min-height:32rem; overflow:auto; padding:clamp(1.6rem,3.2vw,3.6rem); border-left:1px solid var(--line); background:rgba(255,255,255,.64); }.document-content { max-width:28rem; margin:0 auto; }.close-document { display:none; }.return-context { margin:0 0 1.1rem; padding:0; border:0; color:var(--focus); background:transparent; font-size:.78rem; font-weight:740; }.document-kicker { margin:0 0 .5rem; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.73rem; font-weight:700; }.document-content h2 { margin:.45rem 0 .85rem; letter-spacing:-.055em; line-height:1.04; font-size:clamp(1.75rem,2.4vw,2.65rem); font-weight:650; }.document-summary { margin:0 0 1.4rem; padding-bottom:1.35rem; border-bottom:1px solid var(--line); color:#435269; line-height:1.58; }.entity-type { color:var(--muted); font-size:.76rem; }.world-note { margin:0 0 1.5rem; color:#4b5c72; font-size:.9rem; line-height:1.58; }.world-grid { display:grid; gap:.7rem; }.world-current { padding:.72rem .8rem; border-left:3px solid var(--cat); border-radius:0 .45rem .45rem 0; background:rgba(255,255,255,.65); }.world-current h3 { margin:0 0 .3rem; color:var(--cat); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }.world-current button { margin:.13rem .2rem .13rem 0; padding:0; border:0; color:var(--ink); background:transparent; font-size:.82rem; font-weight:680; text-align:left; }.world-current button:hover { color:var(--focus); text-decoration:underline; }.doc-section { margin-top:1.55rem; }.doc-section h3 { margin:0 0 .5rem; color:var(--muted); font-size:.67rem; letter-spacing:.11em; text-transform:uppercase; }.doc-section p { margin:0; color:#2c3c53; line-height:1.58; }.chip-list,.explore-list { display:flex; flex-wrap:wrap; gap:.45rem; }.doc-chip,.explore-link { border:1px solid var(--line); border-radius:.45rem; color:var(--ink); background:#fff; text-align:left; }.doc-chip { padding:.38rem .52rem; font-size:.78rem; }.doc-chip:hover,.explore-link:hover { border-color:var(--focus); color:var(--focus); }.doc-chip small { display:block; margin-top:.12rem; color:var(--muted); font-size:.67rem; }.explore-list { display:grid; gap:.45rem; }.explore-link { width:100%; padding:.66rem .7rem; }.explore-link span { display:block; color:var(--muted); font-size:.68rem; }.explore-link strong { font-size:.82rem; }.event-list { display:grid; gap:.35rem; }.event-list button { padding:.45rem 0; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:transparent; text-align:left; }.event-list small { color:var(--muted); font-family:ui-monospace,monospace; }.relationship-note { color:var(--muted)!important; font-size:.84rem; }.load-error { padding:2rem; color:#a54646; }
@media (max-width:1120px) { .explorer-layout { grid-template-columns:minmax(0,64%) minmax(19rem,36%); }.landscape-column { padding-right:1.5rem; }.search-control { width:min(17rem,22vw); } }
@media (max-width:900px) { .app-header { flex-wrap:wrap; min-height:unset; }.search-control { width:min(100%,22rem); flex:1; }.filters-control { margin-left:auto; }.zoom-control { margin-left:0; }.explorer-layout { display:block; padding:0 1rem; }.landscape-column { padding:2.2rem 0 50vh; }.landscape-intro { padding-bottom:1.3rem; }.landscape-intro h1 { font-size:2.35rem; }.landscape-scroll { overflow-x:auto; padding-bottom:.4rem; }.domain-headers { width:var(--map-width); }.document-pane { position:fixed; z-index:40; top:0; right:0; bottom:0; width:min(26rem,82vw); height:100dvh; min-height:0; padding:3.35rem 1.35rem 1.75rem; border:0; border-left:1px solid var(--line); border-radius:1rem 0 0 1rem; box-shadow:var(--shadow); background:#fff; transform:translateX(105%); transition:transform .2s ease; }.document-pane.is-open { transform:translateX(0); }.close-document { display:grid; place-items:center; position:absolute; top:.65rem; right:.8rem; width:2rem; height:2rem; border:0; border-radius:50%; color:var(--muted); background:var(--soft); font-size:1.4rem; }.landscape-help { white-space:nowrap; }.current-cut { top:48vh; } }
@media (max-width:540px) { .app-header { gap:.45rem; padding:.55rem .75rem; }.brand { margin-right:auto; }.scene-control { order:3; width:calc(100% - 7rem); }.scene-control select { width:100%; max-width:none; }.search-control { order:4; width:100%; flex:none; }.filters-control { margin-left:0; }.zoom-control { margin-left:auto; }.landscape-intro h1 { font-size:2rem; }.current-cut { margin:0; }.current-cut small { display:none; }.landmark-card { width:8.7rem; }.landmark-title { font-size:.74rem; }.landmark-card[data-importance="5"] .landmark-title { font-size:.84rem; } }
.focus-origin { fill:#fff; stroke:#592e86; stroke-width:2.4; }.focus-origin-label { fill:#592e86; font-family:ui-monospace,monospace; font-size:12px; font-weight:700; }.landmark-card { width:9rem; }
.era-jumps { display:flex; flex-wrap:wrap; gap:.38rem; margin-top:1rem; }.era-jumps button { min-height:2rem; padding:.34rem .58rem; border:1px solid var(--line); border-radius:999px; color:#42546b; background:rgba(255,255,255,.74); font-size:.72rem; font-weight:680; }.era-jumps button:hover,.era-jumps button:focus-visible { border-color:#7baeb7; color:#155e6c; background:#fff; }.map-legend { display:flex; flex-wrap:wrap; gap:.55rem 1rem; margin-top:.75rem; color:var(--muted); font-size:.68rem; }.map-legend span { display:inline-flex; align-items:center; gap:.34rem; }.map-legend i { display:inline-block; flex:none; }.legend-point { width:.52rem; height:.52rem; border:2px solid #fff; border-radius:50%; background:#5a7692; box-shadow:0 0 0 1px #93a8ba; }.legend-duration { width:.23rem; height:1rem; border-radius:99px; background:linear-gradient(#5a7692,#d8e1e9); }.legend-convergence { color:#a45723; font-size:.78rem; font-style:normal; }.legend-route { width:1.25rem; height:0; border-top:2px dotted var(--accent); }.world-current button small { display:block; margin-top:.1rem; color:var(--muted); font-size:.64rem; font-weight:520; }.source-list { display:grid; gap:.4rem; }.source-list a { display:flex; justify-content:space-between; gap:.75rem; padding:.56rem .62rem; border:1px solid var(--line); border-radius:.45rem; color:var(--ink); background:#fff; font-size:.76rem; line-height:1.35; text-decoration:none; }.source-list a:hover,.source-list a:focus-visible { border-color:var(--focus); color:var(--focus); }.source-list a span { color:var(--muted); }

/* V3.1 — lecture humaine : moins de bruit, aucune cible superposée et panorama déplaçable partout. */
.landscape-column { padding-bottom:0; }
.landscape-intro { padding-bottom:1.35rem; }
.current-cut { grid-template-columns:1fr 1fr; gap:0; margin:0 -.2rem 2.4rem; }
.current-cut strong,.current-cut small { display:none; }
.horizontal-nav { position:sticky; z-index:19; top:4.55rem; display:grid; grid-template-columns:2rem minmax(8rem,18rem) 2rem; justify-content:center; align-items:center; gap:.5rem; width:max-content; max-width:calc(100% - 1rem); margin:0 auto .65rem; padding:.4rem .5rem; border:1px solid rgba(205,218,228,.9); border-radius:999px; background:rgba(250,252,253,.94); box-shadow:0 5px 18px rgba(23,43,66,.08); backdrop-filter:blur(12px); }
.horizontal-nav button { width:2rem; height:2rem; border:0; border-radius:50%; color:var(--ink); background:#fff; box-shadow:0 0 0 1px var(--line); }
.horizontal-nav button:disabled { opacity:.3; cursor:default; }
.horizontal-nav label { display:grid; grid-template-columns:auto minmax(5rem,11rem); align-items:center; gap:.55rem; color:var(--muted); font-size:.66rem; font-weight:700; }
.horizontal-nav input { width:100%; accent-color:var(--focus); cursor:ew-resize; }
.landscape-scroll { scrollbar-width:none; cursor:grab; touch-action:pan-y; }
.landscape-scroll::-webkit-scrollbar { height:0; }
.landscape-scroll.is-panning { cursor:grabbing; user-select:none; }
.domain-label { width:7rem; }
.landmark-card { width:7rem; min-height:2.55rem; padding:.34rem .38rem .38rem .5rem; border-color:color-mix(in srgb,var(--cat),transparent 76%); border-radius:.52rem; background:rgba(255,255,255,.9); box-shadow:0 3px 10px rgba(23,43,66,.045); cursor:pointer; }
.landmark-card::before { top:.72rem; left:-.4rem; width:.62rem; height:.62rem; }
.landmark-card[data-importance="5"] { background:color-mix(in srgb,var(--cat),#fff 92%); }
.landmark-card[data-importance="5"]::before { width:.8rem; height:.8rem; top:.61rem; left:-.49rem; }
.landmark-card:hover,.landmark-card:focus-visible { width:10.5rem; transform:translate(calc(-50% + var(--drift)),-.35rem) scale(1.06); }
.landmark-card.is-context { opacity:.3; }
.landmark-card.is-context.is-route { opacity:.84; }
.landmark-card.is-convergence::after { content:"✦"; position:absolute; top:.3rem; right:.34rem; display:block; margin:0; color:var(--cat); font-size:.58rem; letter-spacing:0; }
.landmark-card.is-convergence:not(.is-context) { box-shadow:0 0 0 1px color-mix(in srgb,var(--cat),transparent 72%),0 4px 14px color-mix(in srgb,var(--cat),transparent 86%); }
.landmark-date { padding-right:.7rem; font-size:.58rem; }
.landmark-title { display:-webkit-box; overflow:hidden; margin-top:.06rem; font-size:.72rem; line-height:1.12; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.landmark-card[data-importance="5"] .landmark-title { font-size:.78rem; letter-spacing:-.015em; }
.landmark-meta,.landmark-card[data-importance="3"] .landmark-meta,.landmark-card[data-importance="2"] .landmark-meta { display:none; }
.landmark-card:hover .landmark-meta { display:block; }
.landscape-help { margin:.8rem 0 0; white-space:normal; font-size:.72rem; line-height:1.5; }
.landscape-end { height:48vh; min-height:18rem; padding-top:1.5rem; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; text-align:center; }
.landscape-end span { display:inline-block; padding:.4rem .65rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.72); }
@media (max-width:900px) { .landscape-column { padding-bottom:0; }.horizontal-nav { top:6.55rem; }.horizontal-nav label { grid-template-columns:1fr; gap:.12rem; }.horizontal-nav label span { text-align:center; } }
@media (max-width:540px) { .horizontal-nav { top:9.35rem; grid-template-columns:2rem minmax(7rem,14rem) 2rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* V4 — continuité pédagogique : rendre visibles les prérequis et les acquis. */
.learning-block { margin:1.4rem 0 1.8rem; padding:1rem; border:1px solid #cddfe3; border-radius:.75rem; background:linear-gradient(145deg,rgba(237,248,249,.94),rgba(255,255,255,.82)); }
.learning-block .doc-section { margin-top:1.15rem; }
.learning-label { display:inline-flex; align-items:center; gap:.35rem; margin:0; color:#176779; font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.learning-label::before { content:"↗"; display:grid; place-items:center; width:1.15rem; height:1.15rem; border-radius:50%; color:#fff; background:#2b7b76; font-size:.7rem; }
.knowledge-list { display:grid; gap:.45rem; }
.knowledge-card { width:100%; padding:.62rem .68rem; border:1px solid #d4dee7; border-left:3px solid #778da7; border-radius:.5rem; color:var(--ink); background:rgba(255,255,255,.9); text-align:left; }
.knowledge-card.is-introduced { border-left-color:#2b7b76; background:#f5fbf9; }
.knowledge-card:hover,.knowledge-card:focus-visible { border-color:var(--focus); outline:0; box-shadow:0 3px 12px rgba(23,43,66,.08); }
.knowledge-card strong { display:block; margin-bottom:.2rem; font-size:.8rem; }
.knowledge-card span { display:block; color:#4b5c72; font-size:.74rem; line-height:1.42; }

/* V5 — lecture historique : le paysage devient un livre interactif. */
.intro-promise { max-width:43rem; margin:.85rem 0 1rem; color:#435269; font-size:.98rem; line-height:1.55; }
.start-story,.chapter-start { border:0; border-radius:.55rem; color:#fff; background:#155f6d; box-shadow:0 5px 16px rgba(21,95,109,.18); font-weight:760; }
.start-story { margin:0 0 1rem; padding:.72rem .9rem; font-size:.82rem; }
.start-story:hover,.start-story:focus-visible,.chapter-start:hover,.chapter-start:focus-visible { background:#0e4f5c; outline:3px solid rgba(21,95,109,.18); }
.chapter-question { margin:.2rem 0 .75rem; color:#176779; font-size:1rem; font-weight:720; line-height:1.4; }
.humanity-grid { display:grid; gap:.55rem; }
.humanity-state { padding:.7rem .78rem; border:1px solid #dbe3e9; border-left:3px solid #71869d; border-radius:0 .55rem .55rem 0; background:rgba(255,255,255,.72); }
.humanity-state.is-knows { border-left-color:#6d5bd0; }.humanity-state.is-can { border-left-color:#2b7b76; }.humanity-state.is-not-yet { border-left-color:#bd7550; background:#fff9f5; }
.humanity-state h3 { margin:0 0 .38rem; color:#415369; font-size:.67rem; letter-spacing:.09em; text-transform:uppercase; }
.humanity-state ul { margin:0; padding-left:1.05rem; color:#2d3e54; font-size:.78rem; line-height:1.48; }
.humanity-state li + li { margin-top:.18rem; }
.chapter-start { width:100%; margin-top:.8rem; padding:.72rem .8rem; font-size:.78rem; text-align:left; }
.chapter-cut { margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.story-navigation { margin:-.25rem 0 1.25rem; padding:.65rem; border:1px solid #d4e0e5; border-radius:.7rem; background:#f4f9fa; }
.story-navigation p { display:grid; grid-template-columns:1fr auto; gap:.1rem .6rem; margin:0 0 .55rem; }
.story-navigation span { color:#176779; font-size:.61rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.story-navigation strong { grid-column:1; color:#263950; font-size:.78rem; line-height:1.3; }
.story-navigation small { grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.64rem; }
.story-navigation div { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.story-navigation button { padding:.48rem .55rem; border:1px solid #c8d7df; border-radius:.45rem; color:#21475a; background:#fff; font-size:.72rem; font-weight:720; }
.story-navigation button:last-child { text-align:right; }.story-navigation button:disabled { opacity:.38; cursor:default; }
.story-navigation button:not(:disabled):hover,.story-navigation button:not(:disabled):focus-visible { border-color:#5c94a0; color:#0f5b69; outline:0; }

/* Lecture en tiroir : ouverture indépendante de la géométrie du paysage. */
.time-hint-trigger { padding:0; border:0; border-bottom:1px dotted currentColor; color:inherit; background:transparent; font:inherit; text-align:left; cursor:help; }
[data-time-year] { cursor:help; }
.time-hint { position:fixed; z-index:80; width:min(340px,calc(100vw - 20px)); max-height:calc(100dvh - 20px); overflow:auto; overscroll-behavior:contain; padding:1rem 1.1rem; border:1px solid #d2dfe6; border-radius:.7rem; color:var(--ink); background:#fff; box-shadow:0 10px 32px #10243a26; font-size:.8rem; line-height:1.5; }
.time-hint[hidden] { display:none; }
.time-hint p { margin:.55rem 0 0; }
.time-hint > strong { display:block; font-size:1rem; line-height:1.25; }
.time-hint .time-hint-date { margin:0 0 .5rem; color:var(--focus); font-size:.7rem; font-weight:700; }
.time-hint .time-hint-period { margin:.3rem 0 0; color:var(--muted); font-size:.7rem; }
.time-hint-before { margin-top:.75rem; padding-top:.65rem; border-top:1px solid var(--line); }
.time-hint-before > span { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; }
.time-hint-before p { font-size:.73rem; }
.explorer-layout { display:block; width:100%; max-width:none; padding:0 clamp(.75rem,1.5vw,1.5rem); }
.landscape-column { padding-right:0; }
.open-document { position:fixed; z-index:31; right:1rem; bottom:1rem; display:flex; gap:1.5rem; align-items:center; padding:.8rem 1rem; border:1px solid #cad7df; border-radius:.6rem; background:#fff; color:var(--ink); box-shadow:0 4px 20px #10243a12; font-size:.8rem; font-weight:700; }
.document-pane { position:fixed; z-index:40; inset:0 0 0 auto; display:flex; flex-direction:column; width:min(760px,92vw); height:100dvh; min-height:0; padding:0; border:0; border-left:1px solid var(--line); border-radius:0; background:#fbfcfd; box-shadow:-12px 0 44px #10243a15; overflow:hidden; visibility:hidden; transform:translateX(100%); transition:transform .2s ease,visibility .2s; }
.document-pane.is-open { transform:translateX(0); visibility:visible; }
.drawer-toolbar { display:flex; align-items:center; flex:none; gap:1rem; min-height:4.25rem; padding:.75rem 1.5rem; border-bottom:1px solid var(--line); background:#fff; }
.drawer-toolbar > span { margin-right:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:.8rem; font-weight:650; }
.drawer-toolbar .return-context { flex-shrink:0; }
.drawer-toolbar .return-context { margin:0; font-size:.75rem; }
.drawer-toolbar .close-document { position:static; display:grid; flex:none; place-items:center; width:2rem; height:2rem; border:1px solid var(--line); border-radius:.4rem; color:var(--ink); background:#fff; font-size:1.35rem; }
.document-tabs { display:flex; flex:none; padding:0 1rem; border-bottom:1px solid var(--line); background:#fff; }
.document-tabs button { flex:1; min-width:0; padding:1rem .5rem; border:0; border-bottom:2px solid transparent; color:var(--muted); background:transparent; text-align:left; }
.document-tabs strong { display:block; font-size:.8rem; font-weight:650; }
.document-tabs small { display:block; margin-top:.3rem; font-size:.64rem; }
.document-tabs button[aria-selected="true"] { color:var(--focus); border-bottom-color:var(--focus); background:#f2f8f9; }
.document-tabs button:hover { background:#f4f7fa; }
.document-content { width:100%; max-width:none; min-height:0; margin:0; padding:1.75rem 2rem 3rem; overflow-y:auto; overscroll-behavior:contain; overflow-anchor:none; }
.document-tab-panel[hidden] { display:none; }
.document-tab-panel > .doc-section:first-child,.document-tab-panel > .learning-block:first-child,.document-tab-panel > .chapter-cut:first-child { margin-top:0; }
.document-tab-panel > .chapter-cut:first-child { border-top:0; padding-top:0; }
.document-tab-panel .chip-list { gap:.5rem; }
.document-tab-panel .doc-chip { flex:1 1 12rem; padding:.7rem .8rem; }
.document-tab-panel .world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#document-panel-links:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; align-items:start; }
#document-panel-links > .doc-section { margin:0; padding:1rem; border:1px solid var(--line); border-radius:.55rem; background:#fff; }
#document-panel-links > .chapter-cut { grid-column:1 / -1; }
@media (max-width:540px) {
  .document-pane { width:100%; }
  .drawer-toolbar { gap:.5rem; padding:.65rem 1rem; }
  .drawer-toolbar > span { font-size:.6rem; }
  .document-content { padding:1.25rem 1rem 2rem; }
  .document-tabs { padding:0 .4rem; }
  .document-tabs button { padding:.85rem .35rem; }
  .document-tabs strong { font-size:.72rem; }
  .document-tabs small { display:none; }
  .document-tab-panel .world-grid { grid-template-columns:1fr; }
  #document-panel-links:not([hidden]) { grid-template-columns:1fr; }
}

.glossary-access { min-height:2.4rem; padding:0 .78rem; border:1px solid #9bc3ca; border-radius:.55rem; color:#155e6c; background:#f3fafb; font-size:.8rem; font-weight:760; }
.glossary-access:hover { border-color:var(--focus); background:#fff; }
.glossary-dialog { width:min(1180px,calc(100vw - 2rem)); max-width:none; height:min(820px,calc(100dvh - 2rem)); max-height:none; padding:0; border:1px solid #cbd8e0; border-radius:1rem; color:var(--ink); background:#f8fafb; box-shadow:0 28px 90px #10243a55; }
.glossary-dialog::backdrop { background:rgba(8,24,41,.58); backdrop-filter:blur(2px); }
.glossary-shell { display:grid; grid-template-rows:auto auto minmax(0,1fr); height:100%; }
.glossary-header { display:flex; align-items:center; justify-content:space-between; min-height:4.6rem; padding:.8rem 1rem .8rem 1.35rem; border-bottom:1px solid var(--line); background:#fff; }
.glossary-header h2 { margin:.18rem 0 0; font-size:1.55rem; letter-spacing:-.04em; }
.glossary-close { display:grid; place-items:center; width:2.2rem; height:2.2rem; border:0; border-radius:50%; color:var(--muted); background:var(--soft); font-size:1.5rem; }
.glossary-toolbar { display:grid; grid-template-columns:minmax(15rem,1fr) minmax(12rem,18rem); gap:.65rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:#fff; }
.glossary-toolbar input,.glossary-toolbar select { width:100%; height:2.55rem; padding:0 .75rem; border:1px solid var(--line); border-radius:.5rem; color:var(--ink); background:#fff; }
.glossary-layout { display:grid; grid-template-columns:minmax(16rem,29%) minmax(0,1fr); min-height:0; }
.glossary-index { display:grid; grid-template-rows:auto auto minmax(0,1fr); min-height:0; border-right:1px solid var(--line); background:#f3f6f8; }
.glossary-letters { display:flex; flex-wrap:wrap; gap:.22rem; padding:.75rem .8rem .4rem; }
.glossary-letters button { min-width:1.7rem; height:1.7rem; padding:0 .32rem; border:1px solid transparent; border-radius:.35rem; color:var(--muted); background:transparent; font-size:.66rem; }
.glossary-letters button[aria-pressed="true"] { border-color:#90bcc4; color:var(--focus); background:#fff; font-weight:800; }
.glossary-count { margin:0; padding:.3rem .9rem .6rem; color:var(--muted); font-size:.7rem; }
.glossary-results { min-height:0; overflow:auto; padding:0 .55rem .8rem; }
.glossary-results > button { display:block; width:100%; padding:.62rem .68rem; border:0; border-bottom:1px solid #dde5eb; color:var(--ink); background:transparent; text-align:left; }
.glossary-results > button:hover,.glossary-results > button[aria-current="true"] { border-radius:.45rem; color:var(--focus); background:#fff; }
.glossary-results strong,.glossary-results span { display:block; }
.glossary-results strong { font-size:.82rem; }
.glossary-results span { margin-top:.15rem; color:var(--muted); font-size:.64rem; }
.glossary-entry { min-height:0; overflow:auto; padding:1.4rem clamp(1.2rem,3vw,3rem) 3rem; outline:0; overscroll-behavior:contain; }
.glossary-entry h3 { margin:.35rem 0 .4rem; font-size:clamp(1.8rem,3vw,3rem); letter-spacing:-.055em; line-height:1; }
.glossary-entry h4 { margin:0 0 .45rem; color:var(--muted); font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; }
.glossary-entry section { margin-top:1.55rem; }
.glossary-entry p,.glossary-entry li { color:#2d4055; line-height:1.62; }
.glossary-entry ul { margin:.2rem 0 0; padding-left:1.2rem; }
.glossary-entry-nav { display:flex; align-items:center; justify-content:space-between; min-height:2rem; color:var(--muted); font-size:.7rem; }
.glossary-entry-nav button { padding:0; border:0; color:var(--focus); background:transparent; font-weight:740; }
.glossary-equivalent,.glossary-variants { margin:.2rem 0; color:var(--muted)!important; font-size:.75rem; }
.glossary-lead { margin:1.1rem 0 0; padding:1rem 1.1rem; border-left:3px solid var(--focus); border-radius:0 .5rem .5rem 0; background:#edf6f7; font-size:1.03rem; font-weight:620; }
.glossary-links { display:flex; flex-wrap:wrap; gap:.45rem; }
.glossary-links button { padding:.5rem .65rem; border:1px solid var(--line); border-radius:.45rem; color:var(--ink); background:#fff; text-align:left; }
.glossary-links button span { display:block; color:var(--muted); font-size:.62rem; }
.glossary-history { display:grid; gap:.45rem; }
.glossary-history button { padding:.65rem .75rem; border:1px solid var(--line); border-radius:.5rem; color:var(--ink); background:#fff; text-align:left; }
.glossary-history small,.glossary-history strong { display:block; }
.glossary-history small { margin-bottom:.18rem; color:var(--muted); }
.glossary-check { padding:.75rem .85rem; border:1px solid var(--line); border-radius:.5rem; background:#fff; }
.glossary-check summary { color:var(--ink); cursor:pointer; font-weight:700; }
.glossary-sources { font-size:.78rem; }
.glossary-sources a { color:var(--focus); }
.glossary-status { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.68rem; }
.glossary-welcome { max-width:36rem; margin:12vh auto 0; text-align:center; }
.glossary-welcome h3 { font-size:2rem; }
@media (max-width:720px) {
  .glossary-dialog { width:100vw; height:100dvh; border:0; border-radius:0; }
  .glossary-toolbar { grid-template-columns:1fr; }
  .glossary-layout { grid-template-columns:1fr; grid-template-rows:minmax(12rem,36dvh) minmax(0,1fr); }
  .glossary-index { border-right:0; border-bottom:1px solid var(--line); }
  .glossary-entry { padding:1.2rem 1rem 2rem; }
  .glossary-access { order:2; }
}

/* Fiches personnages : une lecture autonome au-dessus du tiroir documentaire. */
.story-people { margin:0 0 1.5rem; padding:.9rem; border:1px solid #cfdde5; border-radius:.7rem; background:linear-gradient(135deg,#f7fbfc,#fff); }
.story-people h3 { margin:0 0 .6rem; color:var(--focus); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.story-people > div { display:flex; flex-wrap:wrap; gap:.5rem; }
.story-people button { display:inline-flex; align-items:center; gap:.45rem; min-height:2.55rem; padding:.32rem .58rem .32rem .36rem; border:1px solid #c9d8e1; border-radius:99px; color:var(--ink); background:#fff; font-size:.78rem; font-weight:700; text-align:left; }
.story-people button:hover { border-color:var(--focus); color:var(--focus); }
.person-story-avatar { width:1.8rem; height:1.8rem; border-radius:50%; object-fit:cover; background:#e7eef2; }
.person-story-avatar.is-failed { display:none; }
.entity-visual { margin:1rem 0 1.2rem; overflow:hidden; border:1px solid #ccd9e1; border-radius:.7rem; background:#e7eff3; box-shadow:0 8px 22px #10243a12; }
.entity-visual img { display:block; width:100%; max-height:15rem; object-fit:cover; background:#e7eff3; }
.entity-visual figcaption { padding:.45rem .65rem; color:var(--muted); background:#fff; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; }
.person-dialog { width:min(1100px,calc(100vw - 2rem)); max-width:none; max-height:min(860px,calc(100dvh - 2rem)); padding:0; border:1px solid #cbd8e0; border-radius:1rem; color:var(--ink); background:#fbfcfd; box-shadow:0 28px 90px #10243a45; }
.person-dialog::backdrop { background:rgba(8,24,41,.52); backdrop-filter:blur(2px); }
.person-dialog-toolbar { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; min-height:3.25rem; padding:.65rem 1rem .65rem 1.25rem; border-bottom:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.96); font-size:.7rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.person-dialog-toolbar button { display:grid; place-items:center; width:2rem; height:2rem; border:0; border-radius:50%; color:var(--muted); background:var(--soft); font-size:1.4rem; }
.person-dialog-toolbar button:hover { color:var(--ink); background:#dce9ef; }
.person-dialog-content { max-height:calc(min(860px,100dvh - 2rem) - 3.25rem); overflow:auto; overscroll-behavior:contain; }
.person-modal-grid { display:grid; grid-template-columns:minmax(16rem,29rem) minmax(0,1fr); min-height:35rem; }
.person-identity { padding:clamp(1.2rem,3vw,2.2rem); border-right:1px solid var(--line); background:#f1f6f8; }
.person-portrait { display:block; width:100%; aspect-ratio:9/11; object-fit:cover; border-radius:.7rem; background:#dce7ec; box-shadow:0 8px 24px #10243a18; }
.person-portrait.is-missing { display:grid; place-items:center; gap:.8rem; padding:1rem; color:var(--muted); text-align:center; }
.person-portrait.is-missing strong { display:grid; place-items:center; width:4.5rem; height:4.5rem; border:1px solid #a9bdc9; border-radius:50%; color:#315169; background:#edf4f7; font-size:1.55rem; letter-spacing:.08em; }
.person-portrait.is-missing span { font-size:.78rem; line-height:1.45; }
.person-portrait.is-failed { display:grid; place-items:center; color:transparent; }
.person-portrait.is-failed::after { content:"Portrait indisponible"; color:var(--muted); }
.person-gallery-stage { position:relative; }
.person-image-expand { position:absolute; right:.7rem; bottom:.7rem; padding:.42rem .62rem; border:1px solid #ffffff80; border-radius:.42rem; color:#fff; background:#10243acc; box-shadow:0 4px 16px #10243a45; font-size:.72rem; font-weight:750; opacity:0; transform:translateY(.35rem); transition:opacity .16s ease,transform .16s ease; }
.person-gallery-stage:hover .person-image-expand,.person-gallery-stage:focus-within .person-image-expand { opacity:1; transform:translateY(0); }
.person-gallery { margin:0; }
.person-gallery figcaption { display:grid; gap:.16rem; }
.person-image-caption { margin:.7rem 0 .15rem; font-size:.78rem; line-height:1.4; }
.person-image-period { margin:0; color:#315169; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem; font-weight:750; letter-spacing:.025em; }
.person-image-credit,.person-aliases,.person-roles { margin:.15rem 0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.person-image-credit a { color:inherit; }
.person-image-strip { display:flex; gap:.55rem; margin-top:.8rem; overflow-x:auto; padding:.12rem .05rem .3rem; }
.person-image-thumb { flex:0 0 5.25rem; display:grid; gap:.28rem; padding:.25rem; border:1px solid #c7d7df; border-radius:.45rem; color:#486176; background:#fff; text-align:left; }
.person-image-thumb:hover,.person-image-thumb:focus-visible,.person-image-thumb.is-selected { border-color:#16707d; box-shadow:0 0 0 2px #3c9ca322; }
.person-image-thumb img { display:block; width:100%; aspect-ratio:1; border-radius:.25rem; object-fit:cover; background:#dce7ec; }
.person-image-thumb span { display:block; font-size:.61rem; font-weight:700; line-height:1.25; }
.image-preview-dialog { width:min(94vw,1120px); max-width:none; max-height:94dvh; padding:1rem; border:0; border-radius:.8rem; background:#0b1623; box-shadow:0 28px 90px #0009; }
.image-preview-dialog::backdrop { background:rgba(6,14,24,.82); backdrop-filter:blur(5px); }
.image-preview-dialog figure { display:grid; gap:.65rem; margin:0; }
.image-preview-dialog img { display:block; max-width:100%; max-height:calc(94dvh - 5.5rem); margin:auto; object-fit:contain; }
.image-preview-dialog figcaption { padding:0 .3rem .15rem; color:#dce7ed; font-size:.78rem; line-height:1.45; text-align:center; }
.image-preview-close { position:absolute; z-index:1; top:.55rem; right:.55rem; display:grid; place-items:center; width:2.2rem; height:2.2rem; border:1px solid #ffffff55; border-radius:50%; color:#fff; background:#10243acc; font-size:1.45rem; }
.person-modal-kicker { margin:1.8rem 0 .35rem; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.person-identity h2 { margin:0; font-size:clamp(2rem,3vw,3.2rem); letter-spacing:-.055em; line-height:1; }
.person-full-name { margin:.45rem 0; color:#485970; font-size:.9rem; line-height:1.4; }
.person-vitals { margin:1.15rem 0 .5rem; color:#33475c; font-size:.82rem; line-height:1.55; }
.person-reading { padding:clamp(1.35rem,3vw,2.65rem); }
.person-reading h3 { margin:0 0 .7rem; color:#476074; font-size:.74rem; letter-spacing:.095em; text-transform:uppercase; }
.person-why { margin-bottom:1.7rem; padding:1rem 1.1rem; border-left:3px solid var(--accent); border-radius:0 .55rem .55rem 0; background:#fff7ef; }
.person-why p,.person-modal-section > p { margin:.55rem 0 0; color:#2d4055; line-height:1.65; }
.person-modal-section { margin-top:2rem; }
.person-contribution { margin:.8rem 0; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:.7rem; background:#fff; }
.person-contribution-year { margin:0; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; font-weight:750; }
.person-contribution h3 { margin:.45rem 0 .7rem; color:var(--ink); font-size:1rem; letter-spacing:0; text-transform:none; }
.person-contribution p { margin:.45rem 0; color:#31445a; font-size:.88rem; line-height:1.55; }
.person-collaborators { color:var(--muted)!important; font-size:.8rem!important; }
.person-event-links { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem!important; }
.person-event-links button { padding:.38rem .55rem; border:1px solid #b9d4db; border-radius:.4rem; color:#145d6b; background:#f4fbfc; font-size:.76rem; font-weight:700; }
.person-event-links button:hover { border-color:#145d6b; background:#e9f6f7; }
.person-source-links { margin-top:.65rem!important; color:var(--muted)!important; font-size:.72rem!important; }
.person-source-links a { color:inherit; }
.person-life-events,.person-bibliography { display:grid; gap:.7rem; margin:0; padding-left:1.15rem; }
.person-life-events li,.person-bibliography li { color:#31445a; line-height:1.5; }
.person-life-events .person-source-links { margin-bottom:0!important; }
.person-bibliography span { display:block; margin-top:.12rem; color:var(--muted); font-size:.78rem; }
.person-bibliography a { color:#165f70; }
@media (max-width:720px) {
  .person-dialog { width:100vw; max-height:100dvh; min-height:100dvh; border:0; border-radius:0; }
  .person-dialog-content { max-height:calc(100dvh - 3.25rem); }
  .person-modal-grid { grid-template-columns:1fr; }
  .person-identity { border-right:0; border-bottom:1px solid var(--line); }
  .person-portrait { max-width:16rem; }
}