/* FAWDA·TV — channels 2–6 */

.room .room-head { position: relative; top: auto; left: auto; }
.room .room-kicker { color: var(--accent); }
.room .room-kicker span { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.rq { font-style: italic; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2; color: var(--blanc); border-left: 2px solid var(--accent); padding-left: 14px; max-width: 46ch; }
.rq[lang^="ar"] { font-family: var(--f-ar); font-style: normal; direction: rtl; text-align: right; border-left: 0; border-right: 2px solid var(--accent); padding: 0 14px 0 0; }
.rq-tr { display: block; font-size: .7em; color: var(--muted); margin-top: 4px; direction: ltr; text-align: left; font-family: var(--f-serif); font-style: italic; }
.rq cite { display: block; font-size: 9px; color: var(--muted); margin-top: 6px; direction: ltr; text-align: left; }
.rq cite a { text-decoration: none; border-bottom: 1px solid currentColor; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); background: rgba(11,10,9,.6); white-space: nowrap; }
.chip i { width: 8px; height: 8px; display: inline-block; }
.chip .mono { font-size: 9px; opacity: .6; }
.chip:hover, .chip:focus-visible { color: var(--blanc); border-color: var(--t, var(--accent)); outline: none; }
.chip.on { color: #0B0A09; background: var(--t, var(--accent)); border-color: var(--t, var(--accent)); }

/* ───────────── CH 2 · LE SALON: at the end of this file ───────────── */

/* ───────────── CH 3 · LA GROTTE ─────────────
   his YouTube channel, made legible: a first screen that explains, the series as character cards,
   each playlist page dressed in its own set (cave, poster, blackboard…), a theatre with previous / next. */
.tube { --tp: #FF4FA0; --ink: #0a0908; --card: #110f0e; position: absolute; inset: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  background: #080706; color: var(--blanc); }
.cave-rock { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 60% -10%, rgba(255,79,160,.10), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(233,184,114,.07), transparent 50%); }

/* top bar */
.tb-bar { grid-column: 1 / -1; position: relative; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 62px 24px 14px;
  border-bottom: 1px solid rgba(236,231,222,.07); }
.tb-logo { display: flex; align-items: center; gap: 10px; flex: none; width: 190px; color: var(--blanc); }
.tb-logo b { display: grid; place-items: center; width: 36px; height: 26px; border-radius: 7px; background: var(--tp); color: var(--ink); font-size: 12px; box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.tb-logo span { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 23px; }
.tb-logo i { font-style: normal; font-family: var(--f-ar-display); color: var(--tp); font-size: 17px; }
.tb-search { flex: 1; max-width: 640px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 16px;
  background: #0e0c0b; border: 1px solid rgba(236,231,222,.16); border-radius: 22px; transition: border-color .2s, box-shadow .2s; }
.tb-search:focus-within { border-color: var(--tp); box-shadow: 0 0 0 4px rgba(255,79,160,.14); }
.tb-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.tb-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--blanc); font-family: var(--f-serif); font-size: 18px; }
.tb-search input::placeholder { color: rgba(236,231,222,.38); font-style: italic; }
.tb-search kbd { font-size: 10px; color: var(--muted); border-radius: 4px; }

/* the guide */

.tg-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 9px; text-align: left; color: rgba(236,231,222,.78);
  transition: background .15s, color .15s; }
.tg-row svg { width: 19px; height: 19px; }
.tg-row span { font-size: 14px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-row i { font-style: normal; font-size: 9px; color: rgba(236,231,222,.4); }
.tg-row:hover, .tg-row:focus-visible { background: rgba(236,231,222,.06); color: var(--blanc); outline: none; }
.tg-row.on { background: rgba(236,231,222,.1); color: var(--blanc); }
.tg-pl img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--t); }
.tg-pl.on { background: color-mix(in srgb, var(--t) 18%, transparent); }

/* main column */
.tb-main { position: relative; z-index: 4; overflow-y: auto; scrollbar-width: thin; padding: 18px 28px 140px 16px; outline: none; }
.tb-main > section { margin-bottom: 34px; }

/* the first screen: what this is, how to watch */

.ti-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 4.4vw, 68px); line-height: .86; margin: 10px 0 14px; text-shadow: .03em .02em 0 var(--tp); }
.ti-line { font-family: var(--f-serif); font-size: 20px; line-height: 1.35; max-width: 52ch; color: rgba(236,231,222,.9); }

/* series as character cards */

/* video cards */

/* other videos as tiles */

.tt { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; text-align: left; color: var(--blanc);
  background: var(--card); border: 1px solid rgba(236,231,222,.08); transition: border-color .2s, background .2s; }
.tt:hover, .tt:focus-visible { border-color: rgba(236,231,222,.35); background: #15120f; outline: none; }

/* playlist page */

.yp-hero { position: sticky; top: 0; max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--t) 60%, transparent) transparent;
  border-radius: 20px; padding: 18px; isolation: isolate;
  background: linear-gradient(170deg, color-mix(in srgb, var(--t) 30%, #111), #0d0b0a 72%); border: 1px solid color-mix(in srgb, var(--t) 35%, transparent); }
.yp-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.yp-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 3.4vw, 58px); line-height: .86; margin: 8px 0 4px; text-shadow: .03em .02em 0 var(--t); }

/* the sets: each series page dressed in its own world, from its documented motifs */

.set-poster .yp-hero { background: repeating-linear-gradient(135deg, rgba(242,212,58,.10) 0 18px, transparent 18px 36px), linear-gradient(170deg, #2b260c, #0d0b0a 70%); }
.set-poster .yp-title::after { content: 'VOTEZ'; display: block; width: max-content; margin-top: 8px; padding: 2px 8px; font-size: .32em; color: var(--ink); background: var(--t); transform: rotate(-3deg); text-shadow: none; }

.set-official .yp-hero { background: linear-gradient(170deg, #2a1220, #0d0b0a 70%); }
.set-official .yp-hero::before { content: 'OFFICIEL'; position: absolute; right: -18px; top: 46%; z-index: 0; padding: 4px 14px; border: 4px double color-mix(in srgb, var(--t) 70%, transparent);
  color: color-mix(in srgb, var(--t) 70%, transparent); font-family: var(--f-display); font-weight: 900; font-size: 44px; transform: rotate(-14deg); opacity: .35; }

/* the theatre */
.tb-watch { position: absolute; inset: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; padding: 62px 26px 26px;
  background: rgba(6,5,4,.95); backdrop-filter: blur(8px); }
.tw-stage { overflow-y: auto; scrollbar-width: thin; }
.tw-player { aspect-ratio: 16 / 9; max-height: 64vh; max-height: 64dvh; margin: 0 auto; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,79,160,.3), 0 30px 80px rgba(0,0,0,.7); }
.tw-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.tw-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.tw-step { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(236,231,222,.08); color: var(--blanc); transition: background .15s, color .15s; }
.tw-step svg { width: 18px; height: 18px; }
.tw-step:hover:not(:disabled) { background: var(--tp); color: var(--ink); }
.tw-step:disabled { opacity: .25; cursor: default; }
.tw-pos { font-size: 11px; color: rgba(236,231,222,.8); min-width: 20ch; text-align: center; }
.tw-info { padding: 12px 4px; }
.tw-title { font-size: 24px; line-height: 1.2; font-weight: 400; }
.tw-meta { font-size: 10px; color: var(--muted); margin-top: 6px; }
.tw-desc { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(236,231,222,.06); display: grid; gap: 10px; justify-items: start; }
.tw-desc p { font-family: var(--f-serif); font-size: 17px; line-height: 1.35; }
.tw-who span { display: block; font-size: 9px; color: var(--tp); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 2px; }
.tw-pl { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 16px; background: var(--t); color: var(--ink); font-size: 11px; }
.tw-pl svg { width: 14px; height: 14px; }
.tw-film  { color: var(--tp); font-size: 10px; }
.tw-yt { color: var(--blanc); font-size: 10px; }
.tw-next { overflow-y: auto; scrollbar-width: thin; border-radius: 14px; background: rgba(236,231,222,.04); border: 1px solid rgba(236,231,222,.1); }
.tw-next-h { position: sticky; top: 0; z-index: 1; padding: 12px 14px; font-size: 10px; background: #0f0d0c; border-bottom: 1px solid rgba(236,231,222,.1); }
.tw-next ol { list-style: none; padding: 6px; }
.tw-row { width: 100%; display: grid; grid-template-columns: 20px 112px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border-radius: 10px; text-align: left; color: var(--blanc); }
.tw-row i { font-style: normal; font-size: 10px; color: var(--muted); text-align: center; }
.tw-row img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; }
.tw-row span { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tw-row:hover, .tw-row:focus-visible { background: rgba(236,231,222,.07); outline: none; }
.tw-row.now { background: rgba(255,79,160,.16); }
.tw-row.now i { color: var(--tp); }
.tw-close { position: absolute; top: 18px; right: 22px; color: var(--blanc); padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.tw-close:hover { background: var(--blanc); color: var(--ink); }
@media (max-width: 1100px) {  .yp-hero { position: relative; max-height: none; overflow: visible; } .tb-watch { grid-template-columns: 1fr; overflow-y: auto; } .tw-next { max-height: 40vh; max-height: 40dvh; }
    }
@media (max-width: 760px) {
  .tube { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
  .tb-bar { padding: 58px 12px 8px; gap: 10px; flex-wrap: wrap; }
  .tb-logo { width: auto; } .tb-logo span { font-size: 20px; }
  .tb-search { order: 3; flex-basis: 100%; max-width: none; }
  
   .tg-row { grid-template-columns: 20px auto auto; }
  .tb-main { padding: 10px 12px 120px; }

.tb-watch { padding: 56px 10px 20px; }
}

/* ───────────── CH 4 · LA PAGE DEVIENT UN MUR ───────────── */
.walls { position: absolute; inset: 0; overflow: hidden; perspective: 1400px;
  background: linear-gradient(180deg, #1a1712 0%, #2a241b 55%, #15120e 100%); }
.walls::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; height: 22dvh; background: linear-gradient(0deg, #0b0a09, transparent); pointer-events: none; }

.wall { position: relative; flex: 0 0 auto; width: min(92vw, 1100px); height: 100%; padding: 90px clamp(20px, 4vw, 64px) 140px; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 60px); align-items: center;
  border-right: 1px solid rgba(236,231,222,.06); transform-origin: 50% 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(236,231,222,.05), transparent 70%); }
.wall.intro { display: flex; flex-direction: column; justify-content: center; gap: 28px; width: min(80vw, 760px); }

.tape { position: absolute; width: 90px; height: 22px; background: rgba(233,225,207,.35); z-index: 3; }

.wall.intro .tape { display: none; }

.cover { width: clamp(200px, 26vw, 340px); aspect-ratio: 2 / 3; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); transform: rotate(-2deg); overflow: hidden; }
.cover.real { background: #0b0a09; }
.cover.real img { width: 100%; height: 100%; object-fit: contain; }
.cv-flag { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 4; background: rgba(0,0,0,.7); color: rgba(236,231,222,.7); font-size: 8px; padding: 5px 8px; text-align: center; }

.cover.made { background: var(--cb); color: var(--cf); display: grid; grid-template-rows: auto 1fr auto; padding: 18px 16px; }
.cv-author { font-size: 10px; letter-spacing: .03em; position: relative; z-index: 2; }
.cv-title { position: relative; z-index: 2; align-self: end; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 50px); line-height: .86; overflow-wrap: anywhere; }
.cv-pub { font-size: 8px; opacity: .8; position: relative; z-index: 2; margin-top: 10px; }
.cv-motif { position: absolute; inset: 0; z-index: 1; }
.m-bolt .cv-motif svg { position: absolute; right: 8%; top: 10%; width: 46%; height: auto; fill: var(--ca); filter: drop-shadow(4px 4px 0 #121212); }
.m-halftone .cv-motif { background: radial-gradient(circle, var(--ca) 0 1.6px, transparent 2px) 0 0 / 9px 9px; opacity: .55; mask-image: linear-gradient(135deg, #000, transparent 70%); }
.m-seeds .cv-motif { background: radial-gradient(ellipse 3px 5px at 50% 50%, #0b0a09 90%, transparent) 0 0 / 26px 30px, linear-gradient(180deg, var(--ca) 0 70%, #F7F1E6 70% 74%, #1F6B3A 74%); opacity: .95; }
.m-seeds .cv-title { color: #F7F1E6; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.m-bars .cv-motif { background: repeating-linear-gradient(90deg, var(--ca) 0 3px, transparent 3px 18px); opacity: .12; }
.m-halo .cv-motif { background: radial-gradient(circle at 50% 36%, var(--ca) 0 18%, transparent 19% 23%, color-mix(in srgb, var(--ca) 50%, transparent) 24% 25%, transparent 26%); }
.m-clouds .cv-motif { background: radial-gradient(ellipse 40% 14% at 30% 30%, var(--ca), transparent), radial-gradient(ellipse 50% 16% at 70% 45%, var(--ca), transparent), radial-gradient(ellipse 36% 12% at 40% 62%, var(--ca), transparent); }
.m-grid .cv-motif { background: linear-gradient(var(--ca) 1px, transparent 1px) 0 0 / 100% 14px, linear-gradient(90deg, var(--ca) 1px, transparent 1px) 0 0 / 14px 100%; opacity: .25; }
.k-comic .cover.made::after { content: ''; position: absolute; inset: 0; border: 6px solid var(--cf); outline: 2px solid var(--cb); outline-offset: -12px; pointer-events: none; z-index: 3; }

/* ───────────── CH 5 · LE MANIFESTE EN MORCEAUX ───────────── */
.mani { position: absolute; inset: 0; background: #0B0A09; transition: background .01s; }
#vision[data-style="1"] .mani { background: #ECE7DE; color: #0B0A09; }
#vision[data-style="3"] .mani { background: var(--accent); color: #0B0A09; }
#vision[data-style="title"] .mani { background: #000; }
.shot { position: absolute; inset: 0; display: grid; padding: 90px clamp(16px, 6vw, 110px) 150px; cursor: pointer; }
.sh { align-self: center; max-width: 1300px; }

/* ───────────── CH 6 · LA CONSTELLATION ───────────── */
/* ── CH 6 · LA CONSTELLATION ──
   a title card over the blurred sky, then free flight: a thin rail on the left, a sheet on the right */
.uni { --u-y: #F2D43A; --u-p: #FF4FA0; --u-t: #3FE0C5; position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, #10161a, #060707 72%); }
.uni-canvas { position: absolute; inset: 0; touch-action: none; transition: filter .9s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.uni-bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); width: 90vw; text-align: center; pointer-events: none;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(60px, 10vw, 180px); line-height: .9; color: rgba(236,231,222,.035); }
.lg { display: inline-block; width: 30px; height: 6px; vertical-align: middle; margin-right: 7px; background: var(--blanc); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2060%2010%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%206c10-3%2018%201%2028-1s19-2%2028%200%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2060%2010%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M2%206c10-3%2018%201%2028-1s19-2%2028%200%27/%3E%3C/svg%3E") center / contain no-repeat; }

/* the title card */
.uni-intro { position: absolute; inset: 0; z-index: 12; display: grid; align-content: center; justify-items: start; gap: 0;
  padding: 80px clamp(20px, 8vw, 140px) 120px; background: linear-gradient(90deg, rgba(6,7,7,.92) 0%, rgba(6,7,7,.55) 55%, rgba(6,7,7,.2));
  transition: opacity .7s ease, visibility .7s; }
.uni:not(.is-intro) .uni-intro { opacity: 0; visibility: hidden; pointer-events: none; }
.uni.is-intro .uni-canvas { filter: blur(6px) brightness(.8) saturate(1.3); transform: scale(1.06); }

/* legend marks drawn by hand, like a felt-tip dab on a map: a filled dab, an outlined ring, a pen stroke */

.uni-tip em { font-style: normal; margin-left: 8px; padding: 0 6px; color: #0a0908; background: #ECE7DE; }
.us-status { display: grid; gap: 4px; margin: 10px 0 2px; padding: 9px 11px; border: 1.5px solid var(--kc); }
.us-status.is-dash { border-style: dashed; }
.us-status b { justify-self: start; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #0a0908; background: var(--kc); padding: 2px 7px; }
.us-status span { font-family: var(--f-serif); font-size: 16px; line-height: 1.3; color: #ECE7DE; }

/* once inside: a small tag where the title was */
.uni-tag { position: absolute; top: 70px; left: 92px; z-index: 6; display: flex; gap: 8px; align-items: center; font-size: 10px; color: var(--muted);
  transition: opacity .5s .3s; pointer-events: none; }
.uni-tag span { background: var(--u-t); color: #0a0908; font-weight: 700; padding: 2px 6px; }
.uni.is-intro .uni-tag, .uni.is-intro .uni-rail { opacity: 0; pointer-events: none; transition-delay: 0s; }

/* the rail */
.uni-rail { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 8; display: grid; gap: 4px; padding: 6px;
  background: #0b0c0c; border: 1px solid rgba(236,231,222,.14); box-shadow: 6px 6px 0 rgba(0,0,0,.55); transition: opacity .5s .3s; }
.ur-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--kc, #ECE7DE); border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s; }
.ur-btn .u-ico { width: 20px; height: 20px; }
.ur-btn.on { background: var(--kc); color: #0a0908; }
.ur-btn:not(.on):not(.ur-tool) { opacity: .45; }
.ur-btn:hover, .ur-btn:focus-visible { border-color: #ECE7DE; opacity: 1; outline: none; }
.ur-tool { color: #ECE7DE; }
.ur-tool:hover { background: #ECE7DE; color: #0a0908; }
.ur-glyph { font-family: var(--f-mono); font-size: 18px; line-height: 1; }

/* hover label on the canvas */
.uni-tip { position: fixed; left: 0; top: 0; z-index: 30; display: flex; align-items: stretch; background: #0a0908; color: var(--blanc); font-size: 10px;
  border: 1px solid rgba(236,231,222,.25); pointer-events: none; }
.uni-tip b { padding: 4px 7px; color: #0a0908; font-weight: 700; margin-right: 8px; }
.uni-tip { padding-right: 8px; line-height: 1.9; }
.uni-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--muted); z-index: 13; }

/* the sheet */
.uni-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 10; width: min(440px, 100vw); overflow-y: auto; scrollbar-width: thin;
  background: #0b0c0c; border-left: 1px solid rgba(236,231,222,.14); box-shadow: -18px 0 50px rgba(0,0,0,.55);
  transform: translateX(105%); transition: transform .55s var(--ease-cut); }
.uni.has-sheet .uni-panel { transform: none; }
.us-head { position: relative; }
.us-img { margin: 0; height: 250px; overflow: hidden; background: #000; }
.us-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-img { position: relative; }
.us-img.is-portrait { height: 320px; }
.us-img.is-portrait img { object-position: 50% 22%; }
.us-img figcaption { position: absolute; left: 10px; bottom: 22px; font-size: 8px; }
.us-img figcaption a { color: rgba(236,231,222,.85); background: rgba(0,0,0,.65); padding: 3px 6px; text-decoration: none; }
.us-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #000; }
.us-wall.n1, .us-wall.n2 { grid-template-columns: repeat(2, 1fr); }
.us-wall img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; filter: grayscale(.4); }
.us-stamp { height: 170px; display: grid; place-items: center; background: radial-gradient(rgba(0,0,0,.15) .8px, transparent 1.1px) 0 0 / 4px 4px, var(--kc); color: #0a0908; }
.us-stamp .u-ico { width: 72px; height: 72px; }
.us-close { position: absolute; top: 72px; right: 12px; width: 36px; height: 36px; font-size: 20px; background: #0a0908; color: #ECE7DE; border: 1px solid rgba(236,231,222,.3); }
.us-close:hover { background: #ECE7DE; color: #0a0908; }
.us-body { padding: 0 24px 40px; }
.us-kind { display: flex; align-items: center; gap: 10px; margin-top: -14px; position: relative; font-size: 10px; }
.us-kind span { display: inline-flex; align-items: center; gap: 6px; background: var(--kc); color: #0a0908; font-weight: 700; padding: 5px 9px 5px 7px; transform: rotate(-2deg); box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.us-kind .u-ico { width: 15px; height: 15px; }
.us-kind b { font-family: var(--f-display); font-weight: 900; font-size: 20px; color: var(--kc); letter-spacing: 0; }
.us-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 4vw, 54px); line-height: .88; margin: 14px 0 6px; color: #ECE7DE; }
.us-ar { font-family: var(--f-ar-display); font-size: 26px; color: var(--kc); text-align: left; }
.us-text { font-family: var(--f-serif); font-size: 19px; line-height: 1.35; margin-top: 10px; color: #ECE7DE; }
.us-note { font-size: 9px; color: var(--muted); margin-top: 10px; }
.us-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.us-play { width: 100%; padding: 13px; background: var(--kc); color: #0a0908; font-size: 11px; font-weight: 700; box-shadow: 4px 4px 0 #ECE7DE; transition: transform .15s, box-shadow .15s; }
.us-play:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #ECE7DE; }
.us-out { padding: 8px 11px; font-size: 10px; color: #ECE7DE; border: 1px solid rgba(236,231,222,.35); text-decoration: none; }
.us-out:hover { background: #ECE7DE; color: #0a0908; }
.us-count { margin-top: 24px; font-size: 10px; color: var(--muted); }
.us-count b { font-family: var(--f-display); font-size: 22px; color: #ECE7DE; margin-right: 4px; }
.us-group { margin-top: 18px; }
.us-rel { display: flex; justify-content: space-between; font-size: 10px; color: #ECE7DE; padding-bottom: 6px; border-bottom: 2px solid rgba(236,231,222,.2); }
.us-rel i { font-style: normal; color: var(--muted); }
.us-group ul { list-style: none; }
.us-group li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid rgba(236,231,222,.07); }
.us-link { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; text-align: left; color: #ECE7DE; }
.uc-img { display: block; width: 74px; aspect-ratio: 16 / 10; overflow: hidden; background: #000; box-shadow: 3px 3px 0 var(--kc); transition: transform .2s; }
.uc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uc-stamp { display: grid; place-items: center; background: var(--kc); color: #0a0908; }
.uc-stamp .u-ico { width: 22px; height: 22px; }
.us-link:hover .uc-img { transform: translate(-2px, -2px); }
.ul-t b { display: block; font-family: var(--f-serif); font-weight: 400; font-size: 19px; line-height: 1.1; }
.ul-t i { font-style: normal; font-size: 9px; color: var(--kc); }
.us-link:hover .ul-t b { color: var(--kc); }
.us-src { display: block; padding-left: 86px; font-size: 8px; color: var(--muted); }
.us-src:hover { color: #ECE7DE; }
@media (max-width: 760px) {
  .uni-rail { left: 8px; top: auto; bottom: 84px; transform: none; grid-auto-flow: column; overflow-x: auto; max-width: calc(100vw - 16px); }

.uni-tag { left: 16px; }
  .uni-panel { top: auto; height: 62vh; height: 62dvh; width: 100vw; border-left: 0; border-top: 1px solid rgba(236,231,222,.14); transform: translateY(105%); }
  .us-img { height: 170px; }
  .us-close { top: 10px; }
}

/* ───────────── responsive ───────────── */

@media (max-width: 760px) {
  #ecrits { overflow-y: auto; scrollbar-width: none; }
  .walls { position: relative; inset: auto; overflow: visible; min-height: 100%; }
  
  .wall { width: 100%; height: auto; grid-template-columns: 1fr; padding: 70px 16px 40px; transform: none !important; border-right: 0; border-bottom: 1px solid rgba(236,231,222,.08); }
  .wall.intro { width: 100%; }
  .cover { width: min(220px, 60vw); }

.shot { padding: 70px 16px 170px; }
}

/* ───────────── CH 7 · LES NUITS DE FESTIVAL ───────────── */
/* pop night: acid yellow, hot pink, orange, turquoise on violet-black, countries in comic halftone */
.pal { --pal-y: #F2D43A; --pal-p: #FF4FA0; --pal-o: #FF8A3D; --pal-t: #3FE0C5; --pal-v: #7B2FF7;
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 30% 45%, rgba(123,47,247,.22), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(255,79,160,.14), transparent 50%), #07050c; }
.pal-map { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.pal-map.grabbing { cursor: grabbing; }
.pal-sphere { fill: rgba(123,47,247,.05); stroke: rgba(63,224,197,.25); }
.pal-grat { fill: none; stroke: rgba(63,224,197,.07); }
.pal-land { fill: rgba(236,231,222,.05); stroke: rgba(236,231,222,.16); transition: fill .6s; }
.pal-land.lit { stroke: rgba(255,79,160,.55); }
.pal-land.home { stroke: var(--pal-y); }
.pal-home { fill: var(--pal-y); filter: drop-shadow(0 0 8px var(--pal-y)); animation: home-pulse 2.4s ease-in-out infinite; }
@keyframes home-pulse { 50% { opacity: .45; } }
.pal-home-t { fill: var(--pal-y); font-family: var(--f-mono); letter-spacing: .03em; text-transform: uppercase; paint-order: stroke; stroke: #07050c; stroke-width: 3px; }
.pal-arc { fill: none; opacity: .4; filter: url(#pal-glow); transition: opacity .4s; }
.pal-arc.now { opacity: 1; }
.pal-dot { cursor: pointer; }

.pal-name { fill: rgba(236,231,222,.7); font-family: var(--f-mono); letter-spacing: .03em; text-transform: uppercase; pointer-events: none;
  paint-order: stroke; stroke: #07050c; stroke-width: 3px; stroke-linejoin: round; }

/* the title card, as in the Constellation: tickets sum it up over the blurred map, then the night starts */
.pal-intro { --u-t: #FF4FA0; position: absolute; inset: 0; z-index: 12; display: grid; align-content: center; justify-items: start;
  padding: 80px clamp(20px, 8vw, 140px) 110px; background: linear-gradient(90deg, rgba(7,5,12,.92) 0%, rgba(7,5,12,.6) 55%, rgba(7,5,12,.25));
  transition: opacity .7s ease, visibility .7s; }
.pal:not(.is-intro) .pal-intro { opacity: 0; visibility: hidden; pointer-events: none; }
.pal-map { transition: filter .9s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.pal.is-intro .pal-map { filter: blur(6px) brightness(.8) saturate(1.3); transform: scale(1.05); }

.pal.is-intro .pal-panel, .pal.is-intro .pal-toggle, .pal.is-intro .pal-time, .pal.is-intro .pal-rail, .pal.is-intro .pal-tag { opacity: 0; pointer-events: none; }
.pal-panel, .pal-toggle, .pal-time, .pal-rail, .pal-tag { transition: opacity .5s .25s; }
.pal-tag span { background: var(--pal-p); }

/* the kinds as cinema ticket stubs: notched edges, a perforation, the count on the stub, riso grain */

/* a torn-off stub: just the outline of the ticket, the label crossed out */

.pal-panel { position: absolute; top: 70px; right: 16px; bottom: 120px; width: min(380px, calc(100vw - 32px)); overflow-y: auto; scrollbar-width: thin;
  background: rgba(7,5,12,.85); border: 1px solid rgba(255,79,160,.3); box-shadow: 6px 6px 0 rgba(123,47,247,.35); padding: 16px 16px 10px; backdrop-filter: blur(4px); }
.pal-panel { transition: transform .5s var(--ease-cut), right .5s var(--ease-cut), opacity .4s; }
.pal.panel-off .pal-panel { transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; }
.pal-toggle { position: absolute; z-index: 3; top: 70px; right: calc(min(380px, calc(100vw - 32px)) + 16px);
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 9px; color: #0a0908; background: var(--pal-p);
  writing-mode: vertical-rl; box-shadow: -3px 3px 0 rgba(123,47,247,.6);
  transition: right .5s var(--ease-cut), background .2s; }
.pal-toggle:hover, .pal-toggle:focus-visible { background: var(--pal-y); outline: none; }

.pal.panel-off .pal-toggle { right: 16px; }
.pal-p-head { color: var(--pal-y); font-size: 12px; margin-bottom: 8px; }
.pal-list { list-style: none; }
.pl-row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(236,231,222,.08); }

.pl-what { font-size: 19px; line-height: 1.15; }
.pl-who { font-style: italic; color: var(--muted); }
.pl-where { font-size: 9px; color: var(--muted); margin-top: 3px; text-transform: none; letter-spacing: .03em; }
.pl-city { color: var(--kc); text-decoration: underline dotted; font: inherit; }
.pl-city:hover { color: var(--blanc); }
.pl-work { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 15px; color: var(--kc, var(--pal-y)); margin-top: 4px; text-align: left; }
button.pl-work:hover { color: var(--blanc); }
.pl-src { font-size: 8px; color: rgba(236,231,222,.4); margin-top: 3px; }
.pl-src a { color: inherit; }
.pl-empty { font-style: italic; color: var(--muted); padding: 10px 0; }
.pal-time { position: absolute; left: 84px; right: 16px; bottom: 28px; display: flex; align-items: center; gap: 14px; }
.pal-play { width: 40px; height: 40px; border: 1px solid var(--pal-p); color: var(--pal-p); font-size: 14px; flex: none; }
.pal-play:hover { background: var(--pal-p); color: #07050c; }
.pal-years { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.pal-years button { padding: 6px 7px; font-size: 10px; color: var(--muted); border-bottom: 2px solid transparent; }
.pal-years button.on { color: var(--pal-y); border-color: var(--pal-p); }
.pal-years button:hover { color: var(--blanc); }
.pal-year { font-family: var(--f-display); font-weight: 900; font-size: clamp(48px, 7vw, 110px); line-height: .8; color: transparent;
  -webkit-text-stroke: 1.5px var(--pal-y); text-shadow: 4px 4px 0 rgba(255,79,160,.5); flex: none; }
.pal-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--muted); }
@media (max-width: 900px) {
  .pal-panel { top: auto; bottom: 170px; height: 34vh; height: 34dvh; left: 16px; right: 16px; width: auto; }
  .pal-toggle, .pal.panel-off .pal-toggle { top: auto; bottom: calc(170px + 34vh + 10px); bottom: calc(170px + 34dvh + 10px); left: 16px; right: auto; writing-mode: horizontal-tb; }
  .pal-year { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pal-home { animation: none; } }
/* the cut-out lines inside the clapperboard and the rosette take the colour of what's behind the icon */

/* a book that also exists on screen: its videos, as small frames under the text */
.wall-watch { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.wall-watch > p { grid-column: 1 / -1; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
.ww-card { display: grid; gap: 4px; text-decoration: none; color: var(--blanc); }
.ww-img { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; outline: 1px solid rgba(236,231,222,.15); transition: outline-color .2s; }
.ww-img i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 34px; height: 34px; display: grid; place-items: center; font-style: normal; font-size: 11px;
  color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.7); }
.ww-card:hover .ww-img { outline-color: var(--accent); }
.ww-t { font-family: var(--f-ar-display, inherit); font-size: 14px; line-height: 1.2; }
.ww-n { font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }

/* ───────────── CH 2 · LE SALON ─────────────
   one big set; inside it, the on-screen menu of a satellite receiver: deep blue panels, a yellow focus bar,
   the four coloured keys of the remote along the bottom */
#tele { overflow: hidden; background: #07080b; }
.salon { --osd-y: #F2D43A; --osd-b0: #24201b; --osd-b1: #0b0a08; --osd-line: rgba(236,222,200,.2);
  position: relative; height: 100%; display: grid; place-items: center; padding: 56px 16px 104px; }
.salon-light { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(40,80,200,.22), transparent 70%); }
#tele.watching .salon-light { animation: tv-flicker 2.6s steps(7) infinite; }
@keyframes tv-flicker { 0%, 100% { opacity: 1; } 40% { opacity: .7; } 70% { opacity: 1.1; } }

/* the set: dark plastic, a curved glass, the name and a standby light under the screen */
.set { position: relative; width: min(1180px, 96vw, calc((100vh - 200px) * 1.6 + 44px)); width: min(1180px, 96vw, calc((100dvh - 200px) * 1.6 + 44px)); padding: 20px 22px 0; border-radius: 30px;
  background: linear-gradient(170deg, #2a2a2e, #141416 45%, #0b0b0c); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.6), 0 40px 100px rgba(0,0,0,.75); }
.set-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px / 18px;
  background: radial-gradient(ellipse at 50% 30%, var(--osd-b0), var(--osd-b1) 80%); box-shadow: 0 0 0 2px #050506, inset 0 0 60px rgba(0,0,0,.6); }
.set-screen::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0,0,0,.5)), linear-gradient(128deg, rgba(255,255,255,.07), transparent 28%); }
.set-foot { display: flex; align-items: center; justify-content: center; gap: 12px; height: 34px; }
.set-brand { font-size: 10px; letter-spacing: .03em; color: #8a8a90; }
.set-led { width: 5px; height: 5px; background: #e0261b; box-shadow: 0 0 8px #e0261b; }
.tv-player { position: absolute; inset: 0; z-index: 4; }
/* empty, the video layer must not sit over the menu and swallow its clicks */
.tv-player:empty { display: none; }
.tv-player iframe { width: 100%; height: 100%; border: 0; }
.tv-static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; opacity: 0; image-rendering: pixelated; pointer-events: none; }

/* the on-screen display */
.tvm { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: auto 1fr auto; color: #f4ede2; }
.tvm.is-play { z-index: 5; pointer-events: none; display: block; }
.tvm.is-play .tvm-keys { pointer-events: auto; }
.tvm-bar { display: flex; align-items: center; gap: 16px; padding: 14px 26px 12px; border-bottom: 2px solid var(--osd-line);
  background: linear-gradient(180deg, rgba(255,236,205,.09), rgba(255,236,205,.02)); }
.tvm-bar b { padding: 3px 8px; font-size: 11px; letter-spacing: .03em; color: #0b0a08; background: var(--osd-y); }
.tvm-crumb { flex: 1; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: #e9dfcf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvm-crumb i { font-style: normal; color: var(--osd-y); margin: 0 4px; }
.tvm-clock { font-size: 16px; color: #fff; letter-spacing: .03em; }
.tvm-body { min-height: 0; padding: 18px 26px; }
.tvm-keys { display: flex; align-items: center; gap: 22px; padding: 10px 26px 14px; border-top: 2px solid var(--osd-line); font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #e9dfcf; }
.tvm-keys button, .tvm-keys a { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.tvm-keys button:hover, .tvm-keys a:hover { color: #fff; }
.tvm-keys kbd { display: inline-block; min-width: 20px; margin-right: 7px; padding: 2px 5px; font: 700 9px/1.2 var(--f-mono); text-align: center; color: #0b0a08; background: #e9dfcf; }
/* the remote's coloured keys: back is red, OK is green */
.k-back kbd { background: #e0261b; color: #fff; }
.k-ok kbd { background: #3fbf5a; color: #0b0a08; }
.tvm-count { margin-left: auto; color: var(--osd-y); }
.k-ch kbd { background: #3a7bff; color: #fff; margin: 0 5px 0 0; }
.k-ch[data-d="1"] kbd { margin: 0 0 0 5px; }
/* the channel number, lit for a moment after CH−/CH+ */
.tv-ch { position: absolute; right: 30px; top: 70px; z-index: 7; opacity: 0; color: #7CFF6B; font-size: 26px; font-weight: 700; text-shadow: 0 0 12px rgba(124,255,107,.75); pointer-events: none; }
.tvm-keys.is-float { position: absolute; left: 0; right: 0; bottom: 0; border: 0; background: linear-gradient(transparent, rgba(8,7,6,.9)); justify-content: space-between; }

/* 1 · the guide */
.is-guide .tvm-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px 26px; }
.g-tabs { grid-column: 1; display: flex; gap: 4px; }
.g-tab { display: flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #e9dfcf; box-shadow: inset 0 0 0 1px rgba(236,222,200,.25); }
/* the remote's yellow and blue keys */
.g-tab i { width: 9px; height: 9px; }
.g-tab.k-y i { background: #F2D43A; } .g-tab.k-b i { background: #3a7bff; }
.g-tab:hover, .g-tab:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(205,216,255,.7); outline: none; }
.g-tab.on { color: #0b0a08; background: #e9dfcf; box-shadow: none; }
.g-list { grid-column: 1; }
.g-prev { grid-column: 2; grid-row: 1 / span 2; }
.g-list { list-style: none; overflow-y: auto; scrollbar-width: none; padding-right: 4px; }
.g-list::-webkit-scrollbar { display: none; }
.g-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 46px; align-items: baseline; gap: 12px; width: 100%; padding: 7px 10px; text-align: left; color: #f4ede2; border-bottom: 1px solid rgba(236,222,200,.1); }
/* the section heads: Séries, then Téléfilms */
.g-sec { display: flex; justify-content: space-between; padding: 14px 10px 6px; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--osd-y); border-bottom: 2px solid var(--osd-line); }
.g-sec:first-child { padding-top: 2px; }
.g-sec i { font-style: normal; color: #a8998a; letter-spacing: .03em; }
.g-n { font-size: 10px; color: #a8998a; }
.g-t { font-family: var(--f-display); font-weight: 800; font-size: clamp(14px, 1.5vw, 20px); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ar { font-family: var(--f-ar-display); font-size: clamp(13px, 1.3vw, 17px); color: #d8c9b4; }
.g-y { font-size: 11px; text-align: right; color: #a8998a; }
.g-item.on { background: var(--osd-y); color: #0b0a08; outline: none; }
.g-item.on .g-n, .g-item.on .g-ar, .g-item.on .g-y { color: #0b0a08; }
.g-item:focus-visible { outline: none; }
.g-prev { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; min-height: 0; }
.g-pic { min-height: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); overflow: hidden; }
.g-pic img { width: 100%; height: 100%; object-fit: contain; }
.g-card { display: grid; place-items: center; gap: 4px; text-align: center; padding: 20px; }
.g-card b { font-family: var(--f-display); font-weight: 900; font-size: clamp(28px, 3.6vw, 56px); line-height: .9; text-transform: uppercase; color: #fff; }
.g-card i { font-style: normal; font-family: var(--f-ar-display); font-size: clamp(20px, 2.2vw, 32px); color: var(--osd-y); }
.g-k { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--osd-y); }
.g-syn { font-family: var(--f-serif); font-size: clamp(14px, 1.3vw, 18px); line-height: 1.35; color: #efe7da; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 2 · a show */
.is-show .tvm-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 26px; }
.s-pic { position: relative; min-height: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); overflow: hidden; }
.s-pic img { width: 100%; height: 100%; object-fit: contain; }

.s-info { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--osd-line) transparent; padding-right: 8px; }
.s-title { font-family: var(--f-display); font-weight: 900; font-size: clamp(30px, 3.6vw, 54px); line-height: .9; text-transform: uppercase; color: #fff; }
.s-ar { font-family: var(--f-ar-display); font-size: clamp(20px, 2vw, 30px); color: var(--osd-y); text-align: left; margin-top: 4px; }
.s-syn { font-family: var(--f-serif); font-size: clamp(14px, 1.25vw, 17px); line-height: 1.45; color: #efe7da; margin-top: 10px; }
.s-note { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--osd-y); font-size: 10px; letter-spacing: .03em; line-height: 1.5; color: var(--osd-y); }
.s-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.s-table tr:nth-child(odd) { background: rgba(236,222,200,.08); }
.s-table th { width: 32%; padding: 6px 10px; text-align: left; vertical-align: top; font-weight: 400; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: #a8998a; }
.s-table td { padding: 5px 10px; line-height: 1.3; color: #f4ede2; }
.s-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.s-btn { padding: 9px 14px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; color: #f4ede2; box-shadow: inset 0 0 0 1px rgba(205,216,255,.5); }
.s-btn.is-main { background: var(--osd-y); color: #0b0a08; box-shadow: none; }
.s-btn:hover, .s-btn:focus-visible { background: #fff; color: #0b0a08; outline: none; }
.s-src ul { list-style: none; margin-top: 12px; }
.s-src li { font-size: 12px; line-height: 1.6; }
.s-src a { color: #e9dfcf; }

/* 3 · the episodes */
.is-eps .tvm-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--osd-line) transparent; }
.e-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.e-item { display: grid; gap: 5px; width: 100%; text-align: left; color: #f4ede2; }
.e-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.e-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.8); transition: filter .2s; }
.e-thumb b { position: absolute; left: 0; bottom: 0; padding: 3px 7px; font-size: 13px; color: #0b0a08; background: #e9dfcf; }
.e-meta { font-size: 9px; letter-spacing: .03em; color: #a8998a; }
.e-item:hover .e-thumb, .e-item:focus-visible .e-thumb { box-shadow: 0 0 0 3px var(--osd-y); }
.e-item:hover img, .e-item:focus-visible img { filter: none; }
.e-item:hover .e-thumb b, .e-item:focus-visible .e-thumb b { background: var(--osd-y); }
.e-item:focus-visible { outline: none; }

@media (max-width: 760px) {
  .salon { padding: 60px 8px 110px; place-items: start center; }
  .set { width: 100%; padding: 8px 8px 0; border-radius: 16px; }
  .set-screen { aspect-ratio: auto; height: calc(100vh - 212px); height: calc(100dvh - 212px); }
  .tvm-bar, .tvm-body, .tvm-keys { padding-left: 14px; padding-right: 14px; }
  .is-guide .tvm-body { grid-template-columns: 1fr; grid-template-rows: 34% auto minmax(0, 1fr); }
  .is-guide .g-prev { grid-column: 1; grid-row: 1; } .g-tabs { grid-row: 2; } .is-guide .g-list { grid-row: 3; }
  .g-tab { padding: 5px 8px; letter-spacing: .03em; }
  .tvm-keys { gap: 12px; flex-wrap: wrap; }
  .tv-ch { right: 16px; top: 54px; font-size: 18px; }
  .g-prev .g-syn { display: none; }
  /* the show page reads as one column that scrolls: the picture, then the text and the table under it */
  .is-show .tvm-body { display: block; overflow-y: auto; scrollbar-width: none; }
  .s-pic { height: clamp(120px, 28vh, 220px); height: clamp(120px, 28dvh, 220px); }
  .s-info { overflow: visible; padding-right: 0; margin-top: 14px; }
  .s-title { font-size: clamp(26px, 8vw, 40px); }
  .s-table { font-size: 13px; }
  .s-table th { width: 38%; padding: 6px 8px; }
  .s-table td { padding: 5px 8px; }
  .s-act { margin-bottom: 6px; }
  .s-btn { flex: 1 1 auto; text-align: center; }
  .g-ar { display: none; } .g-item { grid-template-columns: 26px minmax(0, 1fr) 40px; }
}
@media (prefers-reduced-motion: reduce) { #tele.watching .salon-light { animation: none; } }

/* the set, the decoder and the remote as photographs (desktop); on a phone the drawn set above stays */
.set-frame, .decoder, .remote { display: none; }
.tv-off { position: absolute; inset: 0; z-index: 10; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s .15s; }
.tv-off::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #fff; box-shadow: 0 0 12px #fff; transform: scaleX(0); opacity: 0; }
#tele.is-off .tv-off { opacity: 1; pointer-events: auto; transition-delay: 0s; }
#tele.is-off .tv-off::after { animation: tv-power-off .45s ease-out; }
@keyframes tv-power-off { 0% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }
#tele.is-off .set-frame { filter: drop-shadow(0 30px 60px rgba(0,0,0,.7)) brightness(.8); }

@media (min-width: 761px) {
  /* the room is the photograph: the set on the table, the decoder on the set (sizes in % of the photograph; js/rooms/tele.js · layout) */
  .salon { padding: 0; overflow: hidden; }
  .salon::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(12,7,3,.7) 100%); }
  .salon-light { display: none; }
  .stage { position: absolute; left: var(--stage-x, 0); top: var(--stage-y, 0); width: var(--stage-w, 100%); height: var(--stage-h, 100%); display: block; }
  /* the TV corner of the same apartment (tele-wall-tall.webp, 1448 × 1086): the table's top runs 70.3–72.2 % down, 416–1034 px across */
  .set { position: absolute; left: 30.07%; bottom: 28.6%; width: 40%; aspect-ratio: 1446 / 937; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .set-frame { display: block; position: absolute; inset: 0; z-index: 11; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(0,0,0,.75)); }
  /* the picture sits behind the glass opening of the photograph, a little larger so its edges hide under the bezel */
  /* the thin-bezel set (tele-set.webp, 1446 × 937): its glass opening is 4.1% / 7.9% / 91.8% × 75.5% */
  .set-screen { position: absolute; left: 3.8%; top: 7.6%; width: 92.4%; height: 76.1%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .set-foot { display: none; }
  /* the satellite decoder sits on top of the set, as in so many living rooms: its display lights the channel */
  /* seen straight on: only its front face (tele-decoder.webp, 1953 × 310) */
  .decoder { display: block; position: absolute; left: 42.34%; bottom: 62.3%; width: 15.45%; aspect-ratio: 1953 / 310; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
  .decoder img { display: block; width: 100%; height: 100%; }
  .dec-d { position: absolute; top: 30.3%; width: 2.56%; height: 26.5%; }
  .dec-d:nth-of-type(1) { left: 40.35%; } .dec-d:nth-of-type(2) { left: 45.47%; } .dec-d:nth-of-type(3) { left: 50.84%; } .dec-d:nth-of-type(4) { left: 56.48%; }
  .dec-d svg { display: block; width: 100%; height: 100%; fill: #6dff74; transform: skewX(-6deg); filter: drop-shadow(0 0 2px rgba(109,255,116,.9)) drop-shadow(0 0 6px rgba(109,255,116,.5)); }
  /* the remote, at hand on the right; its own buttons are the controls */
  .remote { display: block; position: absolute; z-index: 2; right: max(4vw, 34px); bottom: 64px; height: min(62vh, 560px); height: min(62dvh, 560px); aspect-ratio: 353 / 1442; transform: rotate(5deg); transform-origin: 50% 100%; }
  .remote img { display: block; width: 100%; height: 100%; filter: drop-shadow(10px 22px 22px rgba(0,0,0,.75)); }
  .rk { position: absolute; border-radius: 45%; transition: background .15s, box-shadow .15s; }
  .rk:hover { background: rgba(255,255,255,.1); }
  .rk:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(242,212,58,.8); }
  .rk.hit { animation: rk-hit .25s ease-out; }
  @keyframes rk-hit { 0% { background: rgba(255,255,255,.35); } 100% { background: transparent; } }
  /* the picture is smaller inside the photograph: the menu tightens */
  .tvm-bar { padding: 10px 18px 8px; gap: 12px; }
  .tvm-body { padding: 12px 18px; }
  .tvm-keys { padding: 7px 18px 10px; gap: 16px; font-size: 9px; }
  .tvm-clock { font-size: 13px; }
  .g-item { padding: 5px 8px; grid-template-columns: 26px minmax(0, 1fr) auto 40px; gap: 10px; }
  .g-t { font-size: clamp(12px, 1.15vw, 17px); }
  .g-ar { font-size: clamp(11px, 1vw, 15px); }
  .g-sec { padding: 10px 8px 4px; }
  .g-syn { font-size: clamp(12px, 1vw, 15px); -webkit-line-clamp: 2; }
  .s-title { font-size: clamp(24px, 2.6vw, 42px); }
  .s-syn { font-size: clamp(12px, 1vw, 15px); }
  .s-table { font-size: 12px; }
  .e-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
}

/* the volume, as old sets drew it: a green bar of blocks across the bottom of the picture */
.tv-vol { position: absolute; left: 50%; bottom: 12%; z-index: 7; display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  transform: translateX(-50%); background: rgba(0,0,0,.55); color: #7CFF6B; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(124,255,107,.7); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tv-vol.on { opacity: 1; }
.tv-vol-bar { --v: .6; width: clamp(120px, 22vw, 260px); height: 12px;
  background: linear-gradient(90deg, #7CFF6B calc(var(--v) * 100%), rgba(124,255,107,.15) 0); box-shadow: 0 0 10px rgba(124,255,107,.45);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 9px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 9px); }
.tv-vol b { min-width: 2ch; font-size: 16px; }
.set-screen:fullscreen { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }

/* the living-room wall behind the set (desktop): lit only by the screen; it goes dark with the set */
.salon-wall { display: none; }
@media (min-width: 761px) {
  .salon-wall { display: block; position: absolute; inset: 0; pointer-events: none;
    background: url('../assets/tele-wall-tall.webp') center / 100% 100% no-repeat; filter: brightness(.92); transition: filter .6s; }
  #tele.watching .salon-wall { animation: wall-flicker 2.6s steps(7) infinite; }
  #tele.is-off .salon-wall { filter: brightness(.7) saturate(.9); }
  @keyframes wall-flicker { 0%, 100% { filter: brightness(.92); } 40% { filter: brightness(.8); } 70% { filter: brightness(.98); } }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { #tele.watching .salon-wall { animation: none; } }

/* ── the menu, refined: receiver panels with a lit top edge, a sliding yellow bar, a row of facts ── */
.tvm { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%), radial-gradient(ellipse at 70% 0%, rgba(201,112,42,.16), transparent 60%); }
.tvm-bar { border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(236,222,200,.25), 0 1px 0 rgba(242,212,58,.35); }
.tvm-bar b { position: relative; padding: 4px 10px; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.tvm-crumb { color: #fff; }
.tvm-date { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #a8998a; }
.tvm-keys { border-top: 0; box-shadow: inset 0 1px 0 rgba(236,222,200,.25); background: linear-gradient(0deg, rgba(0,0,0,.4), transparent); }
.tvm-keys kbd { box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
/* the two panels of the guide */
.g-list, .g-prev { background: linear-gradient(180deg, rgba(44,38,31,.6), rgba(12,11,9,.65)); box-shadow: inset 0 1px 0 rgba(236,222,200,.28), inset 0 0 0 1px rgba(236,222,200,.12); }
.g-list { padding: 4px 6px 6px; }
.g-prev { padding: 10px; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 8px; }
/* filters: a tab strip sitting on the list */
.g-tabs { gap: 0; align-self: end; }
.g-tab { box-shadow: none; border: 1px solid rgba(236,222,200,.22); border-bottom: 0; margin-right: -1px; background: rgba(44,38,31,.4); }
.g-tab.on { background: #e9dfcf; border-color: #e9dfcf; }
/* a row: number, title with its year under it, the Arabic on the right */
.g-item { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 12px 6px 10px; position: relative; transition: background .18s, color .18s; }
.g-tt { display: grid; gap: 2px; min-width: 0; }
.g-t { font-weight: 800; }
.g-m { font-style: normal; font-size: 9px; letter-spacing: .03em; color: #a8998a; }
.g-ar { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8c9b4; }
.g-item.on { background: linear-gradient(180deg, #ffe46a, var(--osd-y)); box-shadow: 0 0 18px rgba(242,212,58,.35); }
.g-item.on::before { content: ''; position: absolute; left: 0; top: 50%; border: 6px solid transparent; border-left-color: #0b0a08; transform: translateY(-50%); }
.g-item.on .g-m { color: rgba(11,10,8,.7); }
.g-item:hover:not(.on) { background: rgba(236,222,200,.08); }
.g-sec { padding: 10px 10px 5px; border-bottom: 1px solid rgba(242,212,58,.35); }
/* the preview */
.g-pic { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 3px rgba(8,7,6,.85); background: #050403; }
.g-head, .s-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.g-pt { font-family: var(--f-display); font-weight: 900; font-size: clamp(18px, 1.9vw, 30px); line-height: .95; text-transform: uppercase; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-par { flex: none; font-family: var(--f-ar-display); font-size: clamp(15px, 1.4vw, 22px); color: var(--osd-y); }
.g-spec { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(236,222,200,.25); border-bottom: 1px solid rgba(236,222,200,.25); }
.g-spec div { padding: 5px 8px; }
.g-spec div + div { border-left: 1px solid rgba(236,222,200,.2); }
.g-spec dt { font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: #a8998a; }
.g-spec dd { font-size: 13px; color: #fff; margin-top: 1px; }
.g-syn { font-size: clamp(12px, 1.05vw, 16px); -webkit-line-clamp: 3; }
/* the show page */
.s-head { margin-bottom: 8px; }
.s-ar { margin-top: 0; flex: none; }
.s-info > .g-spec { margin-bottom: 4px; }
.s-pic { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 3px rgba(8,7,6,.85); background: #050403; }
.s-table tr:nth-child(odd) { background: rgba(236,222,200,.07); }
.s-table tr { box-shadow: inset 0 -1px 0 rgba(236,222,200,.1); }
.s-btn.is-main { background: linear-gradient(180deg, #ffe46a, var(--osd-y)); box-shadow: 0 0 14px rgba(242,212,58,.3); }
/* the episodes */
.e-thumb { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.e-thumb b { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
@media (max-width: 760px) { .g-ar { display: none; } .g-item { grid-template-columns: 26px minmax(0, 1fr); } .tvm-date { display: none; } }
/* the menu adapts to the size of the picture it lives in, not to the window */
.tvm { container-type: size; }
.g-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1; }
@container (max-width: 720px) {
  .g-ar, .tvm-date { display: none; }
  .g-item { grid-template-columns: 24px minmax(0, 1fr); }
  .g-tab { padding: 5px 8px; gap: 5px; letter-spacing: .03em; font-size: 9px; }
  .is-guide .tvm-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
}
@container (max-height: 420px) {
  .g-syn { -webkit-line-clamp: 2; }
  .tvm-bar { padding: 7px 14px 6px; } .tvm-body { padding: 8px 14px; } .tvm-keys { padding: 5px 14px 7px; }
  .g-m { display: none; }
}
@container (max-height: 340px) { .g-syn { display: none; } .g-spec dd { font-size: 11px; } }

/* the filters: a strip of remote keys, each with its count; the one on shows its colour along the top */
.g-tabs { gap: 0; border-bottom: 1px solid rgba(236,222,200,.2); }
.g-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px 7px; border: 0; margin: 0; background: none;
  font-size: 10px; letter-spacing: .03em; color: #a8998a; box-shadow: none; }
.g-tab + .g-tab::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: rgba(236,222,200,.18); }
.g-tab i { width: 10px; height: 10px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.g-tab em { font-style: normal; font-size: 9px; color: #7d7064; letter-spacing: .03em; }
.g-tab::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tab-c, #e9dfcf); transform: scaleX(0); transition: transform .25s; }
.g-tab.k-y { --tab-c: #F2D43A; } .g-tab.k-b { --tab-c: #3a7bff; }
.g-tab:hover, .g-tab:focus-visible { color: #f4ede2; background: rgba(236,222,200,.05); box-shadow: none; outline: none; }
.g-tab.on { color: #f4ede2; background: linear-gradient(180deg, rgba(236,222,200,.12), rgba(236,222,200,.03)); box-shadow: none; }
.g-tab.on::after { transform: scaleX(1); }
.g-tab.on em { color: var(--tab-c, #e9dfcf); }
/* pictures sit on a blurred copy of themselves: never black bars, whatever their shape */
.g-pic, .s-pic { position: relative; }
.g-pic img, .s-pic img { position: relative; z-index: 1; }
.g-pic .pic-bg, .s-pic .pic-bg { position: absolute; inset: -12%; z-index: 0; width: 124%; height: 124%; object-fit: cover; filter: blur(16px) brightness(.45) saturate(1.1); }
/* the preview: title on one line, then the facts a newcomer needs, then the story */
.g-prev { grid-template-rows: minmax(90px, 1fr) auto auto minmax(0, auto); }
.g-head { flex-wrap: wrap; row-gap: 2px; }
.g-pt { font-size: clamp(16px, 1.7vw, 26px); }
.g-facts { display: grid; gap: 0; border-top: 1px solid rgba(236,222,200,.2); }
.g-facts div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; padding: 4px 2px; border-bottom: 1px solid rgba(236,222,200,.1); }
.g-facts dt { font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: #a8998a; padding-top: 3px; }
.g-facts dd { font-size: clamp(11px, .95vw, 14px); line-height: 1.3; color: #f4ede2; }
.g-syn { -webkit-line-clamp: 4; }
@container (max-width: 720px) { .g-tab { padding: 6px 8px; gap: 5px; } .g-tab em { display: none; } .g-facts div { grid-template-columns: 7em minmax(0, 1fr); } }
@container (max-height: 420px) { .g-facts div:nth-child(n+4) { display: none; } .g-syn { -webkit-line-clamp: 2; } }
/* covers: the whole picture always fits its box (over a blurred copy of itself), and the picture comes before the text */
.g-pic, .s-pic { position: relative; overflow: hidden; }
.g-pic img:not(.pic-bg), .s-pic img:not(.pic-bg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.g-pic .g-card, .s-pic .g-card { position: absolute; inset: 0; }
.g-prev { grid-template-rows: minmax(120px, 1fr) auto auto auto; }
.g-syn { -webkit-line-clamp: 3; }
@container (max-height: 460px) { .g-syn { display: none; } .g-facts div:nth-child(n+4) { display: none; } }
@container (max-height: 360px) { .g-facts { display: none; } .g-prev { grid-template-rows: minmax(90px, 1fr) auto; } }
/* the guide's preview keeps the picture large: three facts and two lines of story (the show page has everything) */
.g-facts div:nth-child(n+4) { display: none; }
.g-syn { -webkit-line-clamp: 2; }
/* series in yellow, TV films in blue: the two keys of the remote, all the way through the guide */
.g-sec.is-film { color: #6f9bff; border-bottom-color: rgba(58,123,255,.45); }
.g-item.is-film.on { background: linear-gradient(180deg, #5b8cff, #3a7bff); color: #fff; box-shadow: 0 0 18px rgba(58,123,255,.4); }
.g-item.is-film.on .g-n, .g-item.is-film.on .g-ar { color: #fff; }
.g-item.is-film.on .g-m { color: rgba(255,255,255,.75); }
.g-item.is-film.on::before { border-left-color: #fff; }
.g-prev.is-film .g-par { color: #6f9bff; }
/* on a phone: the drawn set takes the full width; the guide stacks the picture and title, the tabs, then the list */
@media (max-width: 760px) {
  .salon { display: block; padding: 60px 8px 110px; }
  .stage { width: 100%; }
  .set { width: 100%; }
  .is-guide .tvm-body { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
  .tvm { grid-template-columns: minmax(0, 1fr); }
  .g-prev { order: -1; flex: none; display: grid; grid-template-rows: 140px auto; padding: 8px; }
  .g-prev .g-facts, .g-prev .g-syn { display: none; }
  .g-tabs { flex: none; align-self: stretch; }
  .g-list { flex: 1 1 auto; min-height: 0; }
  .g-tab { padding: 6px 8px; letter-spacing: .03em; }
  .tvm-keys { gap: 10px; }
  .tvm-keys > span:not(.k-ok):not(.tvm-count) { display: none; }
}

/* the remote's buttons, drawn small: a round coloured key with its shine, a black rubber key with a white glyph */
.key-dot { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.8) 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 60%, var(--k), color-mix(in srgb, var(--k) 55%, #000) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.7); }
.tvm-keys .key-dot { margin-right: 7px; }
.tvm-keys kbd.key, .tvm-keys .k-back kbd, .tvm-keys .k-ok kbd.key, .tvm-keys .k-ch kbd.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 18px; height: 16px; margin-right: 7px; padding: 0 4px;
  font: 700 8px/1 var(--f-mono); letter-spacing: .04em; color: #f4ede2; border-radius: 3px;
  background: linear-gradient(180deg, #3b3833, #1a1816); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.5); }
.tvm-keys .k-ch[data-d="1"] kbd.key { margin: 0 0 0 7px; }
.tvm-keys kbd.key svg { width: 8px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tvm-keys .k-ok .key-dot { margin-right: 4px; }
.g-tab .key-dot { width: 10px; height: 10px; }
.g-tab i { display: none; }

/* ── switched off: the room seen wide, the presentation above; switching on zooms into the set ── */
.stage { transition: left 1.1s cubic-bezier(.65,0,.25,1), top 1.1s cubic-bezier(.65,0,.25,1), width 1.1s cubic-bezier(.65,0,.25,1), height 1.1s cubic-bezier(.65,0,.25,1); }
#tele.no-move .stage { transition: none; }
.tele-intro { position: absolute; z-index: 3; left: 50%; top: 52px; width: min(860px, calc(100% - 48px)); transform: translate(-50%, -12px);
  display: grid; justify-items: center; gap: 8px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s, transform .7s cubic-bezier(.2,.8,.2,1); }
#tele.is-off .tele-intro { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
.ti-k { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: rgba(236,231,222,.6); }
.ti-k b { margin-right: 10px; padding: 2px 7px; color: #0a0908; background: #F2D43A; font-weight: 700; }
.ti-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(38px, min(6vw, 8.5vh), 88px); font-size: clamp(38px, min(6vw, 8.5dvh), 88px); line-height: .85; color: #f4ede2;
  text-shadow: 0 0 30px rgba(0,0,0,.6), .04em .04em 0 rgba(58,123,255,.55); }

/* the stage fades into the dark band that holds the presentation */
#tele.is-off .stage { -webkit-mask: linear-gradient(180deg, transparent, #000 90px), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask: linear-gradient(180deg, transparent, #000 90px), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
/* the dark glass, with its switch */
.tv-off { display: grid; place-items: center; background: radial-gradient(ellipse at 40% 30%, #1d1f22, #050506 70%); }
.tv-off::before { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.08), transparent 35%); pointer-events: none; }
.tv-on { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
  color: #f4ede2; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(244,237,226,.35); opacity: 0; transition: opacity .3s .6s, background .2s; }
#tele.is-off .tv-on { opacity: 1; }
.tv-on:hover, .tv-on:focus-visible { background: rgba(224,38,27,.85); outline: none; }
.tv-on-k { font-size: 15px; color: #e0261b; }
.tv-on:hover .tv-on-k, .tv-on:focus-visible .tv-on-k { color: #fff; }
/* switching on: the tube draws a line, then opens into the picture */
#tele.powering .tv-off { opacity: 1; pointer-events: none; animation: tv-tube-off 1.3s ease-out forwards; }
#tele.powering .tv-off::after { animation: tv-power-on 1.3s ease-out forwards; }
#tele.powering .tv-on { opacity: 0; transition: none; }
@keyframes tv-tube-off { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tv-power-on { 0%, 45% { transform: scaleX(0); opacity: 0; } 60% { transform: scaleX(1) scaleY(1); opacity: 1; } 85% { transform: scaleX(1) scaleY(60); opacity: .9; } 100% { transform: scaleX(1) scaleY(140); opacity: 0; } }
/* the remote's power key calls for a press while the set is off */
#tele.is-off .rk[data-k="power"] { animation: rk-call 1.8s ease-in-out infinite; }
@keyframes rk-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,38,27,0); } 50% { box-shadow: 0 0 0 4px rgba(224,38,27,.45), 0 0 16px rgba(224,38,27,.6); } }
@media (prefers-reduced-motion: reduce) { .stage { transition: none; } #tele.is-off .rk[data-k="power"] { animation: none; } }
@media (max-width: 760px) {
  .tele-intro { position: relative; left: auto; top: auto; width: auto; transform: none; margin: 0 8px 14px; display: none; }
  #tele.is-off .tele-intro { display: grid; transform: none; }
  
  #tele.is-off .stage { -webkit-mask: none; mask: none; }
  /* on a phone the set is smaller while off, under the presentation, and grows when switched on */
  .set-screen { transition: height .8s cubic-bezier(.65,0,.25,1); }
  #tele.is-off .set-screen { height: 40vh; height: 40dvh; }
}
/* while an episode plays, the picture is shown clean: no scanlines or vignette over the video */
#tele.watching .set-screen::after { opacity: 0; }
.set-screen::after { transition: opacity .4s; }

/* the presentation: who he is and what the set holds, in three short columns, then how to use it */
.tele-intro { width: min(980px, calc(100% - 48px)); gap: 7px; top: 46px; }
.ti-title { font-size: clamp(34px, min(5vw, 7.5vh), 76px); font-size: clamp(34px, min(5vw, 7.5dvh), 76px); }

.ti-how { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: rgba(236,231,222,.55); }
.ti-how i { font-style: normal; color: #e0261b; margin: 0 4px; }

/* the title card, in the manner of the other rooms: kicker, title, one line, the set's contents as figures */
.tele-intro { width: min(1000px, calc(100% - 48px)); gap: 10px; }
.ti-title { font-size: clamp(44px, min(7vw, 11vh), 110px); font-size: clamp(44px, min(7vw, 11dvh), 110px); }
.ti-line { max-width: 46ch; font-family: var(--f-serif); font-size: clamp(16px, min(1.6vw, 2.6vh), 24px); font-size: clamp(16px, min(1.6vw, 2.6dvh), 24px); line-height: 1.3; color: #f4ede2; text-shadow: 0 1px 14px rgba(0,0,0,.8); }

.ti-how { margin-top: 2px; }

/* ── CH 3 · La Grotte, redressed: a title card like the other rooms, the series as characters in their own sets,
   and no rounded pills anywhere in the room (house rule) ── */
.tube, .tube * { border-radius: 0 !important; }
.tb-logo b { width: auto; padding: 3px 7px; font-size: 10px; letter-spacing: .03em; font-family: var(--f-mono); box-shadow: none; }
.tg-pl img { box-shadow: none; outline: 2px solid var(--t); outline-offset: -2px; }

/* the title card */

/* the characters: each card is a small set */

.gc { position: relative; display: grid; grid-template-rows: auto 1fr; text-align: left; color: var(--blanc); overflow: hidden; isolation: isolate;
  background: var(--card); border: 1px solid rgba(236,231,222,.1); transition: transform .25s, border-color .25s, box-shadow .25s; }
.gc:hover, .gc:focus-visible { transform: translateY(-4px); border-color: var(--t); box-shadow: 8px 8px 0 color-mix(in srgb, var(--t) 70%, transparent); outline: none; }

.gc-t { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: .9; margin-top: 2px; }

/* the sets, the same worlds as the series pages */

.gc.set-poster { background: repeating-linear-gradient(135deg, rgba(242,212,58,.10) 0 18px, transparent 18px 36px), linear-gradient(170deg, #2b260c, #0d0b0a 70%); }
.gc.set-poster .gc-t::after { content: 'VOTEZ'; display: inline-block; margin-left: 10px; padding: 2px 6px; font-size: .38em; vertical-align: middle; color: var(--ink); background: var(--t); transform: rotate(-4deg); }

.gc.set-official { background: linear-gradient(170deg, #2a1220, #0d0b0a 70%); }
.gc.set-official::after { content: 'OFFICIEL'; position: absolute; right: -10px; top: 40%; z-index: -1; padding: 3px 12px; border: 3px double color-mix(in srgb, var(--t) 70%, transparent);
  color: color-mix(in srgb, var(--t) 70%, transparent); font-family: var(--f-display); font-weight: 900; font-size: 34px; transform: rotate(-14deg); opacity: .3; }

/* the barely documented series: a plain list */

.gt { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px; text-align: left; color: var(--blanc); border-left: 2px solid var(--t); background: rgba(236,231,222,.03); }
.gt img { grid-row: 1 / 3; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.gt:hover, .gt:focus-visible { background: rgba(236,231,222,.08); outline: none; }

/* « Lire toute la série »: a real button, visible, saying what it opens */

/* the title card, editorial rather than centred: words on the left, the wall of characters on the right */

/* the characters' faces: each a door to its series */

/* 10 faces: 2+1, 3, 3, 1+2: four full rows */

/* the other videos: an index, one line per kind */

/* navigation helpers: what you've seen, where to resume, chance, the series around this one */

/* the poster and dictionary sets take their series' colour (No-Vaseline Politic in red, Tba3sis BlFrançais in yellow) */
.set-poster .yp-hero, .gc.set-poster { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--t) 13%, transparent) 0 18px, transparent 18px 36px), linear-gradient(170deg, color-mix(in srgb, var(--t) 22%, #0d0b0a), #0d0b0a 70%); }

/* ─────────── CH 4 · Écrits — La Bibliothèque: the books as spines on shelves, pulled out to read ─────────── */
#ecrits { overflow: hidden; }
.lib { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; background: radial-gradient(ellipse at 50% 0%, rgba(219,196,63,.07), transparent 60%), #0b0a09; }
.lib-inner { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 84px 0 160px; }
.lib-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 30px; }
.lib-q { justify-self: end; max-width: 34ch; }
.lib-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; padding: 12px 0; margin-bottom: 26px;
  border-top: 1px solid rgba(236,231,222,.14); border-bottom: 1px solid rgba(236,231,222,.14); }

.lt { padding: 6px 2px; color: rgba(236,231,222,.7); font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 14px; border-bottom: 2px solid transparent; }
.lt i { font-style: normal; font-size: 9px; color: var(--muted); font-weight: 400; margin-left: 3px; }
.lt.on { color: var(--blanc); border-bottom-color: #DBC43F; }
.lt:hover, .lt:focus-visible { color: #DBC43F; outline: none; }

/* the shelves: spines stand on a wooden board, a brass plate names the shelf */
.shelves { display: grid; gap: 34px; }

/* the open book */
.book-open { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 70px 16px 110px; }
.bo-veil { position: absolute; inset: 0; background: rgba(6,5,4,.86); backdrop-filter: blur(3px); }
.bo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 18px clamp(22px, 4vw, 54px); align-items: start;
  width: min(1060px, 100%); max-height: 100%; overflow-y: auto; scrollbar-width: thin; padding: clamp(22px, 3vw, 40px); background: #12100e; border: 1px solid rgba(236,231,222,.14);
  box-shadow: 0 40px 80px rgba(0,0,0,.7); }
.bo-x { position: absolute; right: 12px; top: 10px; z-index: 2; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 6px; }
.bo-x:hover, .bo-x:focus-visible { color: #DBC43F; outline: none; }
.bo-cover { display: grid; gap: 8px; justify-items: start; }
.bo-cover .cover { width: clamp(180px, 22vw, 300px); transform: rotate(-2deg); }
.bo-credit { font-size: 8px; letter-spacing: .03em; color: var(--muted); text-decoration: none; border-bottom: 1px solid currentColor; }
.bo-text { max-width: 600px; padding-top: 8px; }
.bo-k { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: #DBC43F; }
.bo-title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(32px, 4vw, 64px); line-height: .88; margin: 8px 0 12px; overflow-wrap: anywhere; }
.bo-meta { font-size: 10px; line-height: 1.7; color: var(--muted); }
.bo-syn { font-family: var(--f-serif); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; margin-top: 18px; min-height: 4.4em; }
.bo-src { display: inline-block; margin-top: 14px; font-size: 10px; color: var(--muted); text-decoration: none; border-bottom: 1px solid currentColor; }
.bo-src:hover, .bo-credit:hover { color: #DBC43F; }
.bo-nav { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(236,231,222,.12); }
.bo-step { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--blanc); padding: 6px 2px; border-bottom: 1px solid rgba(236,231,222,.3); }
.bo-step:hover, .bo-step:focus-visible { color: #DBC43F; border-bottom-color: #DBC43F; outline: none; }
.bo-pos { font-size: 9px; color: var(--muted); }

@media (max-width: 760px) {
  .lib-inner { padding-top: 70px; }
  .lib-head { grid-template-columns: 1fr; } .lib-q { justify-self: start; }

.bo { grid-template-columns: 1fr; } .bo-cover .cover { width: 150px; }
  .book-open { padding: 56px 8px 96px; }
}
/* phones: one shelf stays one shelf, swiped sideways, its board under every spine */

/* the foot of a spine carries the publisher, set like the title, small */

/* one shelf: no wrapping; it scrolls sideways when the books outgrow the room */

/* a bookend between kinds: a dark board, its name set vertically */
.bookend { flex: none; align-self: flex-end; height: 150px; width: 26px; margin: 0 6px 0 10px; display: flex; align-items: center; justify-content: flex-start; padding-top: 10px;
  writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: #2a2112;
  background: linear-gradient(90deg, #e7cf86, #b8963f); box-shadow: 2px 0 6px rgba(0,0,0,.5); }
.bookend:first-child { margin-left: 0; }
.bookend b { font-weight: 700; margin-bottom: 6px; }

/* ── the cabinet, after the one behind him: white lacquered shelves, a black-and-white animal-print trim ── */
.lib { background: radial-gradient(ellipse at 50% 30%, rgba(242,239,232,.06), transparent 60%), #0b0a09; }
.cabinet { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: 10px;
  --print: radial-gradient(ellipse 6px 4px at 30% 40%, #111 62%, transparent 66%) 0 0 / 26px 20px,
           radial-gradient(ellipse 4px 6px at 70% 70%, #111 60%, transparent 64%) 8px 6px / 30px 24px,
           radial-gradient(ellipse 3px 3px at 50% 50%, #2a2a2a 60%, transparent 66%) 14px 2px / 18px 16px, #F4F1EA; }
.cubby { flex: none; display: grid; grid-template-rows: 1fr auto; padding: 12px 6px 0; background: var(--print); }
.cubby:first-child { padding-left: 12px; } .cubby:last-child { padding-right: 12px; }
.cubby-in { display: flex; align-items: flex-end; gap: 2px; height: 300px; padding: 18px 12px 0; background: linear-gradient(180deg, #EDE8DD, #E2DBCD); box-shadow: inset 0 10px 18px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.08); }
.cubby-plate { display: flex; justify-content: center; gap: 6px; padding: 7px 0 8px; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: #111; }
.cubby-plate b { font-weight: 700; padding: 0 6px; background: #F4F1EA; }
/* face-out covers, leaning back */

/* spines: the title on a printed label, readable whatever the cover behind */

@media (max-width: 760px) {
  .cubby-in { height: 230px; }
  
}
/* the whole cabinet fits one screen width on a desktop */
@media (min-width: 761px) {  .cubby-in { padding: 18px 8px 0; }  }

/* ── the vitrine: every book faces out on white shelves trimmed with the animal print of his cabinet ── */
.shelves { gap: 30px; }
.vt { --print: radial-gradient(ellipse 6px 4px at 30% 40%, #111 62%, transparent 66%) 0 0 / 26px 20px,
           radial-gradient(ellipse 4px 6px at 70% 70%, #111 60%, transparent 64%) 8px 6px / 30px 24px,
           radial-gradient(ellipse 3px 3px at 50% 50%, #2a2a2a 60%, transparent 66%) 14px 2px / 18px 16px, #F4F1EA;
  padding: 12px; background: var(--print); }
.vt-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 18px 10px; background: #F4F1EA; color: #111; }
.vt-h h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 3vw, 40px); line-height: .9; }
.vt-h span { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #555; }
.vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); column-gap: 0; background: linear-gradient(180deg, #EDE8DD, #E2DBCD); }
/* each book stands on its stretch of shelf; side by side, the stretches make one board */
.vb { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 12px; padding: 26px 14px 30px; text-align: center; color: #111; }
.vb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--print); box-shadow: 0 -3px 6px rgba(0,0,0,.12); }
.vb-cover { display: block; width: 100%; max-width: 150px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.vt .cover { width: 100%; transform: none; box-shadow: 0 14px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.2); }
.vt .cover.real img { object-fit: cover; }
.vt .cover.made { padding: 12px 10px; }
.vt .cv-title { font-size: 22px; }
.vt .cv-author, .vt .cv-pub { font-size: 7px; }
.vb-card { display: grid; gap: 5px; align-content: start; width: 100%; max-width: 160px; }
.vb-t { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 15px; line-height: 1.05; overflow-wrap: anywhere; }
.vb-p { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: #6a6358; }
.vb:hover .vb-cover, .vb:focus-visible .vb-cover { transform: translateY(-8px) rotate(-1deg); }
.vb:hover .vb-t, .vb:focus-visible .vb-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vb:focus-visible { outline: none; }
.vb.out .vb-cover { opacity: 0; transform: translateY(-16px) scale(.8); }
@media (max-width: 760px) {
  .vt { padding: 8px; }
  .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb { padding: 18px 8px 24px; }
  .vb-cover { max-width: 120px; }
  .vb-t { font-size: 13px; }
}
/* the room behind the vitrine: a writer's den at night (assets/library-wall.webp, generated for the site), dimmed and
   softened so it stays a place, never competes with the books */
#ecrits::before { content: ''; position: absolute; inset: -20px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,10,9,.55), rgba(11,10,9,.35) 40%, rgba(11,10,9,.8)), url('../assets/library-wall.webp') center 30% / cover no-repeat;
  filter: blur(3px) saturate(.9); }
.lib { background: transparent; z-index: 1; }
.lib-head, .lib-tools { text-shadow: 0 2px 12px rgba(0,0,0,.8); }
/* the library's title card: one line of title, the line below it with air, the quote on a dark card */
.lib-head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center; margin-bottom: 26px; }
.lib-head .room-head { position: static; display: grid; gap: 14px; }
.lib-head .room-kicker { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: rgba(236,231,222,.7); }
.lib-head .room-kicker::first-line { color: inherit; }
.lib-head .room-title { font-size: clamp(52px, 6.6vw, 108px); line-height: .84; white-space: nowrap; text-shadow: .03em .02em 0 #8a6d1e; }
.lib-head .room-sub { max-width: 46ch; font-family: var(--f-serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; color: rgba(236,231,222,.85); }
.lib-q { justify-self: stretch; max-width: none; padding: 18px 20px; background: rgba(11,10,9,.72); border-left: 3px solid #DBC43F; backdrop-filter: blur(4px); text-shadow: none; }
.lib-tools { background: rgba(11,10,9,.6); backdrop-filter: blur(4px); padding: 12px 16px; text-shadow: none; }
@media (max-width: 760px) { .lib-head .room-title { white-space: normal; } }

/* ─────────── Écrits · the walk along his bookcase (desktop, landscape); phones keep the vitrine ─────────── */
.walk { display: none; position: relative; height: 420vh; height: 420dvh; }
#ecrits.is-walk .walk { display: block; }
#ecrits.is-walk .lib-list { display: none; }
.walk-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #0b0806; }
.walk-cam { position: absolute; inset: 0; will-change: transform; }
.walk-track { position: absolute; left: 0; will-change: transform; }
.wf { position: absolute; top: 0; background: center / 100% 100% no-repeat; }
/* the section's name, written on the blank card in the brass holder */
.wf-plate { position: absolute; display: grid; place-content: center; justify-items: center; gap: 0; color: #2a1d10; text-align: center; line-height: 1; pointer-events: none;
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; }
.wf-plate b { font-size: calc(var(--fw) * .0074); letter-spacing: .02em; white-space: nowrap; }
.wf-plate span { font-family: var(--f-ar-display); font-weight: 400; text-transform: none; font-size: calc(var(--fw) * .0062); margin-top: calc(var(--fw) * .0007); }
/* the real books, standing face out on the empty shelf */
.wf-books { position: absolute; display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--bh) * .1); }
.wb { position: relative; flex: none; width: calc(var(--bh) * .667); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.wb:nth-child(odd) { transform: rotate(-1.2deg); } .wb:nth-child(3n) { transform: rotate(1.4deg); }
.wb-cover { display: block; filter: drop-shadow(calc(var(--bh) * .03) calc(var(--bh) * .05) calc(var(--bh) * .04) rgba(30,15,5,.55)); }
.wb .cover { width: 100%; transform: none; box-shadow: none; }
.wb .cover.real img { object-fit: cover; }
.wb .cover.made { padding: calc(var(--bh) * .06) calc(var(--bh) * .05); }
.wb .cv-title { font-size: calc(var(--bh) * .1); }
.wb .cv-author, .wb .cv-pub, .wb .cv-flag { font-size: calc(var(--bh) * .035); }
/* a small printed card leaning on the cover's foot: the title, readable */
.wb-card { position: absolute; left: 6%; right: 6%; bottom: -2%; padding: 3px 4px; background: #F4F1EA; color: #111; box-shadow: 0 2px 4px rgba(0,0,0,.35);
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(9px, calc(var(--bh) * .07), 13px); line-height: 1.05; text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wb:hover, .wb:focus-visible { transform: translateY(-8%) rotate(0deg); outline: none; z-index: 2; }
.wb.dim { opacity: .18; }
.wb.out { opacity: 0; transform: translateY(-20%) scale(.8); }
/* the hidden map: invisible until hovered, or revealed */
.mark { position: absolute; z-index: 3; border: 1px dashed transparent; transition: border-color .25s, background .25s; }
.mark:hover, .mark:focus-visible { border-color: rgba(244,233,200,.75); background: rgba(255,220,150,.06); outline: none; }
.mark-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 4; width: max-content; max-width: 250px; display: grid; gap: 3px; justify-items: start; padding: 10px 16px 10px 22px;
  background: #EDE3CC; color: #1a120a; text-align: left; opacity: 0; transform: translate(-50%, 6px) rotate(-1deg); pointer-events: none; transition: opacity .2s, transform .2s; filter: drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
.mark-tip::before { content: ''; position: absolute; left: 12px; top: 6px; bottom: 6px; border-left: 2px dotted rgba(26,18,10,.35); }
/* objects on the upper shelf show their card below them, inside the frame */
.mark.tip-down .mark-tip { bottom: auto; top: calc(100% + 10px); }
.mark-tip i { font-style: normal; font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: #8a5a2a; }
.mark-tip b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 20px; line-height: .95; }
.mark-tip > span { font-size: 9px; color: rgba(26,18,10,.6); }
.mark-tip small { font-family: var(--f-serif); font-size: 14px; line-height: 1.3; color: rgba(26,18,10,.85); }
.mark-tip em { font-style: normal; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: #8a5a2a; margin-top: 2px; }
.mark:hover .mark-tip, .mark:focus-visible .mark-tip { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
/* the hud: the three sections, and the map */
.walk-hud { position: absolute; left: 0; right: 0; top: 66px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 clamp(16px, 3vw, 40px); }
.walk-nav { display: flex; gap: 2px; background: rgba(11,10,9,.72); backdrop-filter: blur(4px); padding: 4px; }
.walk-nav button { padding: 7px 12px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: rgba(244,241,234,.7); }
.walk-nav button.on { color: #111; background: #DBC43F; }
.walk-nav button:hover:not(.on) { color: #DBC43F; }
.walk-hint { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 5; padding: 6px 12px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  color: #F4F1EA; background: rgba(11,10,9,.6); transition: opacity .4s; }
.walk-stage.moved .walk-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .walk-cam { transform: none !important; } }

/* the books stand either side of the brass holder; the camera stays a touch closer to the shelf, without pulsing */
.wf-books.l { justify-content: flex-end; }
.wf-books.r { justify-content: flex-start; }
.walk { height: 450vh; height: 450dvh; }
.walk-cam { transform: scale(1.06); }

/* the seams: each section fades out over the shared stretch, so one photograph dissolves into the next */
.wf { --feather: 10%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%); }
.wf:first-child { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--feather)), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - var(--feather)), transparent 100%); }
.wf:last-child { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--feather)); mask-image: linear-gradient(90deg, transparent 0, #000 var(--feather)); }
.wf + .wf { margin-left: 0; }

/* the header in the same light as the bookcase: the first section, out of focus, behind it; brass and amber */
#ecrits.is-walk::before { inset: -40px; background: radial-gradient(ellipse at 30% 60%, rgba(255,170,80,.18), transparent 60%),
  linear-gradient(180deg, rgba(14,8,3,.55), rgba(14,8,3,.7) 70%, #0b0806), url('../assets/library-1.webp') center 40% / cover no-repeat; filter: blur(14px) saturate(1.1); }
#ecrits.is-walk .lib-inner:first-child { padding-bottom: 40px; }
#ecrits .lib-head .room-kicker { color: #E2B866; }
#ecrits .lib-head .room-title { color: #F6EBD6; text-shadow: .03em .02em 0 #9C6A22; }
#ecrits .lib-head .room-sub { color: rgba(246,235,214,.85); }
#ecrits .lib-q { background: linear-gradient(135deg, rgba(42,24,10,.82), rgba(20,12,6,.82)); border-left: 3px solid #C9963E; box-shadow: inset 0 0 0 1px rgba(226,184,102,.18); }
#ecrits .lib-tools { background: linear-gradient(180deg, rgba(42,24,10,.7), rgba(20,12,6,.7)); border-top: 1px solid rgba(226,184,102,.35); border-bottom: 1px solid rgba(226,184,102,.35); }
#ecrits .lt { color: rgba(246,235,214,.7); }
#ecrits .lt.on { color: #F6EBD6; border-bottom-color: #E2B866; }
#ecrits .lt:hover, #ecrits .lt:focus-visible { color: #E2B866; }
/* the walk opens out of the header's light, not from a black band */
.walk::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 140px; z-index: 6; pointer-events: none; background: linear-gradient(180deg, rgba(11,8,6,.9), transparent); }

/* bigger books: they stand closer together, and the title card never shows a cut third line */
.wf-books { gap: calc(var(--bh) * .035); }
.wb-card { line-height: 1.1; max-height: calc(2.2em + 6px); }

.wb + .wb { margin-left: calc(var(--bh) * .667 * var(--ov, 0) * -1); }
.wb:hover, .wb:focus-visible { z-index: 3; }

/* ─────────── Écrits · the furniture of the den: wood, brass, paper (no web panels) ─────────── */
#ecrits { --brass: #C9963E; --brass-hi: #E9C178; --brass-lo: #7A5520; --paper: #EFE5CF; --ink: #24170B;
  --wood: repeating-linear-gradient(92deg, rgba(255,220,170,.035) 0 1px, transparent 1px 9px, rgba(0,0,0,.08) 9px 10px, transparent 10px 23px),
          linear-gradient(180deg, #3d2715 0%, #2a1a0d 55%, #1d1209 100%); }
/* a brass frame around a cream card, the holder seen on the shelves */
#ecrits .lt, .walk-nav button { position: relative; }

/* the filters: a walnut plank, its options set in small brass holders; the chosen one holds a card */
#ecrits .lib-tools { background: var(--wood); border: 0; border-top: 2px solid #5b3b1d; border-bottom: 2px solid #120b05;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,220,170,.12); padding: 10px 14px; backdrop-filter: none; }

#ecrits .lt { padding: 6px 12px 5px; border: 1px solid var(--brass-lo); border-bottom: 1px solid var(--brass-lo);
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.1)); color: rgba(239,229,207,.72); font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(233,193,120,.12), 0 1px 0 rgba(255,220,170,.06); transition: background .2s, color .2s; }
#ecrits .lt i { color: rgba(233,193,120,.7); }
#ecrits .lt.on { color: var(--ink); background: var(--paper); border-color: var(--brass);
  box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 3px var(--brass-lo), 0 2px 6px rgba(0,0,0,.5); }
#ecrits .lt.on i { color: rgba(36,23,11,.6); }
#ecrits .lt:hover:not(.on), #ecrits .lt:focus-visible:not(.on) { color: var(--brass-hi); border-color: var(--brass); outline: none; }

/* the quote: an index card typed on his typewriter, pinned to the shelf with a brass tack */
#ecrits .lib-q { position: relative; padding: 22px 24px 18px; background: var(--paper); color: var(--ink); border: 0; transform: rotate(-1.2deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 25px, rgba(120,80,40,.16) 25px 26px), linear-gradient(180deg, rgba(255,255,255,.4), rgba(0,0,0,.04));
  box-shadow: 0 14px 28px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.15); backdrop-filter: none; font-family: 'Courier New', var(--f-mono); }
#ecrits .lib-q::before { content: ''; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-hi), var(--brass) 45%, var(--brass-lo)); box-shadow: 0 3px 4px rgba(0,0,0,.45); }
#ecrits .lib-q { font-size: 19px; line-height: 1.35; font-style: normal; }
#ecrits .lib-q .rq-tr { display: block; margin-top: 8px; font-size: 13px; color: rgba(36,23,11,.62); font-style: italic; }
#ecrits .lib-q cite { display: block; margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgba(36,23,11,.3); font-size: 9px; color: rgba(36,23,11,.6); }
#ecrits .lib-q cite a { color: var(--ink); }

/* the three sections: the same brass label holders as on the shelves */
.walk-nav { gap: 8px; padding: 0; background: none; backdrop-filter: none; }
.walk-nav button { padding: 6px 14px 5px; background: rgba(239,229,207,.88); color: var(--ink); border: 0; font-size: 10px; letter-spacing: .03em;
  box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 3px var(--brass-lo), 0 4px 10px rgba(0,0,0,.5); opacity: .72; transition: opacity .25s, transform .25s; }
.walk-nav button::before, .walk-nav button::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-hi), var(--brass-lo)); }
.walk-nav button::before { left: -3px; } .walk-nav button::after { right: -3px; }
.walk-nav button.on { opacity: 1; color: var(--ink); background: var(--paper); transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--brass-hi), inset 0 0 0 3px var(--brass-lo), 0 0 18px rgba(255,180,90,.35), 0 4px 10px rgba(0,0,0,.5); }
.walk-nav button:hover:not(.on) { opacity: 1; color: var(--ink); }

/* ── Écrits · the open book: a real book open on his desk under the lamp. Left, the cover on the leather board;
   right, the page, cream paper and ink; a brass tag puts it back on the shelf ── */
#ecrits .bo-veil { background: radial-gradient(ellipse at 35% 30%, rgba(80,45,15,.55), rgba(8,5,2,.92) 70%); backdrop-filter: blur(4px); }
#ecrits .bo { grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); gap: 0; padding: 0; overflow: auto; background: transparent; border: 0;
  box-shadow: 0 40px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6); }
/* left: the leather board the cover sits on */
#ecrits .bo-cover { align-self: stretch; justify-items: center; align-content: center; gap: 14px; padding: clamp(24px, 3vw, 44px) clamp(18px, 2.4vw, 34px);
  background: radial-gradient(ellipse at 40% 30%, rgba(255,190,110,.14), transparent 60%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px), linear-gradient(160deg, #4a2a16, #2a160b 70%, #1c0e06);
  box-shadow: inset -18px 0 24px -12px rgba(0,0,0,.65); }
#ecrits .bo-cover .cover { transform: rotate(-1.5deg); box-shadow: 0 18px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3); }
#ecrits .bo-credit { color: rgba(233,193,120,.75); }
/* right: the page */
#ecrits .bo-text { max-width: none; align-self: stretch; padding: clamp(28px, 3.4vw, 52px) clamp(24px, 3.4vw, 56px) 12px; color: var(--ink);
  background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 7%), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.45), transparent 60%), #EEE3CB;
  box-shadow: inset 12px 0 18px -10px rgba(0,0,0,.35); }
#ecrits .bo-k { color: #8A5E22; }
#ecrits .bo-title { color: var(--ink); text-shadow: none; }
#ecrits .bo-meta { color: rgba(36,23,11,.62); padding-bottom: 14px; border-bottom: 1px solid rgba(36,23,11,.18); }
#ecrits .bo-syn { color: #2a1c0e; font-size: clamp(18px, 1.5vw, 22px); }
#ecrits .bo .cover.real { background: transparent; }
#ecrits .bo .cover.real img { object-fit: cover; }
#ecrits .bo-src { color: rgba(36,23,11,.7); }
#ecrits .bo-src:hover { color: #8A5E22; }
#ecrits .bo .wall-watch > p { color: #8A5E22; }
#ecrits .bo .ww-card { color: var(--ink); }
#ecrits .bo .ww-n { color: rgba(36,23,11,.6); }
/* the page's foot: previous / next, the folio */
#ecrits .bo-nav { grid-column: 2; padding: 14px clamp(24px, 3.4vw, 56px) 20px; background: #EEE3CB; border-top: 1px solid rgba(36,23,11,.16);
  box-shadow: inset 12px 0 18px -10px rgba(0,0,0,.35); }
#ecrits .bo-step { color: var(--ink); border-bottom-color: rgba(36,23,11,.35); }
#ecrits .bo-step:hover, #ecrits .bo-step:focus-visible { color: #8A5E22; border-bottom-color: #8A5E22; }
#ecrits .bo-pos { color: rgba(36,23,11,.55); font-family: var(--f-serif); font-style: italic; font-size: 13px; letter-spacing: 0; }
/* the brass tag that puts the book back */
#ecrits .bo-x { right: 18px; top: 16px; padding: 6px 12px 6px 24px; color: var(--ink); background: var(--brass-hi);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); box-shadow: none; font-size: 9px; }
#ecrits .bo-x::before { content: ''; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #1a1009; }
#ecrits .bo-x:hover, #ecrits .bo-x:focus-visible { background: var(--paper); color: var(--ink); }
@media (max-width: 760px) {
  #ecrits .bo { grid-template-columns: 1fr; }
  #ecrits .bo-cover { padding: 26px 16px 18px; box-shadow: inset 0 -14px 20px -12px rgba(0,0,0,.6); }
  #ecrits .bo-nav { grid-column: 1; }
}
#ecrits .bo-cover { grid-row: 1 / 3; }
@media (max-width: 760px) { #ecrits .bo-cover { grid-row: auto; } }

/* the head, tighter: title, line and the shelf choice on the left, the typed card on the right; the choice is a short
   brass rail, not a full-width band */
#ecrits .lib-head { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); align-items: center; margin-bottom: 18px; }
.lib-left { display: grid; gap: 22px; }
#ecrits .lib-tools { justify-self: start; display: flex; flex-wrap: wrap; gap: 6px; width: auto; margin: 0; padding: 6px; border-top: 1px solid #5b3b1d; }
#ecrits .lt { font-size: 12px; padding: 5px 10px 4px; }
#ecrits .lib-q { max-width: 420px; justify-self: end; }
@media (max-width: 760px) { #ecrits .lib-head { grid-template-columns: 1fr; } #ecrits .lib-q { justify-self: start; } }

/* ── embossed label tape (Dymo), the kind stuck on VHS boxes and shelves in his den: a glossy strip of coloured
   plastic, the letters pressed up out of it in white, the ends cut straight with scissors, stuck on a little askew.
   It replaces the ticket stubs: .ui-enter (Univers, Palmarès), the Palmarès kinds, « Ce soir » and « Entrer dans la séance » ── */
.tape, .sp-tag, .si-go  {
  --tape: #B3261E;
  -webkit-mask: none; mask: none; border: 0; border-radius: 2px; color: #FBF6EC;
  background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 38%, rgba(0,0,0,0) 60%, rgba(0,0,0,.16) 100%), var(--tape);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 3px 8px rgba(0,0,0,.45);
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  text-shadow: 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.22); }

/* a kind switched off: the strip peeled, left grey, its word struck out */

.sp-tag { --tape: #141210; padding: 5px 12px 4px; font-size: 12px; letter-spacing: .16em; transform: rotate(-2deg); }
.si-go { --tape: #B3261E; padding: 10px 16px 9px; font-size: 12px; letter-spacing: .16em; transform: rotate(-1deg); }
.si-go:hover, .si-go:focus-visible { --tape: #D0301F; background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 38%, rgba(0,0,0,0) 60%, rgba(0,0,0,.16) 100%), var(--tape); transform: rotate(0) translateX(2px); }
.si-go:disabled { --tape: #2a2723; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.16)), var(--tape); color: rgba(251,246,236,.45); }
/* the tapes line up like labels on a row of drawers: two even columns, one shared tilt, the launch strip under them */

/* the labels are stuck on the lid of the flight case a film print travels in from festival to festival
   (assets/flight-case-lid.webp, generated empty; concept/asset-prompts.md) */

/* on a wide screen the case stands beside the title rather than under it */
@media (min-width: 1000px) {
  .pal-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: 5vw; }
  .pal-intro > * { grid-column: 1; }

}
#ecrits .rs-go { white-space: nowrap; } /* the invitation stays on one line */

/* ── the Salon's header, on the apartment's bare wall above the set (desktop, set switched off): the channel on a strip
   of label tape, « Le Salon » in the lamp's light with a soft shadow on the plaster, the line in italic, the facts in a
   single quiet line, and the invitation to switch on ── */
@media (min-width: 761px) {
  .tele-intro { top: max(24px, calc(var(--wall-h, 320px) * .09)); width: min(var(--wall-w, 620px), 660px); gap: calc(var(--wall-h, 320px) * .035); }
  .ti-k { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0; color: rgba(244,232,210,.75); text-shadow: 0 1px 6px rgba(20,10,3,.9); }
  .ti-k b { margin: 0; padding: 3px 9px 2px; border-radius: 2px; font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; color: #FBF6EC;
    background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.05) 40%, rgba(0,0,0,.16)), #B3261E;
    text-shadow: 0 -1px 0 rgba(0,0,0,.35); box-shadow: 0 2px 6px rgba(0,0,0,.45); transform: rotate(-2deg); }
  .ti-title { margin: 0; -webkit-mask: none; mask: none; color: #F3E6CC; letter-spacing: .01em;
    font-size: clamp(42px, min(calc(var(--wall-w, 620px) * .17), calc(var(--wall-h, 320px) * .3)), 108px);
    text-shadow: .025em .035em 0 rgba(25,12,4,.55), 0 0 .5em rgba(255,190,110,.18); }
  .ti-line { margin: 0; font-family: var(--f-serif); font-style: italic; color: rgba(244,232,210,.92); text-shadow: 0 1px 10px rgba(20,10,3,.9);
    font-size: clamp(15px, calc(var(--wall-h, 320px) * .058), 21px); max-width: 44ch; }
  .ti-listing { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; margin: 0; padding: 0; background: none; box-shadow: none; transform: none;
    color: rgba(244,232,210,.72); font-size: 12px; letter-spacing: 0; text-transform: none; text-shadow: 0 1px 6px rgba(20,10,3,.95); }
  .ti-listing b { font-weight: 700; color: #F2D9A8; }
  .ti-listing i { font-style: normal; color: rgba(244,232,210,.32); }
  .tl-tape { display: none; }
  .ti-how { color: rgba(244,232,210,.72); text-shadow: 0 1px 6px rgba(20,10,3,.9); font-size: 14px; text-transform: none; font-style: italic; font-family: var(--f-serif); }
  .ti-how i { color: #E8352B; font-style: normal; }
}

/* the library's header is written on the apartment's wall, right above the first bookcase (assets/library-wall-top.webp,
   generated as an upward extension of library-1; concept/asset-prompts.md): the title on the lamp-lit left of the wall,
   the quote pinned on the right, the bookcase rising under them before the walk along it begins */
/* it stops at the bookcase's top edge (40 % down the 1295 × 1214 picture): the walk below starts with that same bookcase,
   so its shelves are never seen twice */
#ecrits .lib-inner:first-child { position: relative; width: 100%; min-height: 0; height: calc(100vw * 1214 / 1295 * .405); padding: clamp(64px, 11vh, 120px) max(clamp(24px, 5vw, 64px), calc((100% - 1240px) / 2)) 0; padding: clamp(64px, 11dvh, 120px) max(clamp(24px, 5vw, 64px), calc((100% - 1240px) / 2)) 0;
  background: url('../assets/library-wall-top.webp') center top / 100% auto no-repeat, #120b06; }
#ecrits .lib-inner:first-child .lib-head { position: relative; z-index: 1; }
#ecrits .lib-head .room-kicker { color: rgba(48,26,10,.75); text-shadow: none; }
#ecrits .lib-head .room-title { color: #2B170A; text-shadow: 0 1px 0 rgba(255,226,180,.35), 0 0 30px rgba(255,190,110,.25); }
#ecrits .lib-head .room-sub { color: rgba(43,23,10,.9); text-shadow: 0 1px 0 rgba(255,226,180,.3); }
#ecrits .lib-head .lib-tools { text-shadow: none; }
@media (max-width: 760px) { /* on a phone the header grows with its text; the wall stays behind it, dimmed so the words read */
  #ecrits .lib-inner:first-child { height: auto; padding-bottom: 28px;
    background: linear-gradient(180deg, rgba(18,10,5,.55), rgba(18,10,5,.75)), url('../assets/library-wall-top.webp') center top / cover no-repeat, #120b06; }
  #ecrits .lib-head .room-kicker { color: #E2B866; }
  #ecrits .lib-head .room-title { color: #F6EBD6; text-shadow: .03em .02em 0 rgba(25,12,4,.6); }
  #ecrits .lib-head .room-sub { color: rgba(246,235,214,.88); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
}
/* the Salon on a phone: the same TV corner of the apartment behind it, the header in the same voice as on a computer */
@media (max-width: 760px) {
  /* the sideboard's top is 67 % down the picture: sized so it falls where the switched-off set stands */
  #tele .salon { background: linear-gradient(180deg, rgba(14,8,4,.82), rgba(14,8,4,.68) 38%, rgba(14,8,4,.2) 58%, rgba(14,8,4,.55)), url('../assets/tele-wall-phone.webp') 20% 0 / auto max(122vh, 152vw) no-repeat, #120b06; background: linear-gradient(180deg, rgba(14,8,4,.82), rgba(14,8,4,.68) 38%, rgba(14,8,4,.2) 58%, rgba(14,8,4,.55)), url('../assets/tele-wall-phone.webp') 20% 0 / auto max(122dvh, 152vw) no-repeat, #120b06; }
  .ti-k b { padding: 3px 9px 2px; border-radius: 2px; font-family: var(--f-display); font-weight: 800; letter-spacing: .14em; color: #FBF6EC;
    background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.05) 40%, rgba(0,0,0,.16)), #B3261E; transform: rotate(-2deg); display: inline-block; }
  .ti-title { color: #F3E6CC; text-shadow: .025em .035em 0 rgba(25,12,4,.55); -webkit-mask: none; mask: none; }
  .ti-line { font-style: italic; color: rgba(244,232,210,.92); }
  .ti-listing { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; text-transform: none; letter-spacing: 0; font-size: 12px; color: rgba(244,232,210,.72); }
  .ti-listing b { color: #F2D9A8; }
  .ti-listing i { font-style: normal; color: rgba(244,232,210,.32); }
  .tl-tape { display: none; }
  .ti-how { text-transform: none; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: rgba(244,232,210,.72); }
}
/* the Constellation and Palmarès title cards on a phone: one column that never grows past the screen, the big title
   sized to the width so CONSTELLATION fits */
@media (max-width: 760px) {
  .uni-intro, .pal-intro { grid-template-columns: minmax(0, 1fr); padding-left: 20px; padding-right: 20px; }

}

/* ── CH 7 · the night map, with a few touches so it sits with the other rooms: no offset shadows on the titles, the
   list and its tab lifted with a soft shadow like the cards elsewhere, the badges stamped straight ── */

.pal-panel { border-color: rgba(236,231,222,.12); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.pal-toggle { box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.pal-year { text-shadow: none; }

.pl-what { font-family: var(--f-serif); font-size: 18px; }

/* the rails of CH 6 and CH 7: separate keys floating over the night, like the channel keys of the remote. A kind's key carries its
   pictogram in its colour and a lit strip along its foot while it is shown; switched off, the pictogram dims and the strip
   goes out. The zoom, region and help keys follow, a gap between each group */
:is(.pal-rail, .uni-rail) { gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; }
:is(.pal-rail, .uni-rail) .ur-btn { --key: clamp(34px, calc((100vh - 170px) / 12), 46px); --key: clamp(34px, calc((100dvh - 170px) / 12), 46px); width: var(--key); height: var(--key); border-radius: 3px; border: 1px solid rgba(236,231,222,.12); background: rgba(14,12,10,.82);
  backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.45); color: var(--kc, #ECE7DE); opacity: 1;
  transition: transform .2s var(--ease-cut), border-color .2s, background .2s; }
:is(.pal-rail, .uni-rail) .ur-btn .u-ico { width: 22px; height: 22px; }
:is(.pal-rail, .uni-rail) .ur-btn[data-k]::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--kc); box-shadow: 0 0 8px var(--kc); transition: opacity .2s; }
:is(.pal-rail, .uni-rail) .ur-btn.on { background: rgba(14,12,10,.82); color: var(--kc); }
:is(.pal-rail, .uni-rail) .ur-btn:not(.on):not(.ur-tool) { opacity: 1; color: rgba(236,231,222,.3); }
:is(.pal-rail, .uni-rail) .ur-btn:not(.on)::after { opacity: 0; }

:is(.pal-rail, .uni-rail) .ur-btn:hover, :is(.pal-rail, .uni-rail) .ur-btn:focus-visible { transform: translateX(3px); border-color: rgba(236,231,222,.4); background: rgba(24,21,18,.92); color: var(--kc, #ECE7DE); outline: none; }
:is(.pal-rail, .uni-rail) .ur-tool:hover { color: #ECE7DE; }
:is(.pal-rail, .uni-rail) .ur-glyph { font-family: var(--f-display); font-weight: 800; font-size: 20px; }

.pal-year { font-size: clamp(40px, 5.2vw, 92px); }

/* the timeline: a strip of 35 mm film, sprocket holes along both edges, one frame per year; the year on screen is
   the lit frame. The play key is a key like the rail's */
.pal-time { gap: 12px; }
.pal-play { width: 46px; height: 46px; border-radius: 3px; border: 1px solid rgba(236,231,222,.12); background: rgba(14,12,10,.82); color: var(--pal-p);
  font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: transform .2s var(--ease-cut), border-color .2s; }
.pal-play:hover, .pal-play:focus-visible { background: rgba(24,21,18,.92); color: var(--pal-p); border-color: rgba(236,231,222,.4); transform: translateY(-2px); outline: none; }
.pal-years { flex: 0 1 auto; flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 11px 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(236,231,222,.2) 0 5px, transparent 5px 11px) 3px 3px / calc(100% - 6px) 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(236,231,222,.2) 0 5px, transparent 5px 11px) 3px calc(100% - 3px) / calc(100% - 6px) 4px no-repeat, #0d0b0a;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.pal-years::-webkit-scrollbar { display: none; }
.pal-years button { flex: none; padding: 6px 9px; font-family: var(--f-display); font-weight: 800; font-size: 15px; color: rgba(236,231,222,.45);
  border: 0; border-left: 1px solid rgba(236,231,222,.08); transition: color .2s, background .2s; }
.pal-years button:first-child { border-left: 0; }
.pal-years button:hover { color: #ECE7DE; background: rgba(236,231,222,.06); }
.pal-years button.on { color: #0a0908; background: var(--pal-y); box-shadow: 0 0 14px rgba(242,212,58,.35); }
.pal-years .pal-all { font-family: var(--f-serif); font-weight: 400; font-style: italic; font-size: 15px; text-transform: none; }

/* the list: a heading in the display face with its count, the years as headings when several are shown, and each
   entry on one compact card: the kind's stamp, the prize in the book face, the festival and the city beneath, the film
   as a link, the source as a small arrow on the right */
.pal-panel { padding: 0 0 8px; }
.pal-p-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 16px 18px 12px; background: rgba(9,7,14,.96);
  border-bottom: 1px solid rgba(236,231,222,.1); }
.pal-p-head b { font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--pal-y); }
.pal-p-head i { font-family: var(--f-serif); font-size: 15px; color: rgba(236,231,222,.55); }
.pal-list { padding: 0 18px; }
.pl-yr { margin: 16px 0 2px; font-family: var(--f-display); font-weight: 800; font-size: 15px; color: rgba(236,231,222,.4); }
.pl-yr::after { content: ''; display: inline-block; vertical-align: middle; width: calc(100% - 52px); height: 1px; margin-left: 10px; background: rgba(236,231,222,.1); }
.pl-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid rgba(236,231,222,.06); }
.pl-yr + .pl-row { padding-top: 8px; }

.pl-what { font-family: var(--f-serif); font-size: 18px; line-height: 1.2; color: #F2ECE0; }
.pl-who { font-size: 15px; }
.pl-where { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: rgba(236,231,222,.55); text-transform: none; }
.pl-city { color: var(--kc); text-decoration: none; font-style: italic; border-bottom: 1px solid color-mix(in srgb, var(--kc) 40%, transparent); }
.pl-city:hover { color: var(--kc); border-bottom-color: var(--kc); }
.pl-work { margin-top: 4px; font-size: 15px; justify-self: start; }
.pl-work span { font-size: 11px; margin-left: 2px; }
.pl-src { align-self: start; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 2px; font-size: 13px; color: rgba(236,231,222,.4);
  text-decoration: none; border: 1px solid rgba(236,231,222,.1); transition: color .2s, border-color .2s; }
.pl-src:hover, .pl-src:focus-visible { color: #ECE7DE; border-color: rgba(236,231,222,.45); outline: none; }
/* the list's tab: a key like the others, beside the list's top corner */
.pal-toggle { writing-mode: horizontal-tb; white-space: nowrap; padding: 8px 12px; gap: 8px; border-radius: 3px; font-family: var(--f-mono); font-size: 12px; text-transform: none; letter-spacing: 0;
  right: calc(min(380px, calc(100vw - 32px)) + 24px); }
.pal.panel-off .pal-toggle { right: 16px; }
@media (max-width: 900px) {
  .pal-rail { gap: 4px; }
  .pal-rail .ur-btn { width: 42px; height: 42px; flex: none; }
  .pal-rail .ur-btn:hover, .pal-rail .ur-btn:focus-visible { transform: translateY(-2px); }
  
  /* stacked above the channel keys: the strip, then the rail, then the list */
  .pal-time { left: 8px; right: 8px; bottom: 62px; }
  .pal-rail { bottom: 124px; }
  .pal-panel { bottom: 182px; height: 30vh; height: 30dvh; }
  .pal-toggle, .pal.panel-off .pal-toggle { bottom: calc(182px + 30vh + 10px); bottom: calc(182px + 30dvh + 10px); }
  .pal-years { flex: 1 1 auto; }
}

/* ══ Dedans: CH 5–7 are inside his head (CH 0–4 are the places he shows people). One ground for the three rooms: the
   violet night of his mind, a pink and a violet glow, and patches of Fawda's halftone dots drifting very slowly through
   it. No photographs in here ══ */
#vision .mani, .uni, .pal { background: radial-gradient(ellipse 60% 55% at 28% 40%, rgba(123,47,247,.22), transparent 62%),
  radial-gradient(ellipse 55% 50% at 78% 72%, rgba(255,79,160,.13), transparent 60%), #07050c; }
#vision .mani::before, .uni::before, .pal::before { content: ''; position: absolute; inset: -12%; pointer-events: none; opacity: .2;
  background: radial-gradient(rgba(255,79,160,.6) 1.1px, transparent 1.7px) 0 0 / 13px 13px;
  -webkit-mask: radial-gradient(ellipse 28% 24% at 20% 28%, #000, transparent 70%), radial-gradient(ellipse 24% 30% at 82% 76%, #000, transparent 70%);
  mask: radial-gradient(ellipse 28% 24% at 20% 28%, #000, transparent 70%), radial-gradient(ellipse 24% 30% at 82% 76%, #000, transparent 70%);
  animation: inner-drift 90s ease-in-out infinite alternate; }
@keyframes inner-drift { to { transform: translate(5%, -4%) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { #vision .mani::before, .uni::before, .pal::before { animation: none; } }
/* the list's button: a key like the rail's and the remote's, dark, its arrow in the list's pink, the words in the book face */
.pal-toggle { padding: 9px 14px 8px 12px; gap: 9px; border-radius: 3px; border: 1px solid rgba(236,231,222,.12); background: rgba(14,12,10,.82);
  backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.45); color: #ECE7DE; font-family: var(--f-serif); font-style: italic; font-size: 15px; line-height: 1;
  transition: right .5s var(--ease-cut), border-color .2s, transform .2s; }

.pal-toggle:hover, .pal-toggle:focus-visible { background: rgba(24,21,18,.92); border-color: rgba(236,231,222,.4); transform: translateY(-2px); outline: none; }

/* ── CH 5 · Vision, the paper of his head: a broadsheet floating in the violet night of the inner rooms. Cream newsprint,
   black ink and his red; a masthead in the book face, headlines in the condensed display face, body and quotes in the
   book face, sources typed small. Three columns on the front page, then four sections. Scrolls inside the room ── */
#vision .mani { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(236,231,222,.25) transparent; }
#vision .jr { --paper: #EFE9DC; --ink: #16120F; --red: #C8261B; --rule: rgba(22,18,15,.82); --soft: rgba(22,18,15,.55);
  position: relative; width: min(1240px, calc(100% - 48px)); margin: 72px auto 140px; padding: 26px 34px 30px; color: var(--ink);
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%), var(--paper);
  box-shadow: 0 0 80px rgba(123,47,247,.28), 0 30px 60px rgba(0,0,0,.6); font-family: var(--f-serif); }
#vision .jr a { color: inherit; }
/* masthead */

#vision .jr-date { color: var(--red); text-transform: capitalize; }

#vision .jr-title { position: relative; margin: 0; text-align: center; font-family: var(--f-serif); font-weight: 500; font-size: clamp(76px, 13vw, 190px); line-height: .9; letter-spacing: -.02em; }
#vision .jr-title span { position: absolute; right: 6%; top: 18%; font-family: var(--f-ar-hand); font-weight: 400; font-size: .3em; color: var(--red); transform: rotate(-8deg); }
#vision .jr-sub { margin: 12px auto 0; padding-top: 10px; max-width: 760px; border-top: 3px double var(--rule); text-align: center; font-style: italic; font-size: 17px; color: var(--soft); }
#vision .jr-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
#vision .jr-nav button { padding: 2px 0; font-family: var(--f-display); font-weight: 800; font-size: 15px; text-transform: uppercase; color: var(--soft); border-bottom: 2px solid transparent; }
#vision .jr-nav button:hover { color: var(--ink); }
#vision .jr-nav button.on { color: var(--ink); border-color: var(--red); }
/* the ticker: his shortest sentences running on a black band */
#vision .jr-ticker { margin: 10px -34px 0; overflow: hidden; background: var(--ink); color: var(--paper); }
#vision .jr-tick { display: flex; width: max-content; gap: 22px; padding: 9px 0; font-family: var(--f-display); font-weight: 800; font-size: 15px; text-transform: uppercase; white-space: nowrap;
  animation: jr-tick 70s linear infinite; }
#vision .jr-tick i { font-style: normal; color: var(--red); }
@keyframes jr-tick { to { transform: translateX(-50%); } }
/* the front page */
#vision .jr-front { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: 0; margin-top: 22px; }
#vision .jr-col { padding: 0 22px; }
#vision .jr-left { padding-left: 0; border-right: 1px solid var(--rule); }
#vision .jr-right { padding-right: 0; border-left: 1px solid var(--rule); }
#vision .jr-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ink);
  font-family: var(--f-display); font-weight: 800; font-size: 17px; text-transform: uppercase; }
#vision .jr-h small { font-family: var(--f-serif); font-weight: 400; font-style: italic; font-size: 13px; text-transform: none; color: var(--soft); }
#vision .jr-h:not(:first-child) { margin-top: 26px; }
#vision .jr-index { list-style: none; margin: 0; padding: 0; }
#vision .jr-index li { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--soft); }
#vision .jr-index button { font-family: var(--f-serif); font-size: 17px; color: var(--ink); }
#vision .jr-index button:hover { color: var(--red); }
#vision .jr-index span { font-family: var(--f-mono); font-size: 12px; color: var(--soft); }
#vision .jr-names { list-style: none; margin: 0; padding: 0; }
#vision .jr-names li { padding: 5px 0; border-bottom: 1px solid rgba(22,18,15,.12); line-height: 1.25; }
#vision .jr-names b { font-weight: 500; font-size: 16px; }
#vision .jr-names small { font-family: var(--f-mono); font-size: 11px; color: var(--soft); }
#vision .jr-names em { display: block; margin-top: 2px; font-size: 14px; color: var(--red); }
#vision .jr-names em[lang="ar"] { font-style: normal; font-family: var(--f-ar); text-align: right; }
#vision .jr-names .jr-src { display: inline-block; margin-top: 1px; }
#vision .jr-src { font-family: var(--f-mono); font-size: 11px; color: var(--soft); text-decoration: none; border-bottom: 1px solid rgba(22,18,15,.25); }
#vision .jr-src:hover { color: var(--red); border-color: var(--red); }
#vision .jr-cite { margin: 6px 0 0; }
#vision .jr-kicker { margin: 0 0 6px; font-family: var(--f-display); font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--red); }
#vision .jr-lead { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 4.6vw, 70px); line-height: .95; text-transform: uppercase; }
#vision .jr-deck { margin: 14px 0 6px; font-style: italic; font-size: 21px; line-height: 1.3; color: rgba(22,18,15,.8); }
#vision .jr-by { margin: 6px 0 0; font-family: var(--f-mono); font-size: 11px; color: var(--soft); }
#vision .jr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
#vision .jr-pair .jr-story + .jr-story { padding-left: 22px; border-left: 1px solid rgba(22,18,15,.25); }
#vision .jr-h3 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; }
#vision .jr-h3 [lang="ar"], #vision .jr-lead [lang="ar"] { font-family: var(--f-ar-display); font-weight: 400; text-transform: none; }
#vision .jr-body { margin: 8px 0 0; font-size: 16px; line-height: 1.4; }
#vision .jr-tr { margin: 6px 0 0; font-style: italic; font-size: 15px; color: var(--soft); }
#vision .jr-tr i { font-style: normal; font-size: .8em; }
#vision .jr-photo { margin: 0; }
#vision .jr-photo img { display: block; width: 100%; height: auto; filter: grayscale(.15) contrast(1.02); }
#vision .jr-photo figcaption { margin-top: 6px; font-size: 13px; font-style: italic; color: var(--soft); }
#vision .jr-photo-front { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); }
/* the dark box on the right: what plays in his head */
#vision .jr-box { padding: 14px 16px 16px; background: var(--ink); color: var(--paper); }
#vision .jr-box-k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 17px; text-transform: uppercase; }
#vision .jr-box-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: jr-dot 1.8s ease-in-out infinite; }
@keyframes jr-dot { 50% { opacity: .35; } }
#vision .jr-box .jr-names li { border-color: rgba(239,233,220,.14); }
#vision .jr-box .jr-names em { color: #ff8b80; }
#vision .jr-box .jr-src { color: rgba(239,233,220,.55); border-color: rgba(239,233,220,.25); }
/* the sections */
#vision .jr-sec { margin-top: 40px; }
#vision .jr-band { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 18px; padding: 6px 0; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; }
#vision .jr-band [lang="ar"] { font-family: var(--f-ar-hand); font-weight: 400; font-size: 26px; color: var(--red); }
#vision .jr-pull { margin: 0 0 22px; padding: 4px 0 4px 18px; border-left: 4px solid var(--red); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; font-style: italic; }
#vision .jr-pull cite { display: block; margin-top: 8px; font-style: normal; }
#vision .jr-pull .jr-tr { font-size: 17px; }
#vision .jr-grid { display: grid; gap: 0; }
#vision .jr-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#vision .jr-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#vision .jr-grid > .jr-story { padding: 0 18px; border-left: 1px solid rgba(22,18,15,.25); }
#vision .jr-grid > .jr-story:first-child { padding-left: 0; border-left: 0; }
#vision .jr-h3s { margin: 0 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
#vision .jr-q { margin: 12px 0 0; font-size: 18px; line-height: 1.3; }
#vision .jr-h3s + .jr-q { margin-top: 0; }
#vision .jr-q [lang="ar"] { font-family: var(--f-ar); font-size: 1.1em; }
#vision .jr-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
#vision .jr-mv { margin-top: 20px; }
#vision .jr-mv-h { display: flex; gap: 12px; align-items: baseline; margin: 0 0 10px; font-family: var(--f-display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
#vision .jr-mv-h [lang="ar"] { font-family: var(--f-ar-hand); font-weight: 400; font-size: 18px; color: var(--red); text-transform: none; }
#vision .jr-breves { columns: 3 260px; column-gap: 26px; column-rule: 1px solid rgba(22,18,15,.2); }
#vision .jr-breve { break-inside: avoid; margin-bottom: 16px; }
#vision .jr-breve .jr-q { margin: 0; }
#vision .jr-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 10px; border-top: 3px double var(--rule); font-family: var(--f-mono); font-size: 12px; color: var(--soft); }
@media (max-width: 1100px) {
  #vision .jr-front { grid-template-columns: minmax(0, 1fr) 250px; }
  #vision .jr-left { grid-column: 1 / -1; order: 3; margin-top: 26px; padding: 22px 0 0; border-right: 0; border-top: 1px solid var(--rule); columns: 2; column-gap: 26px; }
  #vision .jr-main { padding-left: 0; }
  #vision .jr-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  #vision .jr-grid-5 > .jr-story:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  #vision .jr-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #vision .jr { width: calc(100% - 16px); margin: 64px auto 120px; padding: 16px 16px 20px; }

#vision .jr-ticker { margin: 10px -16px 0; }
  #vision .jr-front, #vision .jr-pair, #vision .jr-grid-4, #vision .jr-grid-5 { grid-template-columns: minmax(0, 1fr); }
  #vision .jr-col, #vision .jr-main { padding: 0; border: 0; }
  #vision .jr-right { margin-top: 26px; }
  #vision .jr-left { columns: 1; }
  #vision .jr-pair .jr-story + .jr-story, #vision .jr-grid > .jr-story { padding: 16px 0 0; margin-top: 16px; border-left: 0; border-top: 1px solid rgba(22,18,15,.25); }
  #vision .jr-grid > .jr-story:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  #vision .jr-photos { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  #vision .jr-band { font-size: 26px; }
  #vision .jr-foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { #vision .jr-tick, #vision .jr-box-k i { animation: none; } }

/* ── Vision, a reading pass: larger type and stronger ink, a measure that stays readable, the rubric bar sticking to the
   top with a reading line, each section labelled on a strip of Dymo tape in its own pop colour, the Fawda pages
   opening large ── */
#vision .jr { --soft: rgba(22,18,15,.7); --faint: rgba(22,18,15,.18); }
body.jr-reading[data-ch="5"] .ident, body.jr-reading[data-ch="5"] #signal .live { opacity: 0; pointer-events: none; transition: opacity .3s; }
/* the rubric bar */
#vision .jr-nav { position: sticky; top: 0; z-index: 4; align-items: center; gap: 2px 6px; margin: 16px -34px 0; padding: 0 34px; background: var(--paper);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: box-shadow .25s; }
#vision .jr-nav.stuck { box-shadow: 0 8px 18px rgba(0,0,0,.25); }
#vision .jr-nav-t { margin-right: 10px; font-family: var(--f-serif); font-weight: 500; font-size: 22px; line-height: 1; opacity: 0; width: 0; overflow: hidden; transition: opacity .25s, width .25s; }
#vision .jr-nav.stuck .jr-nav-t { opacity: 1; width: auto; }
#vision .jr-nav button { position: relative; padding: 12px 10px 11px; font-size: 16px; border: 0; color: var(--soft); transition: color .2s, background .2s; }
#vision .jr-nav button::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 4px; background: var(--sc); transform: scaleX(0); transition: transform .25s var(--ease-cut); }
#vision .jr-nav button:hover { color: var(--ink); background: rgba(22,18,15,.05); }
#vision .jr-nav button.on { color: var(--ink); }
#vision .jr-nav button.on::after { transform: scaleX(1); }
#vision .jr-progress { position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--sc, #E0261B); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
#vision .jr-ticker { margin-top: 0; }
#vision .jr-ticker:hover .jr-tick { animation-play-state: paused; }
#vision .jr-tick span { font-size: 16px; }
#vision .jr-tick i { color: #F2D43A; }
/* type: bigger, darker, a comfortable measure */
#vision .jr-sub { font-size: 19px; color: var(--soft); }
#vision .jr-deck { font-size: 23px; max-width: 34ch; color: var(--ink); }
#vision .jr-body { font-size: 18px; line-height: 1.5; max-width: 42ch; }
#vision .jr-h3 { font-size: 30px; }
#vision .jr-q { font-size: 20px; line-height: 1.4; }
#vision .jr-tr { font-size: 16px; line-height: 1.4; }
#vision .jr-by, #vision .jr-src { font-size: 12px; }
#vision .jr-names li { padding: 7px 0; border-color: var(--faint); }
#vision .jr-names b { font-size: 17px; }
#vision .jr-names small { margin-left: 4px; font-size: 12px; }
#vision .jr-names em { font-size: 15px; line-height: 1.35; color: #B3261E; }
#vision .jr-photo figcaption { font-size: 14px; line-height: 1.4; }
/* the index: a coloured mark per section, the count spelled out */
#vision .jr-index li { padding: 8px 0; border-bottom: 1px solid var(--faint); }
#vision .jr-index button { display: flex; align-items: center; gap: 9px; font-size: 18px; }
#vision .jr-index button i { width: 10px; height: 10px; background: var(--sc); box-shadow: 0 0 0 1px rgba(22,18,15,.25); }
#vision .jr-index span { font-family: var(--f-serif); font-style: italic; font-size: 14px; }
/* sections: the name on a strip of Dymo tape in the section's colour, letters pressed out of it */
#vision .jr-sec { margin-top: 56px; scroll-margin-top: 60px; }
#vision .jr-band { align-items: center; padding: 10px 0; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--rule); }

#vision .jr-pull { border-left-color: var(--sc); font-size: clamp(26px, 2.8vw, 40px); max-width: 30ch; }
#vision .jr-h3s { padding-top: 8px; border-top: 3px solid var(--sc); font-size: 21px; }
#vision .jr-front .jr-kicker { color: #B3261E; }
#vision .jr-mv { margin-top: 30px; }
#vision .jr-mv-h { padding-bottom: 8px; border-bottom: 1px solid var(--faint); font-size: 22px; }
#vision .jr-mv-h::before { content: ''; align-self: center; width: 12px; height: 12px; background: var(--sc); }
#vision .jr-breves { column-gap: 34px; }
#vision .jr-breve { margin-bottom: 22px; }
#vision .jr-breve .jr-q { font-size: 21px; }
/* the box on the right */
#vision .jr-box { padding: 16px 18px 18px; }
#vision .jr-box-k i { background: #3FE0C5; }
#vision .jr-box .jr-names em { color: #FF8BB0; }
/* the Fawda pages: a lens on hover, open large on click */
#vision .jr-zoom { display: block; width: 100%; padding: 0; cursor: zoom-in; }
#vision .jr-zoom img { transition: transform .35s var(--ease-cut), filter .35s; }
#vision .jr-zoom:hover img, #vision .jr-zoom:focus-visible img { transform: scale(1.02); filter: none; }
#vision .jr-zoom:focus-visible { outline: 3px solid var(--sc); outline-offset: 3px; }
#vision .jr-lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 70px 20px 110px; background: rgba(7,5,12,.9); backdrop-filter: blur(6px); cursor: zoom-out; }
#vision .jr-lb[hidden] { display: none; }
#vision .jr-lb figure { margin: 0; max-width: min(1100px, 100%); cursor: default; }
#vision .jr-lb img { display: block; width: min(100%, 860px); height: auto; max-width: 100%; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); object-fit: contain; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
#vision .jr-lb figcaption { margin-top: 12px; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 16px; color: #ECE7DE; }
#vision .jr-lb figcaption .jr-src { color: rgba(236,231,222,.7); border-color: rgba(236,231,222,.3); }
#vision .jr-lb-x { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 3px; border: 1px solid rgba(236,231,222,.2); background: rgba(14,12,10,.82); color: #ECE7DE; font-size: 26px; line-height: 1; }
@media (max-width: 760px) {
  #vision .jr-nav { margin: 12px -16px 0; padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #vision .jr-nav::-webkit-scrollbar { display: none; }
  #vision .jr-nav button { flex: none; padding: 11px 8px 10px; font-size: 15px; }
  #vision .jr-nav.stuck .jr-nav-t { display: none; }
  #vision .jr-deck { font-size: 20px; }
  #vision .jr-q, #vision .jr-breve .jr-q { font-size: 19px; }
  
  #vision .jr-pull { font-size: 26px; }
}

/* ── Vision as a classic paper: aged newsprint with its fibres and a fold down the middle, a folio line above the
   masthead, ears either side of the title with a red seal stamped on the right, halftone photographs, a news column,
   and boxed notices at the foot like the small advertisements of old dailies ── */
#vision .jr { --paper: #ECE1C6; --ink: #1E1710; --rule: rgba(30,23,16,.85); --soft: rgba(30,23,16,.7); --faint: rgba(30,23,16,.2);
  background:
    linear-gradient(90deg, transparent calc(50% - 36px), rgba(90,60,25,.045) calc(50% - 2px), rgba(255,250,235,.16) calc(50% + 1px), transparent calc(50% + 36px)),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(120,80,30,.22) 100%),
    radial-gradient(circle at 12% 78%, rgba(150,100,40,.12), transparent 18%), radial-gradient(circle at 88% 14%, rgba(150,100,40,.1), transparent 14%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    var(--paper); }
#vision .jr-folio { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--rule); font-family: var(--f-serif); font-size: 14px; color: var(--soft); }
#vision .jr-folio .jr-date { color: var(--ink); text-transform: none; }
#vision .jr-mast { display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px; align-items: center; gap: 18px; padding: 14px 0 10px; border-bottom: 4px double var(--rule); }
#vision .jr-ear { display: grid; gap: 4px; align-content: center; min-height: 112px; padding: 10px 12px; border: 1px solid var(--rule); font-size: 13px; line-height: 1.3; color: var(--soft); }
#vision .jr-ear b { font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }

#vision .jr-seal { display: grid; place-items: center; align-content: center; gap: 1px; width: 112px; height: 112px; border-radius: 50%; color: #C8261B;
  border: 3px solid currentColor; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px currentColor; transform: rotate(-12deg); opacity: .85; mix-blend-mode: multiply; }
#vision .jr-seal b { font-family: var(--f-display); font-weight: 800; font-size: 13px; text-transform: uppercase; }
#vision .jr-seal i { font-style: normal; font-family: var(--f-ar-hand); font-size: 30px; line-height: 1; }
#vision .jr-title { font-size: clamp(76px, 11vw, 168px); }
#vision .jr-title span { right: 4%; top: 6%; }
#vision .jr-sub { border-top: 0; }
/* halftone photographs, printed into the paper */
#vision .jr-photo { position: relative; }
#vision .jr-photo img { filter: grayscale(1) sepia(.35) contrast(1.15) brightness(.97); mix-blend-mode: multiply; }
#vision .jr-zoom { position: relative; }
#vision .jr-zoom::after, #vision .jr-photo-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .35;
  background: radial-gradient(rgba(30,23,16,.55) .7px, transparent 1.15px) 0 0 / 3px 3px; }
#vision .jr-photo-front::after { top: 17px; }
#vision .jr-zoom:hover img { filter: grayscale(.2) sepia(.15); }
#vision .jr-box { background: #1E1710; }
/* the news column */
#vision .jr-news { list-style: none; margin: 0; padding: 0; }
#vision .jr-news li { padding: 9px 0; border-bottom: 1px solid var(--faint); }

#vision .jr-news-x { margin: 3px 0 0; font-size: 15px; line-height: 1.35; }
#vision .jr-news-x .jr-src { white-space: nowrap; }
/* notices: his books in ruled boxes, like the small advertisements at the foot of an old daily */
#vision .jr-ads { margin-top: 56px; padding-top: 8px; border-top: 4px double var(--rule); }
#vision .jr-ads-h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font-family: var(--f-display); font-weight: 800; font-size: 26px; text-transform: uppercase; }
#vision .jr-ads-h small { font-family: var(--f-serif); font-weight: 400; font-style: italic; font-size: 15px; text-transform: none; color: var(--soft); }
#vision .jr-ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
#vision .jr-ad { display: grid; align-content: start; gap: 6px; min-height: 128px; padding: 12px 12px 14px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  text-decoration: none; text-align: center; transition: background .2s; }
#vision .jr-ad:hover, #vision .jr-ad:focus-visible { background: rgba(200,38,27,.07); outline: none; }
#vision .jr-ad-k { font-family: var(--f-serif); font-style: italic; font-size: 13px; color: var(--soft); }
#vision .jr-ad b { font-family: var(--f-display); font-weight: 800; font-size: 19px; line-height: 1.02; text-transform: uppercase; }
#vision .jr-ad b[lang="ar"] { font-family: var(--f-ar-display); font-weight: 400; font-size: 24px; text-transform: none; }
#vision .jr-ad-p { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--faint); font-family: var(--f-mono); font-size: 11px; color: var(--soft); }
#vision .jr-ad:hover .jr-ad-p { color: #B3261E; }
@media (max-width: 1100px) {
  #vision .jr-mast { grid-template-columns: 160px minmax(0, 1fr) 140px; }
}
@media (max-width: 760px) {
  #vision .jr-folio span:nth-child(2), #vision .jr-folio span:nth-child(4) { display: none; }
  #vision .jr-mast { grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; }
  #vision .jr-mast .jr-ear:first-child { display: none; }
  #vision .jr-title { font-size: 72px; text-align: left; }
  #vision .jr-title span { position: static; display: block; margin-top: 4px; text-align: left; transform: none; font-size: .34em; }
  #vision .jr-seal { width: 80px; height: 80px; }
  #vision .jr-seal b { font-size: 10px; }
  #vision .jr-seal i { font-size: 22px; }
  #vision .jr-ear { min-height: 0; }
  #vision .jr-ads-grid { grid-template-columns: 1fr 1fr; }
  #vision .jr-ad b { font-size: 17px; }
}

/* section heads, centred like a classic daily: the section's numeral stamped in its colour, the name large between two
   rules, its Arabic in red handwriting beneath; the opening quote set in the middle under it, a star in the section's
   colour above */
#vision .jr-band { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 22px; row-gap: 2px;
  margin: 0 0 26px; padding: 18px 0 14px; border-top: 4px double var(--rule); border-bottom: 1px solid var(--rule); text-align: center; }
#vision .jr-band::before, #vision .jr-band::after { content: ''; grid-row: 2; height: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-top: 3px; }
#vision .jr-band::before { grid-column: 1; }
#vision .jr-band::after { grid-column: 3; }
#vision .jr-band-n { grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 50%;
  background: var(--sc); color: #16120F; font-family: var(--f-serif); font-weight: 500; font-size: 16px; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px rgba(30,23,16,.5); }
#vision .jr-band-t { grid-column: 2; grid-row: 2; font-family: var(--f-serif); font-weight: 500; font-size: clamp(44px, 5.4vw, 76px); line-height: .95; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
#vision .jr-band-ar { grid-column: 2; grid-row: 3; font-family: var(--f-ar-hand); font-weight: 400; font-size: 24px; color: #B3261E; }
#vision .jr-pull { position: relative; max-width: 26ch; margin: 0 auto 34px; padding: 30px 0 0; border: 0; text-align: center; }
#vision .jr-pull::before { content: '✦'; position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-style: normal; font-size: 22px; line-height: 1; color: var(--sc); text-shadow: 0 0 0 rgba(30,23,16,.4); }
#vision .jr-pull .jr-tr { margin-top: 10px; }
#vision .jr-pull cite { margin-top: 12px; }
@media (max-width: 760px) {
  #vision .jr-band { column-gap: 12px; }
  #vision .jr-band-t { font-size: 44px; }
  #vision .jr-band-ar { font-size: 20px; }
  #vision .jr-pull { max-width: none; }
}

/* articles: a headline in the book face, a standfirst in italic, the text in newspaper columns with a drop cap and
   hairline rules between them, numbered source notes at the end; « Lire en grand » opens it alone in one column */

#vision .jr-art { margin: 0 0 36px; }
#vision .jr-art .jr-kicker { color: #B3261E; }
#vision .jr-art-t { margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: clamp(34px, 3.8vw, 54px); line-height: 1.02; letter-spacing: -.01em; }
#vision .jr-art-dek { max-width: 56ch; margin: 10px 0 0; font-style: italic; font-size: 21px; line-height: 1.35; color: var(--soft); }
#vision .jr-art-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 16px; padding: 8px 0; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint);
  font-family: var(--f-mono); font-size: 12px; color: var(--soft); }
#vision .jr-read { margin-left: auto; padding: 6px 12px; border: 1px solid var(--rule); font-family: var(--f-display); font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--ink); transition: background .2s, color .2s; }
#vision .jr-read:hover, #vision .jr-read:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
#vision .jr-art-body { columns: 3 250px; column-gap: 30px; column-rule: 1px solid var(--faint); font-size: 18px; line-height: 1.55; text-align: left; }
#vision .jr-art-body p { margin: 0 0 12px; }
#vision .jr-art-body p:first-child::first-letter { float: left; margin: 6px 8px 0 0; font-family: var(--f-serif); font-weight: 500; font-size: 64px; line-height: .8; color: #B3261E; }
#vision .jr-art-body sup { line-height: 0; }
#vision .jr-art-body sup a { margin-left: 2px; font-family: var(--f-mono); font-size: 11px; color: #B3261E; text-decoration: none; }
#vision .jr-art-body sup a:hover { text-decoration: underline; }
#vision .jr-notes { columns: 2 300px; column-gap: 30px; margin: 10px 0 0; padding: 10px 0 0 20px; border-top: 1px solid var(--faint); font-family: var(--f-mono); font-size: 11px; color: var(--soft); }
#vision .jr-notes li { margin-bottom: 4px; break-inside: avoid; }
#vision .jr-notes a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--faint); }
#vision .jr-notes a:hover { color: #B3261E; }
#vision .jr-sec .jr-art { padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
/* the reader */
#vision .jr-reader { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding: 70px 16px 120px; background: rgba(7,5,12,.88); backdrop-filter: blur(6px); }
#vision .jr-reader[hidden] { display: none; }
#vision .jr-reader-page { --paper: #ECE1C6; --ink: #1E1710; --soft: rgba(30,23,16,.7); --faint: rgba(30,23,16,.2); --rule: rgba(30,23,16,.85);
  max-width: 720px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 56px) 44px; background: var(--paper); color: var(--ink); font-family: var(--f-serif); box-shadow: 0 30px 60px rgba(0,0,0,.6); }
#vision .jr-reader-page .jr-art-t { font-size: clamp(36px, 5vw, 56px); }
#vision .jr-reader-page .jr-art-body { columns: auto; column-rule: none; font-size: 20px; line-height: 1.65; text-align: left; hyphens: manual; }
#vision .jr-reader-page .jr-art-body p { margin-bottom: 18px; }
#vision .jr-reader-page .jr-notes { columns: auto; }
#vision .jr-reader-x { position: fixed; }
@media (max-width: 760px) {
  #vision .jr-art-body { columns: 1; text-align: left; font-size: 18px; }
  #vision .jr-art-dek { font-size: 19px; }
  #vision .jr-read { margin-left: 0; }
  #vision .jr-reader { padding: 56px 8px 110px; }
  #vision .jr-reader-page .jr-art-body { font-size: 19px; }
}

/* the front page's centre carries the portrait under the photograph, two columns wide, so it runs as long as the side
   columns; the section lists flow through balanced newspaper columns instead of boxes of unequal height; headings of
   articles and columns are centred, as in a daily */
#vision .jr-main .jr-art { margin: 22px 0 0; padding-top: 16px; border-top: 4px double var(--rule); }
#vision .jr-main .jr-art-body { columns: 2 240px; }
#vision .jr-main .jr-notes { columns: 1; }
#vision .jr-grid-4, #vision .jr-grid-5 { display: block; columns: 4 210px; column-gap: 30px; column-rule: 1px solid var(--faint); column-fill: balance; }
#vision .jr-grid-5 { columns: 3 240px; }
#vision .jr-grid > .jr-story, #vision .jr-grid > .jr-story:first-child { padding: 0; border: 0; margin: 0 0 22px; break-inside: auto; }
#vision .jr-grid .jr-h3s { break-after: avoid; }
#vision .jr-grid .jr-names li, #vision .jr-grid .jr-q, #vision .jr-grid .jr-by { break-inside: avoid; }
#vision .jr-art > .jr-kicker, #vision .jr-art-t, #vision .jr-art-dek { text-align: center; }
#vision .jr-art-dek { margin-left: auto; margin-right: auto; }
#vision .jr-art-by { justify-content: center; }
#vision .jr-read { margin-left: 0; }
#vision .jr-h3s, #vision .jr-mv-h { justify-content: center; text-align: center; }
#vision .jr-h { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
#vision .jr-box-k { justify-content: center; }
#vision .jr-ads-h { justify-content: center; }
#vision .jr-front > .jr-main > .jr-kicker, #vision .jr-lead, #vision .jr-deck, #vision .jr-main > .jr-by { text-align: center; }
#vision .jr-deck { margin-left: auto; margin-right: auto; }
#vision .jr-pair .jr-kicker, #vision .jr-pair .jr-h3 { text-align: center; }
@media (max-width: 760px) {
  #vision .jr-grid-4, #vision .jr-grid-5, #vision .jr-main .jr-art-body { columns: 1; }
}
#vision .jr-more { margin: 4px 0 0; break-inside: avoid; }
#vision .jr-more button { padding: 6px 12px; border: 1px solid var(--rule); font-family: var(--f-display); font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--ink); }
#vision .jr-more button:hover { background: var(--ink); color: var(--paper); }
/* the Fawda pictures keep their real colours: no sepia, no halftone dots, no multiply */
#vision .jr-photo img, #vision .jr-zoom:hover img { filter: none; mix-blend-mode: normal; }
#vision .jr-zoom::after, #vision .jr-photo-front::after { content: none; }
/* the rubric bar is centred too; « Vision » sits apart on the left when the bar sticks */
#vision .jr-nav { justify-content: center; }
#vision .jr-nav-t { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); margin: 0; }
@media (max-width: 760px) { #vision .jr-nav { justify-content: safe center; } }
/* the masthead reads « La Gazette » small over « Fawda » large, « جريدة الفوضى » in red handwriting beside it */
#vision .jr-title small { display: block; margin-bottom: 4px; font-family: var(--f-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .03em; text-transform: uppercase; }
#vision .jr-title span { font-size: .24em; }
#vision .jr-nav-t { font-size: 19px; white-space: nowrap; }
@media (max-width: 1100px) { #vision .jr-nav.stuck .jr-nav-t { display: none; } }
@media (max-width: 760px) { #vision .jr-title small { font-size: 18px; } #vision .jr-title span { font-size: .34em; } }

/* the cinema section: the eight features as a contact sheet of trailer frames, the year, the title and its Arabic, one
   line on what the film does with the image, the credit; a frame opens the film's screening */
#vision .jr-sec-dek { max-width: 60ch; margin: -6px auto 22px; text-align: center; font-style: italic; font-size: 18px; color: var(--soft); }
#vision .jr-films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
#vision .jr-film { margin: 0; }
#vision .jr-film-link { display: block; overflow: hidden; background: #000; }
#vision .jr-film-link img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s var(--ease-cut); }
#vision .jr-film-link:hover img, #vision .jr-film-link:focus-visible img { transform: scale(1.04); }
#vision .jr-film figcaption { display: grid; gap: 3px; margin-top: 8px; text-align: center; }
#vision .jr-film-y { font-family: var(--f-display); font-weight: 800; font-size: 14px; color: #6B4FD8; }
#vision .jr-film b { font-family: var(--f-display); font-weight: 800; font-size: 20px; line-height: 1.02; text-transform: uppercase; }
#vision .jr-film i[lang="ar"] { font-style: normal; font-family: var(--f-ar-hand); font-size: 18px; color: #B3261E; }
#vision .jr-film-x { font-size: 15px; line-height: 1.35; }
#vision .jr-film-c { font-size: 12px; font-style: italic; color: var(--soft); }
#vision .jr-photo-front figcaption b { font-style: normal; }
/* the ticker now runs the news */
#vision .jr-tick b { margin-right: 6px; color: #F2D43A; }
/* three typefaces only: the book serif for text, sources and dates, the condensed display face for heads, Aref Ruqaa
   for Arabic */
#vision .jr .jr-src, #vision .jr-by, #vision .jr-folio, #vision .jr-names small, #vision .jr-index span, #vision .jr-art-by, #vision .jr-notes,
#vision .jr-ad-p, #vision .jr-foot, #vision .jr-art-body sup a, #vision .jr-cite, #vision .jr-reader .jr-src { font-family: var(--f-serif); }
#vision .jr .jr-src, #vision .jr-by, #vision .jr-cite { font-style: italic; font-size: 14px; letter-spacing: 0; }
#vision .jr-names small, #vision .jr-ad-p, #vision .jr-foot, #vision .jr-notes, #vision .jr-art-by { font-size: 14px; }
#vision .jr-art-body sup a { font-size: 12px; font-weight: 500; }
#vision .jr [lang="ar"], #vision .jr-h3 [lang="ar"], #vision .jr-lead [lang="ar"], #vision .jr-ad b[lang="ar"], #vision .jr-q [lang="ar"], #vision .jr-names em[lang="ar"] { font-family: var(--f-ar-hand); font-weight: 400; }
#vision .jr-cite { margin-top: 8px; line-height: 1.5; color: var(--soft); }
/* phones: the channel keys step aside while reading down */
@media (max-width: 760px) {
  body.jr-keys-off[data-ch="5"] #remote { transform: translateY(110%); transition: transform .35s var(--ease-cut); }
  #vision .jr-films { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  #vision .jr-film b { font-size: 17px; }
  #vision .jr-film-x { font-size: 14px; }
}
@media (min-width: 761px) and (max-width: 1100px) { #vision .jr-films { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── the Gazette, made its own: the nameplate set in blackletter like the old dailies, an ear of small print on the left,
   the Arabic title in a double-ruled box on the right with the seal under it (after the boxed titles of the old Arabic
   and Asian dailies); a sommaire with dotted leaders and page numbers; dispatches with the date run in; the record
   column framed in a double rule on the paper instead of a dark panel; the opening quotes on one line; the channel keys
   step aside while reading ── */
#vision .jr-mast { grid-template-columns: 200px minmax(0, 1fr) 200px; align-items: stretch; padding: 16px 0 12px; }
#vision .jr-ear { justify-items: center; align-content: center; gap: 6px; padding: 12px 10px; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 14px; line-height: 1.35; color: var(--soft); }
#vision .jr-ear-k { font-family: var(--f-display); font-style: normal; font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--ink); }
#vision .jr-ear-p { padding-top: 6px; border-top: 1px solid var(--faint); font-style: normal; }
#vision .jr-title { display: grid; place-items: center; font-size: inherit; }
#vision .jr-title small, #vision .jr-title > span:not(.jr-gothic) { display: none; }
#vision .jr-title .jr-gothic { position: static; transform: none; display: block; text-align: center; font-family: 'UnifrakturMaguntia', var(--f-serif); font-weight: 400; font-size: clamp(46px, 6.4vw, 104px); line-height: 1; letter-spacing: 0; color: var(--ink); white-space: nowrap; }
#vision .jr-arbox { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 10px 8px; border: 3px double var(--rule); text-align: center; }
#vision .jr-arbox b { font-family: var(--f-ar-hand); font-weight: 700; font-size: 38px; line-height: 1.1; color: #B3261E; }
#vision .jr-arbox-n { font-family: var(--f-ar-hand); font-size: 16px; color: var(--soft); }
#vision .jr-arbox .jr-seal { width: 74px; height: 74px; margin-top: 4px; }
#vision .jr-arbox .jr-seal b { font-family: var(--f-display); font-size: 9px; color: inherit; }
#vision .jr-arbox .jr-seal i { font-size: 20px; }
/* sommaire */
#vision .jr-index li { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; gap: 6px; padding: 7px 0; border: 0; }
#vision .jr-index button { display: grid; justify-items: start; gap: 0; font-size: 18px; text-align: left; }
#vision .jr-index button small { font-style: italic; font-size: 13px; color: var(--soft); }
#vision .jr-index button:hover { color: #B3261E; }
#vision .jr-dots { align-self: end; margin-bottom: 22px; border-bottom: 2px dotted rgba(30,23,16,.45); }
#vision .jr-index span { font-family: var(--f-serif); font-style: normal; font-size: 16px; color: var(--ink); }
/* dispatches */
#vision .jr-news li { padding: 10px 0; border: 0; text-align: justify; hyphens: auto; }
#vision .jr-news li + li::before { content: ''; display: block; width: 40px; margin: 0 auto 10px; border-top: 1px solid var(--rule); }
#vision .jr-news-x { margin: 0; font-size: 16px; line-height: 1.45; }
#vision .jr-dl { font-variant: small-caps; letter-spacing: .02em; color: #B3261E; }
#vision .jr-news-x b { font-weight: 600; }
/* the record column */
#vision .jr-box { padding: 12px 14px 14px; background: transparent; color: var(--ink); border: 3px double var(--rule); }
#vision .jr-box-k { justify-content: center; gap: 8px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); font-size: 17px; }
#vision .jr-box-k span { font-family: var(--f-serif); font-weight: 400; font-size: 16px; color: #B3261E; }
#vision .jr-box .jr-names li { border-color: var(--faint); border-bottom-style: dotted; }
#vision .jr-box .jr-names em { color: #B3261E; }
#vision .jr-box .jr-src, #vision .jr-box .jr-cite { color: var(--soft); border-color: var(--faint); }
/* the opening quote of each section on one line where the page is wide enough */
@media (min-width: 1100px) { #vision .jr-pull { max-width: none; white-space: nowrap; font-size: clamp(24px, 2.35vw, 34px); } }
/* the channel keys step aside while reading down; scrolling up or bringing the pointer to the bottom brings them back */
body.jr-keys-off[data-ch="5"]:not(.near-bottom):not(.in-screening) #remote { transform: translate(-50%, calc(100% + 40px)); }
body.wa-keys-off[data-ch="3"]:not(.near-bottom):not(.in-screening) #remote { transform: translate(-50%, calc(100% + 40px)); }
@media (max-width: 760px) { body.wa-keys-off[data-ch="3"]:not(.in-screening) #remote { transform: translateY(110%); } }
@media (max-width: 760px) { body.jr-keys-off[data-ch="5"]:not(.in-screening) #remote { transform: translateY(110%); } }
@media (max-width: 1100px) {
  #vision .jr-mast { grid-template-columns: 150px minmax(0, 1fr) 150px; }
  #vision .jr-arbox b { font-size: 28px; }
}
@media (max-width: 760px) {
  #vision .jr-mast { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #vision .jr-mast .jr-ear { display: none; }
  #vision .jr-title .jr-gothic { font-size: clamp(40px, 12.5vw, 60px); white-space: normal; text-align: center; }
  #vision .jr-arbox { grid-auto-flow: column; justify-content: center; align-items: center; gap: 14px; }
  #vision .jr-arbox b { font-size: 26px; }
  #vision .jr-arbox .jr-seal { width: 60px; height: 60px; margin: 0; }
}
/* full page: the paper takes the whole screen, edge to edge; the top leaves room for the channel's name */
#vision .jr { --gut: clamp(16px, 3vw, 48px); width: 100%; min-height: 100%; margin: 0; padding: 64px var(--gut) 140px; box-shadow: none; }
#vision .jr-nav, #vision .jr-ticker { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
#vision .jr-ticker { padding-left: 0; padding-right: 0; }
#vision .jr-nav-t { left: var(--gut); }
#vision .jr-front, #vision .jr-sec, #vision .jr-ads, #vision .jr-foot, #vision .jr-head { max-width: 1500px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { #vision .jr { width: 100%; margin: 0; padding: 60px 14px 110px; } }
/* on the full-page paper the channel's name is printed in ink */
body[data-ch="5"]:not(.in-screening) .ident-latin { color: #1E1710; }
body[data-ch="5"]:not(.in-screening) .ident-ar { color: #B3261E; }
body[data-ch="5"]:not(.in-screening) #signal .live { color: rgba(30,23,16,.7); text-shadow: none; }

/* printer's touches: a page number at the foot of each section, the weather of the inside, an erratum, a fleuron and
   a colophon at the very end, the price in the ear */
#vision .jr-page { display: flex; align-items: center; gap: 14px; margin: 30px 0 0; font-family: var(--f-serif); font-size: 15px; color: var(--soft); }
#vision .jr-page::before, #vision .jr-page::after { content: ''; flex: 1; border-top: 1px solid var(--faint); }
#vision .jr-front > .jr-page { grid-column: 1 / -1; }
#vision .jr-ear-x { font-size: 12px; }
#vision .jr-meteo { margin-top: 26px; padding: 12px 14px; border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 3px; font-size: 15px; line-height: 1.4; }
#vision .jr-meteo p { margin: 0 0 4px; }
#vision .jr-meteo-h { text-align: center; margin-bottom: 8px !important; padding-bottom: 6px; border-bottom: 1px solid var(--faint); font-family: var(--f-display); font-weight: 800; font-size: 16px; text-transform: uppercase; }
#vision .jr-meteo b { font-variant: small-caps; font-weight: 600; color: #B3261E; }
#vision .jr-meteo-n { margin-top: 8px !important; font-style: italic; font-size: 13px; color: var(--soft); text-align: center; }
#vision .jr-erratum { max-width: 760px; margin: 40px auto 0; padding: 12px 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 15px; font-style: italic; line-height: 1.5; text-align: center; color: var(--soft); }
#vision .jr-erratum b { font-style: normal; font-variant: small-caps; color: var(--ink); }
#vision .jr-dinkus { margin: 26px 0 0; text-align: center; font-size: 26px; color: #B3261E; }
#vision .jr-foot { flex-wrap: wrap; justify-content: space-between; }
#vision .jr-colophon { max-width: 1500px; margin: 10px auto 0; text-align: center; font-style: italic; font-size: 13px; color: var(--soft); }
@media (max-width: 760px) { #vision .jr-foot { align-items: center; text-align: center; } }

/* the recreation page: crossword, horoscope and classifieds in three ruled columns, like the games page of a daily */
#vision .jr-fun-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 0; }
#vision .jr-fun-col { padding: 0 22px; border-left: 1px solid var(--faint); }
#vision .jr-fun-col:first-child { padding-left: 0; border-left: 0; }
#vision .jr-fun-col:last-child { padding-right: 0; }
#vision .jr-fun-dek { margin: -2px 0 12px; text-align: center; font-style: italic; font-size: 14px; color: var(--soft); }
#vision .jr-cw { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); width: min(100%, 380px); margin: 0 auto; border: 2px solid var(--ink); }
#vision .jr-cw > span { aspect-ratio: 1; border: 1px solid rgba(30,23,16,.6); }
#vision .jr-cw-x { background: var(--ink); }
#vision .jr-cw-c { position: relative; background: #F6EEDB; }
#vision .jr-cw-c i { position: absolute; left: 2px; top: 0; font-style: normal; font-size: 10px; color: var(--soft); pointer-events: none; }
#vision .jr-cw-c input { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; text-transform: uppercase;
  font-family: var(--f-display); font-weight: 800; font-size: 20px; color: var(--ink); caret-color: #B3261E; }
#vision .jr-cw-c input:focus { outline: 2px solid #B3261E; outline-offset: -2px; background: rgba(224,38,27,.08); }
#vision .jr-cw-c input.ok { color: #1F6B4A; }
#vision .jr-cw-c input.no { color: #B3261E; text-decoration: line-through; }
#vision .jr-cw-clues { margin-top: 12px; font-size: 15px; line-height: 1.4; }
#vision .jr-cw-clues ul { margin: 0 0 8px; padding: 0; list-style: none; }
#vision .jr-cw-clues li { margin-bottom: 4px; }
#vision .jr-cw-clues small { color: var(--soft); }
#vision .jr-cw-k { margin: 8px 0 4px; font-variant: small-caps; color: #B3261E; }
#vision .jr-cw-act { display: flex; justify-content: center; gap: 10px; margin: 8px 0 0; }
#vision .jr-cw-act button { padding: 5px 12px; border: 1px solid var(--rule); font-family: var(--f-display); font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--ink); }
#vision .jr-cw-act button:hover { background: var(--ink); color: var(--paper); }
#vision .jr-horo { margin: 0; padding: 0; list-style: none; }
#vision .jr-horo li { padding: 9px 0; border-bottom: 1px dotted rgba(30,23,16,.4); font-size: 17px; line-height: 1.4; }
#vision .jr-horo b { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-variant: small-caps; font-weight: 600; }
#vision .jr-horo b::before { content: '✦'; color: var(--sc); font-size: 14px; }
#vision .jr-pa { margin: 0; padding: 0; list-style: none; columns: 1; }
#vision .jr-pa li { margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--rule); font-size: 15px; line-height: 1.35; break-inside: avoid; }
#vision .jr-pa b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; }
#vision .jr-pa small { display: block; margin-top: 3px; font-style: italic; font-size: 12px; color: var(--soft); }
/* the stamp on the front article */
#vision .jr-stamped { position: relative; }
#vision .jr-stamp { position: absolute; right: 2%; top: 14px; display: grid; justify-items: center; padding: 6px 12px 5px; border: 3px solid #B3261E; border-radius: 4px; color: #B3261E;
  transform: rotate(-9deg); opacity: .78; mix-blend-mode: multiply; pointer-events: none; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px #B3261E; }
#vision .jr-stamp b { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; }
#vision .jr-stamp small { font-family: var(--f-display); font-weight: 800; font-size: 9px; text-transform: uppercase; }
/* « Suite en page » */
#vision .jr-more button i { font-family: var(--f-serif); font-weight: 400; text-transform: none; margin-right: 6px; color: var(--soft); }
#vision .jr-reader-folio { margin: -14px 0 18px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); text-align: center; font-style: italic; font-size: 14px; color: var(--soft); }
@media (max-width: 1100px) { #vision .jr-fun-grid { grid-template-columns: 1fr 1fr; row-gap: 26px; } #vision .jr-fun-col:nth-child(3) { grid-column: 1 / -1; padding: 0; border: 0; } #vision .jr-pa { columns: 2 240px; column-gap: 14px; } }
@media (max-width: 760px) {
  #vision .jr-fun-grid { grid-template-columns: 1fr; }
  #vision .jr-fun-col { padding: 0; border: 0; }
  #vision .jr-pa { columns: 1; }
  #vision .jr-stamp { top: 4px; right: 0; transform: rotate(-9deg) scale(.8); }
}
/* Aref Ruqaa sets words tight: open the spacing between Arabic words wherever the handwriting is used */
#vision [lang="ar"] { word-spacing: .3em; }

/* ── CH 6 · the entry page as an old star chart: a graduated ring turning slowly behind, the title drawn as a
   constellation (its lines traced one after another, its stars twinkling), a cartouche with the legend as magnitudes;
   « Entrer » flies into the sky: the chart opens out and away while the constellation comes forward ── */
.uni-intro.sc-chart { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-content: stretch; padding: 70px 24px 104px; text-align: center;
  background: radial-gradient(ellipse 55% 50% at 50% 45%, rgba(7,5,12,.25), rgba(7,5,12,.72) 75%);
  transition: opacity 1s ease, visibility 1s, transform 1.2s cubic-bezier(.5,0,.2,1); }
.uni:not(.is-intro) .uni-intro.sc-chart { transform: scale(1.9); }
.uni.is-intro .uni-canvas { transform: scale(.8); filter: blur(5px) brightness(.7) saturate(1.2); }
.sc-ring { position: absolute; left: 50%; top: 46%; width: min(96vh, 92vw); width: min(96dvh, 92vw); height: auto; transform: translate(-50%, -50%); pointer-events: none; opacity: .55;
  animation: sc-turn 260s linear infinite; }
@keyframes sc-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sc-ring circle, .sc-ring ellipse, .sc-ring line { fill: none; stroke: rgba(236,231,222,.35); stroke-width: 1; }
.sc-ring circle.dash { stroke-dasharray: 2 7; }
.sc-ring .ecl { stroke: rgba(201,138,255,.4); stroke-dasharray: 10 6; }
.sc-ring .ax { stroke: rgba(236,231,222,.12); }
.sc-ring line.lg { stroke: rgba(236,231,222,.6); stroke-width: 1.5; }
.sc-ring text { fill: rgba(236,231,222,.45); font-family: var(--f-serif); font-style: italic; font-size: 15px; text-anchor: middle; dominant-baseline: middle; }
.sc-ring text.cd { fill: #F2D43A; font-style: normal; font-family: var(--f-display); font-weight: 800; font-size: 22px; }
.sc-center { position: relative; align-self: center; display: grid; justify-items: center; gap: 14px; width: min(860px, 100%); }
.sc-k { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: rgba(236,231,222,.7); }
.sc-k span { padding: 2px 8px; background: var(--u-t); color: #0a0908; font-family: var(--f-display); font-style: normal; font-weight: 800; font-size: 13px; }
.sc-k i { font-style: normal; font-family: var(--f-ar-hand); font-size: 18px; color: #3FE0C5; }
.sc-h { margin: 0; width: min(760px, 88vw); }
.sc-title { display: block; width: 100%; height: auto; overflow: visible; }
.sc-lines line { stroke: rgba(236,231,222,.55); stroke-width: .11; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sc-draw .28s ease-out forwards; animation-delay: calc(.5s + var(--i) * .045s); }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
.sc-stars circle { fill: #F6F0E2; opacity: 0; stroke: rgba(63,224,197,.45); stroke-width: .18;
  animation: sc-in .4s ease-out forwards, sc-twinkle 3.2s ease-in-out infinite; animation-delay: calc(.45s + var(--i) * .045s), calc(2.5s + var(--t)); }
@keyframes sc-in { to { opacity: 1; } }
@keyframes sc-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.sc-line { max-width: 46ch; margin: 4px 0 0; font-family: var(--f-serif); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.35; color: #ECE7DE; }

.sc-how { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: rgba(236,231,222,.5); }

@media (max-width: 760px) {
  .uni-intro.sc-chart { padding: 64px 14px 96px; overflow-y: auto; align-content: start; grid-template-rows: auto auto; gap: 22px; }
  .sc-ring { top: 30%; width: 130vw; opacity: .4; }
  .sc-h { width: 94vw; }
  .sc-how { display: none; }

}
@media (prefers-reduced-motion: reduce) {
  .sc-ring { animation: none; }
  .sc-lines line { animation: none; stroke-dashoffset: 0; }
  .sc-stars circle { animation: none; opacity: 1; }
}

/* ── CH 6 · inside the constellation: a deep night-sky blue with no dots and no words behind; the rail as separate
   keys (fifteen of them, so a little smaller); the sheet as a quiet card: names in the book face, the kind in small
   caps, buttons without offset shadows ── */
.uni { background: radial-gradient(ellipse 70% 60% at 50% 42%, #101a38 0%, #0a1026 45%, #050814 80%, #03050c 100%); }
.uni::before, .uni-bg { display: none; }
.uni-rail .ur-btn { --key: clamp(28px, calc((100vh - 150px) / 16), 42px); --key: clamp(28px, calc((100dvh - 150px) / 16), 42px); }
.uni-rail .ur-btn .u-ico { width: 20px; height: 20px; }
.uni-tip { padding: 0 10px 0 0; border-color: rgba(191,211,255,.25); background: rgba(5,8,20,.92); font-family: var(--f-serif); font-size: 15px; line-height: 1.8; }
.uni-tip b { font-family: var(--f-display); font-weight: 800; font-size: 12px; text-transform: uppercase; }
.uni-tip em { font-style: italic; background: none; color: rgba(236,231,222,.7); }
.uni-panel { background: #070b18; border-left: 1px solid rgba(191,211,255,.14); }
.us-close { top: 14px; width: 40px; height: 40px; border-radius: 3px; background: rgba(5,8,20,.82); border-color: rgba(236,231,222,.25); backdrop-filter: blur(6px); font-size: 22px; }
.us-close:hover { background: rgba(20,26,50,.92); color: #ECE7DE; border-color: rgba(236,231,222,.5); }
.us-body { padding: 0 26px 44px; }
.us-kind { margin-top: 18px; font-family: var(--f-serif); font-size: 15px; }
.us-kind span { padding: 0; background: none; color: var(--kc); font-weight: 500; font-variant: small-caps; letter-spacing: .02em; transform: none; box-shadow: none; }
.us-kind .u-ico { width: 16px; height: 16px; }
.us-kind b { font-family: var(--f-serif); font-weight: 500; font-size: 15px; color: rgba(236,231,222,.6); }
.us-kind b::before { content: '·'; margin-right: 10px; color: rgba(236,231,222,.35); }
.us-title { margin: 6px 0 4px; font-family: var(--f-serif); font-weight: 500; text-transform: none; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.01em; }
.us-ar { font-family: var(--f-ar-hand); font-size: 26px; word-spacing: .3em; }
.us-text { font-style: italic; color: rgba(236,231,222,.9); }
.us-status b { font-family: var(--f-display); font-weight: 800; font-size: 12px; }
.us-status span { font-size: 16px; }
.us-note { font-family: var(--f-serif); font-style: italic; font-size: 14px; }
.us-play { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 3px; box-shadow: none;
  font-family: var(--f-display); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.us-play span { font-size: 13px; }
.us-play:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.45); filter: brightness(1.08); }
.us-out { padding: 0; border: 0; font-family: var(--f-serif); font-style: italic; font-size: 16px; color: rgba(236,231,222,.85); border-bottom: 1px solid rgba(236,231,222,.3); }
.us-out:hover { background: none; color: #fff; border-color: #fff; }
.us-count { margin-top: 28px; font-family: var(--f-serif); font-style: italic; font-size: 16px; }
.us-count b { font-style: normal; font-size: 26px; }
.us-rel { padding-bottom: 6px; border-bottom: 1px solid rgba(236,231,222,.2); font-family: var(--f-serif); font-size: 15px; font-variant: small-caps; letter-spacing: .02em; }
.us-rel i { font-family: var(--f-serif); }
.uc-img { box-shadow: none; outline: 1px solid color-mix(in srgb, var(--kc) 70%, transparent); outline-offset: 2px; }
.us-link:hover .uc-img { transform: none; outline-color: var(--kc); }
.ul-t i { font-family: var(--f-serif); font-style: italic; font-size: 14px; }
.us-src { font-family: var(--f-serif); font-style: italic; font-size: 13px; }
.us-stamp { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--kc) 40%, #070b18), #070b18 70%); color: var(--kc); }
@media (max-width: 760px) { .uni-rail { scrollbar-width: none; background: none; border: 0; box-shadow: none; } .uni-rail::-webkit-scrollbar { display: none; } }

/* ── CH 6 · the rail as the chart's legend: a framed card in the corner, « Légende » in small caps, one line per kind
   (its pictogram in its colour, its name, its count), a kind switched off dimmed and struck through; the four tools in
   a row of small keys at the foot ── */
.uni-rail.uni-legend { display: grid; gap: 0; width: 190px; padding: 10px 10px 10px; border: 1px solid rgba(191,211,255,.3); outline: 1px solid rgba(191,211,255,.3); outline-offset: 3px;
  background: rgba(5,8,20,.72); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.uni-legend .ul-h { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(191,211,255,.2); text-align: center; font-family: var(--f-serif); font-size: 16px; font-variant: small-caps; letter-spacing: .03em; color: #E9EEFF; }
.uni-legend .ur-btn.ur-leg { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; width: 100%; height: auto; padding: 5px 4px; border: 0; border-radius: 2px;
  background: none; box-shadow: none; backdrop-filter: none; text-align: left; color: #E9EEFF; opacity: 1; transform: none; }
.uni-legend .ur-btn.ur-leg::after { content: none; }
.uni-legend .ul-ico { display: grid; place-items: center; color: var(--kc); }
.uni-legend .ul-ico .u-ico { width: 17px; height: 17px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--kc) 60%, transparent)); }
.uni-legend .ul-l { font-family: var(--f-serif); font-size: 16px; line-height: 1.1; }
.uni-legend .ul-n { font-family: var(--f-serif); font-weight: 400; font-style: italic; font-size: 14px; color: rgba(233,238,255,.6); }
.uni-legend .ur-btn.ur-leg:hover, .uni-legend .ur-btn.ur-leg:focus-visible { background: rgba(191,211,255,.08); transform: none; border: 0; outline: none; }
.uni-legend .ur-btn.ur-leg:not(.on) { color: rgba(233,238,255,.35); }
.uni-legend .ur-btn.ur-leg:not(.on) .ul-ico { color: rgba(233,238,255,.3); }
.uni-legend .ur-btn.ur-leg:not(.on) .ul-ico .u-ico { filter: none; }
.uni-legend .ur-btn.ur-leg:not(.on) .ul-l { text-decoration: line-through; text-decoration-color: rgba(233,238,255,.4); }
.uni-legend .ul-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(191,211,255,.2); }
.uni-legend .ul-tools .ur-btn { width: 100%; height: 32px; --key: 32px; border-radius: 3px; border: 1px solid rgba(191,211,255,.22); background: rgba(10,16,38,.8); box-shadow: none; color: #E9EEFF; }
.uni-legend .ul-tools .ur-btn:hover, .uni-legend .ul-tools .ur-btn:focus-visible { transform: translateY(-2px); border-color: rgba(233,238,255,.55); background: rgba(20,30,64,.9); }
.uni-legend .ul-tools .ur-glyph { font-size: 17px; }
@media (max-height: 640px) and (min-width: 761px) { .uni-legend .ur-btn.ur-leg { padding: 3px 4px; } .uni-legend .ul-l { font-size: 14px; } }
@media (max-width: 760px) {
  .uni-rail.uni-legend { left: 8px; right: 8px; bottom: 76px; width: auto; max-width: none; display: flex; align-items: center; gap: 2px; padding: 6px; overflow-x: auto; outline: 0; }
  .uni-legend .ul-h { display: none; }
  .uni-legend .ur-btn.ur-leg { flex: none; width: auto; grid-template-columns: 18px auto auto; gap: 5px; padding: 5px 8px; }
  .uni-legend .ul-l { font-size: 14px; }
  .uni-legend .ul-tools { display: flex; gap: 4px; margin: 0 0 0 6px; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid rgba(191,211,255,.2); }
  .uni-legend .ul-tools .ur-btn { width: 32px; flex: none; }
}

/* ── CH 7 · the entry page as the poster of his festival nights: centred like a film poster, « FAWDA·TV présente »,
   the title, the dates, the four counts in laurel wreaths, « Lancer la nuit »; behind it the night map already runs,
   one line after another leaving Casablanca, under a dark veil; the poster lifts away like a curtain ── */
.pal-intro.pp { display: grid; place-items: center; grid-template-columns: none; padding: 70px 20px 104px; text-align: center;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(7,5,12,.72), rgba(7,5,12,.92) 75%); transition: transform 1.1s cubic-bezier(.6,0,.2,1), opacity .9s ease .2s, visibility 1.1s; }
.pal-intro.pp > * { grid-column: auto; }
.pal:not(.is-intro) .pal-intro.pp { transform: translateY(-100%); }
.pal.is-intro .pal-map { filter: blur(1.5px) brightness(.85) saturate(1.2); transform: scale(1.03); }
.pp-poster { display: grid; justify-items: center; gap: 10px; width: min(820px, 100%); padding: 26px 28px 24px; border: 1px solid rgba(242,212,58,.35); outline: 1px solid rgba(242,212,58,.35); outline-offset: 5px; }
.pp-k { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: rgba(236,231,222,.7); }
.pp-k span { padding: 2px 8px; background: var(--pal-p); color: #0a0908; font-family: var(--f-display); font-style: normal; font-weight: 800; font-size: 13px; }
.pp-k i { font-style: normal; font-family: var(--f-ar-hand); font-size: 18px; color: var(--pal-p); }
.pp-present { margin: 6px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 17px; color: rgba(236,231,222,.75); }
.pp-title { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(54px, 8.2vw, 124px); line-height: .84; text-transform: uppercase; color: var(--pal-y); text-shadow: 0 0 40px rgba(242,212,58,.25); }
.pp-dates { display: flex; align-items: center; gap: 14px; margin: 6px 0 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); color: #ECE7DE; }
.pp-dates i { font-style: normal; color: var(--pal-p); }
.pp-where { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 17px; color: rgba(236,231,222,.75); }
.pp-laurels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 14px 0 4px; padding: 0; list-style: none; }
.pp-laurels li { position: relative; display: grid; justify-items: center; width: 132px; }
.pp-laurel { width: 132px; height: auto; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--kc) 45%, transparent)); }
.pp-laurels b { position: absolute; top: 24%; left: 0; right: 0; font-family: var(--f-display); font-weight: 900; font-size: 40px; line-height: 1; color: #F4EBDA; }
.pp-laurels span { position: absolute; top: 62%; left: 0; right: 0; font-family: var(--f-serif); font-size: 13px; font-variant: small-caps; letter-spacing: .02em; color: var(--kc); }
.pp-line { max-width: 52ch; margin: 2px 0 0; font-family: var(--f-serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; color: #ECE7DE; }

.pp-how { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: rgba(236,231,222,.5); }
@media (max-width: 760px) {
  .pal-intro.pp { place-items: start center; overflow-y: auto; padding: 64px 12px 96px; }
  .pp-poster { padding: 18px 12px; }
  .pp-laurels { gap: 0 4px; }
  .pp-laurels li, .pp-laurel { width: 108px; }
  .pp-laurels b { font-size: 32px; }
  .pp-how { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pal-intro.pp { transition: opacity .3s; } .pal:not(.is-intro) .pal-intro.pp { transform: none; } }
/* the kind's name sits under its wreath, clear of the leaves */
.pp-laurels span { position: static; margin-top: 2px; font-size: 15px; }
.pp-laurels b { top: 30%; }

/* the two doors. La Constellation: a plate engraved on the star chart, a double hairline frame with corner ticks, a
   star that turns and brightens, the words in small capitals, the count in italic. The Palmarès: the gold plate of a
   festival opening, half a laurel either side, « Ouverture » over « Lancer la nuit », the gold filling in on hover */
.sc-go { position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; margin-top: 12px; padding: 12px 26px 11px 20px;
  border: 1px solid rgba(191,211,255,.55); outline: 1px solid rgba(191,211,255,.3); outline-offset: 4px; background: rgba(8,14,34,.6); color: #E9EEFF; text-align: left; cursor: pointer;
  transition: background .3s, outline-color .3s, border-color .3s, box-shadow .3s; }
.sc-go::before, .sc-go::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: #3FE0C5; border-style: solid; }
.sc-go::before { left: -6px; top: -6px; border-width: 1px 0 0 1px; }
.sc-go::after { right: -6px; bottom: -6px; border-width: 0 1px 1px 0; }
.sc-go-star { grid-row: 1 / span 2; font-style: normal; font-size: 30px; line-height: 1; color: #3FE0C5; text-shadow: 0 0 12px rgba(63,224,197,.8); transition: transform .8s cubic-bezier(.2,.8,.2,1), color .3s; }
.sc-go-t { font-family: var(--f-serif); font-size: 22px; font-variant: small-caps; letter-spacing: .03em; line-height: 1.05; }
.sc-go-n { font-family: var(--f-serif); font-style: italic; font-size: 15px; color: rgba(233,238,255,.6); }
.sc-go:hover, .sc-go:focus-visible { background: rgba(20,32,70,.75); border-color: #E9EEFF; outline-color: rgba(233,238,255,.55); box-shadow: 0 0 30px rgba(63,224,197,.18); }
.sc-go:hover .sc-go-star, .sc-go:focus-visible .sc-go-star { transform: rotate(180deg) scale(1.15); color: #fff; }
.sc-go:focus-visible { outline-style: solid; }
.pp-go { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding: 8px 14px; border: 1px solid #D9B54A; outline: 1px solid rgba(217,181,74,.5); outline-offset: 4px;
  background: linear-gradient(180deg, rgba(242,212,58,.08), rgba(242,212,58,0)); color: var(--pal-y); cursor: pointer; transition: background .35s, color .35s, box-shadow .35s; }
.pp-go-leaf { display: block; width: 46px; overflow: hidden; }
.pp-go-l { display: block; width: 92px; height: auto; }
.pp-go-leaf.r .pp-go-l { margin-left: -46px; }
.pp-go-t { display: grid; justify-items: center; padding: 2px 6px; font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.pp-go-t small { margin-bottom: 4px; font-family: var(--f-serif); font-weight: 400; font-size: 14px; font-style: italic; text-transform: none; letter-spacing: 0; color: rgba(236,231,222,.75); }
.pp-go:hover, .pp-go:focus-visible { background: var(--pal-y); color: #0a0908; box-shadow: 0 0 40px rgba(242,212,58,.35); outline-color: #F2D43A; }
.pp-go:hover .pp-go-t small, .pp-go:focus-visible .pp-go-t small { color: rgba(10,9,8,.7); }
@media (max-width: 760px) { .sc-go-t { font-size: 19px; } .pp-go-t { font-size: 22px; } .pp-go-leaf { width: 36px; } .pp-go-l { width: 72px; } .pp-go-leaf.r .pp-go-l { margin-left: -36px; } }
/* the entry page without its cartouche: the title, the line and the door, centred on the chart */
.uni-intro.sc-chart { grid-template-rows: 1fr; }

/* IV bis · the art supplement: empty frames on the wall, each with its museum label */
#vision .jr-ca-k { margin: -8px 0 22px; text-align: center; font-style: italic; font-size: 14px; color: var(--soft); }
#vision .jr-cahier .jr-sec-dek { max-width: 62ch; margin: 0 auto 14px; text-align: center; }
#vision .jr-ca-wait { max-width: 62ch; margin: 0 auto 30px; padding: 8px 0; text-align: center; font-size: 15px; font-style: italic; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
#vision .jr-ca-wait b { font-style: normal; color: var(--ink); }
#vision .jr-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px 22px; align-items: start; }
#vision .jr-piece { margin: 0; }
#vision .jr-frame { display: block; width: 100%; aspect-ratio: 1 / 1.36; padding: 9px; background: #2A211A; border: 1px solid #120d09; cursor: zoom-in; }
#vision .jr-frame-in { position: relative; display: block; height: 100%; background: #F4EEE2;
  box-shadow: inset 0 0 0 1px rgba(30,23,16,.16); }
/* the work keeps its own proportions inside the mount, centred: the mount, not the picture, takes up the difference */
#vision .jr-frame-in img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(30,23,16,.4)); transition: transform .3s; }
#vision .jr-frame:hover img, #vision .jr-frame:focus-visible img { transform: scale(1.02); }
#vision .jr-frame:focus-visible { outline: 2px solid var(--sc); outline-offset: 3px; }
#vision .jr-cartel { display: grid; gap: 3px; margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--sc); font-size: 13px; line-height: 1.35; }
#vision .jr-cartel-n { font-size: 12px; color: var(--soft); }
#vision .jr-cartel b { font-size: 17px; line-height: 1.15; }
#vision .jr-cartel i[lang="ar"] { font-style: normal; font-family: var(--f-ar-hand); font-size: 19px; line-height: 1.4; color: var(--red); }
#vision .jr-cartel-m { color: var(--soft); }
#vision .jr-cartel-q { margin-top: 4px; font-style: italic; }
#vision .jr-cartel-tr { color: var(--soft); }
#vision .jr-cartel-tr i { font-style: normal; font-size: .85em; }
#vision .jr-ca-src { margin: 30px auto 0; max-width: 70ch; text-align: center; font-size: 13px; font-style: italic; color: var(--soft); }
@media (max-width: 1100px) { #vision .jr-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  #vision .jr-wall { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  #vision .jr-cartel { font-size: 14px; }
  #vision .jr-cartel b { font-size: 16px; }
}
#vision .jr-cahier .jr-band-n { width: 46px; height: 46px; margin-top: -6px; font-size: 13px; white-space: nowrap; } /* « IV bis » on one line, still a round seal */

/* ── CH 3 · La Chaîne: the channel read like its posts page. A menu of series on the left that follows the reading;
   a banner with his tag; each post laid out like a right-hand page of his Art Book: white paper, black type, the
   series' colour run down the edge like his yellow spray, the tag signed at the foot. ── */
.tube { grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.tb-logo b { box-shadow: none; }
.tb-logo i { font-family: var(--f-ar-hand); font-size: 22px; }
.tb-side { position: relative; z-index: 5; overflow-y: auto; scrollbar-width: none; padding: 16px 12px 130px 16px; display: grid; align-content: start; gap: 1px;
  border-right: 1px solid rgba(236,231,222,.07); }
.tb-side::-webkit-scrollbar { display: none; }
.sd-h { margin: 18px 8px 6px; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: rgba(236,231,222,.45); }
.sd { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 6px 8px; text-align: left; background: none;
  color: rgba(236,231,222,.78); border-left: 3px solid transparent; font-family: var(--f-serif); font-size: 16px; line-height: 1.15; transition: background .15s, color .15s, border-color .15s; }
.sd:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
.sd img { width: 34px; height: 34px; object-fit: cover; filter: grayscale(.5); transition: filter .15s; }
.sd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd i { font-size: 13px; color: rgba(236,231,222,.4); }
.sd:hover, .sd:focus-visible { background: rgba(236,231,222,.06); color: var(--blanc); outline: none; }
.sd:hover img, .sd.here img, .sd.on img { filter: none; }
.sd.on { background: rgba(236,231,222,.09); color: var(--blanc); }
.sd.here { border-left-color: var(--t); color: var(--blanc); background: color-mix(in srgb, var(--t) 12%, transparent); }

.tb-main { padding: 18px 28px 150px; }
/* the banner */
.ch-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 40px); max-width: 860px; margin: 0 auto; padding: clamp(26px, 5vh, 54px) 0 30px; padding: clamp(26px, 5dvh, 54px) 0 30px;
  border-bottom: 1px solid rgba(236,231,222,.12); }
.ch-tag { width: clamp(110px, 13vw, 170px); aspect-ratio: 1096 / 1000; background: #F2D43A;
  -webkit-mask: url('../assets/web/lasri-tag.png') center / contain no-repeat; mask: url('../assets/web/lasri-tag.png') center / contain no-repeat; }
.ch-name { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 6vw, 84px); line-height: .86; color: var(--blanc); }
.ch-name span { display: block; width: max-content; margin-top: 8px; font-family: var(--f-ar-hand); font-weight: 400; text-transform: none; font-size: .42em; color: #F2D43A; }
.ch-line { margin: 12px 0 10px; max-width: 54ch; font-family: var(--f-serif); font-size: 19px; line-height: 1.4; color: rgba(236,231,222,.85); }
.ch-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: rgba(236,231,222,.55); }
.ch-stats b { margin-right: 5px; font-family: var(--f-display); font-style: normal; font-weight: 800; font-size: 26px; color: var(--blanc); }
/* the feed */
.ch-feed { max-width: 760px; margin: 0 auto; padding-top: 34px; display: grid; gap: 40px; }
.po { position: relative; scroll-margin-top: 18px; padding: 26px 46px 22px 30px; background: #F3EFE7; color: #15110E; }
.po::after { content: ''; position: absolute; top: 18px; right: 14px; bottom: 60px; width: 9px; background: var(--t); } /* the spray down the edge */
.po-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.po-av { position: relative; flex: none; width: 42px; height: 42px; background: #15110E; }
.po-av::after { content: ''; position: absolute; inset: 7px; background: #F2D43A;
  -webkit-mask: url('../assets/web/lasri-tag.png') center / contain no-repeat; mask: url('../assets/web/lasri-tag.png') center / contain no-repeat; }
.po-head p { margin: 0; font-family: var(--f-serif); font-size: 16px; line-height: 1.25; }
.po-head p span { display: block; font-style: italic; font-size: 14px; color: #6b6158; }
.po-pin { margin-left: auto; font-family: var(--f-serif); font-size: 14px; color: #6b6158; border-bottom: 2px solid var(--t); }
.po-t { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 5vw, 62px); line-height: .88; letter-spacing: -.005em; }
.po-alt { margin: 6px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 17px; color: #6b6158; }
.po-text { margin: 12px 0 0; max-width: 58ch; font-family: var(--f-serif); font-size: 18px; line-height: 1.5; }
.po-text + .po-text { font-size: 16px; color: #4a423b; }
.po-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 18px 0 0; padding: 0; background: #0b0908; overflow: hidden; cursor: pointer; }
.po-video img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.po-video:hover img, .po-video:focus-visible img { transform: scale(1.02); }
.po-video:focus-visible { outline: 3px solid var(--t); outline-offset: 3px; }
.po-play { position: absolute; left: 50%; top: 45%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: #15110E; }
.po-play::after { content: ''; position: absolute; inset: 20px 18px 20px 24px; background: var(--t); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.po-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 14px; padding: 9px 12px; background: rgba(11,9,8,.86); color: var(--blanc); text-align: left; }
.po-cap b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-serif); font-weight: 500; font-size: 16px; }
.po-cap i { flex: none; font-family: var(--f-serif); font-size: 13px; color: rgba(236,231,222,.6); }
.po-video.on { cursor: default; }
.po-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.po-eps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.po-eps button { padding: 0; aspect-ratio: 16 / 9; background: #0b0908; overflow: hidden; }
.po-eps img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .15s; }
.po-eps button:hover img, .po-eps button:focus-visible img { opacity: 1; }
.po-eps button:focus-visible { outline: 2px solid var(--t); outline-offset: 1px; }
.po-more { display: grid; place-items: center; color: var(--t); font-family: var(--f-display); font-weight: 800; font-size: 22px; }
.po-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 54px 0 0; padding-top: 10px; border-top: 1px solid rgba(21,17,14,.16);
  font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #6b6158; }
.po-foot button { background: none; padding: 0; font-family: var(--f-serif); font-style: normal; font-size: 16px; color: #15110E; border-bottom: 1px solid #15110E; }
.po-foot button:hover, .po-foot button:focus-visible { border-bottom-width: 2px; outline: none; }
.po-closed { margin: 10px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 13px; color: #8a8077; }
.po-sign { position: absolute; right: 16px; bottom: 12px; width: 52px; aspect-ratio: 1096 / 1000; background: #15110E;
  -webkit-mask: url('../assets/web/lasri-tag.png') center / contain no-repeat; mask: url('../assets/web/lasri-tag.png') center / contain no-repeat; }
.ch-end { margin: 6px 0 0; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 16px; color: rgba(236,231,222,.55); }
.ch-end a { color: var(--blanc); }
@media (max-width: 760px) {
  .tube { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .tb-side { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; overflow-y: hidden; padding: 6px 12px 8px; border-right: 0; border-bottom: 1px solid rgba(236,231,222,.07); }
  .sd-h { display: none; }
  .sd { border-left: 0; border-bottom: 3px solid transparent; }
  .sd.here { border-bottom-color: var(--t); }
  .tb-main { padding: 10px 12px 130px; }
  .ch-banner { grid-template-columns: 1fr; justify-items: start; gap: 12px; padding-top: 20px; }
  .ch-tag { width: 92px; }
  .ch-line { font-size: 17px; }
  .ch-feed { gap: 26px; padding-top: 22px; }
  .po { padding: 18px 26px 18px 16px; }
  .po::after { right: 8px; width: 6px; }
  .po-pin { display: none; }
  .po-text { font-size: 17px; }
  .po-eps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .po-eps button:nth-child(n+4):not(.po-more) { display: none; }
  .po-sign { width: 40px; }
}

/* CH 3 · the other pages in the posts' style: a series' playlist is one long Art Book page; the lists and the search
   are paper tiles on the dark, each with its series' colour down the edge; the player hangs its notes on paper. */

.pg-head { max-width: 1100px; margin: 0 auto 26px; padding-bottom: 18px; border-bottom: 1px solid rgba(236,231,222,.12); }
.pg-k { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 16px; color: #F2D43A; }
.pg-t { margin: 4px 0 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 5.5vw, 76px); line-height: .88; color: var(--blanc); }
.pg-note { margin: 10px 0 0; max-width: 60ch; font-family: var(--f-serif); font-size: 18px; line-height: 1.45; color: rgba(236,231,222,.82); }
.pg-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-top: 12px;
  font-family: var(--f-serif); font-style: italic; font-size: 15px; color: rgba(236,231,222,.55); }
.pg-sort { font-family: var(--f-serif); font-style: italic; font-size: 15px; color: rgba(236,231,222,.6); }
.pg-sort select { margin-left: 6px; padding: 4px 8px; background: #F3EFE7; color: #15110E; border: 0; font-family: var(--f-serif); font-style: normal; font-size: 15px; }
.pg-empty { max-width: 1100px; margin: 20px auto; font-family: var(--f-serif); font-style: italic; font-size: 18px; color: rgba(236,231,222,.7); }
/* the paper tiles */
.vt-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.vt { position: relative; display: grid; align-content: start; gap: 6px; padding: 8px 18px 12px 8px; background: #F3EFE7; color: #15110E; text-align: left; transition: transform .15s; }
.vt::after { content: ''; position: absolute; top: 8px; right: 6px; bottom: 8px; width: 5px; background: var(--t); }
.vt:hover, .vt:focus-visible { transform: translateY(-2px); outline: none; }
.vt:focus-visible { box-shadow: inset 0 0 0 2px #15110E; }
.vt-img { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0908; overflow: hidden; }
.vt-img img { width: 100%; height: 100%; object-fit: cover; }
.vt-img b { position: absolute; right: 0; bottom: 0; padding: 2px 6px; background: #15110E; color: var(--blanc); font-family: var(--f-serif); font-weight: 400; font-size: 13px; }
.vt-img em { position: absolute; left: 0; top: 0; padding: 2px 7px; background: var(--t); color: #15110E; font-family: var(--f-serif); font-size: 13px; }
.vt-t { font-family: var(--f-serif); font-size: 17px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-m { font-family: var(--f-serif); font-style: italic; font-size: 14px; color: #6b6158; }
/* series found by the search */
.sh-list { max-width: 1100px; margin: 0 auto 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sh { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: #F3EFE7; color: #15110E; text-align: left; border-left: 6px solid var(--t); }
.sh img { width: 54px; height: 54px; object-fit: cover; }
.sh b { display: block; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: .95; }
.sh i { display: block; margin-top: 2px; font-family: var(--f-serif); font-size: 15px; color: #4a423b; }
.sh em { font-family: var(--f-serif); font-size: 14px; color: #6b6158; }
.sh:hover, .sh:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
/* a series' playlist */
.pl, .pl-nav  { max-width: 860px; margin-left: auto; margin-right: auto; }

.pl { padding-bottom: 48px; }
.pl-k { margin: 0 0 10px; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #6b6158; }
.pl-brief { display: grid; gap: 10px; margin: 18px 0 0; max-width: 62ch; }
.pl-brief div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 14px; padding-top: 10px; border-top: 1px solid rgba(21,17,14,.14); }
.pl-brief dt { font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #6b6158; }
.pl-brief dd { margin: 0; font-family: var(--f-serif); font-size: 17px; line-height: 1.45; }

.pl-motifs  { margin: 12px 0 0; font-family: var(--f-serif); font-size: 15px; color: #4a423b; }

.pl-motifs span { margin-right: 8px; font-style: italic; }

.pl-list-h { margin: 28px 0 8px; padding-bottom: 8px; border-bottom: 2px solid #15110E; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #6b6158; }
.pl-list { list-style: none; margin: 0; padding: 0; }
.pl-row { width: 100%; display: grid; grid-template-columns: 34px 150px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 0; text-align: left; background: none; color: #15110E;
  border-bottom: 1px solid rgba(21,17,14,.1); }
.pl-row i { font-family: var(--f-display); font-style: normal; font-weight: 800; font-size: 22px; color: rgba(21,17,14,.4); text-align: right; }
.pl-row.seen i { color: var(--t); }
.pl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0908; overflow: hidden; }
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-thumb b { position: absolute; right: 0; bottom: 0; padding: 1px 5px; background: #15110E; color: var(--blanc); font-family: var(--f-serif); font-weight: 400; font-size: 12px; }
.pl-row-t { font-family: var(--f-serif); font-size: 17px; line-height: 1.25; }
.pl-row-m { font-family: var(--f-serif); font-style: italic; font-size: 14px; color: #6b6158; white-space: nowrap; }
.pl-row:hover, .pl-row:focus-visible { background: color-mix(in srgb, var(--t) 14%, transparent); outline: none; }
.pl-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.pl-nav button { display: grid; gap: 2px; padding: 10px 16px; background: none; color: var(--blanc); text-align: left; border-bottom: 3px solid var(--t); }
.pl-nav button.nx { text-align: right; }
.pl-nav span { font-family: var(--f-serif); font-style: italic; font-size: 14px; color: rgba(236,231,222,.55); }
.pl-nav b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 26px; }
.pl-nav button:hover, .pl-nav button:focus-visible { background: rgba(236,231,222,.06); outline: none; }

/* the player: the film on the dark, its notes on paper, the queue as a numbered list */
.tb-watch { background: rgba(8,7,6,.97); }
.tw-player { border-radius: 0; box-shadow: none; outline: 1px solid rgba(236,231,222,.12); }
.tw-step { border-radius: 0; width: 44px; height: 44px; background: #F3EFE7; color: #15110E; }
.tw-step:hover:not(:disabled) { background: var(--t); color: #15110E; }
.tw-pos { font-family: var(--f-serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; }
.tw-info { position: relative; margin-top: 16px; padding: 20px 70px 22px 24px; background: #F3EFE7; color: #15110E; border-top: 6px solid var(--t); }
.tw-title { font-family: var(--f-serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.tw-meta { margin-top: 6px; font-family: var(--f-serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: #6b6158; }
.tw-desc { display: grid; gap: 12px; margin-top: 14px; padding: 0; background: none; border-radius: 0; justify-items: stretch; }
.tw-film, .tw-text { margin: 0; font-family: var(--f-serif); font-size: 17px; line-height: 1.45; color: #15110E; text-transform: none; letter-spacing: 0; }
.tw-who { display: grid; gap: 8px; margin: 0; }
.tw-who div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid rgba(21,17,14,.14); }
.tw-who dt { font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #6b6158; }
.tw-who dd { margin: 0; font-family: var(--f-serif); font-size: 17px; line-height: 1.4; }
.tw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 0; }
.tw-pl { padding: 8px 14px; background: #15110E; color: var(--blanc); border-radius: 0; font-family: var(--f-serif); font-size: 15px; letter-spacing: 0; text-transform: none; }
.tw-pl:hover, .tw-pl:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
.tw-yt { font-family: var(--f-serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: #15110E; border-bottom: 1px solid #15110E; }
.tw-info .po-sign { right: 18px; bottom: 16px; }
.tw-next { border-radius: 0; background: #F3EFE7; border: 0; color: #15110E; }
.tw-next-h { padding: 14px 16px; background: #F3EFE7; border-bottom: 2px solid #15110E; font-family: var(--f-serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: #6b6158; }
.tw-next ol { padding: 4px 8px 10px; }
.tw-row { border-radius: 0; color: #15110E; grid-template-columns: 28px 112px minmax(0, 1fr); border-bottom: 1px solid rgba(21,17,14,.1); }
.tw-row i { font-family: var(--f-display); font-weight: 800; font-size: 18px; color: rgba(21,17,14,.4); }
.tw-row img { border-radius: 0; }
.tw-row span { font-family: var(--f-serif); font-size: 15px; }
.tw-row:hover, .tw-row:focus-visible { background: rgba(21,17,14,.06); }
.tw-row.now { background: color-mix(in srgb, var(--t) 26%, transparent); }
.tw-row.now i { color: #15110E; }
.tw-close { border-radius: 0; border: 1px solid rgba(236,231,222,.3); font-family: var(--f-serif); font-size: 16px; letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) {
  .vt-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vt { padding: 6px 12px 10px 6px; }
  .vt-t { font-size: 15px; }
  .pl-brief div, .tw-who div { grid-template-columns: 1fr; gap: 2px; }
  .pl-row { grid-template-columns: 26px 96px minmax(0, 1fr); }
  .pl-row-m { grid-column: 3; white-space: normal; }
  .pl-nav b { font-size: 20px; }
  .tw-info { padding: 16px 50px 18px 16px; }
}

/* a series' playlist opens like a spread of his Art Book: the work on the left (its most-watched video, which starts
   the series), the page of text on the right */
.pl-spread { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 3.4vw, 44px); align-items: start; }
.pl-cover { position: relative; display: block; aspect-ratio: 4 / 5; padding: 0; background: #0b0908; overflow: hidden; outline: 1px solid rgba(21,17,14,.25); outline-offset: 6px; }
/* YouTube's large thumbnail is 4:3 with black bands above and below the 16:9 frame: drawn a third taller, they fall outside */
.pl-cover img { position: absolute; left: 50%; top: 50%; height: 133.4%; width: auto; max-width: none; transform: translate(-50%, -50%); transition: transform .5s; }
.pl-cover:hover img, .pl-cover:focus-visible img { transform: translate(-50%, -50%) scale(1.03); }
.pl-cover:focus-visible { outline: 3px solid var(--t); }
.pl-cover .po-play { top: 46%; }
.pl-cover-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 12px 14px; background: #15110E; color: var(--blanc); text-align: left;
  font-family: var(--f-serif); font-size: 18px; border-top: 4px solid var(--t); }
.pl-cover-cap i { font-size: 14px; color: rgba(236,231,222,.6); }
.pl-info .pl-k { margin-bottom: 6px; }
.pl-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #6b6158; }
.pl-stats b { margin-right: 4px; font-family: var(--f-display); font-style: normal; font-weight: 800; font-size: 26px; color: #15110E; }
.pl-info .pl-brief { margin-top: 18px; }
.pl-info .pl-brief div { grid-template-columns: 1fr; gap: 2px; padding-top: 9px; }
.pl-info .pl-brief dt { font-size: 14px; }
.pl-resume { display: grid; gap: 2px; width: 100%; margin-top: 18px; padding: 10px 14px; background: none; color: #15110E; text-align: left; border-left: 4px solid var(--t);
  background: color-mix(in srgb, var(--t) 12%, transparent); }
.pl-resume span { font-family: var(--f-serif); font-style: italic; font-size: 14px; color: #6b6158; }
.pl-resume b { font-family: var(--f-serif); font-weight: 500; font-size: 17px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-resume:hover, .pl-resume:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
@media (max-width: 760px) {
  .pl-spread { grid-template-columns: 1fr; }
  .pl-cover { aspect-ratio: 16 / 10; }
}

/* ── CH 7 · the night map annotated by hand: marker lines, circled cities, names written in, a programme on paper ── */
#palmares .pal { background: #0d0a12; }
#palmares .pal-sphere { fill: #120e18; stroke: rgba(236,231,222,.08); }
#palmares .pal-grat { stroke: rgba(236,231,222,.035); }
#palmares .pal-land { fill: #F2D43A; fill-opacity: .035; stroke: rgba(236,231,222,.18); stroke-linejoin: round; }
#palmares .pal-land.lit { stroke: rgba(242,212,58,.45); }
#palmares .pal-land.home { fill: #FF4FA0; fill-opacity: .3 !important; stroke: #FF4FA0; }
#palmares .pal-home { fill: #ECE7DE; filter: none; animation: none; }
#palmares .pal-home-t { fill: #ECE7DE; font-family: var(--f-hand); font-weight: 600; letter-spacing: 0; text-transform: none; stroke: #0d0a12; stroke-width: .25em; paint-order: stroke; }
#palmares .pal-arc { opacity: .5; filter: none; stroke-linecap: round; }
#palmares .pal-arc.now { opacity: 1; }
#palmares .pal-dot .pal-hit { fill: transparent; }
#palmares .pal-pt { stroke: #0d0a12; stroke-width: .6; }
#palmares .pal-ring { fill: none; stroke: var(--kc); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.6,.1,.3,1); }
#palmares .pal-dot.prize .pal-ring, #palmares .pal-dot.now .pal-ring, #palmares .pal-dot.picked .pal-ring, #palmares .pal-dot:hover .pal-ring { stroke-dashoffset: 0; }
#palmares .pal-dot.picked .pal-ring { stroke: #ECE7DE; }
#palmares .pal-name { fill: rgba(236,231,222,.82); font-family: var(--f-hand); font-weight: 500; letter-spacing: 0; text-transform: none; stroke: #0d0a12; stroke-width: .28em; paint-order: stroke; }
#palmares .pal-dot.prize .pal-name { fill: #F2D43A; font-weight: 600; }

/* the tag, written */
#palmares .pal-tag { position: absolute; top: 66px; left: 22px; z-index: 6; margin: 0; font-family: var(--f-hand); font-size: 26px; font-weight: 600; color: #ECE7DE; transform: rotate(-2deg); }
#palmares .pal-tag b { margin-right: 6px; padding: 0 6px; background: #FF4FA0; color: #0d0a12; font-family: var(--f-display); font-size: 15px; vertical-align: 4px; }

/* the legend: a card of paper pinned at the left, the kinds ticked or struck out */
#palmares .pal-legend { position: absolute; left: 18px; top: 50%; transform: translateY(-50%) rotate(-1deg); z-index: 8; display: grid; gap: 2px; width: 196px;
  padding: 14px 16px 16px; background: #F3EFE7; color: #15110E; border: 0; box-shadow: none; }
#palmares .pal-legend::before { content: ''; position: absolute; top: -10px; left: calc(50% - 38px); width: 76px; height: 20px; background: rgba(243,236,214,.55); transform: rotate(3deg); }
#palmares .lg-h { margin: 8px 0 2px; font-family: var(--f-hand); font-size: 20px; font-weight: 600; color: #6b6158; line-height: 1; }
#palmares .lg-h:first-child { margin-top: 0; }
#palmares .pal-legend :where(.ur-btn) { all: unset; cursor: pointer; }
#palmares .lg-k { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0; font-family: var(--f-serif); font-size: 16px; color: #15110E; }
#palmares .lg-mark { width: 24px; height: 24px; overflow: visible; }
#palmares .lg-mark circle { fill: var(--kc); stroke: #15110E; stroke-width: .8; }
#palmares .lg-ring { fill: none; stroke: #15110E; stroke-width: 6.5; }
#palmares .lg-l { position: relative; }
#palmares .lg-x { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#palmares .lg-x path { fill: none; stroke: #E8352B; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s; }
#palmares .lg-k:not(.on) .lg-x path { stroke-dashoffset: 0; }
#palmares .lg-k:not(.on) { color: #8a8077; }
#palmares .lg-k:not(.on) .lg-mark circle { fill: none; stroke: #8a8077; }
#palmares .lg-n { font-family: var(--f-hand); font-style: normal; font-size: 20px; font-weight: 600; color: #15110E; }
#palmares .lg-k:hover .lg-l, #palmares .lg-k:focus-visible .lg-l { text-decoration: underline; text-underline-offset: 3px; }
#palmares .lg-views { margin: 0; font-family: var(--f-serif); font-size: 15px; color: #8a8077; line-height: 1.6; }
#palmares .lg-views .ur-btn, #palmares .lg-what { font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #15110E; border-bottom: 1px solid rgba(21,17,14,.35); }
#palmares .lg-views .ur-btn:hover, #palmares .lg-views .ur-btn:focus-visible, #palmares .lg-what:hover, #palmares .lg-what:focus-visible { border-bottom-color: #15110E; border-bottom-width: 2px; }
#palmares .lg-zoom { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; font-family: var(--f-hand); font-size: 18px; color: #6b6158; }
#palmares .lg-zoom .ur-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid #15110E; font-family: var(--f-serif); font-size: 20px; color: #15110E; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; }
#palmares .lg-zoom .ur-btn:hover, #palmares .lg-zoom .ur-btn:focus-visible { background: #15110E; color: #F3EFE7; }
#palmares .lg-what { justify-self: start; margin-top: 6px; }

/* the list: the programme, on paper */
#palmares .pal-panel { background: #F3EFE7; color: #15110E; border: 0; box-shadow: none; padding: 18px 20px 24px; transform: rotate(.6deg); }
#palmares .pal.panel-off .pal-panel { transform: translateX(calc(100% + 40px)) rotate(.6deg); }
#palmares .pal-p-head { display: grid; gap: 2px; margin: 0 0 6px; padding: 4px 0 10px; background: #F3EFE7; border-bottom: 2px solid #15110E; color: #15110E; }
#palmares .pal-p-head b { color: #15110E; }
#palmares .ph-k { font-family: var(--f-hand); font-size: 20px; font-weight: 600; color: #6b6158; line-height: 1; }
#palmares .pal-p-head b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 40px; line-height: .9; letter-spacing: 0; }
#palmares .pal-p-head i { font-family: var(--f-serif); font-size: 15px; color: #6b6158; }
#palmares .pl-yr { margin: 16px 0 2px; font-family: var(--f-hand); font-size: 28px; font-weight: 600; color: #15110E; line-height: 1; transform: rotate(-2deg); transform-origin: left; }
#palmares .pl-row { display: block; padding: 10px 0 12px; border-bottom: 1px dashed rgba(21,17,14,.22); }
#palmares .pl-kind { margin: 0 0 2px; font-family: var(--f-serif); font-style: italic; font-size: 14px; color: #6b6158; }
#palmares .pl-what { margin: 0; font-family: var(--f-serif); font-size: 19px; line-height: 1.25; color: #15110E; }
#palmares .pl-what .hand-highlight .hand-svg path { opacity: .55; }
#palmares .pl-who { font-style: italic; color: #6b6158; }
#palmares .pl-where { margin: 4px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 15px; color: #4a423b; letter-spacing: 0; text-transform: none; }
#palmares .pl-city { color: #15110E; font-style: normal; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: color-mix(in srgb, var(--kc) 80%, #15110E); text-underline-offset: 3px; }
#palmares .pl-city:hover, #palmares .pl-city:focus-visible { text-decoration-style: solid; outline: none; }
#palmares .pl-src { display: inline; font-size: 13px; color: #8a8077; margin: 0 0 0 4px; }
#palmares .pl-work { margin-top: 4px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 17px; color: #15110E; letter-spacing: .01em; }
#palmares button.pl-work:hover, #palmares button.pl-work:focus-visible { text-decoration: underline; outline: none; }
#palmares .pl-work span { color: var(--kc); }
#palmares .pl-empty { font-family: var(--f-hand); font-size: 22px; color: #6b6158; }
#palmares .pal-toggle { padding: 6px 12px; background: #F3EFE7; color: #15110E; font-family: var(--f-hand); font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; transform: rotate(-2deg); }
#palmares .pal-toggle:hover, #palmares .pal-toggle:focus-visible { background: #F2D43A; }

/* the years, written by hand; the year shown circled, the years gone by ticked off */
#palmares .pal-time { gap: 12px; }
#palmares .pal-play { display: grid; place-items: center; width: 44px; height: 44px; border: 0; color: #F2D43A; background: none; }
#palmares .pal-play svg { width: 34px; height: 34px; overflow: visible; }
#palmares .pal-play path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#palmares .pal-play:hover, #palmares .pal-play:focus-visible { color: #ECE7DE; outline: none; }
#palmares .pal-years { align-items: center; gap: 0 2px; padding: 10px 6px; background: none; border: 0; box-shadow: none; overflow: visible; flex-wrap: wrap; }
#palmares .pal-years button { position: relative; padding: 4px 7px; border: 0; font-family: var(--f-hand); font-size: 21px; font-weight: 500; line-height: 1; color: rgba(236,231,222,.6); letter-spacing: 0; text-transform: none; }
#palmares .pal-years button:hover { color: #ECE7DE; }
#palmares .pal-years button.past { color: rgba(236,231,222,.32); text-decoration: line-through; text-decoration-color: rgba(242,212,58,.6); text-decoration-thickness: 1.5px; }
#palmares .pal-years button.on { color: #F2D43A; font-weight: 600; background: none; box-shadow: none; }
#palmares .pal-years button:hover { background: none; }
#palmares .pal-years .pal-all { font-family: var(--f-hand); font-style: normal; font-size: 21px; }
#palmares .yr-ring { position: absolute; inset: -6px -4px; width: calc(100% + 8px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
#palmares .yr-ring path { fill: none; stroke: #FF4FA0; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.6,.1,.3,1); }
#palmares .pal-years button.on .yr-ring path { stroke-dashoffset: 0; }
#palmares .pal-year { color: #F2D43A; -webkit-text-stroke: 0; text-shadow: none; font-size: clamp(46px, 6vw, 96px); transform: rotate(-2deg); }

@media (max-width: 760px) {
  #palmares .pal-legend { top: 100px; bottom: auto; left: 10px; transform: rotate(-1deg); width: auto; max-width: calc(100vw - 20px); display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px; }
  #palmares .pal-legend .lg-h, #palmares .lg-views, #palmares .lg-what { display: none; }
  #palmares .lg-k { grid-template-columns: 20px auto auto; font-size: 14px; }
  #palmares .lg-zoom { margin: 0; }
  #palmares .pal-years button { font-size: 18px; padding: 4px 5px; }
}
/* a mark not yet drawn is hidden outright: a zero-length dash with a round end would still leave a dot */
#palmares .lg-k.on .lg-x, #palmares .pal-years button:not(.on) .yr-ring { opacity: 0; }
#palmares .pal-dot:not(.prize):not(.now):not(.picked):not(:hover) .pal-ring { opacity: 0; }

/* CH 7 · the controls, plainer: the list and the legend each shown or hidden like a box ticked on a form, « Carte
   seule » for both; one bar at the foot for the night: play, skip to all of it, the years */
#palmares .pal-shows { position: absolute; z-index: 9; top: 66px; right: calc(min(380px, calc(100vw - 32px)) + 30px); display: flex; gap: 6px; transition: right .5s var(--ease-cut); }
#palmares .pal.panel-off .pal-shows { right: 18px; }
#palmares .pal-shows .pal-toggle { position: static; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1.5px solid #F3EFE7; border-radius: 0;
  background: #F3EFE7; color: #15110E; font-family: var(--f-serif); font-size: 15px; font-weight: 400; transform: none; }
#palmares .pal-shows .pal-toggle i { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid currentColor; font-style: normal; font-size: 12px; line-height: 1; }
#palmares .pal-shows .pal-toggle.off { background: rgba(13,10,18,.85); color: #ECE7DE; border-color: rgba(236,231,222,.5); }
#palmares .pal-shows .pal-toggle.off i { color: transparent; border-color: rgba(236,231,222,.7); }
#palmares .pal-shows .pal-bare { padding-left: 12px; background: rgba(13,10,18,.85); color: #ECE7DE; border-color: rgba(236,231,222,.5); font-style: italic; }
#palmares .pal-shows .pal-toggle:hover, #palmares .pal-shows .pal-toggle:focus-visible { border-color: #F2D43A; outline: none; transform: none; }
#palmares .pal-legend { transition: transform .5s var(--ease-cut), opacity .4s; }
#palmares .pal.legend-off .pal-legend { transform: translate(calc(-100% - 40px), -50%); opacity: 0; pointer-events: none; }
#palmares .pal-time { left: 18px; right: calc(min(380px, calc(100vw - 32px)) + 30px); bottom: 24px; flex-wrap: wrap; padding: 8px 14px; background: rgba(13,10,18,.88);
  border: 1px solid rgba(236,231,222,.14); transition: right .5s var(--ease-cut); }
#palmares .pal.panel-off .pal-time { right: 18px; }
#palmares .pal-skip { flex: none; padding: 9px 14px; background: #F2D43A; color: #15110E; font-family: var(--f-serif); font-size: 16px; }
#palmares .pal-skip:hover, #palmares .pal-skip:focus-visible { background: #ECE7DE; outline: none; }
#palmares .pal-years { flex: 1 1 300px; }
#palmares .pal-year { font-size: clamp(40px, 4.4vw, 70px); }
@media (max-width: 760px) {
  #palmares .pal-shows { top: 96px; left: 10px; right: 10px; flex-wrap: wrap; }
  #palmares .pal.panel-off .pal-shows { right: 10px; }
  #palmares .pal-shows .pal-toggle { font-size: 14px; padding: 5px 9px 5px 6px; }
  #palmares .pal-legend { top: 140px; }
  #palmares .pal.legend-off .pal-legend { transform: translateY(-20px); }
  #palmares .pal-time { left: 8px; right: 8px; bottom: 92px; padding: 6px 8px; gap: 6px; }
  #palmares .pal.panel-off .pal-time { right: 8px; }
  #palmares .pal-skip { font-size: 14px; padding: 7px 10px; }
}
/* the night never scrolls: a focused control near an edge must not pull the whole map up */
#palmares .pal { overflow: clip; }
#palmares .pal-years { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 12px 6px; }
#palmares .pal-years::-webkit-scrollbar { display: none; }
#palmares .pal-years button { flex: none; font-size: 19px; padding: 4px 5px; }

/* ── phones: the switched-off set is not a dead black box. His shows linger faintly in the glass, like an image burnt
   into an old tube (« rémanence »), and a note in pen says what to do ── */
@media (max-width: 760px) {
  .tv-off { background:
      linear-gradient(125deg, rgba(255,255,255,.09), transparent 38%),
      radial-gradient(ellipse at 50% 45%, rgba(5,5,6,.35), rgba(5,5,6,.92) 75%),
      url("../assets/tv/mina.jpg") 0 0 / 34% 50% no-repeat,
      url("../assets/tv/os.jpg") 50% 0 / 34% 50% no-repeat,
      url("../assets/tv/kenza.jpg") 100% 0 / 34% 50% no-repeat,
      url("../assets/tv/nayda.jpg") 0 100% / 34% 50% no-repeat,
      url("../assets/tv/derb.webp") 50% 100% / 34% 50% no-repeat,
      url("../assets/tv/fok.webp") 100% 100% / 34% 50% no-repeat,
      #050506; }
  .tv-off::before { background: rgba(5,5,6,.55); backdrop-filter: none; mix-blend-mode: normal; }
  .tv-off::after { content: none; }
  #tele.is-off .tv-off::after { content: 'image rémanente · touchez pour allumer'; position: absolute; left: 0; right: 0; top: auto; bottom: 14%; height: auto;
    background: none; box-shadow: none; transform: rotate(-3deg); opacity: .85; animation: none;
    font: 500 19px/1 var(--f-hand); color: #f4ede2; text-align: center; }
}
/* phones: the list is a tall sheet between the toggles and the night's bar, read and scrolled like a programme */
@media (max-width: 760px) {
  #palmares .pal-panel { top: 128px; bottom: 132px; height: auto; left: 10px; right: 10px; width: auto; padding: 14px 16px 18px; transform: none; }
  #palmares .pal.panel-off .pal-panel { transform: translateY(calc(100% + 160px)); }
  #palmares .pal-legend { z-index: 10; }
}
/* phones: on a show's page the way in (episodes, watch, sources) comes right under its title, not at the bottom of the scroll */
@media (max-width: 760px) {
  .is-show .s-info { display: flex; flex-direction: column; }
  .is-show .s-info > * { order: 2; }
  .is-show .s-head { order: 0; }
  .is-show .s-act { order: 1; margin: 6px 0 14px; }
  .is-show .s-btn { padding: 11px 14px; font-size: 11px; }
}
.tvm-now { display: none; }
@media (max-width: 760px) {
  .tvm.is-play .tvm-now { position: absolute; left: 14px; right: 14px; top: 16px; display: grid; gap: 6px; pointer-events: none; }
  .tvm-now b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: .9; color: #f4ede2; }
  .tvm-now span { font-family: var(--f-serif); font-style: italic; font-size: 17px; line-height: 1.3; color: rgba(244,237,226,.75); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tvm-keys .k-next { margin-left: auto; padding: 6px 10px; background: var(--osd-y, #F2D43A); color: #0b0a08; font: inherit; font-weight: 700; }
}
/* phones: the player keeps the picture's own shape in the middle of the tall screen, so YouTube's controls stay on the
   picture and the band above is ours (what is playing) */
@media (max-width: 760px) {
  .tv-player iframe { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); }
}
/* phones: the shelves fade out under the site's name at the top, and end above the remote at the bottom */
@media (max-width: 760px) {
  #ecrits .lib { padding-bottom: 120px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 80px), transparent 100%); }
}

/* phones · Le Salon's header, cleaner: the kicker and the Arabic without letter-spacing (it would break the joined
   letters), the title without its offset shadow, and the figures as a row of large numbers over italic words, the
   channels on their own line · instead of three lines of typewriter text */
@media (max-width: 760px) {
  .tele-intro .ti-k, .tele-intro .ti-k b { letter-spacing: 0; }
  .tele-intro .ti-k { font-family: var(--f-ar-display); font-size: 16px; }
  .tele-intro .ti-k b { font-family: var(--f-display); font-size: 13px; }
  .tele-intro .ti-title { text-shadow: none; font-size: clamp(44px, 13vw, 60px); margin: 6px 0 10px; }
  .tele-intro .ti-line { font-size: 17px; line-height: 1.35; max-width: 34ch; margin-inline: auto; }
  .tele-intro .ti-listing { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 12px;
    font-family: var(--f-serif); font-style: italic; font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(244,232,210,.75); }
  .tele-intro .ti-listing > i, .tele-intro .tl-tape { display: none; }
  .tele-intro .ti-listing > span { display: grid; justify-items: center; line-height: 1.15; }
  .tele-intro .ti-listing > span b { font: 900 26px/1 var(--f-display); font-style: normal; color: #F2D43A; }
  .tele-intro .ti-listing > span:last-child { flex-basis: 100%; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 6px; }
  .tele-intro .ti-listing > span:last-child b { font-size: 18px; color: #f4ede2; }
  .tele-intro .ti-how { display: none; }
}
@media (max-width: 760px) {
  .tele-intro .ti-title { font-size: clamp(40px, 11.5vw, 52px); margin: 4px 0 8px; }
  .tele-intro .ti-line { font-size: 16px; }
  .tele-intro .ti-listing { gap: 2px 14px; margin-top: 8px; font-size: 12px; }
  .tele-intro .ti-listing > span b { font-size: 21px; }
  .tele-intro .ti-listing > span:last-child b { font-size: 15px; }
}
/* on a phone the header sits in the page's flow, not nudged down over the set (the desktop offset made it overlap):
   the set always starts just after the last line, however many lines the figures take */
@media (max-width: 760px) { #tele .tele-intro { top: 0; margin-bottom: 18px; } }

/* ── phones · the Palmarès controls: one tab bar under the title (Carte · Liste · Légende, one open at a time), and
   the night's bar of years down at the foot, where nothing else sits now that the remote has gone ── */
@media (max-width: 760px) {
  #palmares .pal-shows { top: 98px; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    background: rgba(13,10,18,.88); border: 1.5px solid rgba(243,239,231,.35); }
  #palmares .pal.panel-off .pal-shows { right: 10px; }
  #palmares .pal-shows .pal-toggle, #palmares .pal-shows .pal-toggle.off, #palmares .pal-shows .pal-bare {
    justify-content: center; gap: 0; min-height: 40px; padding: 6px 4px; border: 0; border-left: 1px solid rgba(243,239,231,.2);
    background: transparent; color: #ECE7DE; font: italic 16px var(--f-serif); }
  #palmares .pal-shows .pal-toggle:first-child { border-left: 0; }
  #palmares .pal-shows .pal-toggle i, #palmares .pal-shows .pt-long { display: none; }
  #palmares .pal-shows .pal-toggle:not(.off):not(.pal-bare), #palmares .pal-shows .pal-bare.on { background: #F3EFE7; color: #15110E; font-style: normal; font-weight: 500; }
  #palmares .pal-panel { top: 148px; }
  #palmares .pal-legend { top: 148px; }
  #palmares .pal-time { bottom: max(10px, env(safe-area-inset-bottom)); }
  body[data-ch="7"] .pn-next { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 74px); }
}
@media (max-width: 760px) { #palmares .pal-shows .pal-toggle > span { text-transform: capitalize; } }

/* ── phones · no scrollbar anywhere: they take width from the page and push centred things aside ── */
@media (max-width: 760px) {
  body * { scrollbar-width: none; }
  body *::-webkit-scrollbar { display: none; }

  /* Écrits: the shelves' filters, centred */
  #ecrits .lib-tools { justify-content: center; }

  /* Palmarès: the poster clear of the name and the programme stub */
  .pal-intro.pp { padding-top: 84px; }

  /* Palmarès: the night opens on the map. Three flat tabs under the stub, a line under the one that is open; the list or
     the legend then fills the space between the tabs and the years, without travelling across the screen */
  #palmares .pal-tag { display: none; }
  #palmares .pal-shows, #palmares .pal.panel-off .pal-shows { top: 56px; left: 0; right: 0; gap: 0; background: #0d0a12; border: 0; border-bottom: 1px solid rgba(236,231,222,.16); transition: none; }
  #palmares .pal-shows .pal-toggle, #palmares .pal-shows .pal-toggle.off, #palmares .pal-shows .pal-bare,
  #palmares .pal-shows .pal-toggle:not(.off):not(.pal-bare), #palmares .pal-shows .pal-bare.on {
    position: relative; inset: auto; min-height: 44px; padding: 0 4px; border: 0; background: none; box-shadow: none; transform: none; color: rgba(236,231,222,.6); font: italic 17px var(--f-serif); }
  #palmares .pal-shows .pal-toggle:not(.off):not(.pal-bare), #palmares .pal-shows .pal-bare.on { color: #F2D43A; font-style: normal; font-weight: 500; }
  #palmares .pal-shows .pal-toggle:not(.off):not(.pal-bare)::after, #palmares .pal-shows .pal-bare.on::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; background: #F2D43A; }
  #palmares .pal-panel, #palmares .pal.panel-off .pal-panel, #palmares .pal-legend, #palmares .pal.legend-off .pal-legend {
    top: 101px; left: 0; right: 0; bottom: auto; width: auto; max-width: none; transform: none; box-shadow: none; transition: opacity .15s, visibility .15s; }
  #palmares .pal-panel, #palmares .pal.panel-off .pal-panel { bottom: var(--pal-foot); height: auto; padding: 12px 18px 20px; }
  #palmares .pal.panel-off .pal-panel, #palmares .pal.legend-off .pal-legend { opacity: 0; visibility: hidden; pointer-events: none; }
  #palmares .pal-legend, #palmares .pal.legend-off .pal-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 14px 18px 16px; background: #F3EFE7; }
  #palmares .pal-legend::before { display: none; }
  #palmares .lg-zoom { grid-column: 1 / -1; justify-content: center; margin: 2px 0 0; }
  #palmares .lg-zoom .ur-btn { width: 44px; height: 44px; }

  /* Palmarès: the foot of the screen, solid, in two lines: pause, the year and « tout voir »; then every year */
  #palmares .pal { --pal-foot: calc(106px + env(safe-area-inset-bottom)); }
  #palmares .pal-time, #palmares .pal.panel-off .pal-time { left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 44px auto minmax(0, 1fr); align-items: center; gap: 0 8px;
    height: var(--pal-foot); padding: 4px 10px env(safe-area-inset-bottom); background: #0d0a12; border: 0; border-top: 1px solid rgba(236,231,222,.16); box-shadow: none; transition: none; }
  #palmares .pal-play { grid-area: 1 / 1; }
  #palmares .pal-year { display: block; grid-area: 1 / 2; position: static; margin: 0; transform: none; font: 900 30px/1 var(--f-display); }
  #palmares .pal-skip { grid-area: 1 / 3; justify-self: end; padding: 8px 0; background: none; color: #ECE7DE; font: italic 15px/1.15 var(--f-serif); text-align: right; text-decoration: underline; text-decoration-color: #F2D43A; text-underline-offset: 3px; }
  #palmares .pal-skip:hover, #palmares .pal-skip:focus-visible { background: none; color: #F2D43A; }
  #palmares .pal-years { grid-area: 2 / 1 / 2 / 4; flex: none; align-self: start; width: 100%; padding: 4px 0 6px; }
  #palmares .pal-years button.past { text-decoration: none; }
  #palmares .pal-years .yr-ring { display: none; }
  body[data-ch="7"] .pn-next { bottom: 118px; }

  /* Univers: one short bar at the foot, and the list of what to show opens above it, all of it visible */
  .uni-rail.uni-legend { left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; overflow: visible; padding: 0 10px env(safe-area-inset-bottom); border: 0; border-top: 1px solid rgba(191,211,255,.3); background: #050814; backdrop-filter: none; box-shadow: none; }
  .uni-legend .ur-btn.ur-leg { display: none; width: 100%; grid-template-columns: 20px minmax(0, 1fr) auto; min-height: 40px; padding: 4px; }
  .uni-legend.open .ur-btn.ur-leg { display: grid; }
  .uni-legend.open .ur-leg:first-of-type { margin-top: 8px; }
  .uni-legend .ul-l { font-size: 16px; text-align: left; }
  .uni-legend .ul-tools { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 0; border: 0; }
  .uni-legend .ul-tools .ur-btn { width: 40px; height: 40px; }
  .uni-legend .ul-fold { flex: 1; height: 40px; text-align: left; color: #E9EEFF; font: italic 17px var(--f-serif); }
  .uni-legend .ul-fold span { display: inline-block; margin-left: 4px; transition: transform .2s; }
  .uni-legend.open .ul-fold span { transform: rotate(180deg); }
  body[data-ch="6"] .pn-next { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 64px); }
}
.ul-fold { display: none; }
@media (max-width: 760px) { .ul-fold { display: block; } }

/* CH 7 · each entry of the night passes as a tiny card on the map; the fingers still move the map through it */
#palmares .pal-ticks { position: absolute; z-index: 7; left: 18px; bottom: 100px; display: grid; justify-items: start; gap: 4px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
#palmares .pal:not(.panel-off) .pal-ticks, #palmares .pal.is-intro .pal-ticks { display: none; }
#palmares .pal-tick { display: grid; max-width: min(64vw, 260px); padding: 3px 8px 3px 7px; background: #F3EFE7; border-left: 3px solid var(--kc); color: #15110E; box-shadow: 0 3px 8px rgba(0,0,0,.45); animation: pal-tick .22s ease-out; }
#palmares .pal-tick b, #palmares .pal-tick span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#palmares .pal-tick b { font: 500 12px/1.25 var(--f-serif); }
#palmares .pal-tick span { font: italic 11px/1.25 var(--f-serif); color: #5d544b; }
@keyframes pal-tick { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { #palmares .pal-tick { animation: none; } }
@media (max-width: 760px) { #palmares .pal-ticks { left: 8px; bottom: calc(var(--pal-foot) + 8px); } }

/* the library's red bear opens the same card as La Ville's, over the walk along the shelves */
#ecrits .den-card.is-contact { display: grid; position: fixed; z-index: 30; }
#ecrits .den-card.is-contact[hidden] { display: none; }

/* phones · the two title cards start under the channel's name and scroll inside that space, so nothing ever slides beneath
   it, and a short screen can always reach the top of the card (a centred grid would cut it off) */
@media (max-width: 760px) {
  .pal-intro.pp, .uni-intro.sc-chart { inset: 52px 0 0; padding: 0 12px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .pal-intro.pp { place-items: start center; align-content: safe center; }
  .uni-intro.sc-chart { grid-template-rows: auto; align-content: safe center; gap: 0; }
  .pal-intro.pp::-webkit-scrollbar, .uni-intro.sc-chart::-webkit-scrollbar { display: none; }
  .pal.is-intro .pal-loading { display: none; }
  .pp-poster { padding: 16px 12px; }
  .sc-center { gap: 10px; }
  /* the way into the sky: one frame, centred, its name on one line */
  .sc-go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 10px; width: 100%; margin-top: 8px; padding: 13px 10px 11px; outline: 0; }
  .sc-go::before { left: -1px; top: -1px; }
  .sc-go::after { right: -1px; bottom: -1px; }
  .sc-go-star { font-size: 20px; }
  .sc-go-t { font-size: 18px; white-space: nowrap; }
  .sc-go-n { flex-basis: 100%; font-size: 14px; text-align: center; }
}
/* a short phone (or a browser's bars taking the room): the Palmarès card tightens, its four laurels in one row */
@media (max-width: 760px) and (max-height: 760px) {
  .pp-poster { gap: 5px; padding: 10px 10px 12px; }
  .pp-present { margin: 0; font-size: 14px; }
  .pp-title { font-size: min(13vw, 8.4vh); font-size: min(13vw, 8.4dvh); }
  .pp-dates { margin: 2px 0 0; font-size: 19px; }
  .pp-where { font-size: 14px; line-height: 1.25; }
  .pp-laurels { flex-wrap: nowrap; gap: 0; width: 100%; margin: 6px 0 0; }
  .pp-laurels li { width: 25%; }
  .pp-laurel { width: 100%; }
  .pp-laurels b { font-size: 23px; }
  .pp-laurels span { top: 66%; font-size: 10px; }
  .pp-line { font-size: 14px; line-height: 1.3; }
}
/* phones · the set takes the whole height left under the channel's name; its keys are what a finger can press, in one row;
   the hints for a keyboard go, and the page fades where it scrolls on */
@media (max-width: 760px) {
  .salon { padding-bottom: 16px; }
  #tele:not(.is-off) .set-screen { height: calc(100vh - 128px); height: calc(100dvh - 128px); }
  @supports (height: 100dvh) { #tele:not(.is-off) .set-screen { height: calc(100dvh - 128px); } }
  .tvm-keys { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; padding-top: 4px; padding-bottom: 4px; }
  .tvm-keys > span:not(.tvm-count) { display: none; }
  .tvm-keys > button { min-height: 38px; padding: 0 6px; white-space: nowrap; }
  .tvm-keys .k-back { margin-right: auto; }
  .tvm-keys .tvm-count { margin-left: auto; white-space: nowrap; }
  .tvm-keys .k-back + .k-ch { margin-left: 0; }
  .is-show .tvm-body { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); padding-bottom: 22px; }
}

/* phones, upright · the same set as on a computer (tele-set.webp), standing on the sideboard while it is off; switched on,
   it opens into the full-height set: the photograph fades, the drawn casing comes up, and the screen grows with it */
@media (max-width: 760px) and (min-height: 501px) {
  .salon { --tv-w: calc(100vw - 16px); --tv-h: calc(var(--tv-w) * .648); }
  .set { position: absolute; left: 8px; top: 60px; width: var(--tv-w); height: calc(100vh - 76px); height: calc(100dvh - 76px); padding: 0; border-radius: 0; background: none; box-shadow: none;
    transition: top .8s cubic-bezier(.65,0,.25,1), height .8s cubic-bezier(.65,0,.25,1); }
  @supports (height: 100dvh) { .set { height: calc(100dvh - 76px); } }
  .set::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(170deg, #2a2a2e, #141416 45%, #0b0b0c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.75); transition: opacity .35s .3s; }
  .set-frame { display: block; position: absolute; inset: 0; z-index: 11; width: 100%; height: 100%; pointer-events: none; opacity: 0; filter: drop-shadow(0 12px 16px rgba(0,0,0,.75)); transition: opacity .3s; }
  .set-foot { position: absolute; left: 0; right: 0; bottom: 0; transition: opacity .35s .3s; }
  #tele:not(.is-off) .set-screen, #tele .set-screen { position: absolute; left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 42px); border-radius: 12px;
    transition: left .8s cubic-bezier(.65,0,.25,1), top .8s cubic-bezier(.65,0,.25,1), width .8s cubic-bezier(.65,0,.25,1), height .8s cubic-bezier(.65,0,.25,1), border-radius .8s; }
  /* off: on the sideboard (its top is 67 % down the wall picture, under the presentation) */
  #tele.is-off .set { top: max(var(--intro-b, 320px), calc(max(122vh, 152vw) * .67 - var(--tv-h) + 4px)); top: max(var(--intro-b, 320px), calc(max(122dvh, 152vw) * .67 - var(--tv-h) + 4px)); height: var(--tv-h); }
  #tele.is-off .set::before { bottom: 3.5%; } /* the casing waits under the photograph, so the screen is never bare while it loads */
  #tele.is-off .set-frame { opacity: 1; transition: opacity .3s .5s; }
  #tele.is-off .set-foot { opacity: 0; transition: opacity .2s; }
  #tele.is-off .set-screen { left: 3.8%; top: 7.6%; width: 92.4%; height: 76.1%; border-radius: 0; }
  #tele.no-move .set, #tele.no-move .set::before, #tele.no-move .set-frame, #tele.no-move .set-foot, #tele.no-move .set-screen { transition: none; }
}

/* phones · the presentation: centred on the screen by construction, its figures in one ruled row, the channels on their own line */
@media (max-width: 760px) {
  #tele .salon { padding-left: 0; padding-right: 0; }
  #tele .set { left: 8px; }
  #tele.is-off .tele-intro { position: relative; left: 0; width: 100%; margin: 0; padding: 0 16px; box-sizing: border-box; gap: 8px; justify-items: center; }
  #tele .ti-title { font-size: min(46px, 13vw); line-height: .9; }
  #tele .ti-line { max-width: 31em; font-size: 16px; line-height: 1.35; color: #F6EBD6; text-shadow: 0 1px 10px rgba(0,0,0,.85); }
  #tele .tele-intro .ti-listing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 0; width: 100%; margin-top: 4px; border-top: 1px solid rgba(244,232,210,.28); border-bottom: 1px solid rgba(244,232,210,.28); font: italic 12px/1.15 var(--f-serif); color: rgba(244,232,210,.86); }
  #tele .tele-intro .ti-listing > i, #tele .tele-intro .ti-listing > .tl-tape { display: none; }
  #tele .tele-intro .ti-listing > span:not(.tl-tape) { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 8px 1px 7px; }
  #tele .tele-intro .ti-listing > i + span { border-left: 1px solid rgba(244,232,210,.18); }
  #tele .tele-intro .ti-listing > span b { font: 900 22px/1 var(--f-display); color: #F2D43A; }
  #tele .tele-intro .ti-listing > span:nth-of-type(5) b { font-size: 20px; line-height: 22px; }
  #tele .tele-intro .ti-listing > span:last-child { grid-column: 1 / -1; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 6px; padding: 6px 2px; border-left: 0; border-top: 1px solid rgba(244,232,210,.18); }
  #tele .tele-intro .ti-listing > span:last-child b { font-size: 16px; line-height: 1; color: #f4ede2; }
}

/* phones · Écrits */
@media (max-width: 760px) {
  /* the page ends with its last shelf: the room once kept for the remote is gone */
  #ecrits .lib { padding-bottom: 0; overscroll-behavior: contain; }
  #ecrits .lib-list { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* phones · an open book: its tag stays in the corner however far the page is read, and is big enough for a finger */
@media (max-width: 760px) {
  #ecrits .book-open { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #ecrits .bo { grid-template-rows: auto auto auto; overscroll-behavior: contain; }
  #ecrits .bo-cover { grid-column: 1; grid-row: 1; }
  #ecrits .bo-text { grid-column: 1; grid-row: 2; }
  #ecrits .bo-nav { grid-column: 1; grid-row: 3; }
  #ecrits .bo-x { position: sticky; top: 10px; right: auto; grid-column: 1; grid-row: 1 / -1; justify-self: end; align-self: start; z-index: 5; margin: 10px 10px 0 0; padding: 10px 14px 10px 26px; font-size: 11px; line-height: 1; }
}

/* the power sign is drawn: phones don't all have it in their fonts */
.tv-pw { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* computers · the night's bar of years stands above the strip where the mouse calls up the remote, so a year can be pressed */
@media (hover: hover) and (min-width: 761px) { #palmares .pal-time { bottom: 70px; } }

/* ─────────── Écrits · « À lire »: a bookmark in the books that can be read, and the reader they open in ─────────── */
.vb-cover, .wb-cover { position: relative; }
/* the same red ribbon as in the open book, left between the pages and hanging over the cover */
.rd-slip { position: absolute; z-index: 2; top: -7px; right: 9%; padding: 5px 8px 13px; background: #7F1D14; color: var(--paper); box-shadow: inset 1px 0 0 var(--brass), inset -1px 0 0 var(--brass);
  font-family: var(--f-display); font-weight: 800; font-size: 14px; line-height: 1; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%); }
.wb-cover .rd-slip { top: calc(var(--bh) * -.022); padding: calc(var(--bh) * .018) calc(var(--bh) * .03) calc(var(--bh) * .05); font-size: max(11px, calc(var(--bh) * .062)); }
/* the open book, read at a glance: the name, what it is, and a ribbon to open it; only the text below scrolls */
#ecrits .bo-text { --pad: clamp(24px, 3.4vw, 56px); padding-inline: var(--pad); }
#ecrits .bo-k { padding-right: 130px; }
#ecrits .bo-title { margin: 6px 0 0; font-size: clamp(34px, 3.8vw, 58px); line-height: .92; }
#ecrits .bo-sub { margin-top: 6px; font-family: var(--f-serif), var(--f-ar); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; color: rgba(36,23,11,.78); }
#ecrits .bo-meta { margin-top: 10px; padding-bottom: 0; border: 0; font-family: var(--f-serif); font-size: 15px; line-height: 1.3; letter-spacing: 0; text-transform: none; }
#ecrits .bo-head { padding-bottom: 16px; border-bottom: 1px solid rgba(36,23,11,.18); }
#ecrits .bo-syn { margin-top: 16px; min-height: 0; }
#ecrits .bo .wall-watch { grid-template-columns: 1fr; max-width: 480px; gap: 10px; }
#ecrits .bo .ww-card { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-content: center; }
#ecrits .bo .ww-img { grid-row: 1 / 3; }
#ecrits .bo .ww-img i { width: 26px; height: 26px; font-size: 9px; }
#ecrits .bo .ww-t { align-self: end; font-size: 16px; }
#ecrits .bo .ww-n { align-self: start; font-family: var(--f-serif); font-size: 13px; letter-spacing: 0; text-transform: none; }
#ecrits .bo .wall-watch > p { font-family: var(--f-serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; }
#ecrits .bo-src { font-family: var(--f-serif); font-size: 14px; letter-spacing: 0; text-transform: none; }
#ecrits .bo-step { font-family: var(--f-serif); font-size: 15px; letter-spacing: 0; text-transform: none; }
/* the way out: a dark tab on the corner of the sheet, always in the same place */
#ecrits .bo-x { top: 0; right: 0; min-height: 40px; margin: 0; padding: 0 16px; display: flex; align-items: center; background: var(--ink); color: var(--paper); clip-path: none;
  font-family: var(--f-serif); font-size: 17px; line-height: 1; letter-spacing: 0; text-transform: none; transition: background .2s; }
#ecrits .bo-x::before { content: none; }
#ecrits .bo-x:hover, #ecrits .bo-x:focus-visible { background: #7F1D14; color: var(--paper); outline: none; }

/* the ribbon: a bookmark coming out of the book's spine, the one thing on the page in red. Pulled, it slides out a little.
   Its thread of brass shows how far the reader has come. */
#ecrits .bo-read { display: grid; gap: 10px; justify-items: start; margin-top: 16px; }
#ecrits .bo-lire { position: relative; display: flex; align-items: baseline; gap: 16px; margin-left: calc(var(--pad) * -1); padding: 13px 46px 14px var(--pad); background: #7F1D14; color: var(--paper); text-align: left;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%); transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s; }
#ecrits .bo-lire b { font-family: var(--f-display); font-weight: 800; font-size: 27px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
#ecrits .bo-lire span { font-family: var(--f-serif); font-style: italic; font-size: 16px; line-height: 1; white-space: nowrap; color: rgba(239,229,207,.82); }
#ecrits .bo-lire i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--brass-hi); }
#ecrits .bo-lire:hover, #ecrits .bo-lire:focus-visible { transform: translateX(10px); background: #9A2518; outline: none; }
#ecrits .bo-read-l { margin-bottom: -6px; font-family: var(--f-serif); font-weight: 700; font-size: 16px; line-height: 1.2; color: rgba(36,23,11,.85); }
#ecrits .bo-read-l ~ .bo-read-l { margin-top: 6px; }
#ecrits .bo-read-n { font-family: var(--f-serif), var(--f-ar); font-style: italic; font-size: 15px; line-height: 1.35; color: rgba(36,23,11,.72); }

@media (min-width: 761px) {
  #ecrits .book-open { --boh: min(640px, calc(100dvh - 180px)); grid-template-rows: minmax(0, 1fr); }
  #ecrits .bo { height: var(--boh); grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
  #ecrits .bo-cover { min-height: 0; overflow: hidden; }
  #ecrits .bo-cover .cover { width: min(100%, calc((var(--boh) - 110px) * .667)); }
  #ecrits .bo-text { display: flex; flex-direction: column; min-height: 0; padding-top: clamp(20px, 3vh, 34px); padding-top: clamp(20px, 3dvh, 34px); padding-bottom: 0; }
  #ecrits .bo-head { flex: none; }
  /* no scrollbar on the page: the text fades out at its foot when there is more below */
  #ecrits .bo-body { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 30px;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); }
  #ecrits .bo-body::-webkit-scrollbar { display: none; }
  #ecrits .bo-nav { padding-block: 10px 12px; }
}
/* a low window: the room's margins give way before the book does */
@media (min-width: 761px) and (max-height: 640px) {
  #ecrits .book-open { --boh: calc(100dvh - 104px); padding-block: 52px; }
  #ecrits .bo-title { font-size: 34px; }
  #ecrits .bo-lire { padding-block: 9px 10px; }
  #ecrits .bo-lire b { font-size: 22px; }
}
/* too low to hold it all: the whole sheet scrolls after all */
@media (min-width: 761px) and (max-height: 470px) {
  #ecrits .bo { overflow-y: auto; scrollbar-width: none; }
  #ecrits .bo::-webkit-scrollbar { display: none; }
  #ecrits .bo-text { display: block; }
  #ecrits .bo-body { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  #ecrits .bo-x { position: sticky; right: auto; grid-column: 2; grid-row: 1; justify-self: end; align-self: start; z-index: 5; }
}

.rd { --brass: #C9963E; --brass-hi: #E9C178; --brass-lo: #7A5520; --paper: #EFE5CF; --ink: #24170B;
  position: fixed; inset: 0; z-index: 9200; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; color: var(--paper);
  background: radial-gradient(ellipse at 50% 30%, #2a1a0d, #120b05 75%); overscroll-behavior: contain; }
.rd[hidden] { display: none; }
.rd button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.rd-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px 14px; }
.rd-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1.2; text-transform: uppercase; color: rgba(239,229,207,.82); }
.rd .rd-x { flex: none; min-height: 40px; padding: 4px 14px; background: var(--paper); color: var(--ink); font-family: var(--f-serif); font-size: 16px; box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 3px var(--brass-lo); }
.rd .rd-x:hover, .rd .rd-x:focus-visible { background: var(--brass-hi); outline: none; }
.rd-stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rd-track { position: absolute; inset: 0; }
.rd-track.turn { transition: transform .26s cubic-bezier(.2,.7,.2,1); }
.rd-slot { position: absolute; inset: 0; display: grid; place-items: center; }
.rd-slot[hidden] { display: none; }
.rd-sheet { position: relative; background: #d9cfba; box-shadow: 0 8px 30px rgba(0,0,0,.55); }
.rd-sheet img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.rd-sheet.ready img { opacity: 1; }
.rd-blank, .rd-wait { position: absolute; left: 12%; right: 12%; top: 46%; z-index: 1; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 16px; line-height: 1.3; color: rgba(36,23,11,.62); }
.rd-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); }
.rd .rd-b { width: 44px; height: 44px; font-family: var(--f-serif); font-size: 24px; line-height: 1; color: var(--paper); box-shadow: inset 0 0 0 1px var(--brass-lo); }
.rd .rd-b:hover:not(:disabled), .rd .rd-b:focus-visible { color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass); outline: none; }
.rd .rd-b:disabled { opacity: .3; cursor: default; }
.rd-zoom { display: flex; gap: 4px; }
.rd-where { display: grid; gap: 2px; justify-items: center; min-width: 0; padding: 0 4px; }
.rd-n { font-family: var(--f-serif); font-style: italic; font-size: 15px; line-height: 1.1; color: rgba(239,229,207,.85); white-space: nowrap; }
.rd-range { width: 100%; height: 22px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.rd-range::-webkit-slider-runnable-track { height: 2px; background: var(--brass-lo); }
.rd-range::-moz-range-track { height: 2px; background: var(--brass-lo); }
.rd-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 20px; margin-top: -9px; background: var(--paper); border: 2px solid var(--brass); border-radius: 0; }
.rd-range::-moz-range-thumb { width: 8px; height: 16px; background: var(--paper); border: 2px solid var(--brass); border-radius: 0; }
.rd-range:focus-visible { outline: 1px solid var(--brass-hi); outline-offset: 2px; }
.rd-warn { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: #120b05; }
.rd-warn[hidden] { display: none; }
.rd-card { display: grid; gap: 14px; justify-items: start; width: min(440px, 100%); padding: 26px 24px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 3px var(--brass-lo); }
.rd-card h3 { font-family: var(--f-display); font-weight: 900; font-size: 32px; line-height: 1; text-transform: uppercase; }
.rd-card p { font-family: var(--f-serif); font-size: 19px; line-height: 1.35; }
.rd .rd-yes { padding: 10px 18px; background: var(--ink); color: var(--paper); font-family: var(--f-display); font-weight: 800; font-size: 19px; text-transform: uppercase; }
.rd .rd-yes:hover, .rd .rd-yes:focus-visible { background: var(--brass-lo); outline: none; }
.rd .rd-no { padding: 6px 0; font-family: var(--f-serif); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .rd-title { font-size: 15px; }
  .rd-bar { gap: 4px; padding-inline: 6px; }
  .rd .rd-b { width: 40px; }
  .rd-zoom { gap: 2px; }
}

/* the reader's head, quieter: the book's whole name, small, on as many lines as it needs (never cut with « … ») */
.rd-title { overflow: visible; white-space: normal; text-overflow: clip; font-size: 13px; line-height: 1.25; letter-spacing: .02em; font-weight: 700; opacity: .9; }
@media (max-width: 760px) { .rd-title { font-size: 12px; } .rd .rd-x { font-size: 14px; padding: 4px 10px; } }

/* the reader's foot, lighter: no boxes. The arrows are plain signs, the line of the book runs between them with the part
   already read in brass, the page count sits at the end of the line, and the two zoom signs share one small frame */
.rd-bar { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; padding: 4px 12px calc(4px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--brass-lo); }
.rd .rd-b { width: 42px; height: 42px; box-shadow: none; font-size: 28px; color: rgba(239, 229, 207, .82); transition: color .2s, transform .2s; }
.rd .rd-b:hover:not(:disabled), .rd .rd-b:focus-visible { box-shadow: none; color: var(--brass-hi); }
.rd .rd-b[data-rd="back"]:hover:not(:disabled) { transform: translateX(-3px); }
.rd .rd-b[data-rd="on"]:hover:not(:disabled) { transform: translateX(3px); }
.rd-where { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; justify-items: stretch; }
.rd-n { font-family: var(--f-mono); font-style: normal; font-size: 12px; letter-spacing: .02em; color: rgba(239, 229, 207, .7); }
.rd-range { --p: 0%; height: 24px; }
.rd-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--brass) var(--p), rgba(239, 229, 207, .16) var(--p)); }
.rd-range::-moz-range-track { height: 2px; background: rgba(239, 229, 207, .16); }
.rd-range::-moz-range-progress { height: 2px; background: var(--brass); }
.rd-range::-webkit-slider-thumb { width: 4px; height: 18px; margin-top: -8px; background: var(--brass-hi); border: 0; }
.rd-range::-moz-range-thumb { width: 4px; height: 18px; background: var(--brass-hi); border: 0; }
.rd-zoom { gap: 0; margin-left: 4px; box-shadow: inset 0 0 0 1px var(--brass-lo); }
.rd-zoom .rd-b { width: 36px; height: 34px; font-size: 20px; }
.rd-zoom .rd-b + .rd-b { box-shadow: inset 1px 0 0 var(--brass-lo); }
.rd-zoom .rd-b + .rd-b:hover:not(:disabled), .rd-zoom .rd-b + .rd-b:focus-visible { box-shadow: inset 1px 0 0 var(--brass-lo); }
[dir="rtl"] .rd-range::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--brass) var(--p), rgba(239, 229, 207, .16) var(--p)); }
@media (max-width: 760px) {
  .rd-bar { gap: 2px; padding-inline: 6px; }
  .rd .rd-b { width: 38px; }
  .rd-where { gap: 8px; }
  .rd-zoom .rd-b { width: 32px; }
}
/* phones · the « Lire » ribbon fits the card: its words may go onto two lines instead of pushing the card sideways */
@media (max-width: 760px) {
  #ecrits .bo-lire { flex-wrap: wrap; gap: 4px 12px; max-width: calc(100% + var(--pad)); padding-right: 38px; }
  #ecrits .bo-lire b { font-size: 22px; white-space: normal; }
  #ecrits .bo-lire span { white-space: normal; font-size: 15px; }
  #ecrits .bo { overflow-x: hidden; }
  #ecrits .bo-title { overflow-wrap: anywhere; }
}

/* the bookshop does not bounce at its ends: a hard scroll past the top or the bottom used to pull the shelves away and show
   the blurred room kept behind them (it belongs behind the book list, not around the header) */
#ecrits .lib { overscroll-behavior-y: none; }

/* the rooms' small Arabic names, readable: the poster Arabic (Lalezar) at a real size, never letter-spaced (spacing breaks
   the joins of Arabic letters), on a line tall enough for its dots and its tall letters */
#tele .ti-k, #tele .tele-intro .ti-k { font-family: var(--f-ar-display); font-style: normal; font-size: 24px; line-height: 1.5; letter-spacing: 0; text-transform: none; }
#ecrits .lib-head .room-kicker { font-size: 24px; line-height: 1.5; letter-spacing: 0; text-transform: none; }
#ecrits .lib-head .room-kicker span { font-family: var(--f-ar-display); }
.sc-k, .pp-k { font-size: 19px; line-height: 1.5; overflow: visible; padding: 2px 0; }
.sc-k i, .pp-k i { font-family: var(--f-ar-display); font-size: 24px; line-height: 1.5; letter-spacing: 0; }
@media (max-width: 760px) { #tele .ti-k, #tele .tele-intro .ti-k, #ecrits .lib-head .room-kicker { font-size: 21px; } .sc-k, .pp-k { font-size: 17px; } .sc-k i, .pp-k i { font-size: 21px; } }

/* the Palmarès poster always shows its whole gold frame: the title follows the screen's height as well as its width, and
   it never scrolls: on a short screen the poster tightens instead */
@media (min-width: 761px) {
  .pal-intro.pp { align-content: center; place-items: center; overflow: hidden; padding-top: 56px; padding-bottom: 84px; }
  .pp-title { font-size: clamp(44px, min(8.2vw, 11vh), 124px); font-size: clamp(44px, min(8.2vw, 11dvh), 124px); }
  .pp-laurel, .pp-laurels li { width: clamp(96px, 15vh, 132px); width: clamp(96px, 15dvh, 132px); }
}
@media (min-width: 761px) and (max-height: 820px) {
  .pp-poster { gap: 6px; padding: 18px 24px 16px; }
  .pp-laurels { margin: 6px 0 2px; }
  .pp-line { font-size: 16px; }
}

/* the Constellation on a phone, lighter: behind the title card the sky is dimmed, not blurred (a full-screen blur is heavy
   on a phone's graphics chip); the compass ring stays still and the title's stars twinkle once as they appear, then rest */
@media (max-width: 760px), (pointer: coarse) {
  .uni.is-intro .uni-canvas { filter: brightness(.45); transform: none; }
  .uni-canvas { transition: filter .6s ease; }
  .sc-ring { animation: none; }
  .sc-stars circle { animation: sc-in .4s ease-out forwards; animation-delay: calc(.45s + var(--i) * .045s); }
}

/* the Constellation's loading line: low and quiet, under the title card, until the sky is drawn */
.uni-loading { top: auto; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; color: rgba(236, 231, 222, .6); animation: uni-wait 1.6s ease-in-out infinite; }
@keyframes uni-wait { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .uni-loading { animation: none; } }

/* phones · the Palmarès list: a clear way back to the map, and a head that folds away once the list is scrolled */
.pal-close { display: none; }
@media (max-width: 760px) {
  #palmares .pal-close { display: block; position: sticky; top: 0; z-index: 2; margin: -4px 0 6px auto; padding: 6px 12px; background: #15110E; color: #F3EFE7; font: italic 15px/1.1 var(--f-serif); border: 0; cursor: pointer; }
  #palmares .pal-panel.scrolled .pal-p-head { display: none; }
  /* « Passer l'animation → tout voir », a real button: framed in the night's yellow */
  #palmares .pal-skip { padding: 7px 12px; border: 1px solid #F2D43A; color: #F2D43A; text-decoration: none; font: italic 15px/1.15 var(--f-serif); }
  #palmares .pal-skip:hover, #palmares .pal-skip:focus-visible { background: #F2D43A; color: #15110E; }
}

/* phones · La Constellation as a star atlas: the works by kind, each opening its sheet; no star map to drag with a finger.
   The poster face for what is big, the book face for what is read, a real night behind, and each kind's colour as its ink */
.uni-index { display: none; }
@media (max-width: 760px) {
  #univers .uni-canvas, #univers .uni-rail { display: none; }
  #univers .uni-index { display: block; position: absolute; inset: 52px 0 0; z-index: 5; overflow-y: auto; overscroll-behavior-y: none; padding: 0 0 calc(90px + env(safe-area-inset-bottom)); color: #ECE7DE;
    background: radial-gradient(1.2px 1.2px at 22% 14%, rgba(236,231,222,.55), transparent) 0 0 / 190px 230px, radial-gradient(1px 1px at 71% 62%, rgba(191,211,255,.5), transparent) 0 0 / 150px 170px,
      radial-gradient(1.4px 1.4px at 44% 88%, rgba(63,224,197,.35), transparent) 0 0 / 260px 300px, radial-gradient(130% 50% at 50% 0%, #131c3a, #070a16 72%) no-repeat, #070a16; }
  #univers .uni.is-intro .uni-index { visibility: hidden; }
  /* the head */
  #univers .ui-top { padding: 8px 16px 14px; }
  #univers .ui-k { margin: 0 0 2px; font: italic 16px/1.2 var(--f-serif); color: #3FE0C5; }
  #univers .ui-title { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(40px, 13vw, 58px); line-height: .9; text-transform: uppercase; color: #F4EBDA; text-shadow: 0 0 26px rgba(63,224,197,.28); }
  #univers .ui-sub { margin: 8px 0 0; font: italic 15px/1.3 var(--f-serif); color: rgba(236,231,222,.68); }
  #univers .ui-sub b { font: 800 19px/1 var(--f-display); font-style: normal; color: #3FE0C5; }
  /* the kinds: one sliding row that stays at the top while the list runs */
  #univers .ui-nav { position: sticky; top: 0; z-index: 3; display: flex; gap: 18px; overflow-x: auto; padding: 11px 16px; scrollbar-width: none; background: rgba(7, 10, 22, .94);
    border-top: 1px solid rgba(191,211,255,.14); border-bottom: 1px solid rgba(191,211,255,.14); }
  #univers .ui-nav::-webkit-scrollbar { display: none; }
  #univers .ui-nav button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; border: 0; background: none; color: #ECE7DE; font: 15px/1.2 var(--f-serif); cursor: pointer; }
  #univers .ui-nav i { width: 7px; height: 7px; border-radius: 50%; background: var(--kc); box-shadow: 0 0 8px var(--kc); }
  /* a kind */
  #univers .ui-sec { padding: 24px 16px 0; scroll-margin-top: 44px; }
  #univers .ui-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--kc) 60%, transparent);
    font-family: var(--f-display); font-weight: 900; font-size: 32px; line-height: 1; text-transform: uppercase; color: var(--kc); }
  #univers .ui-h i { font: italic 400 15px var(--f-serif); color: rgba(236,231,222,.6); text-transform: none; }
  #univers .ui-sec ul { margin: 0; padding: 0; list-style: none; }
  /* a work: its star, its name, its year */
  #univers .ui-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(191,211,255,.08);
    background: none; color: #ECE7DE; font: 18px/1.25 var(--f-serif); text-align: left; cursor: pointer; }
  #univers .ui-star { justify-self: center; align-self: center; width: var(--m); height: var(--m); border-radius: 50%; background: radial-gradient(circle, #fff 0 28%, var(--kc) 55%, transparent 74%); box-shadow: 0 0 calc(var(--m) * .9) color-mix(in srgb, var(--kc) 70%, transparent); }
  #univers .ui-item small { font: italic 14px var(--f-serif); color: rgba(236,231,222,.5); }
  #univers .ui-item:active .ui-t { color: var(--kc); }
  /* the sheet: taller, a small ringed emblem instead of a big block, the poster face for its title */
  .uni-panel { height: 80vh; height: 80dvh; background: #090d1d; border-top: 1px solid rgba(191,211,255,.22); }
  .uni-panel .us-stamp { height: 92px; align-content: end; justify-items: start; padding: 0 20px; background: none; color: var(--kc); }
  .uni-panel .us-stamp .u-ico { box-sizing: content-box; width: 26px; height: 26px; padding: 11px; border: 1px solid var(--kc); border-radius: 50%; box-shadow: 0 0 18px color-mix(in srgb, var(--kc) 40%, transparent); }
  .uni-panel .us-close { top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 0; background: none; border: 1px solid rgba(236,231,222,.3); backdrop-filter: none; }
  .uni-panel .us-body { padding: 0 20px 40px; }
  .uni-panel .us-kind { margin-top: 14px; }
  .uni-panel .us-title { margin: 6px 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(32px, 10vw, 44px); line-height: .96; letter-spacing: 0; text-transform: uppercase; color: #F4EBDA; }
  .uni-panel .us-ar { font-family: var(--f-ar-display); font-size: 24px; word-spacing: 0; }
  .uni-panel .us-text { font-size: 18px; line-height: 1.45; }
  .uni-panel .us-count { margin-top: 22px; font: italic 16px var(--f-serif); color: rgba(236,231,222,.68); }
  .uni-panel .us-count b { font: 800 26px/1 var(--f-display); color: var(--kc); margin-right: 6px; }
  .uni-panel .us-rel { padding-bottom: 7px; border-bottom: 1px solid color-mix(in srgb, var(--kc) 55%, transparent); font: 16px var(--f-serif); font-variant: small-caps; color: #ECE7DE; }
  .uni-panel .us-rel i { font: italic 15px var(--f-serif); }
  .uni-panel .us-src { font: italic 13px var(--f-serif); letter-spacing: 0; text-transform: none; color: rgba(236,231,222,.55); }
}
@media (max-width: 760px) { #univers .uni { background: #0a0e20; } }
@media (max-width: 760px) { .uni-panel .us-head:has(.us-stamp) + .us-body .us-kind .u-ico { display: none; } }

/* the Constellation's cards, all screens: works without a picture get a small emblem on the night instead of a flat colour
   block; thin frames in the kind's colour; the sources and photo credits set quietly in the book face */
.uc-img { width: 72px; aspect-ratio: 4 / 3; outline: 0; border: 1px solid color-mix(in srgb, var(--kc) 45%, transparent); }
.us-link:hover .uc-img { border-color: var(--kc); outline: 0; }
.uc-stamp { background: radial-gradient(circle, color-mix(in srgb, var(--kc) 24%, transparent), transparent 72%), #0b1020; color: var(--kc); }
.uc-stamp .u-ico { width: 20px; height: 20px; }
.us-group li { padding: 12px 0; border-bottom: 1px solid rgba(191,211,255,.08); }
.ul-t b { font-size: 18px; line-height: 1.2; }
.ul-t i { font-size: 14px; }
.us-src { padding-left: 84px; font: italic 13px var(--f-serif); letter-spacing: 0; text-transform: none; color: rgba(236,231,222,.45); text-decoration: none; }
.us-img::after { content: ''; position: absolute; inset: auto 0 0; height: 34%; pointer-events: none; background: linear-gradient(to top, #090d1d, transparent); }
.us-img figcaption { z-index: 1; left: 14px; bottom: 8px; font: italic 13px var(--f-serif); letter-spacing: 0; text-transform: none; }
.us-img figcaption a, .us-img figcaption span { padding: 0; background: none; color: rgba(236,231,222,.72); text-shadow: 0 1px 4px #000; text-decoration: none; }
.uni-panel .us-close, .us-close { z-index: 2; border-radius: 0; background: rgba(5,8,20,.72); border: 1px solid rgba(236,231,222,.5); color: #F4EBDA; backdrop-filter: none; }
.us-out { padding: 0 0 2px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--kc) 55%, transparent); font: italic 16px var(--f-serif); letter-spacing: 0; text-transform: none; }
.us-out:hover { background: none; color: var(--kc); }

/* phones · the Constellation says what it is, and its row of kinds shows where you are */
@media (max-width: 760px) {
  /* the page has its own big name: the channel's logo steps aside, as in La Chaîne; the row stays clear of the ☰, which is solid over it */
  body[data-ch="6"] #signal .ident { display: none; }
  body[data-ch="6"]:not(.in-bio) .pn-open { background: #070a16; }
  #univers .ui-nav { padding-right: 62px; }
  #univers .ui-lead { margin: 10px 0 0; font: 17px/1.4 var(--f-serif); color: #ECE7DE; }
  #univers .ui-nav button { position: relative; min-height: 34px; color: rgba(236,231,222,.6); transition: color .2s; }
  #univers .ui-nav i { opacity: .55; box-shadow: none; transition: opacity .2s; }
  #univers .ui-nav button.on { color: var(--kc); }
  #univers .ui-nav button.on i { opacity: 1; box-shadow: 0 0 8px var(--kc); }
  #univers .ui-nav button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; background: var(--kc); }
}