/* tokens.css — every colour, font and size of the site, defined once (cahier §6.1, §2.2).
   Day first, then the night, written once: the night chosen in Settings (data-theme="dark").
   build/generer.py copies that night block for the system's night (prefers-color-scheme: dark, unless Day is chosen).
   No colour may be written anywhere else: the generation refuses it. */

/* Layout concept: one fixed screen, like an instrument. Home = a Lorenz attractor as the sun, five sections on slow orbits
   (PLAY included). A section = a deck of five cards on a table, five dice below, the player within thumb reach.
   One theme: the CV palette (theme.yaml) and fonts, with the charcoal of the first demo for ink, cards and night. */

/* ---------- Day ---------- */
:root{
  /* 01 COLOURS (cahier §6.1) */
  --bg:#D8D6D1; --ink:#1F2226; --muted:#5C5A55; --line:rgba(31,34,38,.18);
  --accent-text:#9A3D00;                         /* #9A3D00: darker orange derived for 4.5:1 text contrast on #D8D6D1 */
  --status:#103731;                              /* CV "système" green */
  --card-bg:#22262A; --card-ink:#EBE6D6; --card-accent:#FF6904; --card-status:#4F9A8B; --card-muted:#A39F94; --card-line:#3A4046;
  --card-head:#FFE7D1;                           /* the point of light travelling on the COMPO back (C10, C39) */
  --card-neu-dark:rgba(0,0,0,.5); --card-neu-light:rgba(255,255,255,.05);   /* neumorphism on the cards (C39) */
  --card-neu-press:rgba(0,0,0,.55);              /* the card play button, pressed while a work plays */
  --band:rgba(34,38,42,.70); --band-solid:rgba(34,38,42,.95);   /* the bands of the open reader: its background (--card-bg), 70 % over the frosted glass, 95 % without blur */
  --band-rim:rgba(255,255,255,.18);              /* the thin line of light along the top of the bottom band */
  --trail-new:#D85903; --trail-old:#103731; --head:#FF6904;
  --neu-light:#ECEBE7; --neu-dark:#B3B1AC; --pip:#1F2226; --halo:rgba(216,214,209,.94);
  --night:0;
  /* 02 SHADOWS (the same by day and by night) */
  --shadow-ghost:0 10px 24px -14px rgba(0,0,0,.5);                          /* the cards behind, in the deck */
  --shadow-card:0 24px 48px -24px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.12); /* the front card */
  --shadow-card-play:5px 5px 12px var(--card-neu-dark),-4px -4px 10px var(--card-neu-light);
  --shadow-card-play-pressed:inset 4px 4px 9px var(--card-neu-press),inset -3px -3px 8px var(--card-neu-light);
  --shadow-close:0 10px 24px -10px rgba(0,0,0,.6);                          /* the round Close button of the reader */
  --shadow-drawer:0 20px 40px -20px rgba(0,0,0,.45);                        /* the Settings drawer */
  /* 03 FONTS (cahier §6.1): Apple fonts first, then the fonts served by the site (styles/polices.css) */
  --font-display:Didot,"Bodoni 72","GFS Didot","Bodoni Moda",serif;
  --font-text:"Avenir Next",Avenir,"Nunito Sans","Segoe UI",sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* 04 TEXT SIZES — the values of the demo v6, raised to 11 px at least (cahier §8, F2: steps 1.13 to 1.19). */
  --fs-11:11px;      /* labels in mono capitals: dates, Lire +, Code, links, headings, the role and the note of the seuil, the card short line, the state of the playing work, the credit roles of the reader, the ©, the labels of Settings, the names of Elsewhere */
  --fs-12:12px;      /* FR/EN, reader status and metadata, toast, small screens */
  --fs-13:13px;      /* menu, orbit labels */
  --fs-13-5:13.5px;  /* card sentence (minimum) */
  --fs-14:14px;      /* card back sentence (minimum), title while playing, Settings buttons */
  --fs-15:15px;      /* orbit subtitles, PLAY hint, pills, mail */
  --fs-16:16px;      /* TRACES lines */
  --fs-17:17px;      /* INFO paragraphs, "See also" title */
  --fs-18:18px;      /* sheet intro, reader text, seuil doors */
  --fs-20:20px;      /* card title (minimum), TRACES titles, reader lead */
  --fs-26:26px;      /* card back title (minimum) */
  --fs-30:30px; --fs-46:46px;   /* seuil: the name (from 30 to 46 px with the screen width) */
  --fs-36:36px; --fs-58:58px;   /* reader: the title (from 36 to 58 px) */
  /* 05 LAYOUT (measured again by main.js on resize) */
  --top-h:64px; --bottom-h:120px;
  /* the frosted glass of the reader's bands (its blur, its saturation), and the fade above the bottom bar when the text goes
     on (TRACES, INFO, the reader); tuned in the style trials (cahier 4.5) */
  --band-blur:24px; --band-saturate:150%; --fade-h:48px;
}
/* ---------- Night (chosen in Settings; copied for the system's night at generation) ---------- */
/* ---------- Night (system setting, copied by build/generer.py from the block below) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16181B; --ink:#EBE6D6; --muted:#A39F94; --line:rgba(235,230,214,.14);
    --accent-text:#FF6904; --status:#4F9A8B;
    --card-bg:#1F2327; --card-ink:#EBE6D6; --card-accent:#FF6904; --card-status:#4F9A8B; --card-muted:#A39F94; --card-line:#353B41;
    --band:rgba(31,35,39,.70); --band-solid:rgba(31,35,39,.95);
    --trail-new:#FF6904; --trail-old:#4F9A8B; --head:#FFD9BF;
    --neu-light:#23272C; --neu-dark:#0A0B0D; --pip:#A39F94; --halo:rgba(22,24,27,.9);
    --night:1; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16181B; --ink:#EBE6D6; --muted:#A39F94; --line:rgba(235,230,214,.14);
  --accent-text:#FF6904; --status:#4F9A8B;
  --card-bg:#1F2327; --card-ink:#EBE6D6; --card-accent:#FF6904; --card-status:#4F9A8B; --card-muted:#A39F94; --card-line:#353B41;
  --band:rgba(31,35,39,.70); --band-solid:rgba(31,35,39,.95);
  --trail-new:#FF6904; --trail-old:#4F9A8B; --head:#FFD9BF;
  --neu-light:#23272C; --neu-dark:#0A0B0D; --pip:#A39F94; --halo:rgba(22,24,27,.9);
  --night:1; color-scheme:dark;
}

/* polices.css — the fonts served by the site itself (assets/fonts/, licence OFL), instead of Google Fonts (C34, F13).
   The same files and the same declarations as the demo v6 received from Google: the "latin" subset, font-display swap.
   Paths are relative to the assembled site.css (in /assets/v-…/), so they also work under the /essai/ prefix. */

/* 01 DM MONO — data, menu, labels and text buttons */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/dm-mono-300.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* 02 GFS DIDOT — titles, where Didot is not installed (Android, Windows) */
@font-face{font-family:'GFS Didot';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/gfs-didot-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* 03 NUNITO SANS — text, where Avenir Next is not installed. One file holds every weight; the demo declared 400 and 600,
   and only 400 is used, upright and italic. */
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nunito-sans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/nunito-sans-italique.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* site.css — the layout and the components of the site, in numbered sections.
   Colours, fonts and sizes come from tokens.css. */

/* 01 BASE */
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;transition:background-color .5s ease,color .5s ease}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation}
a{color:inherit}
button:focus-visible,a:focus-visible,.pb-line:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:8px}   /* the progress line too: not the browser's blue ring (1.18) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#card:focus,#sheet:focus,#home h1:focus{outline:none}   /* the new screen takes the focus after a link (N6): nothing to draw */
.logo-mi{fill:currentColor;stroke:currentColor}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;transition:opacity .7s ease}
body[data-view="section"] #sky{opacity:.14}

/* 02 TOP BAR: logo · FR/EN · settings */
.topbar{position:fixed;top:0;left:0;right:0;z-index:31;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;min-height:44px;padding-right:8px;color:var(--muted);text-decoration:none;touch-action:manipulation}
.brand svg{width:54px;height:21px;overflow:visible}
.top-right{display:flex;align-items:center;gap:6px}
.lang{position:relative;display:flex;align-items:center;font:400 var(--fs-12)/1 var(--font-mono);letter-spacing:.12em;color:var(--muted)}
.lang a{padding:14px 6px;color:var(--muted);text-decoration:none;letter-spacing:normal;touch-action:manipulation}   /* links to the twin page (1.11); spaced like the buttons of the demo (1.13) */
/* FR/EN: two touch zones of 44 × 44 without changing the drawing (F4, step 1.13), side by side: EN takes the 44 px that
   end at the settings button (6 px after the group: the gap of .top-right), FR the 44 px before */
.lang a::before{content:"";position:absolute;top:50%;width:44px;height:44px;margin-top:-22px}
.lang a[data-lang="fr"]::before{right:38px}
.lang a[data-lang="en"]::before{right:-6px}
.lang a[aria-current="true"]{color:var(--ink)}
.settings-btn{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--muted);border:1px dashed var(--muted);background:var(--bg)}
/* 44 × 44 to touch, the circle unchanged (F4, 1.19): from its left edge, where the zone of EN ends, 2 px beyond on the right */
.settings-btn::before{content:"";position:absolute;left:-1px;top:50%;width:44px;height:44px;margin-top:-22px}
.settings-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}
.settings-btn svg{width:20px;height:20px}

/* 03 VIEWS + HOME */
.view{position:fixed;inset:0;z-index:2;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.view.is-on{opacity:1;visibility:visible;transition:opacity .5s ease}
.orbits{position:absolute;inset:0;transition:opacity .6s ease}
body[data-mode="play"] .orbits{opacity:0;pointer-events:none}
.orbit-label{position:absolute;left:0;top:0;width:0;height:0;color:var(--ink);text-decoration:none;touch-action:manipulation;-webkit-touch-callout:none;will-change:transform;transform:translate3d(-999px,-999px,0)}   /* a finger resting on a label stops the orbits (4.2): no link preview on iPhone */
.orbit-label::before{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%}
.orbit-label .dot{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--accent-text);box-shadow:0 0 0 3px var(--halo)}
.orbit-label .txt{position:absolute;left:0;top:0;transform:translate(var(--tx,14px),-50%);transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.orbit-label .lbl{display:block;padding:12px 0;font:400 var(--fs-13)/1 var(--font-mono);letter-spacing:.2em;white-space:nowrap;text-shadow:0 0 10px var(--halo),0 0 4px var(--halo),0 0 2px var(--halo)}
.orbit-label .more{position:absolute;bottom:calc(100% - 8px);white-space:nowrap;opacity:0;transform:translateX(var(--more-x,0px));transition:opacity .35s ease;pointer-events:none;font:italic 400 var(--fs-15)/1.1 var(--font-text);text-shadow:0 0 10px var(--halo),0 0 4px var(--halo)}
.orbit-label[data-side="right"] .more{left:0}
.orbit-label[data-side="left"] .more{right:0}
.orbit-label.is-hot .lbl{color:var(--accent-text)}
.orbit-label.is-hot .more{opacity:1}
.orbit-label:focus-visible{outline:none}
.orbit-label:focus-visible .lbl{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:4px}
@media (max-width:480px){.orbit-label .lbl{font-size:var(--fs-12);letter-spacing:.15em}}
/* PLAY: live parameters at the top, hint and controls above the player, section menu hidden */
.readout{position:absolute;left:0;right:0;top:calc(var(--top-h) + 6px);margin:0;text-align:center;font:300 var(--fs-11)/1 var(--font-mono);letter-spacing:.16em;color:var(--ink);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .5s ease;pointer-events:none}
body[data-mode="play"] .readout{opacity:1}
.play-bar{position:absolute;left:0;right:0;bottom:calc(var(--bottom-h) + 14px);display:flex;flex-direction:column;align-items:center;gap:30px;padding:0 16px;opacity:0;pointer-events:none;transition:opacity .5s ease}
body[data-mode="play"] .play-bar{opacity:1;pointer-events:auto}
.play-hint{margin:0;max-width:28ch;font:italic 400 var(--fs-15)/1.3 var(--font-text);color:var(--muted);text-align:center;text-wrap:balance}
.play-row{display:flex;gap:18px}
.play-btn{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--bg);color:var(--ink);box-shadow:4px 4px 9px var(--neu-dark),-4px -4px 9px var(--neu-light)}
.play-btn:active{box-shadow:inset 3px 3px 7px var(--neu-dark),inset -3px -3px 7px var(--neu-light)}
.play-btn svg{width:24px;height:24px}
body[data-mode="play"] .nav{display:none}

/* 04 SECTION PAGE: deck + dice */
.view-section{z-index:3;display:flex;flex-direction:column;align-items:center;padding:calc(var(--top-h) + 6px) 16px calc(var(--bottom-h) + 4px)}
.stage{position:relative;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;perspective:1100px;touch-action:pan-y;padding-bottom:10px}
/* Fan: the front card stays straight, the others step aside on one side (after desktop-card-scroll) */
.deck{position:relative;flex:none;width:300px;height:485px;--cw:300;--fan:4.5deg;--spread:1}
@media (max-width:600px){.deck{--fan:1.6deg}}
.deck.is-drawn{--spread:.35}
.ghost{position:absolute;inset:0;border-radius:14px;background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--shadow-ghost);transform-origin:28% 88%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.deck .ghost:nth-child(1){transform:rotate(calc(var(--spread) * var(--fan) * 4)) translateX(calc(var(--spread) * 9px))}
.deck .ghost:nth-child(2){transform:rotate(calc(var(--spread) * var(--fan) * 3)) translateX(calc(var(--spread) * 7px))}
.deck .ghost:nth-child(3){transform:rotate(calc(var(--spread) * var(--fan) * 2)) translateX(calc(var(--spread) * 4px))}
.deck .ghost:nth-child(4){transform:rotate(calc(var(--spread) * var(--fan) * 1)) translateX(calc(var(--spread) * 2px))}
.card{position:absolute;inset:0;border-radius:14px;background:var(--card-bg);color:var(--card-ink);border:1px solid var(--card-line);box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--cw)*.13px) calc(var(--cw)*.08px) calc(var(--cw)*.08px)}
.card::before{content:"";position:absolute;inset:calc(var(--cw)*.026px);border:1px solid var(--card-line);border-radius:9px;pointer-events:none}
.card-num{position:absolute;left:0;right:0;top:calc(var(--cw)*.07px);margin:0;font-family:var(--font-display);font-size:max(var(--fs-14),calc(var(--cw)*.06px));line-height:1;letter-spacing:.24em;padding-left:.24em;color:var(--card-accent)}
.card-emblem{position:relative;flex:none;display:grid;place-items:center;margin-bottom:calc(var(--cw)*.06px)}
.card-emblem canvas{display:block}
.card-play{margin-top:calc(var(--cw)*.025px);width:max(46px,calc(var(--cw)*.16px));height:max(46px,calc(var(--cw)*.16px));border-radius:50%;background:var(--card-bg);color:var(--card-accent);display:grid;place-items:center;box-shadow:var(--shadow-card-play);transition:box-shadow .25s ease}
.card-play.is-playing{box-shadow:var(--shadow-card-play-pressed)}
.card-play svg{width:40%;height:40%}
.card-body{display:flex;flex-direction:column;align-items:center;gap:calc(var(--cw)*.03px);width:100%}
.card-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:max(var(--fs-20),calc(var(--cw)*.088px));line-height:1.05;text-wrap:balance}
.card-title.is-soon{font-style:italic;font-weight:400;color:var(--card-muted)}
.card-intro{margin:0;font-family:var(--font-text);font-style:italic;font-size:max(var(--fs-13-5),calc(var(--cw)*.046px));line-height:1.3;opacity:.88;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin:0;font-family:var(--font-mono);font-size:var(--fs-11);line-height:1.4;letter-spacing:.08em;color:var(--card-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta .mark{color:var(--card-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--card-muted)}
.card-actions{display:flex;align-items:center;justify-content:center;gap:calc(var(--cw)*.08px);margin-top:calc(var(--cw)*.025px)}
.btn-text{position:relative;font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--card-ink);padding:14px 4px;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--card-line)}
.btn-text::before,.back-draw::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}   /* 44 px to touch, the drawing unchanged (F4, 1.16) */
.btn-text:hover{text-decoration-color:var(--card-accent)}
.back-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:max(var(--fs-26),calc(var(--cw)*.12px));line-height:1;letter-spacing:.04em;color:var(--card-ink)}
.back-intro{margin:0;font:italic 400 max(var(--fs-14),calc(var(--cw)*.05px))/1.3 var(--font-text);opacity:.88;text-wrap:balance}
.back-draw{position:relative;margin-top:calc(var(--cw)*.035px);font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--card-accent);padding:14px 16px;border:1px solid var(--card-line);border-radius:999px}
.back-draw:hover{border-color:var(--card-accent)}
.dice{display:flex;gap:12px;padding:12px 0 14px}
.die{width:44px;height:44px;border-radius:11px;background:var(--bg);box-shadow:4px 4px 9px var(--neu-dark),-4px -4px 9px var(--neu-light);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:9px;transition:box-shadow .25s ease}
.die i{width:6px;height:6px;border-radius:50%;place-self:center}
.die i.on{background:var(--pip)}
.die.is-active{box-shadow:inset 3px 3px 7px var(--neu-dark),inset -3px -3px 7px var(--neu-light)}
.die.is-active i.on,.die.is-rolling i.on{background:var(--accent-text)}

/* 05 LIST + TEXT PAGES (TRACES, INFO) */
.sheet{flex:1 1 auto;min-height:0;width:100%;max-width:38rem;overflow-y:auto;padding:6px 2px 24px;-webkit-overflow-scrolling:touch}
/* While the text goes on, it fades out just above the bottom bar, and the fade slides away over the last pixels of the
   scroll (decision of 6 October 2026; --more and has-more: fadeWhenMore, src/outils.js). A mask: only the text fades, the
   sky stays, and the links under the fade can still be touched. A mask reads only opacity: any opaque token does. */
.sheet.has-more{-webkit-mask-image:linear-gradient(to bottom,var(--ink) calc(100% - var(--more) * var(--fade-h)),transparent calc(100% + (1 - var(--more)) * var(--fade-h)));mask-image:linear-gradient(to bottom,var(--ink) calc(100% - var(--more) * var(--fade-h)),transparent calc(100% + (1 - var(--more)) * var(--fade-h)))}
.sheet-intro{margin:6px 0 14px;font:italic 400 var(--fs-18)/1.35 var(--font-text);color:var(--muted)}
.traces{list-style:none;margin:0;padding:0;display:grid}
.traces li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;padding:18px 0;border-top:1px solid var(--line)}
.t-icon{grid-row:1 / span 9;align-self:start;margin-top:17px;width:22px;height:22px;color:var(--accent-text)}
.t-icon.is-upcoming{color:var(--status)}
.t-icon svg{width:22px;height:22px;display:block}
.traces li > :not(.t-icon){grid-column:2}
.t-date{display:block;margin:0 0 7px;font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.t-date.is-upcoming{color:var(--status)}
.t-title{margin:0;font:500 var(--fs-20)/1.25 var(--font-display)}
.t-line{margin:5px 0 0;font:400 var(--fs-16)/1.4 var(--font-text);color:var(--muted)}
.t-links,.info-links{display:flex;flex-wrap:wrap;gap:13px 16px;margin-top:6px}   /* 13 px between two rows: each link keeps its 44 px (F4) */
.t-links a,.info-links a{position:relative;font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;padding:10px 0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
/* a touch zone of 44 px around the drawn link (F4), as for the orbit points */
.t-links a::before,.info-links a::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.info h3{margin:26px 0 10px;font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.info h3:first-child{margin-top:8px}
.info-p{margin:0 0 10px;font:400 var(--fs-17)/1.55 var(--font-text);max-width:60ch}
.info .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pill{position:relative;font:400 var(--fs-15)/1.2 var(--font-text);padding:11px 16px;border-radius:999px;border:1px solid var(--ink);text-decoration:none;touch-action:manipulation}
.pill::before{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:44px;transform:translateY(-50%)}   /* 44 px to touch (F4) */
.mail{font:400 var(--fs-15)/1.2 var(--font-mono);letter-spacing:.02em;user-select:all}

/* 06 BOTTOM: thumb nav + player. The speaker sits under the centre of the logo, the play button under the centre of
   FR/EN + settings (positions set by JS); the line runs between them, centred. Under the line: the © at rest; while a
   work plays, its status and its progress take its place, and the row rises a little. */
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;flex-direction:column;pointer-events:none}   /* above the open reader (C12, 07b) */
.bottom>*{pointer-events:auto}
.nav{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;padding:0 6px 10px}
.nav a{position:relative;font:400 var(--fs-13)/1 var(--font-mono);letter-spacing:.14em;color:var(--muted);padding:14px 7px;text-decoration:none;touch-action:manipulation}
.nav a::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px}   /* at least 44 × 44 to touch, without changing the drawing (F4, 1.14) */
.nav a[aria-current="page"]{color:var(--accent-text)}
.nav .sep{font:400 var(--fs-13)/1 var(--font-mono);color:var(--muted);opacity:.45;pointer-events:none}   /* the zones of the words pass under the dots (F4, 1.20) */
@media (max-width:390px){.nav a{font-size:var(--fs-12);letter-spacing:.1em;padding:14px 5px}}
.player{position:relative;display:flex;flex-direction:column;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 14px)}
.p-row{position:relative;height:42px}
.snd{position:absolute;left:var(--snd-left,0px);top:1px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.snd svg{width:21px;height:21px}
/* the speaker, ⏸/▶ and the progress line: at least 44 px to touch, the drawing unchanged (F4, 1.17) */
.snd::before,.pb-play::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.pb-line::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.snd[aria-pressed="true"]{color:var(--accent-text)}
.pb-play{position:absolute;right:var(--play-right,4px);top:5px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--bg);box-shadow:2px 2px 5px var(--neu-dark),-2px -2px 5px var(--neu-light)}
.pb-play svg{width:15px;height:15px}
.pb-line{position:absolute;left:var(--line-left,15%);right:var(--line-right,15%);top:9px;height:24px;cursor:pointer;touch-action:none;border-radius:4px}
.pb-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.pb-line i{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--accent-text);transform-origin:0 50%;transform:scaleX(0);transition:transform .25s linear,background-color var(--band-t)}
.player.is-paused .pb-line i{background:var(--muted)}
.p-info{position:relative;height:14px;transition:height .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}   /* text only: the 44 px zones above it stay whole */
.player.is-open .p-info{height:42px}
.p-sig{position:absolute;left:0;right:0;bottom:2px;margin:0;text-align:center;font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.14em;color:var(--muted);text-shadow:0 0 8px var(--halo),0 0 3px var(--halo);transition:opacity .35s ease,color var(--band-t),text-shadow var(--band-t)}
.player.is-open .p-sig{opacity:0}
.p-now{position:absolute;left:0;right:0;bottom:2px;margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;opacity:0;transform:translateY(6px);transition:opacity .35s ease .1s,transform .5s ease;pointer-events:none}
.player.is-open .p-now{opacity:1;transform:none}
.now-k{max-width:100%;font:400 var(--fs-11)/1.2 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--status);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 8px var(--halo),0 0 3px var(--halo)}
.now-t{max-width:100%;font:400 var(--fs-14)/1.15 var(--font-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 8px var(--halo),0 0 3px var(--halo)}

/* 07 READER (fullscreen) — dark in both skies: the inside of the card (cahier 4.5). Its text slides under the bands of the
   header and of the bottom bar (07b). Fermer stands 12 px above the bottom band; at the end of the scroll, the last line
   stays 16 px above Fermer (12 + 56 + 16 = 84 px above the band). */
.reader{position:fixed;inset:0;z-index:20;background:var(--card-bg);color:var(--card-ink);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(env(safe-area-inset-top,0px) + 70px) 24px calc(var(--bottom-h) + 84px)}
/* the fade above the bottom band while the text goes on (decision of 6 October 2026; --more: fadeWhenMore, src/outils.js);
   it ends in the colour of the band, and never takes the finger */
.reader::after{content:"";position:fixed;left:0;right:0;bottom:var(--bottom-h);z-index:1;height:var(--fade-h);background:linear-gradient(to bottom,transparent,var(--band));opacity:var(--more,0);pointer-events:none}
.reader-inner{max-width:34rem;margin:0 auto}
.r-eyebrow{margin:0 0 18px;font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--card-accent)}
.r-title{margin:0;font:500 clamp(var(--fs-36),9.5vw,var(--fs-58))/1.02 var(--font-display);text-wrap:balance}
.r-status{margin:12px 0 0;font:400 var(--fs-12)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--card-status)}
/* « Écouter l’œuvre », under the title and its status (decision of 7 October 2026): the text button of the cards, aligned on
   the text; « En écoute » in orange, while its work plays */
.r-listen{display:block;width:fit-content;margin:4px 0 -4px;padding-left:0;padding-right:0}
.r-listen.is-playing{color:var(--card-accent);text-decoration:none;cursor:default}
.r-lead{margin:16px 0 0;font:italic 400 var(--fs-20)/1.4 var(--font-text);opacity:.9}
.r-meta{margin:14px 0 0;font:400 var(--fs-12)/1.5 var(--font-mono);letter-spacing:.1em;color:var(--card-muted)}
.r-rule{border:0;border-top:1px solid var(--card-line);margin:34px 0 6px}
.r-h{margin:34px 0 12px;font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--card-accent)}
.r-note p,.r-p{margin:0 0 14px;font:400 var(--fs-18)/1.6 var(--font-text);max-width:60ch}
.r-credits{margin:0;display:grid;gap:16px}
.r-credits div{display:grid;gap:4px}
.r-credits dt{font:400 var(--fs-11)/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--card-muted)}
.r-credits dd{margin:0;font:400 var(--fs-18)/1.3 var(--font-text)}
.r-links{display:flex;flex-wrap:wrap;gap:9px 18px}   /* 9 px between two rows: each link keeps its 44 px (F4) */
.r-rel{display:inline-block;text-align:center;touch-action:manipulation}   /* a link drawn as the button of the demo */
.r-links a,.r-rel{position:relative;font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;padding:12px 0;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--card-line);color:var(--card-ink)}
.r-links a::before,.r-rel::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}   /* 44 px to touch, the drawing unchanged (F4) */
.r-rel em{font-family:var(--font-text);letter-spacing:0;text-transform:none;font-size:var(--fs-17)}
.reader-close{position:fixed;right:20px;bottom:calc(var(--bottom-h) + 12px);z-index:2;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--card-bg);color:var(--card-accent);border:1px solid var(--card-line);box-shadow:var(--shadow-close)}
.reader-close svg{width:22px;height:22px}
.reader :focus-visible,.card :focus-visible{outline-color:var(--card-accent)}   /* on the dark of the cards, their orange: 5:1 */

/* 07b THE BANDS OF THE READER (C12; Mikaël's decisions of 6 and 7 October 2026, cahier 4.5) — while the reader is open
   (body[data-reader="open"]), the header and the bottom bar stay above it and usable, each on a band of frosted glass, as
   in macOS: the reader's background at 70 % over a strong blur with a little saturation (without blur, almost opaque;
   opaque when the device asks for less transparency), and a thin line of light along the top of the bottom band. On the
   bands, the colours of the cards, cream and light grey: their tokens take the cards' values. No dotted line between the
   bands; the Settings button keeps its dotted circle, in cream. The colours change in the time of the reader, 420 ms to
   open and 260 ms to close (OPEN and CLOSE in src/lecteur.js), at once in Reduced motion (10). From the opening to the end
   of the closing (body[data-reader], "open" then "closing"), the bottom band carries only the © or the work loaded: the
   section menu is gone, for the keyboard too, and the speaker and the line come only with a work. */
body{--band-t:.26s ease-in}
body[data-reader="open"]{--band-t:.42s cubic-bezier(.2,.7,.2,1)}
.topbar,.bottom{transition:background-color var(--band-t),-webkit-backdrop-filter var(--band-t),backdrop-filter var(--band-t),color var(--band-t)}
:is(.brand,.lang,.lang a,.settings-btn,.nav a,.nav .sep,.snd,.pb-play,.now-k),.pb-line::before{transition:color var(--band-t),background-color var(--band-t),border-color var(--band-t),box-shadow var(--band-t),text-shadow var(--band-t)}
.now-t{transition:text-shadow var(--band-t)}   /* its colour follows the bar's */
body[data-reader="open"] :is(.topbar,.bottom){--ink:var(--card-ink);--muted:var(--card-muted);--accent-text:var(--card-accent);--status:var(--card-status);--line:var(--card-line);--bg:var(--card-bg);--neu-dark:var(--card-neu-dark);--neu-light:var(--card-neu-light);--halo:var(--card-bg);color:var(--ink);background:var(--band-solid)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body[data-reader="open"] :is(.topbar,.bottom){background:var(--band);-webkit-backdrop-filter:blur(var(--band-blur)) saturate(var(--band-saturate));backdrop-filter:blur(var(--band-blur)) saturate(var(--band-saturate))}
}
@media (prefers-reduced-transparency:reduce){body[data-reader="open"] :is(.topbar,.bottom){background:var(--card-bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
body[data-reader="open"] .topbar{pointer-events:auto}   /* a band: a finger on it never reaches the text below */
body[data-reader="open"] .brand{color:var(--ink)}       /* the logo in cream */
body[data-reader="open"] .settings-btn{color:var(--ink);border-color:var(--ink);background:transparent}
body[data-reader] .nav,body[data-reader] .player:not(.is-open) :is(.snd,.pb-line){display:none}
/* the line of light along the top of the bottom band, its ends faded */
.bottom::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(to right,transparent,var(--band-rim) 20%,var(--band-rim) 80%,transparent);opacity:0;pointer-events:none;transition:opacity var(--band-t)}
body[data-reader="open"] .bottom::before{opacity:1}
/* Under the state and the title of the work (or the ©), the band becomes solid, the reader's background: the green of the
   state has 4.59:1 on that background only. Above them, 14 px of an eased gradient (as a smoothstep) leave no seam, and
   the row of the speaker and ⏸ stays on the glass. The strip follows the height of the text area, and runs down to the
   bottom of the screen and across its whole width. */
.p-info::before{content:"";position:absolute;left:-12px;right:-12px;top:-14px;bottom:calc(-14px - env(safe-area-inset-bottom,0px));z-index:-1;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--card-bg) 16%,transparent) 3.5px,color-mix(in srgb,var(--card-bg) 50%,transparent) 7px,color-mix(in srgb,var(--card-bg) 84%,transparent) 10.5px,var(--card-bg) 14px);opacity:0;transition:opacity var(--band-t)}
body[data-reader="open"] .p-info::before{opacity:1}

/* 08 SEUIL: the logo alone is sampled at the centre, rises, then the name, the role and the doors appear */
.seuil{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;padding:24px 16px;text-align:center}
.seuil-inner{display:flex;flex-direction:column;align-items:center}
.seuil-art{display:flex;flex-direction:column;align-items:center;transform:translateY(var(--art-shift,0px));transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.seuil-canvas{display:block;width:min(260px,64vw);height:auto;aspect-ratio:2.557/1;overflow:visible}
.seuil-rest{display:flex;flex-direction:column;align-items:center;width:100%;opacity:0;transition:opacity .8s ease .5s}
.seuil[data-stage="ready"] .seuil-art{transform:none}
.seuil[data-stage="ready"] .seuil-rest{opacity:1}
.seuil-name{margin:14px 0 0;font:400 clamp(var(--fs-30),7.5vw,var(--fs-46))/1 var(--font-display);letter-spacing:.01em}
.seuil-role{margin:12px 0 0;font:400 var(--fs-11)/1.4 var(--font-mono);letter-spacing:.19em;text-transform:uppercase;color:var(--muted);text-wrap:balance}   /* 11 px (F2): .19em, not the .2em of the demo, keeps the English role on one line at 375 px; narrower, two even lines */
.seuil-actions{margin-top:38px;display:flex;flex-direction:column;gap:12px;width:min(300px,100%)}
.enter{font:400 var(--fs-18)/1.2 var(--font-text);padding:14px 22px;border-radius:999px;border:1px solid var(--line);transition:background-color .3s ease,border-color .3s ease}
.enter.is-primary{border-color:var(--ink)}
.enter:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.seuil-note{margin:26px 0 0;font:400 var(--fs-11)/1.4 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.seuil-lang{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:16px}

/* 09 SETTINGS DRAWER (settings + elsewhere) */
.settings{position:fixed;z-index:30;top:calc(var(--top-h) + 4px);right:12px;width:min(360px,calc(100vw - 24px));max-height:calc(100% - var(--top-h) - 20px);overflow-y:auto;background:var(--bg);color:var(--ink);border:1px dashed var(--muted);border-radius:14px;padding:18px;box-shadow:var(--shadow-drawer);display:grid;gap:16px;align-content:start}
@media (max-width:600px){.settings{left:0;right:0;width:auto;top:var(--top-h);bottom:0;max-height:none;border-radius:0;border-width:1px 0 0;box-shadow:none;padding:20px 16px calc(env(safe-area-inset-bottom,0px) + 28px)}}
.settings-h{margin:0;font:500 var(--fs-11)/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase}
.settings-group{display:grid;gap:8px}
.settings-group>span{font:400 var(--fs-11)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{position:relative;font:400 var(--fs-14)/1.2 var(--font-text);padding:9px 13px;border-radius:999px;border:1px solid var(--line)}
.seg button::before{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:44px;margin-top:-22px}   /* 44 px to touch, the pill unchanged (F4, 1.19) */
.seg button[aria-pressed="true"]{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.elsewhere{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.elsewhere a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 2px;border-radius:10px;text-decoration:none;color:var(--ink)}
.elsewhere a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.elsewhere svg{width:24px;height:24px}
.elsewhere span{font:400 var(--fs-11)/1.25 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}   /* 11 px (F2, 1.19): a long name goes on two lines, centred */
.toast{position:fixed;left:50%;bottom:calc(var(--bottom-h) + 14px);z-index:40;transform:translate(-50%,8px);box-sizing:border-box;width:max-content;max-width:min(420px,calc(100vw - 32px));padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--bg);font:400 var(--fs-12)/1.45 var(--font-mono);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
body[data-mode="play"] .toast{bottom:auto;top:calc(var(--top-h) + 34px)}

/* 10 REDUCED MOTION — one attribute for every transition (F9): body[data-motion], set from the visitor's choice, or else
   from the system, before the first paint (build/demarrage.js) and at every change (reglages.js) */
body[data-motion="reduced"] :is(.view,.toast,#sky,.ghost,.orbits,.orbit-label .txt,.seuil-art,.seuil-rest,.player,.p-info,.p-sig,.p-now){transition-duration:.01s;transition-delay:0s}
body[data-motion="reduced"]{--band-t:0s}   /* the bands of the reader change at once, as the reader opens and closes */

/* 11 HIDDEN: the hidden attribute always wins */
[hidden]{display:none!important}

/* 12 BOOT: while main.js starts, the instrument is hidden without changing the layout (build/demarrage.js) */
html[data-js="attente"] body>*{visibility:hidden!important}