/* themes/swansong/theme.css — le Zapping.
 * ---------------------------------------------------------------------------
 * Projet Claude Design « Swansong », direction C (Prototype.dc.html et
 * Tuile.dc.html), 2026-10-25. Bold, minimal, brut : une trame qui s'assume,
 * filets de 2 px, ni arrondi, ni ombre, ni dégradé. Noir #0a0a0a, blanc, un
 * ambre de signal #ffb000. Martian Mono (étroite, 75 %) pour tout ce qui est
 * grand ou technique, Instrument Sans pour la prose.
 *
 * Peau du thème défaut (qui garde l'habillage des bricks des pages ordinaires).
 * Trois états de la grille : sans script et dans l'aperçu de l'éditeur, les
 * chaînes se suivent, chacune haute d'un écran ; avec le script (`.sw-zap`),
 * une seule à la fois, plein écran. Au téléphone, deux colonnes qu'on fait
 * défiler.
 */

@font-face {
  font-family: "Martian Mono";
  src: url("fonts/martian-mono-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  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: "Martian Mono";
  src: url("fonts/martian-mono-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  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: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. Jetons (plus forts que ceux du défaut, sombre compris : le site n'a qu'un jour)
   ═══════════════════════════════════════════════════════════════════════════ */

html.sw-html {
  --encre: #0a0a0a;
  --papier: #ffffff;
  --signal: #ffb000;
  --gris: #a8a8a8;
  --gris-fonce: #3a3a3a;
  --eteint: #767676;
  --muet: #6b6b6b;

  --fond: var(--papier);
  --surface: var(--papier);
  --texte: var(--encre);
  --texte-2: var(--muet);
  --bordure: var(--encre);
  --accent: var(--encre);
  --sur-accent: var(--papier);
  --r: 0;

  --mono: "Martian Mono", ui-monospace, monospace;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --barre-h: 44px;
  --filet: 2px;
  --trame-lignes: repeating-linear-gradient(0deg, transparent 0 2px, rgba(10, 10, 10, .28) 2px 3px);

  color-scheme: light;
  background: var(--encre);
}

.sw {
  margin: 0;
  background: var(--encre);
  color: var(--encre);
  font: 400 1rem/1.4 var(--mono);
  font-stretch: 75%;
}
.sw a { color: inherit; text-decoration: none; }
.sw :focus-visible { outline: 3px solid var(--signal); outline-offset: -4px; }
.sw-signal { color: var(--signal); }

/* L'accès au guide, visible au premier Tab. */
.sw-evitement {
  position: fixed; left: 10px; top: 10px; z-index: 30;
  padding: 10px 14px; border: 2px solid var(--encre);
  background: var(--signal); color: var(--encre);
  font: inherit; font-size: 12px; cursor: pointer;
  opacity: 0; pointer-events: none;
}
.sw-evitement:focus { opacity: 1; pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. La scène et ses chaînes
   ═══════════════════════════════════════════════════════════════════════════ */

.sw-html--grille .sw-scene {
  position: relative;
  border: var(--filet) solid var(--encre);
  border-bottom: 0;
  padding-bottom: var(--barre-h);
}
.sw-flux > .bk-w { margin: 0; max-width: none; }
.sw-flux > .bk-w + .bk-w { margin-top: var(--filet); }

.bk-grille { background: var(--encre); }
.bk-grille__chaine {
  gap: var(--filet);
  height: calc(100dvh - var(--barre-h) - var(--filet));
  background: var(--encre);
}
.bk-grille__chaine + .bk-grille__chaine { margin-top: var(--filet); }
.bk-grille__vide { background: var(--papier); }

/* Avec le script : une chaîne à la fois, plein écran. */
.sw-zap .sw-scene { position: fixed; inset: 0 0 var(--barre-h); padding: 0; overflow: hidden; }
.sw-zap .bk-grille__chaine { height: calc(100dvh - var(--barre-h) - var(--filet)); }
.sw-zap .bk-grille__chaine:not(.sw-on) { display: none; }
.sw-zap .bk-grille__chaine + .bk-grille__chaine { margin-top: 0; }

/* Le balayage d'un changement de chaîne : une ligne ambrée, un pixel de décalage. */
.sw-balai {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3;
  background: var(--signal); opacity: 0; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Les tuiles
   ═══════════════════════════════════════════════════════════════════════════ */

.bk-grille__tuile { background: var(--papier); color: var(--encre); overflow: hidden; }
.bk-grille__tuile > .tu,
.bk-grille__tuile > .bk-unknown { position: absolute; inset: 0; }

.tu {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: 8px;
  padding: 12px 14px 14px;
  background: inherit; color: inherit;
  overflow: hidden;
}
/* Rien ne se tasse : ce qui déborde doit se voir, c'est ce que mesure l'ajustement des textes. */
.tu > *, .tu-bouton > *, .tu-pied > * { flex-shrink: 0; }
a.tu, .tu-bouton { cursor: pointer; }
.tu:focus-visible, .tu-bouton:focus-visible { outline: 3px solid currentColor; outline-offset: -8px; }

.tu-k {
  position: relative;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.tu-g {
  display: block;
  max-width: 100%;
  overflow-wrap: normal; /* un mot ne se coupe pas : c'est la taille qui cède */
  font-weight: 700; font-size: 30px; line-height: 1.04; letter-spacing: -.03em;
  text-wrap: balance;
}
.tu-pied { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.tu-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; width: 100%; }
.tu-k.tu-ligne { align-items: baseline; }
.tu-phrase { font: 400 14px/1.3 var(--sans); max-width: 34ch; }
.tu-url { font-size: 10px; white-space: nowrap; }
.tu-curseur { animation: sw-clignote 1.1s steps(1) infinite; }
@keyframes sw-clignote { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Les styles prédéfinis (theme.json, `grille.styles`), choisis dans l'éditeur. */
.bk-grille__tuile[data-style="encre"] { background: var(--encre); color: var(--papier); }
.bk-grille__tuile[data-style="signal"] { background: var(--signal); color: var(--encre); }
.bk-grille__tuile[data-style="trame"] { background: var(--papier) var(--trame-lignes); }

/* Le survol : net, immédiat — l'ambre ; sur l'ambre, l'encre. */
.bk-grille__tuile:has(a.tu:hover, .tu-bouton:hover, a.tu:focus-visible, .tu-bouton:focus-visible) { background: var(--signal); color: var(--encre); }
.bk-grille__tuile[data-style="signal"]:has(a.tu:hover, .tu-bouton:hover, a.tu:focus-visible, .tu-bouton:focus-visible) { background: var(--encre); color: var(--papier); }

/* Éteinte par un filtre ; allumée par un membre. */
.bk-grille__tuile.sw-eteinte { background: var(--papier) !important; color: var(--eteint) !important; }
.bk-grille__tuile.sw-eteinte img { filter: grayscale(1) opacity(.2) !important; }
.bk-grille__tuile.sw-eteinte .tu-puce { background: #f2f2f2 !important; color: var(--eteint) !important; }
.bk-grille__tuile.sw-actif { background: var(--signal); color: var(--encre); }

/* Projet, image : la couverture cadrée, rendue au choix de la tuile (`data-rendu`). */
.tu-couv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bk-focal, 50% 50%); }
.tu[data-rendu="nb"] .tu-couv,
.tu[data-rendu="nb-survol"] .tu-couv { filter: grayscale(1) contrast(1.25); }
/* L'incrustation : l'image en noir et blanc, multipliée sur la teinte. */
.tu[data-rendu="incrustation"] { isolation: isolate; }
.tu[data-rendu="incrustation"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--teinte, var(--signal)); }
.tu[data-rendu="incrustation"] .tu-couv { filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
/* Au survol (et quand un membre allume ses projets) : la couleur. */
:is(a.tu:is(:hover, :focus-visible), .sw-allume .tu)[data-rendu="nb-survol"] .tu-couv,
:is(a.tu:is(:hover, :focus-visible), .sw-allume .tu)[data-rendu="incrustation"] .tu-couv { filter: none; mix-blend-mode: normal; }
.tu-projet .tu-puce { background: var(--papier); color: var(--encre); padding: 3px 6px; margin: -3px -6px; }
.tu-projet .tu-pied.tu-puce { padding: 6px 8px; margin: -6px -8px; gap: 4px; }
.tu-projet .tu-pied .tu-g { font-weight: 800; line-height: .96; letter-spacing: -.04em; }
.tu-projet .tu-s { font-size: 10px; }
.tu-projet:is(:hover, :focus-visible) .tu-puce,
.sw-allume .tu-projet .tu-puce { background: var(--signal); }
.tu-projet--titre .tu-puce { background: none !important; padding: 0; margin: 0; }
.tu-projet--titre .tu-pied .tu-g { text-transform: uppercase; line-height: .98; }
.bk-grille__tuile.sw-allume:has(.tu-projet--titre) { background: var(--signal); color: var(--encre); }
.tu-projet template { display: none; }

/* Logo : le cygne et le mot, en masque (ils prennent la couleur de la tuile). */
.tu-logo { justify-content: center; align-items: center; gap: 6%; padding: 8%; }
.tu-cygne, .tu-mot { display: block; width: 100%; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tu-cygne { --m: url("logo.svg"); flex: 1 1 auto; min-height: 0; }
.tu-mot { --m: url("titre.svg"); aspect-ratio: 93.46 / 10.47; flex: none; max-width: 86%; }
.tu-logo[data-signe="mot"] .tu-mot { max-width: 100%; }

/* Manifeste : un vers, rien autour. */
.tu-vers { font-size: 40px; }

/* Membre : le nom, le coin ↗ ; le portrait au survol. */
.tu-membre { padding: 0; }
.tu-bouton {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  width: 100%; height: 100%; padding: 12px 14px 14px; margin: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left;
}
.tu-membre .tu-g { line-height: 1; letter-spacing: -.04em; }
.tu-coin {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  font-size: 12px;
}
.tu-coin:hover { background: var(--encre); color: var(--papier); }
.tu-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); opacity: 0; pointer-events: none; }
.tu-membre:hover .tu-portrait { opacity: .22; }

/* Photomaton : l'ambre par défaut, deux cadres de portraits. */
.bk-grille__tuile:not([data-style]):has(.tu-photomaton) { background: var(--signal); }
.bk-grille__tuile:not([data-style]):has(.tu-photomaton:hover, .tu-photomaton:focus-visible) { background: var(--encre); color: var(--papier); }
.tu-photomaton { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.tu-photomaton:has(.tu-cadres[hidden]) { display: flex; }
.tu-pied.tu-ligne { flex-direction: row; }
.tu-cadres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.tu-cadre { position: relative; display: flex; align-items: flex-end; padding: 6px; border: 2px solid currentColor; background-image: var(--trame-lignes); overflow: hidden; font-size: 9px; }
.tu-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.tu-cadre .tu-num { position: relative; }
.tu-photomaton .tu-g { font-weight: 800; line-height: .9; letter-spacing: -.04em; white-space: nowrap; }
.tu-photomaton .tu-phrase { max-width: 16ch; text-align: right; }

/* Contact. */
.tu-mail { line-height: 1; letter-spacing: -.05em; white-space: nowrap; }

/* Événement : la date en très grand, barrée une fois passée. */
.tu-jours { font-weight: 800; line-height: .82; letter-spacing: -.06em; white-space: nowrap; }
.tu-passe .tu-jours { text-decoration: line-through; text-decoration-thickness: 3px; }
.tu-quand { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; line-height: 1.3; flex: none; }
.tu-quand strong { font-size: 20px; font-weight: 800; }

/* $commit_ */
.tu-commit > .tu-g { font-weight: 800; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }

/* Texte (à propos). */
.tu-texte .tu-g { font-weight: 800; line-height: 1; letter-spacing: -.04em; }

/* Image, GIF. */
.tu-image { padding: 0; background: #d9d9d9; }
.tu-etiquette { position: absolute; left: 10px; top: 9px; padding: 2px 5px; background: var(--encre); color: var(--papier); font-size: 10px; }

/* Vide : du silence, une croix, un curseur, des coordonnées. */
.tu-vide[data-motif="croix"]::before,
.tu-vide[data-motif="croix"]::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; }
.tu-vide[data-motif="croix"]::before { width: 17px; height: 2px; margin: -1px 0 0 -8px; }
.tu-vide[data-motif="croix"]::after { width: 2px; height: 17px; margin: -8px 0 0 -1px; }
.tu-vide .tu-curseur { position: absolute; left: 14px; bottom: 12px; font-weight: 700; font-size: 20px; }
.tu-coord { position: absolute; right: 12px; bottom: 10px; font-size: 10px; white-space: nowrap; color: var(--muet); }
[data-style="encre"] .tu-coord { color: var(--gris); }

/* Ce qui manque (l'aperçu seul le montre). */
.tu-manque { background: repeating-linear-gradient(45deg, #fff 0 8px, #f2f2f2 8px 16px); color: var(--muet); font-size: 11px; }

/* Ce qui ne tient pas dans une petite tuile s'efface. */
.tu .tu-facultatif[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. La barre
   ═══════════════════════════════════════════════════════════════════════════ */

.sw-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: stretch;
  height: var(--barre-h);
  border: var(--filet) solid var(--encre); border-top: 0;
  background: var(--encre); color: var(--papier);
  font-size: 11px;
}
.sw-barre button, .sw-barre a { margin: 0; border: 0; background: var(--encre); color: var(--papier); font: inherit; cursor: pointer; }
.sw-nom { display: flex; align-items: center; padding: 0 14px; background: var(--papier) !important; color: var(--encre) !important; font-weight: 800 !important; font-size: 16px !important; letter-spacing: -.03em; }
.sw-fleche { width: 44px; }
.sw-fleche:hover, .sw-guide-btn:hover, .sw-retour:hover { background: var(--signal) !important; color: var(--encre) !important; }
.sw-ch { display: flex; align-items: center; gap: 8px; padding: 0 10px; max-width: 260px; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sw-tag { color: var(--gris); overflow: hidden; text-overflow: ellipsis; }
.sw-aide { display: flex; align-items: center; padding: 0 12px; color: var(--gris); white-space: nowrap; }
.sw-filtres { display: flex; align-items: stretch; margin-left: auto; }
.sw-filtres button { padding: 0 12px; border-left: 1px solid var(--gris-fonce); text-transform: uppercase; letter-spacing: .04em; }
.sw-filtres button[aria-pressed="true"] { background: var(--signal); color: var(--encre); }
.sw-guide-btn { padding: 0 14px !important; border-left: 1px solid var(--gris-fonce) !important; text-transform: uppercase; letter-spacing: .04em; }
.sw-langues { display: flex; align-items: stretch; border-left: 1px solid var(--gris-fonce); }
.sw-langues a { display: flex; align-items: center; padding: 0 11px; }
.sw-langues a[aria-current] { background: var(--papier); color: var(--encre); }
.sw-retour { display: flex; align-items: center; padding: 0 14px; margin-right: auto !important; }
.sw-barre :focus-visible { outline: 2px solid var(--signal); outline-offset: -4px; }

/* Sans script : rien à zapper. */
html:not(.sw-zap) .sw-fleche, html:not(.sw-zap) .sw-ch, html:not(.sw-zap) .sw-aide,
html:not(.sw-zap) .sw-filtres, html:not(.sw-zap) .sw-guide-btn { display: none; }
html:not(.sw-zap) .sw-langues { margin-left: auto; }

.sw-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. Par-dessus la grille : le manifeste, un projet, le guide
   ═══════════════════════════════════════════════════════════════════════════ */

.sw-calque { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: var(--encre); color: var(--papier); overscroll-behavior: contain; }
.sw-calque[hidden] { display: none; }
/* Sans script, l'ancre ouvre le manifeste quand même. */
html:not(.sw-zap) .sw-calque--manifeste:target,
html:not(.sw-zap) .sw-calque--manifeste:has(:target) { display: block; }

.sw-calque-barre {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: stretch;
  height: var(--barre-h);
  border-bottom: var(--filet) solid var(--papier);
  background: var(--encre); color: var(--papier);
  font-size: 11px;
}
.sw-calque-barre > span:first-child { display: flex; align-items: center; gap: 10px; padding: 0 14px; white-space: nowrap; overflow: hidden; }
.sw-calque-gestes { display: flex; align-items: stretch; }
.sw-calque-barre button { margin: 0; padding: 0 16px; border: 0; border-left: var(--filet) solid var(--papier); background: var(--encre); color: var(--papier); font: inherit; cursor: pointer; }
.sw-calque-barre [data-sw-projet] { width: 44px; padding: 0; }
.sw-calque-barre [data-sw-projet="1"] { border-left-width: 1px; border-left-color: var(--gris-fonce); }
.sw-calque-barre button:hover { background: var(--signal); color: var(--encre); }

.sw-manifeste { display: flex; flex-direction: column; gap: 40px; max-width: 1040px; margin: 0 auto; padding: 56px 20px 50vh; }
.sw-strophe { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.sw-strophe-n { padding-top: 10px; font-size: 11px; color: var(--gris); }
.sw-strophe p { margin: 0; font: 600 44px/1.1 var(--sans); font-stretch: 85%; letter-spacing: -.01em; text-wrap: pretty; }
.sw-strophe p > span { padding: 0 .1em; margin-left: -.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sw-strophe p.sw-ici > span, .sw-strophe p:target > span { background: var(--signal); color: var(--encre); }

.sw-calque--projet { background: var(--papier); color: var(--encre); border: var(--filet) solid var(--encre); }
.sw-calque--projet .sw-calque-barre { border-bottom: 0; }
.swp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--filet); min-height: calc(100% - var(--barre-h)); background: var(--encre); }
.swp-info {
  position: sticky; top: var(--barre-h);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: calc(100dvh - var(--barre-h)); max-height: calc(100dvh - var(--barre-h)); overflow-y: auto;
  padding: 20px; background: var(--papier);
}
/* La colonne du cartel garde le papier sur toute la hauteur ; le cartel y reste sous la barre. */
.swp-col { background: var(--papier); }
.swp-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.swp-titre { margin: 0; font-weight: 800; font-size: 54px; line-height: .96; letter-spacing: -.05em; text-wrap: balance; }
.swp-serie { padding: 0 .15em; background: var(--signal); font-weight: 800; font-size: 22px; letter-spacing: -.04em; line-height: 1.15; }
.swp-meta { display: flex; flex-direction: column; gap: 6px; font: 400 15px/1.4 var(--sans); }
.swp-note p { margin: .6em 0 0; }
.swp-note:empty { display: none; }
.swp-lien { align-self: flex-start; padding: 6px 0 2px; border-bottom: 2px solid var(--encre); font: 400 12px/1.4 var(--mono); font-stretch: 75%; }
.swp-lien:hover { background: var(--signal); }
.swp-oeuvres { padding: 20px; column-count: 2; column-gap: 20px; background: var(--papier); }
.swp-oeuvres figure { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; break-inside: avoid; }
.swp-oeuvres img { width: 100%; height: auto; }
.swp-oeuvres figcaption { font-size: 10px; }
.sw-caviar { background: var(--encre); color: var(--encre); }

.sw-guide-filtres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--filet); border-bottom: var(--filet) solid var(--gris-fonce); background: var(--gris-fonce); }
.sw-guide-filtres button { padding: 22px 14px; margin: 0; border: 0; background: var(--encre); color: var(--papier); font: inherit; font-weight: 800; font-size: 34px; letter-spacing: -.04em; text-align: left; cursor: pointer; }
.sw-guide-filtres button[aria-pressed="true"] { background: var(--signal); color: var(--encre); }
.sw-guide-filtres button:hover { background: var(--signal); color: var(--encre); }
.sw-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--filet); background: var(--gris-fonce); }
.sw-guide section { padding: 20px 16px 28px; background: var(--encre); }
.sw-guide h3 { margin: 0 0 14px; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); }
.sw-guide ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sw-guide li { border-top: 1px solid var(--gris-fonce); }
.sw-guide li > :is(a, button) {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  width: 100%; padding: 12px 0; margin: 0; border: 0;
  background: transparent; color: var(--papier); font: inherit; text-align: left; cursor: pointer;
}
.sw-guide li > :is(a, button):hover { color: var(--signal); }
.sw-guide .t { font: 400 17px/1.25 var(--sans); }
.sw-guide .m { font-size: 10px; color: var(--gris); white-space: nowrap; }
.sw-esc { color: var(--gris); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. Les pages ordinaires (le manifeste, une série, sans script)
   ═══════════════════════════════════════════════════════════════════════════ */

.sw-doc { min-height: 100dvh; padding: 56px clamp(16px, 4vw, 48px) calc(var(--barre-h) + 80px); background: var(--papier); }
.sw-doc .sw-flux { max-width: 1040px; margin: 0 auto; }
.sw-doc .bk-text { font: 400 20px/1.45 var(--sans); }
.sw-doc .bk-text[data-verse], .sw-doc .bk-verse { font-weight: 600; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.12; }
.mur-doc-kicker { display: inline-block; padding: 2px 6px; background: var(--signal); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.mur-doc-title { margin: 14px 0 32px; font-weight: 800; font-size: clamp(40px, 7vw, 96px); line-height: .92; letter-spacing: -.05em; }
.mur-doc-sig { margin-top: 48px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muet); }
.bk-fiche .mur-back { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--encre); }
.bk-fiche .mur-lb-title { margin: 20px 0 14px; font-weight: 800; font-size: clamp(40px, 7vw, 96px); line-height: .92; letter-spacing: -.05em; }
.bk-fiche .mur-lb-authors { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 15px/1.4 var(--sans); }
.bk-fiche .mur-lb-author { border-bottom: 1px solid currentColor; }
.bk-fiche .mur-lb-desc { max-width: 40rem; margin-top: 20px; font: 400 18px/1.5 var(--sans); }
.mur-redact { background: var(--encre); color: var(--encre); }
.sw-doc .bk-button a, .sw-doc a.bk-button { border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. Tailles d'écran
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1179px) { .sw-aide { display: none; } }
@media (max-width: 999px) { .sw-filtres { display: none; } .sw-guide-btn { margin-left: auto !important; } }

/* Le téléphone : deux colonnes, la chaîne défile ; ▲ ▼ ou un geste de côté pour zapper. */
@media (max-width: 699px) {
  /* `.sw` devant : la feuille du module (la trame 6 × 4) arrive après celle du thème. */
  .sw .bk-grille__chaine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: calc((100dvh - var(--barre-h) - 10px) / 5);
    grid-auto-flow: row dense;
    height: auto;
    min-height: calc(100dvh - var(--barre-h) - var(--filet));
  }
  .sw .bk-grille__tuile { grid-column: span 2; grid-row: span 2; }
  .sw .bk-grille__tuile[data-w="1"] { grid-column: span 1; }
  .sw .bk-grille__tuile[data-h="1"] { grid-row: span 1; }
  .sw .bk-grille__vide { display: none; }
  .sw-zap .sw-scene { overflow-y: auto; overscroll-behavior: contain; }
  .sw-zap .bk-grille__chaine { height: auto; }
  .sw-tag, .sw-esc { display: none; }
  .sw-nom { padding: 0 10px; font-size: 14px !important; }
  .tu-vers { font-size: 28px; }
  .sw-strophe { grid-template-columns: 32px minmax(0, 1fr); }
  .sw-strophe p { font-size: 28px; }
  .swp { grid-template-columns: minmax(0, 1fr); }
  .swp-info { position: static; min-height: 0; max-height: none; }
  .swp-titre { font-size: 34px; }
  .swp-oeuvres { column-count: 1; }
  .sw-guide-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-guide-filtres button { font-size: 22px; }
}

/* Moins de mouvement : rien ne clignote, rien ne balaie. */
@media (prefers-reduced-motion: reduce) {
  .tu-curseur { animation: none; }
}