/* CH 3 · the entrance: a neighbourhood cybercafé at night (assets/web/cybercafe.webp). The photo covers the room; the
   six old screens show the six most-watched series, dimmed and warm like a CRT in a dark room, the series' name glowing
   on the glass; a sheet of paper taped to the wall opens the whole channel. Inside, La Chaîne keeps its own styles
   (rooms.css). */
#web .cy-door { position:absolute; inset:0; z-index:25; background:#0b100f; overflow:hidden; }
#web .cy-door[hidden] { display:none; }
#web .cy-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#web .cy-view { position:absolute; inset:0; overflow:hidden; }
/* the photo slides sideways on a phone, and stops at its own edges: no bounce past them onto the empty background */
#web .cy-view.slide { overflow-x:auto; overflow-y:hidden; overscroll-behavior:none; scrollbar-width:none; }
#web .cy-view.slide::-webkit-scrollbar { display:none; }
#web .cy-room { position:absolute; will-change:transform; }
#web .cy-photo { position:absolute; inset:0; width:100%; height:100%; }

/* a screen: the frame is the photo's; inside, the series' picture as a CRT shows it in a dim room */
#web .cy-screen { position:absolute; container-type:size; padding:0; overflow:hidden; border-radius:10% / 13%; background:#121711; cursor:pointer; }
#web .cy-screen img { position:absolute; left:0; top:50%; width:100%; height:134%; object-fit:cover; transform:translateY(-50%);
  filter:grayscale(.3) sepia(.35) saturate(.75) brightness(.55) contrast(1.15) blur(.5px); }
/* the glass: curved edges going dark, a soft reflection of the tube light at the top */
#web .cy-screen::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 40% at 35% 12%, rgba(235,245,220,.16), transparent 70%), radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(0,0,0,.7) 100%); }
/* the screens are alive: a faint noise that never stops moving, a slow band of light rolling down, the picture
   breathing a little; each screen at its own pace (--i) */
#web .cy-screen::before { content:''; position:absolute; inset:-20%; z-index:1; pointer-events:none; opacity:.14; mix-blend-mode:screen;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8  0 0 0 0 .9  0 0 0 0 .8  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 140px;
  animation:cy-noise .45s steps(4) infinite; }
@keyframes cy-noise { 0% { transform:translate(0, 0); } 25% { transform:translate(-9%, 6%); } 50% { transform:translate(7%, -8%); } 75% { transform:translate(-5%, -4%); } 100% { transform:translate(0, 0); } }
#web .cy-name::before { content:''; position:absolute; left:-20%; right:-20%; top:-30%; height:22%; z-index:-1; pointer-events:none;
  background:linear-gradient(transparent, rgba(220,255,225,.09), transparent); animation:cy-roll 6s linear infinite; animation-delay:calc(var(--i, 0) * -1.1s); }
@keyframes cy-roll { from { transform:translateY(0); } to { transform:translateY(700%); } }
#web .cy-screen img { animation:cy-breathe 3.2s ease-in-out infinite; animation-delay:calc(var(--i, 0) * -.6s); }
@keyframes cy-breathe { 0%, 100% { opacity:1; } 47% { opacity:.9; } 50% { opacity:.97; } 53% { opacity:.88; } }
/* the name, glowing on the screen like text on an old monitor */
#web .cy-name { position:absolute; inset:0 8% 18%; z-index:1; display:grid; place-items:center; text-align:center;
  font:900 15cqw/.9 var(--f-display); text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; color:#eaf3d6;
  text-shadow:0 0 .35em rgba(205,255,215,.55), 0 0 .08em rgba(255,255,255,.6); }
#web .cy-n { position:absolute; left:0; right:0; bottom:9%; z-index:1; text-align:center; font:italic 8cqw/1 var(--f-serif); color:#cfd9bdcc; }
/* pointing at a screen wakes it a little, no movement */
#web .cy-screen:hover img, #web .cy-screen:focus-visible img { filter:grayscale(.2) sepia(.25) saturate(.85) brightness(.72) contrast(1.15) blur(.4px); }
#web .cy-screen:focus-visible { outline:2px solid #eaf3d6; outline-offset:3px; }
/* the tube light: it breathes, and now and then it stutters before it holds; its light falls on the wall */
#web .cy-tube { position:absolute; left:32.4%; top:1.2%; width:35.2%; height:3.4%; border-radius:40%; pointer-events:none; mix-blend-mode:screen; filter:blur(3px);
  background:linear-gradient(rgba(240,255,225,.0), rgba(240,255,225,.85) 45%, rgba(240,255,225,.85) 55%, rgba(240,255,225,0)); animation:cy-tube 5s infinite; }
#web .cy-glow { position:absolute; left:18%; top:-8%; width:64%; height:48%; pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 50% 45% at 50% 18%, rgba(235,255,220,.75), transparent 70%); animation:cy-tube 5s infinite; }
@keyframes cy-tube {
  0%, 100% { opacity:.75; } 30% { opacity:.95; } 55% { opacity:.7; }
  70% { opacity:.85; } 71% { opacity:.2; } 72% { opacity:.8; } 73.5% { opacity:.3; } 75% { opacity:.9; } 85% { opacity:.8; }
}
/* the router's five lights, each blinking at its own pace */
#web .cy-led { position:absolute; top:15.4%; width:.32%; aspect-ratio:1; margin-left:-.16%; border-radius:50%; pointer-events:none;
  background:#8dffb0; box-shadow:0 0 6px 2px rgba(110,255,150,.65); animation:cy-led 1.7s steps(1) infinite; animation-delay:var(--d); }
@keyframes cy-led { 0% { opacity:1; } 18% { opacity:.25; } 26% { opacity:1; } 52% { opacity:.4; } 60% { opacity:1; } }

/* the board, wiped clean and written again in chalk as a proper price list: a title, one ruled line per item, the
   prices lined up on the right; sizes follow the photo's width (--rw, set by the page as it fits the photo) */
#web .cy-board { position:absolute; left:40.75%; top:9.35%; width:14.7%; height:14.6%; border-radius:2px; border:0; display:flex; flex-direction:column; justify-content:center; padding:0 1.6em; box-sizing:border-box;
  color:rgba(234,240,228,.88); font:500 calc(var(--rw, 1600px) * .0078)/1 var(--f-hand); cursor:pointer; text-align:left;
  background:radial-gradient(ellipse 30% 40% at 22% 30%, rgba(235,240,230,.06), transparent 70%), radial-gradient(ellipse 35% 30% at 75% 70%, rgba(235,240,230,.05), transparent 70%), #1d2a2d;
  box-shadow:inset 0 0 12px rgba(0,0,0,.55); text-shadow:0 0 2px rgba(255,255,255,.2); }
#web .cy-board b { align-self:center; font-weight:700; font-size:1.9em; letter-spacing:.04em; text-transform:uppercase; }
#web .cy-board > i { align-self:center; margin:.1em 0 .45em; font-style:normal; font-size:.85em; opacity:.75; }
#web .cy-board p { display:flex; align-items:baseline; justify-content:space-between; gap:1em; margin:0; padding:.22em 0; border-top:1px solid rgba(234,240,228,.28); }
#web .cy-board p:last-of-type { border-bottom:1px solid rgba(234,240,228,.28); }
#web .cy-board p > :last-child { min-width:3.2em; text-align:right; }
#web .cy-board em { font-style:normal; font-weight:600; color:#f2e58a; }
#web .cy-board small { align-self:center; margin-top:.45em; font-size:.75em; opacity:.62; }

/* his marks on the wall: his tag, sprayed small; a sticker on a computer */
#web .cy-sticker { position:absolute; left:47.65%; top:66.2%; padding:.1em .35em; background:#c9b54a; color:#1d1a12; font:900 calc(var(--rw, 1600px) * .0062)/1 var(--f-display); letter-spacing:.06em;
  transform:rotate(-7deg); opacity:.85; filter:brightness(.7) saturate(.8); pointer-events:none; }

/* the papers on the wall: the old writing covered in the paper's own colour, then written again in ink */
#web .cy-paper { position:absolute; display:grid; align-content:center; justify-items:center; gap:.2em; padding:0 .3em; box-sizing:border-box; text-align:center; pointer-events:none;
  font:700 calc(var(--rw, 1600px) * .0074)/1.05 var(--f-hand); color:rgba(22,17,12,.95); }
#web .cy-paper::before { content:''; position:absolute; inset:6% 7%; z-index:-1; background:var(--paper); filter:blur(3px); opacity:.94; }
#web .cy-paper b { font-weight:700; font-size:1.55em; }
#web .cy-paper small { font-size:.85em; opacity:.92; }
#web .cy-red { left:58.1%; top:12%; width:5.3%; height:13.8%; --paper:#b98c72; transform:rotate(-1deg); }
#web .cy-red b { font-size:2em; color:rgba(22,14,10,.96); letter-spacing:.03em; }
#web .cy-note { left:67.5%; top:13.9%; width:4.1%; height:10.4%; --paper:#d2c7b0; transform:rotate(.8deg); }
#web .cy-note span:first-child { font-size:1.2em; }
#web .cy-rules { left:74.5%; top:10%; width:5.1%; height:15.8%; justify-items:start; text-align:left; font-size:calc(var(--rw, 1600px) * .0064); --paper:#c0ab86; transform:rotate(-.6deg); }
#web .cy-rules b { justify-self:center; font-size:1.6em; }
#web .cy-rules small { justify-self:end; }

/* what the customers wrote on the wall, from his series: marker gone pale on the paint */
#web .cy-scrawl { position:absolute; margin:0; pointer-events:none; white-space:nowrap; transform:rotate(var(--r));
  font:600 calc(var(--rw, 1600px) * .0155)/1 var(--f-hand); color:rgba(28,24,26,.78); mix-blend-mode:multiply; filter:blur(.25px); }
#web .cy-scrawl.cy-ar { font-family:var(--f-ar-hand); font-size:calc(var(--rw, 1600px) * .018); color:rgba(120,22,28,.7); }
#web .cy-scrawl.cy-small { font-size:calc(var(--rw, 1600px) * .0105); color:rgba(25,25,25,.72); }
/* the wifi is in chalk half rubbed out, on a wall full of writing: you have to look for it */
#web .cy-scrawl.cy-wifi { font-size:calc(var(--rw, 1600px) * .0112); color:rgba(216,226,204,.5); mix-blend-mode:normal; filter:blur(.2px); }
/* during the zoom into a screen: the room is one still picture, scaled by the compositor alone */
#web .cy-walk *, #web .cy-walk *::before, #web .cy-walk *::after { animation-play-state:paused !important; transition:none !important; }
#web .cy-walk .cy-screen::before, #web .cy-walk .cy-tube, #web .cy-walk .cy-glow { display:none; }
#web .cy-walk { pointer-events:none; }
@media (prefers-reduced-motion: reduce) { #web .cy-tube, #web .cy-glow, #web .cy-led, #web .cy-screen::before, #web .cy-name::before, #web .cy-screen img { animation:none; } }
#web .cy-swipe { display:none; }

/* the way back, in the channel's top bar */
#web .cy-back { flex:none; padding:4px 10px; color:var(--blanc); font:italic 15px var(--f-serif); border:1px solid rgba(236,231,222,.35); }
#web .cy-back:hover, #web .cy-back:focus-visible { background:var(--blanc); color:#0a0908; outline:none; }

@media(max-width:760px) {
 #web .cy-swipe { display:block; position:absolute; z-index:3; left:0; right:0; bottom:96px; margin:0; text-align:center; font:600 20px var(--f-hand); color:#eaf3d6; text-shadow:0 1px 6px #000; pointer-events:none; }
 #web .cy-back { font-size:0; padding:4px 8px; } #web .cy-back::before { content:'←'; font-size:18px; font-style:normal; }
}
#web .cy-board:hover, #web .cy-board:focus-visible { color:#fff; outline:none; }
#web .cy-board:hover small, #web .cy-board:focus-visible small { opacity:1; text-decoration:underline; text-underline-offset:2px; }

/* ── Inside: La Chaîne in the site's « inside his head » night: violet dark, pop yellow for what is chosen, each
   series in its own colour; the video and the words come first, no decoration for its own sake. ── */
#web { --n-bg:#171717; --n-panel:#242424; --n-panel2:#303030; --n-line:#414141; --n-text:#EFEFEF; --n-mute:#B8B8B8; --n-y:#F2D43A; --n-p:#FF4FA0; --n-tq:#3FE0C5; }
#web .tube { background:linear-gradient(180deg, #1F1F1F, #131313); color:var(--n-text); }
#web .cave-rock { display:none; }
/* top bar and search */
#web .tb-bar { background:var(--n-bg); border-bottom:1px solid var(--n-line); position:relative; }
#web .tb-logo b { background:var(--n-y); color:var(--n-bg); }
#web .tb-logo span { color:var(--n-text); }
#web .tb-logo i { color:var(--n-p); }
#web .cy-back { color:var(--n-mute); border-color:var(--n-line); }
#web .cy-back:hover, #web .cy-back:focus-visible { background:var(--n-y); color:var(--n-bg); }
#web .tb-search { background:var(--n-panel2); border:1px solid transparent; border-radius:0; }
#web .tb-search:focus-within { border-color:var(--n-y); box-shadow:none; }
#web .tb-search input { color:var(--n-text); }
#web .tb-search input::placeholder { color:var(--n-mute); }
#web .tb-search svg, #web .tb-search kbd { color:var(--n-mute); }
/* the suggestions */
#web .sg { position:absolute; z-index:40; top:calc(100% - 6px); left:min(270px, 30%); width:min(560px, calc(100% - 24px)); max-height:min(70vh, 560px); max-height: min(70dvh, 560px); overflow-y:auto; padding:6px 0 0;
  background:var(--n-panel); border:1px solid var(--n-line); box-shadow:0 18px 40px rgba(0,0,0,.55); }
#web .sg[hidden] { display:none; }
#web .sg-h { margin:8px 14px 4px; font:italic 14px var(--f-serif); color:var(--n-mute); }
#web .sg-row { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; align-items:center; width:100%; padding:7px 14px; text-align:left; color:var(--n-text); background:none; }
#web .sg-row > i { grid-row:1 / 3; width:10px; height:10px; background:var(--t); }
#web .sg-row img { grid-row:1 / 3; width:72px; aspect-ratio:16/9; object-fit:cover; }
#web .sg-row b { font:500 16px/1.2 var(--f-serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#web .sg-row small { font:italic 13px var(--f-serif); color:var(--n-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#web .sg-row:hover, #web .sg-row:focus-visible { background:var(--n-panel2); outline:none; }
#web .sg-all { display:block; width:100%; margin-top:6px; padding:11px 14px; text-align:left; background:var(--n-panel2); color:var(--n-y); font:500 15px var(--f-serif); border-top:1px solid var(--n-line); }
#web .sg-all:hover, #web .sg-all:focus-visible { background:var(--n-y); color:var(--n-bg); outline:none; }
/* the menu */
#web .tb-side { background:var(--n-bg); border-right:1px solid var(--n-line); }
#web .sd-h { color:var(--n-mute); }
#web .sd { color:#DADADA; border-left-color:transparent; }
#web .sd i { color:#9C9C9C; font-style:normal; }
#web .sd.started i { color:var(--n-y); }
#web .sd:hover, #web .sd:focus-visible { background:var(--n-panel); color:#fff; }
#web .sd.on { background:var(--n-panel2); color:#fff; border-left-color:var(--n-y); }
#web .sd.here { background:var(--n-panel); border-left-color:var(--t); }
/* the home */
#web .tb-main { padding:22px clamp(16px, 3vw, 40px) 150px; }
#web .hm-intro { max-width:1100px; margin:6px auto 34px; padding:26px 30px 24px; background:var(--n-panel); border-left:4px solid var(--n-y); }
#web .hm-k { margin:0; font:italic 15px var(--f-serif); color:var(--n-mute); }
#web .hm-k span { margin-left:6px; font-family:var(--f-ar-hand); font-style:normal; font-size:18px; color:var(--n-p); }
#web .hm-t { margin:6px 0 12px; font:900 clamp(38px, 4.4vw, 66px)/.92 var(--f-display); text-transform:uppercase; color:var(--n-text); }
#web .hm-line { margin:0 0 14px; max-width:66ch; font:19px/1.5 var(--f-serif); color:#DEDEDE; }
#web .hm-stats { display:flex; flex-wrap:wrap; gap:6px 26px; margin:0 0 14px; font:italic 15px var(--f-serif); color:var(--n-mute); }
#web .hm-stats b { margin-right:5px; font:800 26px var(--f-display); font-style:normal; color:var(--n-y); }
#web .hm-how { margin:0; padding-top:12px; border-top:1px solid var(--n-line); font:16px/1.45 var(--f-serif); color:var(--n-mute); }
#web .hm-how b { color:var(--n-text); font-weight:500; }
#web .hm-sec { max-width:1100px; margin:0 auto 40px; }
#web .hm-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:0 0 14px; font:900 clamp(28px, 2.8vw, 40px)/1 var(--f-display); text-transform:uppercase; color:var(--n-text); }
#web .hm-h small, #web .hm-h4 small { font:italic 400 15px var(--f-serif); text-transform:none; color:var(--n-mute); }
#web .hm-h4 { margin:26px 0 12px; font:800 22px var(--f-display); text-transform:uppercase; color:var(--n-mute); display:flex; gap:12px; align-items:baseline; }
#web .hm-more { margin-left:auto; font:500 15px var(--f-serif); text-transform:none; color:var(--n-y); }
#web .hm-more:hover, #web .hm-more:focus-visible { text-decoration:underline; outline:none; }
#web .hm-row { display:grid; grid-auto-flow:column; grid-auto-columns:250px; justify-content:start; gap:14px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
/* a series explained */
#web .gd-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
#web .gd { display:grid; grid-template-rows:auto 1fr; padding:0; text-align:left; background:var(--n-panel); color:var(--n-text); border-top:3px solid var(--t); transition:background .15s; }
#web .gd:hover, #web .gd:focus-visible { background:var(--n-panel2); outline:none; }
#web .gd:focus-visible { box-shadow:0 0 0 2px var(--n-y); }
#web .gd-img { position:relative; display:block; aspect-ratio:16/8; overflow:hidden; background:#0E0E0E; }
#web .gd-img img { position:absolute; left:0; top:50%; width:100%; height:134%; object-fit:cover; transform:translateY(-50%); }
#web .gd-img em { position:absolute; left:10px; bottom:10px; padding:3px 8px; background:var(--t); color:#171717; font:600 13px var(--f-serif); font-style:normal; }
#web .gd-body { display:grid; align-content:start; gap:8px; padding:14px 16px 16px; }
#web .gd-t { font:900 28px/.95 var(--f-display); text-transform:uppercase; color:var(--n-text); }
#web .gd-row { font:16px/1.4 var(--f-serif); color:#DEDEDE; }
#web .gd-row i { display:block; font-size:13px; color:var(--n-mute); }
#web .gd-meta { font:italic 14px var(--f-serif); color:var(--n-mute); }
#web .gd-bar { position:relative; display:grid; gap:4px; }
#web .gd-bar i { display:block; height:4px; background:var(--n-line); }
#web .gd-bar i::after { content:''; display:block; width:var(--p); height:100%; background:var(--n-y); }
#web .gd-bar small { font:italic 13px var(--f-serif); color:var(--n-y); }
#web .gd-small { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
#web .gd-small .gd-img { aspect-ratio:16/7; }
#web .gd-small .gd-t { font-size:22px; }
/* the other formats */
#web .fm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
#web .fm { display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows:auto 1fr auto; column-gap:12px; padding:10px; text-align:left; background:var(--n-panel); color:var(--n-text); }
#web .fm-img { grid-row:1 / 4; display:block; width:96px; aspect-ratio:16/9; align-self:start; }
#web .fm img { display:block; width:100%; height:100%; object-fit:cover; }
#web .fm b { font:800 18px var(--f-display); text-transform:uppercase; }
#web .fm small { font:14px/1.35 var(--f-serif); color:var(--n-mute); }
#web .fm i { font:italic 14px var(--f-serif); color:var(--n-y); }
#web .fm:hover, #web .fm:focus-visible { background:var(--n-panel2); outline:none; }
/* video tiles */
#web .vt { background:var(--n-panel); color:var(--n-text); padding:0 0 12px; gap:6px; transform:none; }
#web .vt::after { display:none; }
#web .vt:hover, #web .vt:focus-visible { background:var(--n-panel2); transform:none; box-shadow:none; }
#web .vt:focus-visible { outline:2px solid var(--n-y); outline-offset:2px; }
#web .vt-img { border-bottom:3px solid var(--t); }
#web .vt-img b { background:rgba(12,12,12,.85); }
#web .vt-img em { background:var(--n-y); color:var(--n-bg); }
#web .vt-t, #web .vt-m { margin:0 12px; }
#web .vt-m { color:var(--n-mute); }
#web .vt-grid { max-width:1100px; }
/* the lists' heads and filters */

#web .pg-head { max-width:1100px; border-bottom-color:var(--n-line); }
#web .pg-k { color:var(--n-y); }
#web .pg-t { color:var(--n-text); }
#web .pg-note { color:#DEDEDE; }
#web .pg-sub, #web .pg-sort { color:var(--n-mute); }
#web .pg-sort select { background:var(--n-panel2); color:var(--n-text); border:1px solid var(--n-line); }
#web .fl-bar { display:flex; flex-wrap:wrap; gap:6px; max-width:1100px; margin:-8px auto 22px; }
#web .fl { padding:7px 12px; background:var(--n-panel); color:#DEDEDE; font:15px var(--f-serif); border:1px solid var(--n-line); }
#web .fl:hover, #web .fl:focus-visible { border-color:var(--n-mute); outline:none; }
#web .fl.on { background:var(--n-y); color:var(--n-bg); border-color:var(--n-y); }
#web .pg-empty { color:var(--n-mute); }
#web .sh { background:var(--n-panel); color:var(--n-text); }
#web .sh i, #web .sh em { color:var(--n-mute); }
/* a series' page */
#web .po.pl { background:var(--n-panel); color:var(--n-text); border-top:3px solid var(--t); padding:26px 28px 30px; }
#web .po.pl::after, #web .pl .po-sign, #web .pl .po-closed { display:none; }
#web .pl .po-t { color:var(--n-text); }
#web .pl-k, #web .pl .po-alt, #web .pl-brief dt, #web .pl-list-h, #web .pl-row-m, #web .pl-stats { color:var(--n-mute); }
#web .pl-stats b { color:var(--n-y); }
#web .pl-brief div, #web .pl-facts div { border-top-color:var(--n-line); }
#web .pl-brief dd, #web .pl .po-text { color:#DEDEDE; }
#web .pl-facts { display:grid; gap:8px; margin:16px 0 0; }
#web .pl-facts div { display:grid; grid-template-columns:9em minmax(0,1fr); gap:12px; padding-top:8px; border-top:1px solid var(--n-line); }
#web .pl-facts dt { font:italic 14px var(--f-serif); color:var(--n-mute); }
#web .pl-facts dd { margin:0; font:16px/1.4 var(--f-serif); color:#DEDEDE; }
#web .pl-best { padding:0; background:none; color:var(--n-y); font:inherit; text-align:left; text-decoration:underline; text-underline-offset:3px; }
#web .pl-story { margin:26px 0 0; padding:18px 20px; background:var(--n-panel2); }
#web .pl-story h3 { margin:0 0 6px; font:900 24px var(--f-display); text-transform:uppercase; color:var(--n-y); }
#web .pl-motifs { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:14px 0 0; }
#web .pl-motifs span { font:italic 14px var(--f-serif); color:var(--n-mute); margin-right:4px; }
#web .pl-motifs em { padding:2px 8px; background:var(--n-bg); color:#DEDEDE; font:14px var(--f-serif); font-style:normal; }
#web .pl-row { color:var(--n-text); border-bottom-color:var(--n-line); }
#web .pl-row i { color:#9C9C9C; }
#web .pl-row.seen i { color:var(--n-y); }
#web .pl-row:hover, #web .pl-row:focus-visible { background:var(--n-panel2); }
#web .pl-list-h { border-bottom-color:var(--n-text); }
#web .pl-cover { outline-color:var(--n-line); }
#web .pl-cover-cap { background:var(--n-bg); border-top-color:var(--t); }
#web .pl-cover .po-play { background:var(--n-bg); }
#web .pl-cover .po-play::after { background:var(--n-y); }
#web .pl-resume { color:var(--n-text); border-left-color:var(--n-y); background:var(--n-panel2); }
#web .pl-resume span { color:var(--n-mute); }
#web .pl-nav button { color:var(--n-text); border-bottom-color:var(--t); }
#web .pl-nav span { color:var(--n-mute); }

/* the player */
#web .tb-watch { background:linear-gradient(180deg, #212121, #121212); }
#web .tw-step { background:var(--n-panel2); color:var(--n-text); }
#web .tw-step:hover:not(:disabled) { background:var(--n-y); color:var(--n-bg); }
#web .tw-pos { color:var(--n-mute); }
#web .tw-info, #web .tw-next, #web .tw-next-h { background:var(--n-panel); color:var(--n-text); }
#web .tw-info { border-top-color:var(--n-y); }
#web .tw-info .po-sign { display:none; }
#web .tw-meta, #web .tw-who dt, #web .tw-next-h { color:var(--n-mute); }
#web .tw-who dd, #web .tw-text, #web .tw-film { color:#DEDEDE; }
#web .tw-who div { border-top-color:var(--n-line); }
#web .tw-next-h { border-bottom-color:var(--n-line); }
#web .tw-row { color:var(--n-text); border-bottom-color:var(--n-line); }
#web .tw-row i { color:#9C9C9C; }
#web .tw-row:hover, #web .tw-row:focus-visible { background:var(--n-panel2); }
#web .tw-row.now { background:rgba(242,212,58,.16); }
#web .tw-row.now i { color:var(--n-y); }
#web .tw-pl { background:var(--n-y); color:var(--n-bg); }
#web .tw-yt { color:var(--n-text); border-bottom-color:var(--n-mute); }
#web .tw-close { color:var(--n-text); border-color:var(--n-line); }
/* phones: the channel's ticket holds the top-right corner; the close box stands in the free space between it and the channel's name */
@media (max-width: 760px) { #web .tw-close { top:12px; right:auto; left:calc(50% - 20px); padding:6px 10px; background:var(--n-panel); } }
#web .ch-end { color:var(--n-mute); }
#web .ch-end a { color:var(--n-y); }
@media (max-width:760px) {
  #web .hm-intro { padding:18px 16px; }
  #web .hm-line { font-size:17px; }
  #web .gd-grid, #web .gd-small { grid-template-columns:1fr; }
  #web .hm-row { grid-auto-columns:72%; }
  #web .sg { left:8px; right:8px; width:auto; }
  #web .pl-facts div { grid-template-columns:1fr; gap:2px; }
  #web .po.pl { padding:18px 16px 22px; }
}

/* ── the way back: one button that says where it leads, and a trail on every page saying where you are ── */
#web .cy-back { display:none; }
#web .nv-back { flex:none; display:flex; align-items:center; gap:10px; max-width:230px; min-height:44px; padding:4px 14px 4px 10px; background:transparent; color:var(--n-text);
  border:1px solid var(--n-line); border-left:3px solid var(--n-y); text-align:left; cursor:pointer; transition:background .15s, border-color .15s; }
#web .nv-ar { font:400 24px/1 var(--f-serif); color:var(--n-y); transition:transform .2s ease; }
#web .nv-l { display:grid; min-width:0; line-height:1.1; }
#web .nv-l small { font:italic 13px var(--f-serif); color:var(--n-mute); }
#web .nv-l b { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:600 16px var(--f-serif); color:var(--n-text); }
#web .nv-back:hover, #web .nv-back:focus-visible { background:var(--n-panel2); border-color:var(--n-y); outline:none; }
#web .nv-back:hover .nv-ar, #web .nv-back:focus-visible .nv-ar { transform:translateX(-4px); }
#web .nv-trail { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:2px 0 14px; font:italic 15px var(--f-serif); color:var(--n-mute); }
#web .nv-trail button { padding:2px 0; background:none; border:0; color:var(--n-mute); font:inherit; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(184,184,184,.35); text-underline-offset:3px; }
#web .nv-trail button:hover, #web .nv-trail button:focus-visible { color:var(--n-y); text-decoration-color:var(--n-y); outline:none; }
#web .nv-trail i { font-style:normal; color:var(--n-line); }
#web .nv-trail b { color:var(--n-text); font-weight:500; font-style:normal; }
#web .tb-main > .nv-trail { width:min(860px, 100%); margin-left:auto; margin-right:auto; }
@media (max-width:760px) {
  #web .nv-back { max-width:none; min-height:40px; padding:4px 10px 4px 8px; }
  #web .nv-l { display:none; }
  #web .nv-trail { font-size:14px; }
}

/* ── polish, same rooms and places: every picture is a small screen of the cybercafé (scanlines, a dim glass that lights
   when pointed at), every card carries its series' colour, and a page comes on like a channel, in one cut ── */
#web { --scan: repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px); --ease-out: cubic-bezier(.2,.8,.2,1); }

/* the pictures: a screen that is off until the pointer finds it */
#web :is(.gd-img, .vt-img, .pl-thumb, .fm-img) { position: relative; overflow: hidden; background: #0b0b0b; }
#web :is(.gd-img, .vt-img, .pl-thumb, .fm-img)::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--scan), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55)); opacity: .9; transition: opacity .4s; }
#web :is(.gd-img, .vt-img, .pl-thumb, .fm-img) img { filter: brightness(.78) saturate(.85); transition: filter .4s, transform .9s var(--ease-out); }
#web :is(.gd, .vt, .pl-row, .fm):is(:hover, :focus-visible) :is(.gd-img, .vt-img, .pl-thumb, .fm-img)::after { opacity: .35; }
#web :is(.gd, .vt, .pl-row, .fm):is(:hover, :focus-visible) :is(.gd-img, .vt-img, .pl-thumb, .fm-img) img { filter: none; animation: crt-on .32s steps(3, end); }
#web .gd:is(:hover, :focus-visible) .gd-img img { transform: translateY(-50%) scale(1.04); }
#web :is(.vt, .fm):is(:hover, :focus-visible) :is(.vt-img, .fm-img) img { transform: scale(1.04); }
@keyframes crt-on { 0% { filter: brightness(2.2) contrast(.7); } 40% { filter: brightness(.6); } 100% { filter: none; } }

/* the cards: the dark of the room, the series' colour as a strip of tape, a lift when pointed at */
#web :is(.gd, .vt, .fm, .sh) { position: relative; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s; }
#web :is(.gd, .vt, .fm, .sh):is(:hover, :focus-visible) { transform: translateY(-3px); outline: none;
  box-shadow: 0 22px 34px -22px color-mix(in srgb, var(--t, var(--n-y)) 55%, #000), 0 0 0 1px color-mix(in srgb, var(--t, var(--n-y)) 35%, transparent); }
#web :is(.gd, .vt, .fm, .sh):focus-visible { box-shadow: 0 0 0 2px var(--t, var(--n-y)); }
#web .gd { border-top: 0; box-shadow: inset 0 3px 0 var(--t); }
#web .gd:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--t) 7%, var(--n-panel)); box-shadow: inset 0 6px 0 var(--t), 0 22px 34px -22px color-mix(in srgb, var(--t) 55%, #000); }
#web .gd-t, #web .vt-t { transition: color .25s; }
#web .gd:is(:hover, :focus-visible) .gd-t { color: var(--t); }
/* the series' tag, a sticker on the screen rather than a label */
#web .gd-img em { z-index: 2; padding: 4px 9px 3px; font: 700 10px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 3px 8px rgba(0,0,0,.5); }
/* a video's tile: its series' colour down the side, its length as a timecode, « vu » stamped */
#web .vt { background: var(--n-panel); box-shadow: inset 3px 0 0 var(--t, var(--n-line)); }
#web .vt::after { content: none; }
#web .vt-img b { z-index: 2; padding: 2px 6px; background: rgba(0,0,0,.85); color: #fff; font: 400 10px var(--f-mono); letter-spacing: .04em; }
#web .vt-img em { z-index: 2; padding: 2px 7px; background: var(--t, var(--n-y)); color: #111; font: 700 9px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg); transform-origin: 0 0; }
#web .vt:is(:hover, :focus-visible) .vt-t { color: var(--t, var(--n-y)); }
/* the episode rows of a series */
#web .pl-row { transition: background .25s; }
#web .pl-row:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--t) 9%, transparent); outline: none; }

/* a row that runs off the page: arrows at its ends, and its edge fades out where there is more */
#web .hm-rail { position: relative; }
#web .hm-rail.more .hm-row { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
#web .hm-arrow { position: absolute; top: calc(50% - 40px); z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--n-bg); color: var(--n-text); border: 1px solid var(--n-line); font: 400 20px var(--f-mono); transition: background .2s, color .2s; }
#web .hm-arrow[data-row="-1"] { left: -12px; } #web .hm-arrow[data-row="1"] { right: -12px; }
#web .hm-arrow:hover, #web .hm-arrow:focus-visible { background: var(--n-y); color: var(--n-bg); outline: none; }
#web .hm-row { scrollbar-width: none; scroll-snap-type: x proximity; }
#web .hm-row > * { scroll-snap-align: start; }

/* the theatre: the series said once, at the head of its list */
#web .tw-next-h b { color: var(--n-text); font-style: normal; }
#web .tw-next-who { display: block; margin-top: 8px; font: 15px/1.35 var(--f-serif); font-style: normal; color: #DEDEDE; }
#web .tw-next-who i { display: block; font-size: 12px; font-style: italic; color: var(--n-mute); }

/* a new page comes on like a channel: one cut, a line of light that opens, as on an old screen */
#web .tb-main.tv-in > * { animation: tv-in .42s var(--ease-out) both; }
@keyframes tv-in {
  0% { opacity: 0; transform: scaleY(.015); filter: brightness(3); }
  30% { opacity: 1; transform: scaleY(.015); filter: brightness(2.4); }
  70% { transform: scaleY(1.01); filter: brightness(1.2); }
  100% { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #web .tb-main.tv-in > *, #web :is(.gd-img, .vt-img, .pl-thumb, .fm-img) img { animation: none !important; }
  #web :is(.gd, .vt, .fm, .sh) { transition: none; }
}

/* ── the video grid: the room's dark between the tiles (the shelves of Écrits share the class name) ── */
#web .vt-grid { background: none; gap: 16px; column-gap: 16px; }

/* ── the side menu, laid out like YouTube's guide, in the cybercafé's dark: icons, one line per entry, the series as its
   subscriptions (small CRT screens, ringed in their colour), the entry you are on marked by a bar of its colour ── */
#web .tb-side { gap: 0; padding: 12px 10px 130px; }
#web .sd { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 16px; min-height: 40px; padding: 0 12px; border-left: 3px solid transparent;
  font: 400 15px/1.2 var(--f-serif); color: #DADADA; }
#web .sd-ic svg { width: 22px; height: 22px; justify-self: center; color: var(--n-mute); transition: color .2s; }
#web .sd:hover svg, #web .sd.on svg { color: var(--n-y); }
#web .sd img { width: 30px; height: 30px; border-radius: 18% / 22%; filter: grayscale(.35) brightness(.9); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--t) 70%, transparent); }
#web .sd i { font: 400 10px var(--f-mono); letter-spacing: .03em; font-style: normal; color: var(--n-mute); }
#web .sd.started i { color: var(--n-y); }
#web .sd:hover, #web .sd:focus-visible { background: var(--n-panel); color: #fff; }
#web .sd.on { background: var(--n-panel2); color: #fff; font-weight: 600; border-left-color: var(--t, var(--n-y)); }
#web .sd.on:not(.tg-pl) { border-left-color: var(--n-y); }
#web .sd-h { margin: 14px 15px 6px; font: 900 15px var(--f-display); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--n-text); }
#web .sd-sep { margin: 10px 12px; border: 0; border-top: 1px solid var(--n-line); }

/* ── the menu: five series, the rest behind « + autres » (the series you are on always shows) ── */
#web .tb-side:not(.open) .sd-extra:not(.on) { display: none; }
#web .sd-more svg { transition: transform .3s var(--ease-out); }
#web .tb-side.open .sd-more svg { transform: rotate(180deg); }
#web .sd-more span { color: var(--n-mute); }
#web .sd-more:hover span { color: #fff; }

/* ── a series, shown as a film is: its title card first, then its episodes ── */
#web .pl-show { max-width: 1280px; margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; }
#web .pl-show + .pl-nav { max-width: 1280px; }
/* the title card: the series' colour and its face, blurred, behind a huge title; its screen on the right */
#web .ps-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(26px, 4vw, 56px); overflow: hidden; isolation: isolate; min-height: min(62vh, 560px); min-height: min(62dvh, 560px);
  background: linear-gradient(115deg, color-mix(in srgb, var(--t) 38%, #121212), color-mix(in srgb, var(--t) 10%, #121212) 60%, #111); }
#web .ps-glow { position: absolute; inset: -40px; z-index: -2; background: 70% 50% / cover no-repeat; filter: blur(46px) saturate(1.25); opacity: .34; }
#web .ps-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--scan); opacity: .4; }
#web .ps-in { display: grid; gap: 14px; align-content: center; min-width: 0; }
#web .ps-k { margin: 0; font: 400 11px var(--f-mono); letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--t) 60%, #fff); }
#web .ps-t { margin: 0; font: 900 clamp(52px, 7vw, 116px)/.84 var(--f-display); text-transform: uppercase; color: #fff; text-wrap: balance; }
#web .ps-alt { margin: -4px 0 0; font: 400 clamp(20px, 2vw, 28px) var(--f-ar-display); color: color-mix(in srgb, var(--t) 70%, #fff); }
#web .ps-line { margin: 4px 0 0; max-width: 46ch; font: italic clamp(18px, 1.6vw, 23px)/1.42 var(--f-serif); color: #F0F0F0; }
#web .ps-brief { display: grid; gap: 10px; margin: 2px 0 0; max-width: 52ch; }
#web .ps-brief div { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--t); }
#web .ps-brief dt { font: 400 10px var(--f-mono); letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.62); }
#web .ps-brief dd { margin: 0; font: 17px/1.4 var(--f-serif); color: #EDEDED; }
#web .ps-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 0; font: italic 15px var(--f-serif); color: rgba(255,255,255,.7); }
#web .ps-stats b { margin-right: 5px; font: 800 24px var(--f-display); font-style: normal; color: var(--n-y); }
#web .pl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
#web .pl-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 16px; background: #fff; color: #111; font: 600 17px var(--f-serif); cursor: pointer; transition: background .2s; }
#web .pl-all svg { width: 16px; height: 16px; }
#web .pl-all:hover, #web .pl-all:focus-visible { background: var(--n-y); outline: none; }
#web .pl-again { min-height: 44px; padding: 0 16px; background: rgba(255,255,255,.12); color: #fff; font: 16px var(--f-serif); cursor: pointer; }
#web .pl-again:hover, #web .pl-again:focus-visible { background: rgba(255,255,255,.22); outline: none; }
/* its screen: a CRT on the right, the picture of its most-watched episode */
#web .ps-screen { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: pointer; border-radius: 6% / 8%;
  background: #0b0b0b; box-shadow: 0 0 0 10px #1c1b19, 0 0 0 12px color-mix(in srgb, var(--t) 45%, #000), 0 40px 60px -30px #000; }
#web .ps-screen img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85) saturate(.9); transition: filter .4s, transform .9s var(--ease-out); }
#web .ps-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--scan), radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0,0,0,.6)); }
#web .ps-screen:hover img, #web .ps-screen:focus-visible img { filter: none; transform: scale(1.03); }
#web .ps-screen:focus-visible { outline: 3px solid var(--t); outline-offset: 14px; }
#web .ps-screen .po-play { z-index: 1; }
#web .ps-screen-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px 14px; background: linear-gradient(transparent, rgba(0,0,0,.85));
  font: italic 15px var(--f-serif); color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* « tout savoir », folded under the title card */
#web .ps-more { margin: 0; padding: 14px clamp(26px, 4vw, 56px); background: #161616; border-top: 1px solid color-mix(in srgb, var(--t) 40%, transparent); }
#web .ps-more summary { cursor: pointer; list-style: none; font: 600 16px var(--f-serif); color: #fff; }
#web .ps-more summary::-webkit-details-marker { display: none; }
#web .ps-more summary::after { content: ' +'; color: var(--t); }
#web .ps-more[open] summary::after { content: ' −'; }
#web .ps-more-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px; margin-top: 14px; }
#web .ps-more .pl-facts div { grid-template-columns: 9em minmax(0, 1fr); }
#web .ps-more .po-text { margin: 0 0 10px; font: 16px/1.5 var(--f-serif); color: #DEDEDE; }
#web .pl-best small { color: var(--n-mute); font-size: 14px; }
/* the episodes: a grid of small screens, numbered as episodes are */
#web .ps-eps { margin-top: clamp(30px, 5vh, 50px); margin-top: clamp(30px, 5dvh, 50px); }
#web .ps-eps-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--n-line); }
#web .ps-eps-h h3 { margin: 0; font: 900 clamp(30px, 3vw, 44px)/1 var(--f-display); text-transform: uppercase; color: var(--n-text); }
#web .ps-eps-h span { font: italic 15px var(--f-serif); color: var(--n-mute); }
#web .ps-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 26px 18px; }
#web .ep { position: relative; width: 100%; display: grid; gap: 6px; padding: 0 0 10px; text-align: left; color: var(--n-text); cursor: pointer;
  transition: transform .35s var(--ease-out); }
#web .ep-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0b0b; box-shadow: 0 0 0 1px var(--n-line); }
#web .ep-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.78) saturate(.85); transition: filter .4s, transform .9s var(--ease-out); }
#web .ep-img::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--scan), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55)); transition: opacity .4s; }
#web .ep-img b { position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 2px 6px; background: rgba(0,0,0,.85); color: #fff; font: 400 10px var(--f-mono); letter-spacing: .04em; }
#web .ep-img em { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 2px 7px; background: var(--t); color: #111; font: 700 9px var(--f-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg); }
#web .ep-img .po-play { z-index: 2; width: 48px; height: 48px; margin: -24px 0 0 -24px; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease-out); }
#web .ep-img .po-play::after { inset: 15px 13px 15px 18px; }
#web .ep-n { margin-top: 4px; font: 400 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t); }
#web .ep-t { font: 500 17px/1.28 var(--f-serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s; }
#web .ep-m { font: italic 14px var(--f-serif); color: var(--n-mute); }
#web .ep:hover, #web .ep:focus-visible { transform: translateY(-3px); outline: none; }
#web .ep:is(:hover, :focus-visible) .ep-img { box-shadow: 0 0 0 2px var(--t), 0 22px 30px -18px color-mix(in srgb, var(--t) 60%, #000); }
#web .ep:is(:hover, :focus-visible) .ep-img img { filter: none; transform: scale(1.04); animation: crt-on .32s steps(3, end); }
#web .ep:is(:hover, :focus-visible) .ep-img::after { opacity: .35; }
#web .ep:is(:hover, :focus-visible) .po-play { opacity: 1; transform: none; }
#web .ep:is(:hover, :focus-visible) .ep-t { color: var(--t); }
#web .ep.seen .ep-img img { filter: grayscale(.7) brightness(.6); }
#web .ep.ep-next .ep-img { box-shadow: 0 0 0 2px var(--t); } /* not « .next »: that name belongs to the film pages' « prochaine séance » */
@media (max-width: 900px) {
  #web .ps-hero { grid-template-columns: 1fr; min-height: 0; }
  #web .ps-screen { order: -1; aspect-ratio: 16 / 9; }
  #web .ps-more-in { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #web .tb-side .sd-extra { display: grid !important; }
  #web .sd-more { display: none; }
  #web .ps-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  #web .ep-t { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { #web .ep, #web .ep-img img, #web .ps-screen img { transition: none; animation: none !important; } }

/* phones: the menu is one sliding row of entries, as on YouTube's app; no section titles or rules in it */
@media (max-width: 760px) {
  #web .tb-side { padding: 8px 10px; gap: 6px; }
  #web .tb-side :is(.sd-sep, .sd-h) { display: none; }
  #web .sd { min-height: 36px; padding: 0 12px; gap: 8px; border-left: 0; background: var(--n-panel); white-space: nowrap; grid-template-columns: auto auto auto; }
  #web .sd-ic { grid-template-columns: auto auto auto; }
  #web .sd.on { background: #fff; color: #111; box-shadow: inset 0 -3px 0 var(--t, var(--n-y)); }
  #web .sd.on svg, #web .sd.on i { color: #111; }
  #web .sd img { width: 24px; height: 24px; }
  #web .sd-ic svg { width: 18px; height: 18px; }
}

/* ── the session window, as cybercafé software draws one in the corner of each screen: a title bar, the post, the time
   and what it costs, and the way out. Squared, bevelled, in the wall's turquoise ── */
#web .ss { flex: none; margin-left: auto; display: grid; width: 250px; background: #c9c6bd; color: #111;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5a5852, 0 10px 24px -12px #000; font-family: var(--f-mono); }
#web .ss p { margin: 0; }
#web .ss-bar { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: linear-gradient(90deg, #1f6f66, #3FE0C5); color: #fff;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
#web .ss-bar span { font-weight: 700; }
#web .ss-bar b { font-weight: 400; opacity: .9; }
#web .ss-bar i { margin-left: auto; font-style: normal; letter-spacing: .2em; opacity: .85; }
#web .ss-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 8px 4px; }
#web .ss-body span { display: grid; gap: 1px; padding: 3px 6px; background: #101410; box-shadow: inset 1px 1px 0 #5a5852, inset -1px -1px 0 #fff; }
#web .ss-body small { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: #6fe38f; opacity: .75; }
#web .ss-body b { font-size: 15px; font-weight: 400; letter-spacing: .04em; color: #6fe38f; text-shadow: 0 0 6px rgba(111,227,143,.6); }
#web .ss-end { margin: 2px 8px 8px; min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: #c9c6bd; color: #8c0f10; font: 700 11px var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5a5852, inset -2px -2px 0 #8a877f; }
#web .ss-end span { font-size: 15px; }
#web .ss-end:hover, #web .ss-end:focus-visible { background: #a3101a; color: #fff; outline: none; }
#web .ss-end:active { box-shadow: inset 1px 1px 0 #5a5852, inset -1px -1px 0 #fff; }
#web .nv-back[hidden] { display: none; }

/* the end of the session: the old screen switches off, a line, then a dot, then the message on the black */
#web .ss-off { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; opacity: 0; background: #000; }
#web .ss-off p { margin: 0; display: grid; gap: 8px; justify-items: center; font: 900 clamp(34px, 5vw, 64px) var(--f-display); text-transform: uppercase; color: #6fe38f;
  text-shadow: 0 0 12px rgba(111,227,143,.5); opacity: 0; }
#web .ss-off small { font: 400 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(111,227,143,.75); }
#web .tube.ss-ending > :not(.ss-off) { animation: crt-off .55s cubic-bezier(.7,0,.8,.4) forwards; transform-origin: 50% 50%; }
#web .tube.ss-ending .ss-off { animation: ss-black .2s .5s forwards; }
#web .tube.ss-ending .ss-m-off { animation: ss-msg 1.1s .6s forwards; }
#web .ss-off .ss-m-on, #web .ss-off .ss-m-off { grid-area: 1 / 1; }
@keyframes crt-off { 0% { transform: none; filter: none; } 55% { transform: scale(1, .006); filter: brightness(4); } 80% { transform: scale(.02, .006); filter: brightness(6); } 100% { transform: scale(0, 0); filter: brightness(8); opacity: 0; } }
@keyframes ss-black { to { opacity: 1; } }
@keyframes ss-msg { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 1100px) { #web .ss { width: 210px; } #web .ss-bar b { display: none; } }
@media (max-width: 760px) {
  /* a phone: the session shrinks to its clock and its way out, at the end of the bar */
  #web .ss { width: auto; grid-template-columns: auto auto; align-items: center; }
  #web .ss-bar { display: none; }
  #web .ss-body { grid-template-columns: auto; padding: 4px; } #web .ss-body span:last-child { display: none; }
  #web .ss-body b { font-size: 12px; }
  #web .ss-end { margin: 4px; min-height: 28px; padding: 0 8px; font-size: 0; } #web .ss-end span { font-size: 15px; }
}


/* sitting down: the old screen switches on. A dot of light, a line, the picture opening, the session announced, then the
   channel underneath — the ending, run the other way */
#web .ss-off { z-index: 60; }
#web .ss-off::before { content: ''; position: absolute; inset: 0; transform-origin: 50% 50%; pointer-events: none;
  background: #f4fff6; box-shadow: 0 0 40px 10px rgba(111,227,143,.6); transform: scale(0, 0); opacity: 0; }
#web .ss-on-k { display: block; font: 400 12px var(--f-mono); letter-spacing: .08em; color: rgba(111,227,143,.75); }
#web .tube.ss-starting .ss-off { animation: ss-veil 2s forwards; }
#web .tube.ss-starting .ss-off::before { animation: ss-beam .8s cubic-bezier(.2,.8,.3,1) forwards; }
#web .tube.ss-starting .ss-m-on { animation: ss-msg 1.1s .75s forwards; }
#web .tube.ss-starting > :not(.ss-off) { animation: crt-in .45s 1.55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ss-veil { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ss-beam {
  0% { opacity: 1; transform: scale(.004, .004); }
  25% { opacity: 1; transform: scale(.004, .004); }
  50% { opacity: 1; transform: scale(1, .004); }
  75% { opacity: .9; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}
@keyframes crt-in { 0% { transform: scale(1, .02); filter: brightness(3); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { #web .tube.ss-starting *, #web .tube.ss-starting .ss-off { animation: none !important; } }

/* ── the bar, compacted: one line for everything, nothing taken away ── */
#web .tb-bar { gap: 14px; padding-bottom: 10px; }
#web .tb-search { height: 38px; }
#web .tb-search input { font-size: 16px; }
/* « retour » on one line: the arrow, the word, the page */
#web .nv-back { min-height: 38px; max-width: 260px; padding: 0 12px 0 8px; gap: 8px; }
#web .nv-l { display: flex; align-items: baseline; gap: 6px; }
#web .nv-l small { font-size: 13px; }
#web .nv-l b { font-size: 15px; }
#web .nv-ar { font-size: 20px; }
/* the session window as one slim strip: its tab, its two counters, its switch */
#web .ss { display: flex; align-items: stretch; width: auto; height: 38px; }
#web .ss-bar { flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; padding: 0 9px; font-size: 8px; line-height: 1.1;
  background: linear-gradient(180deg, #3FE0C5, #1f6f66); }
#web .ss-bar b { display: block !important; font-size: 9px; }
#web .ss-body { display: flex; gap: 4px; padding: 4px; }
#web .ss-body span { display: flex; align-items: baseline; gap: 6px; padding: 0 7px; }
#web .ss-body small { font-size: 7px; }
#web .ss-body b { font-size: 13px; line-height: 28px; }
#web .ss-end { margin: 4px 4px 4px 0; min-height: 0; padding: 0 10px; gap: 6px; font-size: 10px; }
#web .ss-end span { font-size: 13px; }
@media (max-width: 1100px) { #web .ss-end { font-size: 0; gap: 0; } #web .ss-end span { font-size: 14px; } }
@media (max-width: 760px) {
  #web .ss { height: 34px; }
  #web .ss-bar { display: none; }
  #web .ss-body small { display: none; }
  #web .ss-body b { font-size: 12px; line-height: 26px; }
  #web .nv-l small { display: none; }
  /* the search and the session share one row */
  #web .tb-search { order: 5; flex: 1 1 0; min-width: 0; max-width: none; }
  #web .ss { order: 6; margin-left: 0; }
  #web .tb-search kbd { display: none; }
}

/* phones · the session window leaves the crowded top bar and sits in the bottom-right corner of the screen, as the
   cybercafé's client software keeps it: time, what is owed, the switch; it steps up when « À suivre » is showing */
@media (max-width: 760px) {
  #web .ss { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; order: 0; margin: 0; height: 36px;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5a5852, 0 8px 20px rgba(0,0,0,.6); transition: bottom .3s; }
  #web .ss-body span:last-child { display: flex; }
  #web .ss-body b { font-size: 12px; line-height: 28px; }
  body:has(.pn-next:not([hidden])) #web .ss { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* phones · La Chaîne at the scale of a phone's video app: a slim bar, a small search, small tabs and chips that slide in one
   row, a short page head, tight cards, and a little session counter in the corner. Small is fine; what matters is the videos */
@media (max-width: 760px) {
  #web .tb-bar { gap: 8px; padding: 6px 12px 8px; }
  #web .tb-logo { gap: 6px; }
  #web .tb-logo b { padding: 3px 6px; font-size: 9px; }
  #web .tb-logo span { font-size: 19px; }
  #web .tb-logo i { font-size: 16px; }
  #web .nv-back { min-height: 30px; padding: 0 9px; border-left-width: 2px; }
  #web .nv-ar { font-size: 17px; }
  #web .tb-search { height: 34px; padding: 0 10px; gap: 8px; }
  #web .tb-search svg { width: 16px; height: 16px; }
  #web .tb-search input { font-size: 15px; }
  /* the menu: one sliding row of small tabs */
  #web .tb-side { padding: 6px 12px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #web .sd { min-height: 30px; padding: 0 10px; gap: 6px; font-size: 13px; }
  #web .sd span { font-size: 13px; }
  #web .sd i { font-size: 10px; }
  #web .sd img { width: 20px; height: 20px; }
  #web .sd-ic svg { width: 15px; height: 15px; }
  #web .sd.on { box-shadow: inset 0 -2px 0 var(--t, var(--n-y)); }
  /* the page head, short */
  #web .nv-trail { margin: 0 0 8px; font-size: 12px; gap: 2px 6px; }
  #web .pg-head { margin-bottom: 10px; }
  #web .pg-k { margin: 0; font-size: 13px; }
  #web .pg-t { font-size: 26px; line-height: 1; margin: 2px 0 4px; }
  #web .pg-note { font-size: 14px; line-height: 1.35; margin: 0 0 8px; }
  #web .pg-sub { gap: 8px; font-size: 13px; padding-bottom: 8px; }
  #web .pg-sort { font-size: 13px; gap: 6px; }
  #web .pg-sort select { height: 30px; padding: 0 26px 0 8px; font-size: 13px; }
  /* the filters: small chips sliding in one row */
  #web .fl-bar { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -12px 12px; padding: 0 12px; scrollbar-width: none; }
  #web .fl { flex: none; min-height: 30px; padding: 0 11px; font-size: 13px; white-space: nowrap; }
  /* the cards: tighter */
  #web .vt-grid { gap: 14px 10px; }
  #web .vt-t { margin: 6px 8px 2px; font-size: 13.5px; line-height: 1.25; }
  #web .vt-m { margin: 0 8px 6px; font-size: 11.5px; }
  #web .vt-img b { font-size: 10px; padding: 1px 4px; }
  /* the session counter: small, in the corner */
  #web .ss { height: 28px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  #web .ss-body { gap: 3px; padding: 3px; }
  #web .ss-body span { padding: 0 5px; }
  #web .ss-body b { font-size: 10.5px; line-height: 22px; letter-spacing: .02em; }
  #web .ss-end { margin: 3px 3px 3px 0; padding: 0 7px; } #web .ss-end span { font-size: 12px; }
  body:has(.pn-next:not([hidden])) #web .ss { bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  #web .tb-bar { flex-wrap: wrap; }
  #web .tb-search { flex: 1 0 100%; }
  #web .nv-back { margin-left: auto; max-width: 52vw; }
  #web .nv-l b { font-size: 13px; }
}

/* phones · inside La Chaîne the channel has its own name at the top: the FAWDA·TV logo steps aside instead of sitting on it */
@media (max-width: 760px) {
  body[data-ch="3"]:has(#web .cy-door[hidden]) #signal .ident { display: none; }
}
/* while a video plays, only the video counts: the session counter and its switch leave the screen (all sizes) */
body[data-ch="3"]:has(#web .tb-watch:not([hidden])) #web .ss { display: none; }
/* the off key: a drawn mark, since many phones have no glyph for the power sign and show an empty box */
#web .ss-end span { display: inline-grid; place-items: center; line-height: 0; }

/* phones · a video page reads like YouTube's: one column and one scroll. A thin bar to leave, the picture edge to edge and
   pinned under it, the title with its numbers, two chips, then « up next » as big thumbnails. Nothing nested, no panels */
@media (max-width: 760px) {
  #web .tb-watch:not([hidden]) { display: flex; flex-direction: column; gap: 0; padding: 0 0 calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior-y: none; background: #0f0f0f; color: #f1f1f1; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
  body[data-ch="3"]:has(#web .tb-watch:not([hidden])) .pn-open { background: none; box-shadow: none; color: #f1f1f1; }
  #web .tw-stage { display: contents; }
  #web .tw-close { order: 0; flex: none; position: sticky; top: 0; left: auto; right: auto; z-index: 6; width: 100%; height: 56px; padding: 0 16px; border: 0; border-radius: 0; background: #0f0f0f; color: #f1f1f1; font: 500 16px/1 Roboto, "Helvetica Neue", Arial, sans-serif; text-align: left; }
  #web .tw-player { order: 1; flex: none; position: sticky; top: 56px; z-index: 5; width: 100%; max-height: none; margin: 0; border-radius: 0; outline: 0; background: #000; }
  #web .tw-info { order: 2; flex: none; margin: 0; padding: 12px 16px 8px; border: 0; background: none; color: #f1f1f1; }
  #web .tw-info .po-sign, #web .tw-film, #web .tw-text { display: none; }
  #web .tw-title { font: 600 18px/1.3 Roboto, "Helvetica Neue", Arial, sans-serif; color: #f1f1f1; }
  #web .tw-meta { margin-top: 4px; font: 400 13px/1.35 Roboto, "Helvetica Neue", Arial, sans-serif; color: #aaa; }
  #web .tw-desc { display: block; margin: 12px 0 0; padding: 0; background: none; }
  #web .tw-acts { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  #web .tw-acts::-webkit-scrollbar { display: none; }
  #web .tw-pl, #web .tw-yt { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .1); color: #f1f1f1; font: 500 14px/1 Roboto, "Helvetica Neue", Arial, sans-serif; white-space: nowrap; text-decoration: none; }
  #web .tw-bar { order: 3; flex: none; justify-content: flex-start; gap: 4px; margin: 0; padding: 4px 8px 4px 16px; }
  #web .tw-pos { order: -1; flex: 1; min-width: 0; font: 400 13px/1.3 Roboto, "Helvetica Neue", Arial, sans-serif; color: #aaa; text-align: left; }
  #web .tw-step { width: 40px; height: 40px; background: none; color: #f1f1f1; }
  #web .tw-next { order: 4; flex: none; max-height: none; overflow: visible; border: 0; background: none; color: #f1f1f1; }
  #web .tw-next-h { position: static; padding: 8px 16px 12px; border: 0; background: none; font: 600 16px/1.3 Roboto, "Helvetica Neue", Arial, sans-serif; color: #f1f1f1; }
  #web .tw-next-h b { font-weight: 600; color: #f1f1f1; }
  #web .tw-next-who { display: none; }
  #web .tw-next ol { padding: 0; }
  #web .tw-row { display: block; padding: 0 0 18px; border: 0; border-radius: 0; background: none; color: #f1f1f1; }
  #web .tw-row:hover, #web .tw-row:focus-visible { background: none; }
  #web .tw-row:active { background: rgba(255, 255, 255, .08); }
  #web .tw-row i { display: none; }
  #web .tw-row img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
  #web .tw-row span { padding: 10px 16px 0; font: 500 15px/1.3 Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-line-clamp: 2; }
}

/* AMBY on the cybercafé wall: written like the others, and only answers when the mouse or a finger finds it */
#web a.cy-amby { pointer-events: auto; padding: .35em .6em; margin: -.35em -.6em; text-decoration: none; cursor: pointer; transition: color .35s ease, transform .35s ease; }
#web a.cy-amby:hover, #web a.cy-amby:focus-visible, #web a.cy-amby:active { color: rgba(12, 10, 10, .98); transform: rotate(var(--r)) scale(1.06); outline: none; }
@media (pointer: coarse) { #web a.cy-amby { padding: 1em 1.1em; margin: -1em -1.1em; } } /* small to see, easy for a finger */
@media (prefers-reduced-motion: reduce) { #web a.cy-amby { transition: none; } }