/* site/themes/mur/mur.css — thème Mur (P4 + passe pixel-perfect). Variante B :
   grille uniforme + rail + INTRO scroll-révélée (logo volant + terminal).
   Registre vidéosurveillance : #111 + ambre #F9B03D, Courier New. Valeurs
   alignées sur le design « Swansong Mur.dc.html ». Pas de voile ni de
   verrouillage. La géométrie (--fr-*, --rail-w, --lock-h) est posée par mur.js
   (source de vérité) pour que le logo volant atterrisse pile sur le mât. */

:root{
  --mur-bg:#111111; --mur-seam:#000; --mur-accent:#F9B03D;
  --mur-bright:#ece6da; --mur-mid:#b5ae9f; --mur-faint:#6b6558; --mur-line:#26231e;
  --mur-mono:'Courier New',monospace;
  /* --fr-l = marge GAUCHE du cadre, volontairement plus serrée que --fr-t :
     le rail collait trop loin du bord (66 + 24 de padding = 90px de vide avant
     le menu). Tout ce qui s'aligne à gauche (rail, mur, bannière, fiche, bas)
     suit --fr-l ; le haut et la droite gardent --fr-t.
     --fr-b = --fr-t : marge basse identique au haut et à la droite. Exception
     en étroit (cf. mur.js) : la barre du bas loge les portraits. */
  --fr-t:66px; --fr-l:24px; --fr-b:66px; --rail-w:296px; --lock-h:150px;
  /* Largeur du rail REPLIÉ. Un jeton parce que deux règles en dépendent — le
     rail lui-même et le bord gauche du mur replié — et qu'elles doivent bouger
     ensemble, sinon le rail remange des tuiles. */
  --mini-w:56px;
  /* Retrait gauche du rail REPLIÉ, plus serré que --fr-l. Le rail partait à 24px
     du bord et ses cellules ont 8px de padding : 32px de noir avant la première
     lettre, pour une colonne qui n'en fait que 56.
     9px est choisi, pas approximatif : 9 + 56 + 1 = 66, soit exactement --fr-t.
     Replié, le mur a donc la MÊME marge sur ses quatre côtés, et la colonne
     d'icônes vit à l'intérieur de cette marge au lieu de s'y ajouter. */
  --mini-l:9px;
  /* Marges d'écran (encoche, indicateur d'accueil). Un JETON plutôt que env()
     en clair partout : la règle se lit, et elle devient testable — on peut
     forcer le jeton et vérifier l'arithmétique, là où Chromium n'émule aucune
     encoche. Vaut 0 hors iOS, donc no-op ailleurs. Ces valeurs ne sont non
     nulles que parce que site/index.php déclare viewport-fit=cover. */
  --sa-t:env(safe-area-inset-top,0px);    --sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px);
}

html,body{margin:0;padding:0;height:100%;background:var(--mur-bg);overflow:hidden;font-family:var(--mur-mono);color:var(--mur-mid)}
#app{position:fixed;inset:0}
a{color:#8a8378;text-decoration:none}a:hover{color:var(--mur-accent)}
::selection{background:var(--mur-accent);color:#111}
.mur-hidden{display:none!important}

@keyframes swans-caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* HUD haut : horloge (le badge REC a été retiré) */
.mur-hud-top{position:absolute;top:var(--sa-t);right:var(--sa-r);height:var(--fr-t);display:flex;align-items:center;gap:14px;padding-right:var(--fr-t);z-index:20;pointer-events:none}
.mur-clock{font-size:10px;letter-spacing:.18em;color:var(--mur-faint)}

/* Lockup (cygne + wordmark) : deux masques CSS sur les SVG du thème. Porté par le
   logo volant ET par le mât du tiroir étroit — d'où la classe partagée. */
.mur-mast{display:flex;flex-direction:column;align-items:center}
.mur-mast .swan,.mur-mast .word{flex:none;background:var(--mur-bright)}
.mur-mast .swan{-webkit-mask:url(logo.svg) center/contain no-repeat;mask:url(logo.svg) center/contain no-repeat}
.mur-mast .word{-webkit-mask:url(titre.svg) center/contain no-repeat;mask:url(titre.svg) center/contain no-repeat}
/* Logo volant : partagé intro (grand, centré) ↔ mât du rail.
   Position/échelle/opacité/dimensions pilotées inline par mur.js. */
.mur-fly{position:fixed;z-index:29;pointer-events:none;transform-origin:center center}

/* Intro : voile plein écran (alpha inline) + terminal (phrase + caret clignotant)
   + « ↓ DÉFILER ». Opacités pilotées inline en fonction du scroll. */
.mur-intro{position:fixed;inset:0;z-index:28;display:flex;align-items:center;justify-content:center;pointer-events:none}
.mur-intro-inner{position:absolute;left:0;right:0;bottom:15%;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.mur-term{font-size:13px;letter-spacing:.22em;color:var(--mur-mid);text-transform:uppercase}
.mur-term i{display:inline-block;width:.55em;height:1.05em;background:var(--mur-accent);margin-left:7px;vertical-align:-2px;animation:swans-caret 1.05s steps(1) infinite}
.mur-hint{font-size:10px;letter-spacing:.3em;color:var(--mur-faint);text-transform:uppercase;cursor:pointer;pointer-events:auto}

/* Rail (variante B) : bouton repli + slot mât (spacer) + rule + menu + registre */
.mur-rail{position:absolute;top:var(--fr-t);left:var(--fr-l);width:var(--rail-w);bottom:var(--fr-b);
  padding:28px 24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background:var(--mur-bg);
  border-right:1px solid var(--mur-line);overflow:hidden;z-index:15}
.mur-rail-toggle{position:absolute;top:12px;right:10px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--mur-line);color:var(--mur-mid);font-size:13px;line-height:1;cursor:pointer;z-index:16;font-family:var(--mur-mono);padding:0}
.mur-rail-toggle:hover{border-color:var(--mur-accent);color:var(--mur-accent)}
.mur-mast-slot{width:100%;height:var(--lock-h);flex:none}
.mur-rule{font-size:11px;letter-spacing:.18em;color:var(--mur-faint);white-space:nowrap;overflow:hidden}
.mur-menu{display:flex;flex-direction:column;gap:9px;font-size:13px;letter-spacing:.2em}
.mur-menu a{color:var(--mur-mid);transition:color .15s}.mur-menu a.on,.mur-menu a:hover{color:var(--mur-accent)}
/* Le registre des séries n'appartient qu'à TRAVAUX. Il restait affiché sur les
   sept rubriques, où il proposait d'ouvrir une fiche depuis une page de texte —
   un menu qui ne parle pas de la page qu'on lit.
   Il entre et sort au lieu d'apparaître : le rail est une colonne étroite, un
   bloc de dix lignes qui surgit sec y fait sursauter. La visibilité est
   retardée de la durée du fondu pour que la sortie se VOIE, et immédiate au
   retour — sinon rien ne s'afficherait pendant que ça remonte. */
.mur-register{flex:1;overflow-y:auto;min-height:0;scrollbar-width:none;
  opacity:1;transform:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s}
.mur-register::-webkit-scrollbar{width:0}
.mur-register.off{opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease-in,visibility 0s linear .22s}
/* Les lignes se posent l'une après l'autre (--i, posé par renderRegister) :
   c'est ce qui distingue une entrée d'un simple fondu. Plafonné à 12 lignes,
   au-delà l'attente devient une lenteur.
   Classe TRANSITOIRE `.in` et non `:not(.off)` : le registre se re-rend au
   filtrage par artiste, et l'état permanent rejouait la cascade à chaque clic
   sur un portrait. */
.mur-register.in .mur-reg{animation:mur-reg-in .34s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 26ms)}
@keyframes mur-reg-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.mur-reg{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:baseline;padding:10px 2px;
  border-top:1px solid var(--mur-line);cursor:pointer;transition:opacity .18s,background .15s}
.mur-reg .mk{font-size:12px;color:var(--mur-accent)}
.mur-reg .rt{font-size:13px;letter-spacing:.05em;color:var(--mur-bright);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mur-reg .ry{font-size:9px;letter-spacing:.14em;color:var(--mur-faint);text-align:right;white-space:nowrap}
.mur-reg.hl{background:rgba(249,176,61,.10);box-shadow:inset 2px 0 0 var(--mur-accent)}
.mur-reg.hl .rt{color:var(--mur-accent)}
.mur-reg.dim{opacity:.38}

/* Rail replié : mini colonne (logo + initiales du menu) */
.mur-rail-mini{position:absolute;left:var(--mini-l);top:var(--fr-t);bottom:var(--fr-b);width:var(--mini-w);background:var(--mur-bg);
  border-right:1px solid var(--mur-line);display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 14px;z-index:16;box-sizing:border-box;
  animation:mur-mini-in .34s cubic-bezier(.22,1,.36,1) both}
/* Le rail replié se glisse depuis le bord au lieu d'apparaître d'un coup : c'est
   l'autre moitié de l'effet de repli, le grand rail sortant par la gauche. */
@keyframes mur-mini-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.mur-rail-mini .exp{background:none;border:0;color:var(--mur-faint);font-size:15px;line-height:1;cursor:pointer;padding:0;font-family:var(--mur-mono);
  align-self:flex-end;margin-right:6px;transition:color .14s}
.mur-rail-mini .exp:hover{color:var(--mur-accent)}
/* Le cygne était une vignette de 22px dans un rail de 42 : on le devinait plus
   qu'on ne le voyait, et le rail replié n'avait plus de signature. Il occupe
   maintenant toute la largeur utile, moins 8px de marge de chaque côté, en
   pleine encre (--mur-bright) : c'est lui qui dit à qui on a affaire quand tout
   le reste est réduit à une lettre. */
.mur-rail-mini .mini-logo{width:calc(var(--mini-w) - 16px);aspect-ratio:1/1.106;height:auto;flex:none;
  margin-bottom:2px;background:var(--mur-bright);
  -webkit-mask:url(logo.svg) center/contain no-repeat;mask:url(logo.svg) center/contain no-repeat}
/* Rail replié : sept rubriques réduites à « > » + initiale, traitées comme des
   ICÔNES et non comme du texte — une cellule carrée cernée d'un filet, le
   couple centré dedans. Elles flottaient auparavant sans boîte, à 13px, ce qui
   les faisait lire comme des restes de mise en page plutôt que comme des
   commandes.
   Le chevron reste (c'est la ponctuation du thème) mais il passe au second
   plan : plus petit, plus pâle, non gras. La lettre porte le poids. Le couple
   est centré optiquement — le chevron étant plus léger, un centrage strict le
   ferait pencher à gauche, d'où le décalage d'1px sur la cellule.
   `stretch` sur la nav : sans lui les <a> se réduisent à leur contenu et
   « centrer » ne veut plus rien dire. */
.mur-mini-menu{display:flex;flex-direction:column;gap:6px;align-self:stretch;padding:0 8px;box-sizing:border-box}
.mur-mini-menu a{position:relative;display:flex;align-items:center;justify-content:center;gap:1px;
  height:34px;padding-left:1px;box-sizing:border-box;
  box-shadow:inset 0 0 0 1px var(--mur-line);color:var(--mur-mid);line-height:1;
  transition:color .14s,box-shadow .14s,background .14s}
.mur-mini-menu a .ch{font-size:10px;font-weight:400;opacity:.5;transition:opacity .14s}
.mur-mini-menu a .ln{font-size:17px;font-weight:700;letter-spacing:0}
.mur-mini-menu a:hover,.mur-mini-menu a:focus-visible{color:var(--mur-accent);box-shadow:inset 0 0 0 1px var(--mur-accent)}
.mur-mini-menu a:hover .ch,.mur-mini-menu a:focus-visible .ch{opacity:1}
/* Rubrique courante : cellule remplie. C'est le seul état qui doit se voir sans
   survol, donc le seul à porter un fond. */
.mur-mini-menu a.on{color:var(--mur-accent);background:rgba(249,176,61,.12);
  box-shadow:inset 0 0 0 1px var(--mur-accent)}
.mur-mini-menu a.on .ch{opacity:1}
.mur-mini-menu a:focus-visible{outline:1px solid var(--mur-accent);outline-offset:2px}
/* Les cellules se posent l'une après l'autre quand le rail se replie. */
.mur-rail-mini .mur-mini-menu a{animation:mur-mini-cell .3s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 34ms + 90ms)}
@keyframes mur-mini-cell{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* Infobulle du rail replié. INSTANTANÉE — aucune transition sur l'apparition,
   c'est tout l'intérêt face au `title` natif et son attente d'une seconde.
   Elle sort à DROITE du rail (left:100%), donc par-dessus le mur : le rail ne
   fait que 42 px, il n'y a pas la place dedans. `white-space:nowrap` +
   pointer-events:none pour qu'elle ne s'interpose jamais sous le curseur. */
.mur-mini-menu a::after{content:attr(data-bulle);position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%);z-index:30;
  padding:6px 10px;background:var(--mur-bg);box-shadow:0 0 0 1px var(--mur-accent),0 8px 24px rgba(0,0,0,.6);
  font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--mur-accent);text-transform:uppercase;
  white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden}
/* Le petit ergot qui la rattache à la lettre. */
.mur-mini-menu a::before{content:'';position:absolute;left:calc(100% + 6px);top:50%;
  width:6px;height:1px;background:var(--mur-accent);z-index:30;opacity:0;visibility:hidden}
.mur-mini-menu a:hover::after,.mur-mini-menu a:focus-visible::after,
.mur-mini-menu a:hover::before,.mur-mini-menu a:focus-visible::before{opacity:1;visibility:visible}

/* ── Navigation étroite (sous le seuil) : bouton cygne + tiroir ────────────────
   Sous 760px il n'y a plus de rail du tout : le tiroir EST la navigation. Il ne
   porte QUE les 7 rubriques — le registre des séries reste une affaire d'écran
   large. Les trois pièces sont filles de #app, jamais de .mur-wall (qui prend un
   `filter` en isolement, donc un contexte d'empilement ET un bloc conteneur pour
   tout position:fixed descendant). D'où aussi le choix d'`absolute` plutôt que
   `fixed` : #app est position:fixed;inset:0, l'effet est le même et on reste
   immunisé. `display:none` par défaut — c'est ce qui les tient hors tabulation
   sur desktop, sans une ligne de JS ; la requête média plus bas les allume. */
.mur-nav-btn,.mur-scrim,.mur-drawer{display:none}

/* Pas trois barres : le cygne. 44×44 = cible tactile minimale, sur son PROPRE
   aplat — le bouton flotte sur une œuvre quelconque, un glyphe nu s'y perdrait. */
.mur-nav-btn{position:absolute;top:calc(var(--fr-t) + var(--sa-t));left:calc(var(--fr-l) + var(--sa-l));z-index:27;width:44px;height:44px;padding:0;
  box-sizing:border-box;align-items:center;justify-content:center;background:var(--mur-bg);
  border:1px solid var(--mur-line);cursor:pointer;font-family:var(--mur-mono);
  -webkit-tap-highlight-color:transparent;box-shadow:0 6px 18px rgba(0,0,0,.55);transition:border-color .18s}
.mur-nav-btn .swan{width:21px;height:23px;background:var(--mur-bright);transition:opacity .2s;
  -webkit-mask:url(logo.svg) center/contain no-repeat;mask:url(logo.svg) center/contain no-repeat}
.mur-nav-btn .x{position:absolute;font-size:21px;line-height:1;color:var(--mur-accent);opacity:0;transition:opacity .2s}
.mur-nav-btn:focus-visible{outline:1px solid var(--mur-accent);outline-offset:2px}
body.mur-nav-open .mur-nav-btn{border-color:var(--mur-accent)}
body.mur-nav-open .mur-nav-btn .swan{opacity:0}
body.mur-nav-open .mur-nav-btn .x{opacity:1}

.mur-scrim{position:absolute;inset:0;z-index:26;background:rgba(17,17,17,.74);opacity:0;pointer-events:none;
  transition:opacity .3s}
body.mur-nav-open .mur-scrim{opacity:1;pointer-events:auto}

/* top/bottom:0 DANS #app, et surtout PAS de 100dvh : #app{position:fixed;inset:0}
   + body{overflow:hidden} figent déjà le cadre sur la fenêtre, alors que dvh
   redimensionnerait le panneau en plein geste quand la barre d'URL se replie.
   `visibility` retire le panneau fermé de la tabulation même sans inert. */
.mur-drawer{position:absolute;top:0;left:0;bottom:0;z-index:27;width:min(84vw,320px);box-sizing:border-box;
  padding:calc(18px + var(--sa-t)) calc(20px + var(--sa-r)) calc(28px + var(--sa-b)) calc(20px + var(--sa-l));flex-direction:column;gap:16px;background:var(--mur-bg);
  border-right:1px solid var(--mur-line);box-shadow:22px 0 60px rgba(0,0,0,.6);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  visibility:hidden;transform:translateX(-100%);
  transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s}
.mur-drawer::-webkit-scrollbar{width:0}
body.mur-nav-open .mur-drawer{transform:none;visibility:visible;
  transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s}

/* Le mât est CENTRÉ, le bouton calé en haut à gauche : ils ne se croisent jamais.
   Hauteurs déduites des viewBox (logo.svg 1570×1736, titre.svg 93.46×10.47) —
   aucune mesure JS ici, contrairement au logo volant. */
.mur-drawer-mast{align-self:center;margin:6px 0 4px;gap:12px}
.mur-drawer-mast .swan{width:74px;aspect-ratio:1570/1736}
.mur-drawer-mast .word{width:min(172px,64%);aspect-ratio:93.46/10.47}

.mur-drawer .mur-menu{gap:0;font-size:15px}
.mur-drawer .mur-menu a{display:block;min-height:44px;box-sizing:border-box;padding:14px 2px;line-height:1.15;
  border-bottom:1px solid var(--mur-line)}
.mur-drawer .mur-menu a:active{color:var(--mur-accent)}

/* Mur : grille uniforme, coutures noires, cadre ambre. left/opacity/filter/transform
   pilotés inline par mur.js (intro + repli rail + isolement). */
.mur-wall{position:absolute;top:var(--fr-t);left:calc(var(--fr-l) + var(--rail-w) + 1px);right:var(--fr-t);bottom:var(--fr-b);
  overflow-y:auto;overflow-x:hidden;background:var(--mur-seam);box-shadow:inset 0 0 0 1px var(--mur-accent);scrollbar-width:none}
.mur-wall::-webkit-scrollbar{width:0}
/* Replié, le mur commence APRÈS le mini-rail. Il démarrait à --fr-l comme si le
   rail n'existait pas, si bien que le rail se posait sur 42px de la première
   colonne de tuiles — on lisait le menu par-dessus une œuvre. Le gain de place
   du repli reste large (296 → 56px de colonne latérale), sans rien recouvrir. */
.mur-wall.collapsed{left:calc(var(--mini-l) + var(--mini-w) + 1px)}
/* Sous le seuil : plus de rail — ni large, ni replié. Le mini se superposerait au
   mur, qui démarre lui aussi à --fr-l (42px de tuiles mangés à gauche si on
   rétrécit une fenêtre dont le rail était replié). La navigation passe par le
   tiroir, allumé ici. */
@media (max-width:760px){
  /* `.mur-wall.collapsed` est cité ici AUSSI : à deux classes il bat le
     `.mur-wall` simple, donc rétrécir une fenêtre dont le rail était replié
     laissait 56px de vide à gauche pour un rail devenu invisible. */
  .mur-wall,.mur-wall.collapsed{left:var(--fr-l)}
  /* Plus de rail sous le seuil : le tiroir reprend toute la largeur du cadre. */
  .mur-lb,.mur-lb.rail-replie{left:var(--fr-l)}
  .mur-rail,.mur-rail-mini{display:none}
  .mur-nav-btn{display:flex}
  .mur-scrim{display:block}
  .mur-drawer{display:flex}
}
.mur-gap{background:var(--mur-bg)}                 /* espace intro en tête de mur */
.mur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--mur-seam)}
.mur-tile{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0c0c0c;cursor:pointer;outline:none}
/* Images rendues telles quelles : plus d'assombrissement au repos. */
.mur-tile img{width:100%;height:100%;object-fit:cover;display:block}
/* Le survol ne se signale plus par la luminosité mais par 4 coins ambrés (même
   motif que le cadre caméra du scan). Un seul pseudo-élément : 8 dégradés
   plats = 2 segments par coin. `.lit` = respiration ambiante (mur.js) : elle
   fait clignoter ce repère au lieu d'éclaircir la tuile. */
.mur-tile::after{content:'';position:absolute;inset:7px;opacity:0;transition:opacity .16s ease;pointer-events:none;z-index:2;
  --c:linear-gradient(var(--mur-accent),var(--mur-accent));
  background:var(--c) 0 0/13px 1px,var(--c) 0 0/1px 13px,
    var(--c) 100% 0/13px 1px,var(--c) 100% 0/1px 13px,
    var(--c) 0 100%/13px 1px,var(--c) 0 100%/1px 13px,
    var(--c) 100% 100%/13px 1px,var(--c) 100% 100%/1px 13px;
  background-repeat:no-repeat}
.mur-tile:hover::after,.mur-tile:focus-visible::after,.mur-tile.lit::after{opacity:1}
.mur-tile:focus-visible{box-shadow:inset 0 0 0 1px var(--mur-accent);z-index:2}
.mur-tile.off{display:none}

/* Remplissage par tuile (mur_placements.fit_mode, choisi dans le board admin).
   cover = défaut (règles ci-dessus). fit = œuvre entière visible. border = œuvre
   en pleine largeur centrée → bandes de --mur-tile-bg au-dessus/en dessous.
   NB : on ne touche jamais à `display` ici, sinon .mur-tile.off (même
   spécificité, déclaré avant) ne masquerait plus les tuiles filtrées. */
/* Défaut = transparent : sans couleur choisie, la bordure laisse voir le fond
   du mur plutôt que d'ajouter un aplat sombre. */
.mur-tile[data-fit="fit"],.mur-tile[data-fit="border"]{background-color:var(--mur-tile-bg,transparent)}
.mur-tile[data-fit="fit"] img{object-fit:contain}
/* border = fit AVEC MARGE : l'œuvre entière, jamais collée au bord. Le padding
   donne la marge minimale (identique sur les 4 côtés : un % de padding se
   résout toujours sur la LARGEUR, et la tuile est carrée), et `contain` laisse
   le surplus sur l'axe qui ne remplit pas — les côtés pour un paysage.
   Surtout pas de « pleine largeur » ici : un paysage toucherait les bords. */
.mur-tile[data-fit="border"]{padding:6%;box-sizing:border-box}
.mur-tile[data-fit="border"] img{object-fit:contain}

/* Bas : portraits (L'Appel) — pas de compteur (aligné design) */
.mur-bottom{position:absolute;left:0;right:0;bottom:0;height:var(--fr-b);display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 var(--fr-t) 0 var(--fr-l);z-index:20}
/* Le membre était une vignette de 30 px, son nom une infobulle au survol : pour
   savoir QUI on filtre, il fallait viser chaque portrait l'un après l'autre.
   C'est désormais une CARTE — portrait + nom côte à côte, nom toujours lu,
   cerclée d'un filet. Le collectif se lit d'un coup d'œil. */
.mur-portraits{display:flex;align-items:center;gap:10px}
.mur-port{position:relative;display:flex;align-items:center;gap:9px;flex:none;
  padding:4px 11px 4px 4px;cursor:pointer;outline:none;background:transparent;
  box-shadow:inset 0 0 0 1px var(--mur-line);
  transition:background .16s,box-shadow .16s,opacity .16s}
.mur-port img,.mur-port .ini{width:32px;height:32px;flex:none}
.mur-port img{object-fit:cover;filter:grayscale(1) contrast(1) brightness(.85);transition:filter .18s}
.mur-port.px img{image-rendering:pixelated}
.mur-port .pn{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--mur-mid);
  text-transform:uppercase;white-space:nowrap;transition:color .16s}
/* Membre sans portrait (ou fichier manquant) : initiales, pas d'image cassée. */
.mur-port .ini{display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.04em;color:var(--mur-mid);background:#1b1915;
  box-shadow:inset 0 0 0 1px var(--mur-line);transition:color .18s}
/* Membre sans série placée : présenté mais ne filtre pas (le mur serait vide). */
.mur-port.nowork{cursor:default}

/* Trois états, dans cet ordre de force : survolé/désigné < actif.
   `.hl` est le surlignage RÉCIPROQUE — posé par surligne() quand on survole une
   tuile ou une ligne du registre dont ce membre est l'auteur. */
.mur-port:hover,.mur-port.hl,.mur-port:focus-visible{background:rgba(255,255,255,.05)}
.mur-port:hover img,.mur-port.hl img,.mur-port.on img{filter:grayscale(1) contrast(1.15) brightness(1.2)}
.mur-port:hover .pn,.mur-port.hl .pn,.mur-port:focus-visible .pn{color:var(--mur-bright)}
.mur-port:hover .ini,.mur-port.hl .ini{color:var(--mur-bright)}
.mur-port:focus-visible{box-shadow:inset 0 0 0 1px var(--mur-accent)}
.mur-port.on{background:rgba(249,176,61,.14);box-shadow:inset 0 0 0 1px var(--mur-accent)}
.mur-port.on .pn{color:var(--mur-accent)}
/* Le × remplace le filet souligné : il DIT que le filtre se retire d'un clic,
   là où un trait ne disait rien. Masqué hors état actif. */
.mur-port .x{display:none;font-size:11px;letter-spacing:.1em;color:var(--mur-accent);flex:none}
.mur-port.on .x{display:block}
/* Filtre posé : les autres cartes reculent, comme les lignes du registre. */
.mur-portraits.filtre .mur-port:not(.on){opacity:.45}

/* La carte redevient une vignette en étroit : à cette largeur, trois noms de
   onze caractères ne tiennent pas sur une ligne — ils forceraient un défilement
   horizontal dans la barre du bas. Le `title` reste, donc le nom est toujours
   atteignable.
   Cette requête média vit ICI, après les règles de base, et non dans le bloc
   `max-width:760px` du haut du fichier : à spécificité égale c'est l'ordre
   source qui tranche, et là-haut elle était écrasée par `.mur-port img` déclaré
   plus bas — le portrait restait à 32 px sur téléphone. */
@media (max-width:760px){
  /* 16 px de portrait + 2 px de padding = 20 px, dans une barre de 22 px : la
     carte tient dans la marge du cadre avec 1 px de part et d'autre. C'est ce
     qui permet à frB de valoir frT sans que rien ne soit à ras (cf. mur.js). */
  .mur-port{padding:2px;gap:0}
  .mur-port .pn{display:none}
  .mur-port img,.mur-port .ini{width:16px;height:16px}
  .mur-port .ini{font-size:7px}
}

/* Bandeau SUJET (L'Appel) — fiche membre ouverte au clic sur un portrait.
   Volontairement imposante : c'est la présentation d'un auteur, pas une
   infobulle. Tout est en clamp() pour tenir aussi sur un petit écran, la
   bannière grandissant vers le haut depuis le bas du cadre. */
.mur-banner{position:absolute;left:var(--fr-l);right:var(--fr-t);bottom:calc(var(--fr-b) + 6px);z-index:25;
  display:flex;gap:clamp(18px,2vw,32px);align-items:flex-start;
  padding:clamp(18px,2vw,30px) clamp(20px,2.2vw,34px);background:rgba(17,17,17,.97);
  box-shadow:0 0 0 1px var(--mur-line),0 -18px 40px rgba(0,0,0,.5)}
/* Portrait JAMAIS rogné : largeur imposée, hauteur libre — le ratio est donc
   conservé tel quel. `contain` ne joue que si max-height borne un cliché très
   haut : il cadre alors en letterbox au lieu de couper (`cover` rognait tout
   au carré, d'où les visages amputés). */
.mur-banner img{width:clamp(112px,11vw,170px);height:auto;max-height:min(32vh,250px);flex:none;
  object-fit:contain;background:#0d0d0d;filter:brightness(1.12) grayscale(1) contrast(1.05)}
.mur-banner.px img{image-rendering:pixelated}
/* Membre sans portrait : initiales dans un carré de la largeur du cliché, plutôt
   qu'une image cassée. Même repli que la carte du bas, à l'échelle d'ici. */
.mur-banner .ini{display:flex;align-items:center;justify-content:center;flex:none;
  width:clamp(112px,11vw,170px);aspect-ratio:1/1;background:#1b1915;
  font-size:clamp(26px,3vw,44px);letter-spacing:.06em;color:var(--mur-mid);
  box-shadow:inset 0 0 0 1px var(--mur-line)}
.mur-banner .bt{min-width:0}
.mur-banner .bh{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.mur-banner .bn{font-size:clamp(17px,1.6vw,26px);letter-spacing:.16em;color:var(--mur-bright);text-transform:uppercase}
.mur-banner .bid{font-size:11px;letter-spacing:.22em;color:var(--mur-accent)}
.mur-banner .br{font-size:11px;letter-spacing:.22em;color:var(--mur-faint);text-transform:uppercase}
.mur-banner .bb{margin-top:12px;font-size:clamp(13px,1.05vw,15px);line-height:1.7;color:var(--mur-mid);
  max-width:82ch;text-wrap:pretty}
.mur-banner .bl{display:inline-block;margin-top:16px;font-size:11px;letter-spacing:.2em}
.mur-redact{background:#000;color:transparent;user-select:none}

/* Isolement (lightbox) — panneau ouvert/fermé en FLIP depuis la tuile (JS) */
/* Voile ALLÉGÉ (.62 → .35) et mur moins éteint (.2/3px → .32/2px). Le tiroir
   couvrant tout le cadre, ces deux valeurs ne se voient plus que pendant les
   360ms du glissement — autant qu'elles n'y clignotent pas. */
/* Le tiroir prend toute la largeur SAUF le menu : il démarre au bord gauche du
   mur, pas à celui du cadre. Le rail reste donc lisible et cliquable pendant
   qu'une fiche est ouverte — c'est ce qui distingue un tiroir d'une modale.
   Les deux valeurs suivent exactement celles de .mur-wall : rail déployé, rail
   replié, et plus de rail du tout sous 760px. La classe est posée à l'ouverture
   ET tenue à jour par toggleRail : le rail n'étant plus recouvert, on peut le
   replier fiche ouverte, et le tiroir doit alors occuper la place libérée.
   Même durée de glissement que le mur (380ms), pour qu'ils bougent ensemble. */
.mur-lb{position:absolute;top:var(--fr-t);left:calc(var(--fr-l) + var(--rail-w) + 1px);
  right:var(--fr-t);bottom:var(--fr-b);z-index:30;
  overflow:hidden;background:rgba(10,10,10,.35);
  transition:left .38s cubic-bezier(.4,0,.2,1)}
.mur-lb.rail-replie{left:calc(var(--mini-l) + var(--mini-w) + 1px)}
.mur-wall.iso{filter:brightness(.32) blur(2px);transition:filter .32s ease}
/* Fiche série = TIROIR clair (fond blanc, texte noir) ancré à DROITE, pleine
   hauteur du cadre. Ce n'est plus une modale centrée : une modale se pose
   PAR-DESSUS et coupe le fil, un tiroir se pousse À CÔTÉ et laisse voir d'où
   l'on vient — le mur reste là, à gauche, moins éteint qu'avant.
   Il prend TOUTE la largeur du cadre : le mur ne reste donc pas visible à côté,
   et le voile comme l'assombrissement ne se voient plus que pendant les 360ms
   du glissement. C'est la seule raison qui leur reste — d'où les valeurs douces.
   On redéfinit les tokens du thème SUR le panneau : toutes les règles enfants
   (méta, titres, bricks) suivent la palette claire sans être dupliquées.
   --mur-accent est assombri ici, l'ambre #F9B03D étant illisible sur blanc. */
.mur-panel{position:absolute;top:0;right:0;bottom:0;width:100%;
  overflow-y:auto;overflow-x:hidden;
  /* Gris CHAUDS (#3b372f, #8a8378) et non neutres : sur une feuille blanche un
     gris pur tire au bleu et durcit la page. Ils viennent du design. */
  --mur-bg:#ffffff; --mur-bright:#111111; --mur-mid:#3b372f; --mur-faint:#8a8378;
  /* filets en gris NEUTRE : le crème (#ded9ce) du registre sombre salissait le
     blanc de la fiche, qui doit rester totalement blanc. */
  --mur-line:#e6e6e6;
  /* L'accent reste l'ambre ASSOMBRI, et non le #F9B03D du design : sur blanc, il
     tombe à 1,8:1. Seul écart assumé à la maquette, pour la même raison qu'hier. */
  --mur-accent:#8a5600;
  background:#fff;color:#000;
  /* Pas d'ombre portée : à pleine largeur elle tomberait hors du voile, qui est
     en overflow:hidden — elle serait rognée sans jamais se voir. */
  scrollbar-width:none}
.mur-panel::-webkit-scrollbar{width:0}
.mur-panel a{color:#000;text-decoration:underline;text-underline-offset:3px}
.mur-panel a:hover{color:var(--mur-accent)}
/* Texte de la fiche : justifié + césures FR (sinon le drapeau droit creuse des
   « rivières » dans une colonne large). Mesure élargie, le panneau l'étant aussi. */
.mur-panel .bk-text p{max-width:74ch;text-align:justify;-webkit-hyphens:auto;hyphens:auto}

/* Galerie « justifiée » : des rangées qui remplissent la largeur en RESPECTANT
   le format de chaque image — mur.js pose le flex-grow d'après le ratio réel.
   Remplace la grille 4 colonnes en aspect-ratio 1/1 du registre sombre, qui
   recadrait tout au carré. Fonds transparents : l'intérieur reste blanc.
   Vaut aussi pour les pages éditoriales (.mur-doc), qui rendent les mêmes
   bricks : elles restaient sur la grille carrée faute d'être citées ici. */
.mur-panel .bk-gallery,.mur-doc .bk-gallery{display:flex;flex-wrap:wrap;gap:10px;background:none}
/* Largeur/hauteur posées par mur.js (layoutGallery) : hauteur de rangée =
   largeur disponible / somme des ratios, puis largeur = ratio × hauteur. C'est
   la seule façon d'avoir des rangées pleines SANS recadrer (une hauteur fixe
   force forcément un crop). Les valeurs ci-dessous ne servent qu'avant le
   chargement des images (ratios encore inconnus). */
.mur-panel .bk-gallery .bk__item,.mur-doc .bk-gallery .bk__item{margin:0;flex:0 0 auto;height:300px;
  position:relative;overflow:hidden;cursor:zoom-in;background:#fff}
.mur-panel .bk-gallery .bk__item img,.mur-panel .bk-gallery .bk__item video,
.mur-doc .bk-gallery .bk__item img,.mur-doc .bk-gallery .bk__item video{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block}
/* Légende (absente des données actuelles) : en incrustation, la hauteur fixe la rognerait. */
.mur-panel .bk-gallery .bk__cap,.mur-doc .bk-gallery .bk__cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:6px 10px;
  background:rgba(255,255,255,.92);color:var(--mur-mid)}
.mur-panel .bk-slider{background:none}

/* Zoom : l'image ENTIÈRE (contain) par-dessus la fiche. Hors .mur-panel → reprend
   les tokens sombres du thème (ambre lisible sur le fond noir). */
.mur-zoom{position:fixed;inset:0;z-index:40;background:rgba(8,8,8,.95);
  display:flex;align-items:center;justify-content:center;padding:6vh 7vw}
/* svh : avec vh, la barre d'URL déployée d'iOS rognait le bas de l'image agrandie. */
.mur-zoom img{max-width:100%;max-height:88svh;object-fit:contain;display:block}
.mur-zoom .zb{position:absolute;background:none;border:1px solid rgba(255,255,255,.26);color:#ece6da;
  cursor:pointer;font-family:var(--mur-mono);line-height:1;display:flex;align-items:center;justify-content:center}
.mur-zoom .zb:hover{border-color:var(--mur-accent);color:var(--mur-accent)}
.mur-zoom .z-close{top:18px;right:20px;width:38px;height:38px;font-size:19px}
.mur-zoom .z-prev{left:20px;top:50%;transform:translateY(-50%);width:42px;height:42px;font-size:22px}
.mur-zoom .z-next{right:20px;top:50%;transform:translateY(-50%);width:42px;height:42px;font-size:22px}
.mur-zoom .z-count{position:absolute;bottom:22px;left:0;right:0;text-align:center;
  font-size:10px;letter-spacing:.24em;color:var(--mur-faint)}
.mur-zoom.solo .z-prev,.mur-zoom.solo .z-next,.mur-zoom.solo .z-count{display:none}
.mur-lb-prog{position:absolute;top:0;right:0;width:2px;background:var(--mur-accent);opacity:.85}
/* Bannière de tête de la fiche série, quand l'auteur la demande sur le Mur
   (hero_scope). Même proportion 16:6 que le thème perso, pour que la même page
   ne change pas de forme d'une surface à l'autre. Elle est bord à bord : le
   panneau a déjà ses marges intérieures, la bannière s'en affranchit. */
.mur-lb-hero{aspect-ratio:16/6;overflow:hidden;background:#000;border-bottom:1px solid var(--mur-line)}
.mur-lb-hero img{width:100%;height:100%;object-fit:cover;display:block}
/* Bannière présente → le titre n'a plus à réserver la place d'un haut de page vide. */
.mur-lb-hero + .mur-lb-head{padding-top:clamp(34px,5vh,64px)}

/* En-tête de fiche, révision « minimal / très visuel » (Swansong Mur.dc.html).
   Trois choses partent : l'identifiant de série (un hash, illisible pour qui
   lit), les cinq lignes libellé/valeur, et le filet de séparation — le panneau
   est une seule feuille blanche, une règle horizontale n'y sépare rien. Ce qui
   reste grandit : le titre est le seul objet typographique de la page.
   La respiration vient d'unités relatives à la HAUTEUR (vh) autant qu'à la
   largeur : une fiche ouverte sur un portable en paysage ne doit pas dépenser
   120 px de marge haute avant son titre. */
/* ── Fiche en DEUX COLONNES ───────────────────────────────────────────────────
   « Swansong Mur - fiche série 2 colonnes.dc.html ». Tout ce qui se DIT à
   gauche (titre, auteurs, note d'intention, badge, mentions), tout ce qui se
   MONTRE à droite. La colonne des œuvres domine — ce sont des photographes,
   l'œuvre passe avant le cartel.
   Avant, une seule colonne : il fallait descendre trente tirages pour relire de
   qui ils étaient. */
.mur-lb-2col{display:grid;grid-template-columns:minmax(300px,33%) 1fr;align-items:start}

/* La colonne de gauche se COLLE et défile pour son propre compte : avec 64
   tirages à droite, le titre et l'auteur doivent rester sous les yeux, mais une
   note de sept paragraphes ne tient pas dans une hauteur d'écran.
   La hauteur est celle du panneau, calculée et non approchée : le panneau fait
   96 % de la zone comprise entre les marges du cadre. */
.mur-lb-info{box-sizing:border-box;
  padding:clamp(40px,3.6vw,64px) clamp(30px,2.8vw,52px) 44px;
  border-right:1px solid #ece7db;
  position:sticky;top:0;align-self:start;
  max-height:calc(100vh - var(--fr-t) - var(--fr-b));
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#c8c0ae #f4f1e9}
.mur-lb-info::-webkit-scrollbar{width:7px}
.mur-lb-info::-webkit-scrollbar-track{background:#f4f1e9}
.mur-lb-info::-webkit-scrollbar-thumb{background:#c8c0ae}
.mur-lb-media{min-width:0;background:#fff}

/* La réduction replie le CARTEL, pas les œuvres : on ouvre une fiche pour voir
   des images, et c'est le texte qu'on met de côté quand on veut la feuille
   entière pour elles. Le bouton vit donc dans la ligne de tête du cartel, en
   face du retour — pas dans la colonne des œuvres, qui n'a rien à replier. */
.mur-lb-reduire{font-size:10px;font-weight:700;letter-spacing:.26em;
  color:var(--mur-faint);text-transform:uppercase;cursor:pointer;transition:color .14s}
.mur-lb-reduire:hover{color:var(--mur-bright)}

/* Réduit : le cartel se replie sur une bande verticale de 48px, À GAUCHE, et les
   œuvres prennent toute la feuille. La bande porte le titre de la série — c'est
   ce qu'il faut pour savoir ce qu'on rouvre. Texte tourné de 180° pour se lire
   du bas vers le haut, sens de lecture d'une tranche de livre. */
.mur-lb-bande{display:none;position:sticky;top:0;align-self:start;
  height:calc(100vh - var(--fr-t) - var(--fr-b));
  align-items:center;justify-content:center;
  border-right:1px solid #ece7db;background:#fdfcfa;cursor:pointer;transition:background .14s}
.mur-lb-bande:hover{background:#f6f3ec}
.mur-lb-bande span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:9px;font-weight:700;letter-spacing:.28em;color:var(--mur-accent);text-transform:uppercase}
.mur-panel.reduit .mur-lb-2col{grid-template-columns:48px minmax(0,1fr)}
.mur-panel.reduit .mur-lb-info{display:none}
.mur-panel.reduit .mur-lb-bande{display:flex}

.mur-lb-tags{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mur-faint)}
.mur-lb-tags .mur-lb-tag{color:var(--mur-accent)}
/* Le titre rétrécit : il n'a plus la feuille entière mais un tiers de tiroir.
   En gras, parce qu'à cette largeur la graisse remplace la taille comme marque
   d'entrée.
   Retour aux 4,4vw de la maquette : elle mesurait un panneau à 98 % du cadre, et
   le tiroir pleine largeur retrouve cette proportion — la colonne du cartel
   repasse de 368 à ~498px. Je l'avais descendu à 3,3 quand le tiroir n'en
   occupait que 74 % et que « CHANT I » se cassait en deux lignes. */
.mur-lb-title{margin:22px 0 0;font-size:clamp(38px,4.4vw,88px);line-height:.86;letter-spacing:-.02em;
  color:var(--mur-bright);font-weight:700;text-transform:uppercase;text-wrap:balance}

/* Les auteurs remontent de l'ourlet vers l'en-tête : ils se lisent avec le
   titre, pas après trois écrans de défilement. Soulignés d'un filet clair —
   ce sont des liens vers le filtre par artiste, ça doit se voir. */
.mur-lb-authors{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;margin-top:26px}
.mur-lb-authors .mur-lb-year{font-size:12px;letter-spacing:.2em;color:var(--mur-faint)}
.mur-lb-author{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--mur-bright);text-transform:uppercase;
  cursor:pointer;border-bottom:1px solid #d8d3c6;padding-bottom:3px;transition:color .16s,border-color .16s}
.mur-lb-author:hover{color:var(--mur-accent);border-color:var(--mur-accent)}
/* Ce qui survivait aux lignes méta (statut, exposition, indice) tient sur une
   ligne discrète. Les supprimer aurait effacé de l'information publiée ; les
   garder en tableau aurait rendu la révision inutile. */
.mur-lb-note{margin-top:clamp(20px,3vh,32px);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mur-faint)}
.mur-lb-note b{font-weight:400;color:var(--mur-mid)}
.mur-lb-note i{font-style:normal;color:var(--mur-faint);padding:0 9px}
/* Note d'intention de la série, depuis la colonne `description` du nœud (et non
   d'une brick texte). Mesure resserrée à 66ch et gris chaud : c'est du texte
   courant sur une feuille, pas de la donnée.
   FER À GAUCHE, et non justifié comme le reste du panneau : la fiche est en
   Courier, une chasse fixe. Justifier ne peut alors élargir que les ESPACES,
   par pas d'un caractère entier — mesuré à l'écran, « Ce ne sont peut-être pas
   des photographies. » s'étirait avec des trous de trois caractères entre les
   mots. C'est la rivière que la justification devait éviter, en pire. */
.mur-lb-desc{max-width:66ch;margin-top:clamp(30px,4vh,44px)}
.mur-lb-desc p{margin:0 0 18px;font-size:15px;line-height:1.85;color:var(--mur-mid);
  text-wrap:pretty;text-align:left;-webkit-hyphens:none;hyphens:none}
.mur-lb-desc p:last-of-type{margin-bottom:0}
/* « Lire la description ». Un bouton et non un lien : il ne mène nulle part, il
   déplie sur place. Réglé comme une commande du thème — petit, très espacé,
   capitales, à l'accent — pour ne pas concurrencer le texte qu'il ouvre. */
.mur-lb-plus{margin-top:2px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mur-mono);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mur-accent);transition:color .14s}
.mur-lb-plus:hover{color:var(--mur-bright)}
.mur-lb-plus:focus-visible{outline:1px solid var(--mur-accent);outline-offset:3px}
.mur-lb-body{padding:0}
/* `.bk` porte `margin:34px 8%`, juste quand la fiche était une feuille pleine
   largeur. Dans une colonne, ces 8% mangeaient 158px des 991 disponibles —
   mesuré, la galerie ne faisait plus que 833. Ici les blocs vont bord à bord,
   séparés du même joint de 2px que les images entre elles. */
.mur-lb-body .bk{margin:0 0 2px}
/* Mesure de lecture resserrée à 66ch et gris chaud : c'est du texte courant sur
   une feuille, pas de la donnée. Le justifié général du panneau (plus haut)
   reste, il ne creuse plus de rivières à cette largeur. */
.mur-lb-body .bk-text p{max-width:66ch;font-size:16px;line-height:1.85;color:#3b372f}
/* Les images filent en pleine largeur, séparées d'un joint de 2 px : c'est le
   « très visuel » de la consigne — le blanc entre deux photos était plus large
   que le trait qui les tient ensemble. La légende, elle, se réaligne sur la
   marge du texte. */
.mur-lb-body .bk-image{margin:0 0 2px}
.mur-lb-body .bk-image img,.mur-lb-body .bk-image video{display:block;width:100%}
.mur-lb-body .bk-image .bk__cap{margin:10px 16px 26px;font-size:9px;letter-spacing:.22em;
  color:var(--mur-faint);text-transform:uppercase}
/* Badge catalogue, dans la colonne de gauche sous la note. Le SEUL élément
   commercial de la fiche : filet fin, bord gauche accentué, fond à peine plus
   chaud que la feuille. Il doit se voir sans crier. */
.mur-commit{display:block;margin-top:44px;padding:20px 22px;border:1px solid #e2dccd;
  border-left:3px solid var(--mur-accent);background:#fdfcfa;text-decoration:none;
  font-family:var(--mur-mono);transition:background .2s,border-color .2s}
.mur-commit:hover{background:#f6f3ec;border-color:#d8d0bd;border-left-color:var(--mur-accent)}
/* La première ligne oppose la marque et l'état, d'un bord à l'autre de l'encart. */
.mur-commit-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.mur-commit-k{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--mur-accent)}
.mur-commit-t{font-size:9px;letter-spacing:.24em;color:var(--mur-faint);text-transform:uppercase}
.mur-commit-s{display:block;margin-top:14px;font-size:14px;font-weight:700;letter-spacing:.12em;
  color:var(--mur-bright);text-transform:uppercase}
.mur-commit-p{display:block;margin-top:7px;font-size:12px;letter-spacing:.06em;color:var(--mur-mid)}
.mur-commit-a{display:inline-block;margin-top:16px;font-size:10px;font-weight:700;letter-spacing:.24em;
  color:var(--mur-accent);text-transform:uppercase;transition:color .14s}
.mur-commit:hover .mur-commit-a{color:var(--mur-bright)}

/* Sous 900px la feuille n'a plus de place pour deux colonnes : elles s'empilent,
   le cartel d'abord, les œuvres ensuite. C'est là — et seulement là — que la
   note d'intention se replie derrière « + LIRE LA NOTE » : dans sa colonne elle
   ne gêne personne, empilée elle repousse la première image hors de l'écran.
   La bande de réduction n'a plus de sens : il n'y a plus de voisin à réduire. */
@media (max-width:900px){
  .mur-lb-2col,.mur-panel.reduit .mur-lb-2col{display:block}
  .mur-lb-info,.mur-panel.reduit .mur-lb-info{position:static;max-height:none;overflow:visible;
    border-right:0;border-bottom:1px solid #ece7db;padding:30px 24px 34px}
  .mur-lb-bande,.mur-panel.reduit .mur-lb-bande{display:none}
  /* Empilé, il n'y a plus de colonne à replier : le bouton disparaît et le
     cartel reste visible quoi qu'il arrive. */
  .mur-lb-reduire{display:none}
  .mur-panel.reduit .mur-lb-info{display:block}
}
/* Les auteurs sont remontés dans l'en-tête : l'ourlet ne porte plus que la
   sortie, et n'a donc plus besoin d'un filet pour se distinguer d'eux. */
.mur-lb-foot{margin:0;padding:36px 16px 44px;display:flex;justify-content:flex-end;
  align-items:center;gap:20px;flex-wrap:wrap}
/* Fermeture : un ONGLET carré encastré dans le coin du tiroir, et non plus une
   croix flottant sur le voile. Elle appartient au tiroir, donc elle en prend le
   fond et ses deux filets — sans quoi elle se posait par-dessus le contenu et
   il fallait dégager la place autour d'elle. */
.mur-lb-close{position:absolute;top:0;right:0;z-index:32;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:#fff;border:0;border-left:1px solid #ece7db;border-bottom:1px solid #ece7db;
  color:var(--mur-faint);font-size:24px;line-height:1;cursor:pointer;font-family:var(--mur-mono);
  transition:color .14s}
.mur-lb-close:hover{color:var(--mur-bright)}
.mur-back{font-size:11px;letter-spacing:.25em;color:var(--mur-faint);text-transform:uppercase;cursor:pointer}
.mur-back:hover{color:var(--mur-accent)}

/* Pages doc (manifeste / à-propos / contact / commit / photomaton) */
.mur-doc{max-width:760px;margin:0 auto;padding:76px 6% 110px;min-height:100%;box-sizing:border-box}
@media (max-width:760px){.mur-doc{padding:40px 22px 80px}}
.mur-doc-kicker{font-size:10px;letter-spacing:.28em;color:var(--mur-accent);text-transform:uppercase;margin-bottom:18px}
.mur-doc-title{margin:0 0 40px;font-size:clamp(44px,7vw,104px);line-height:.92;letter-spacing:.01em;color:var(--mur-bright);font-weight:400;text-transform:uppercase}
.mur-doc p{margin:0 0 22px;font-size:15px;line-height:1.75;color:var(--mur-mid);max-width:62ch;text-wrap:pretty}
/* Le contenu des pages doc est rendu par le moteur de blocs : ses marges de
   colonne (.bk{margin:34px 8%}) feraient double emploi avec le padding de la
   page → on les neutralise ici. */
.mur-doc .bk{margin:0 0 22px}
.mur-doc .bk__title{font-size:14px;letter-spacing:.1em;color:var(--mur-bright);text-transform:uppercase;margin:34px 0 12px}
.mur-doc .bk-image img,.mur-doc .bk-video video{width:100%;display:block}
/* Bloc texte en VERS (manifeste) : une strophe par <p>, un vers par .v, avec
   retrait de continuation pour qu'un vers trop long ne se lise pas comme deux. */
.mur-doc .bk-text--verse p{max-width:72ch;margin-bottom:30px}
.mur-doc .bk-text--verse .v{display:block;padding-left:1.6em;text-indent:-1.6em}
/* Bloc bouton : aplat ambré (CTA) ou lien discret selon la variante. */
.bk-button{margin-top:18px}
.bk-button--solid .bk-btn{display:inline-flex;align-items:center;gap:12px;padding:22px 40px;background:var(--mur-accent);
  color:#111;font-size:17px;letter-spacing:.16em;text-transform:uppercase}
.bk-button--solid .bk-btn:hover{filter:brightness(1.12);color:#111}
.bk-button--link .bk-btn{font-size:17px;letter-spacing:.06em;color:var(--mur-accent)}
.bk-button--link .bk-btn:hover{text-decoration:underline;text-underline-offset:5px}
/* Contact : l'adresse seule, cliquable mais sans le bloc CTA ambre. */
.mur-doc-mail{font-size:17px;letter-spacing:.06em}
.mur-doc-mail a{color:var(--mur-accent)}
.mur-doc-mail a:hover{text-decoration:underline;text-underline-offset:5px}
.mur-doc-cta{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:22px 40px;background:var(--mur-accent);
  color:#111;font-size:17px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.mur-doc-cta:hover{filter:brightness(1.12)}
.mur-doc-sig{margin-top:48px;padding-top:20px;border-top:1px solid var(--mur-line);font-size:10px;letter-spacing:.24em;color:var(--mur-faint);text-transform:uppercase}

/* Bricks (rendues dans l'isolement) — agnostiques, tokens du thème Mur */
.bk{margin:34px 8%}
.bk-image,.bk-video{margin:34px 0}
.bk-image img,.bk-video video{display:block;width:100%}
.bk-image--full img,.bk-image--hero img{width:100%}
/* .bk-image/.bk-video annulent le retrait de 8 % de .bk (même spécificité,
   la seconde règle gagne) : l'image est donc bord à bord, et sa légende
   gardait un retrait qui ne correspondait plus à rien. Elle s'aligne sur son
   média ; seules les bricks qui CONSERVENT le retrait le reprennent. */
.bk__cap{margin:10px 0 0;font-size:10px;letter-spacing:.18em;color:var(--mur-faint);text-transform:uppercase}
.bk-embed .bk__cap,.bk-gallery .bk__cap{margin-left:8%;margin-right:8%}
.bk-text p{max-width:60ch;margin:0 0 16px;font-size:15px;line-height:1.75;color:var(--mur-mid);text-wrap:pretty}
.bk-text .bk__title{font-size:14px;letter-spacing:.1em;color:var(--mur-bright);text-transform:uppercase;margin:0 0 12px}
.bk-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mur-line)}
.bk-gallery .bk__item img,.bk-gallery .bk__item video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.bk-slider{display:flex;gap:1px;overflow-x:auto;background:var(--mur-line)}
.bk-slider .bk__item{flex:0 0 min(52vw,720px)}
.bk-slider .bk__item img{display:block;width:100%}
.bk-video video{background:#000}
.bk-embed iframe{border:0;width:100%;aspect-ratio:16/9;background:#0c0c0c;box-shadow:inset 0 0 0 1px var(--mur-line)}
.bk-links{padding-left:18px}.bk-links a{text-decoration:underline}
/* La brick album n'avait AUCUNE règle ici : la pochette sortait à sa taille
   intrinsèque et débordait horizontalement, ce qui cassait le défilement de tout
   le panneau sur téléphone. (.bk-image img ne la couvre pas : ce n'est pas une
   brick image.) */
.bk-album{margin:34px 8%}
.bk-album__head{display:flex;gap:18px;align-items:flex-start}
.bk-album__head img{width:clamp(96px,26%,180px);height:auto;flex:none;display:block}
.bk-album__meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.bk-album__title{font-size:14px;letter-spacing:.16em;color:var(--mur-bright);text-transform:uppercase}
.bk-album__artist{font-size:11px;letter-spacing:.2em;color:var(--mur-faint);text-transform:uppercase}
.bk-album__list{list-style:none;margin:16px 0 0;padding:0}
.bk-album__track{display:flex;gap:12px;align-items:baseline;padding:11px 2px;
  border-top:1px solid var(--mur-line);font-size:12px;color:var(--mur-mid)}
.bk-album__n{color:var(--mur-accent);font-variant-numeric:tabular-nums}

.bk-chapters{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.bk-chapters__card{border:1px solid var(--mur-line)}.bk-chapters__card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.bk-chapters__card h3{margin:0;padding:8px 8px 2px;font-size:.95rem;color:var(--mur-bright)}
.bk-chapters__card p{margin:0;padding:0 8px 8px;font-size:.8rem;color:var(--mur-faint)}
.bk-unknown{display:none}

/* Photomaton : grille de captures (fond, défile) + scan (iframe, avant-plan) */
.mur-photomaton{position:relative;height:100%;overflow:hidden;background:var(--mur-bg)}
.mur-pm-grid{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:repeat(8,1fr);gap:1px;
  opacity:.55;filter:brightness(.4) saturate(.85) contrast(1.02);animation:mur-pm-scroll 90s linear infinite;will-change:transform}
.mur-pm-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#0c0c0c}
@keyframes mur-pm-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.mur-pm-scan{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:transparent}
@media (max-width:760px){ .mur-pm-grid{grid-template-columns:repeat(5,1fr)} }

/* Event : miniatures des microsites (event.swans.ong/<slug>/) */
.mur-events{max-width:1100px;margin:0 auto;padding:76px 6% 110px;min-height:100%;box-sizing:border-box}
@media (max-width:760px){.mur-events{padding:40px 22px 80px}}
/* Filet porté par les CARTES, pas par la grille : le fond du conteneur (astuce
   du gap de 1px) était peint aussi dans les pistes auto-fill VIDES de la
   dernière rangée — d'où un rectangle fantôme à côté du dernier event. */
.mur-ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;margin-top:30px}
.mur-ev{display:block;background:var(--mur-bg);text-decoration:none;color:inherit;box-shadow:0 0 0 1px var(--mur-line)}
.mur-ev-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:#0c0c0c}
.mur-ev-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.75) saturate(.9);transition:filter .3s}
.mur-ev:hover .mur-ev-thumb img{filter:brightness(1.02) saturate(1)}
.mur-ev-meta{display:block;padding:14px 16px 18px}
.mur-ev-title{display:block;font-size:15px;letter-spacing:.12em;color:var(--mur-bright);text-transform:uppercase}
.mur-ev-sub{display:block;margin-top:6px;font-size:11px;letter-spacing:.16em;color:var(--mur-faint);text-transform:uppercase}
.mur-ev:hover .mur-ev-title{color:var(--mur-accent)}

@media (prefers-reduced-motion:reduce){
  .mur-term i{animation:none;opacity:.9}
  .mur-pm-grid{animation:none}
  .mur-tile img,.mur-port img{transition:none}
  .mur-drawer,.mur-scrim,.mur-nav-btn,.mur-nav-btn .swan,.mur-nav-btn .x{transition:none}
  /* Le registre change toujours d'état, mais sèchement : pas de glissement, pas
     de cascade. La visibilité, elle, garde son délai en sortie — c'est du
     séquencement, pas du mouvement. */
  /* Le rail replié et ses cellules paraissent sans glisser. Le repli AUTOMATIQUE
     ne se déclenche de toute façon pas dans ce mode (cf. programmerRepliAuto) :
     ce qu'on neutralise ici, c'est l'animation du repli manuel. */
  .mur-rail-mini,.mur-rail-mini .mur-mini-menu a{animation:none}
  .mur-register{transition:opacity .01s,visibility 0s}
  .mur-register.off{transform:none;transition:opacity .01s,visibility 0s linear .01s}
  .mur-register:not(.off) .mur-reg{animation:none}
}

/* ── Enveloppe de brick (moteur) — échelle du Mur ───────────────────────────
   Mêmes attributs que sur le site perso (site/engine/bricks/render.js), à
   l'échelle sombre de la fiche. */
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.bk-w[data-w="text"]{max-width:72ch}
/* 26px fixes mangeaient 52 des 290px utiles d'un panneau sur téléphone. */
.bk-w[data-w="framed"]{border:1px solid var(--mur-line);padding:clamp(14px,3vw,26px);background:rgba(255,255,255,.02)}
.bk-w[data-before="XS"]{margin-top:8px}
.bk-w[data-before="S"]{margin-top:18px}
.bk-w[data-before="M"]{margin-top:34px}
.bk-w[data-before="L"]{margin-top:64px}
.bk-w[data-after="XS"]{margin-bottom:8px}
.bk-w[data-after="S"]{margin-bottom:18px}
.bk-w[data-after="M"]{margin-bottom:34px}
.bk-w[data-after="L"]{margin-bottom:64px}
.bk-w-link{display:block;color:inherit;text-decoration:none}
@media (max-width:760px){
  .bk-row{grid-template-columns:1fr}
  /* 80px de padding horizontal sur 290px utiles : le libellé n'avait plus la
     place de tenir sur une ligne. */
  .bk-button--solid .bk-btn{padding:16px 22px;font-size:14px;letter-spacing:.1em}
  /* Deux colonnes figées → cartes de ~140px, vignette illisible. */
  .bk-chapters{grid-template-columns:1fr}
  /* La justification sur 290px produit des rivières, même avec les césures. */
  .mur-panel .bk-text p,.mur-doc .bk-text p{text-align:left;font-size:14px}
  .bk-album{margin:34px 0}
  .bk-album__head{gap:12px}
}

/* Mesure. `full` reste la largeur de la colonne de contenu ; les autres se
   centrent par défaut, un bloc étroit collé à gauche paraissant accidentel. */
.bk-w[data-w="wide"]{max-width:1200px;margin-inline:auto}
.bk-w[data-w="text"]{max-width:900px}
.bk-w[data-w="w50"]{max-width:50%;margin-inline:auto}
.bk-w[data-w="w33"]{max-width:33.33%;margin-inline:auto}
/* Alignement explicite (prime sur le centrage par défaut ci-dessus). */
.bk-w[data-align="left"]{margin-inline:0 auto}
.bk-w[data-align="center"]{margin-inline:auto}
.bk-w[data-align="right"]{margin-inline:auto 0}
/* Hauteur maximale : le RATIO est préservé — on borne la hauteur du média et la
   largeur suit. C'est ce qui permet « l'image tient dans l'écran » sans recadrer. */
.bk-w[data-maxh] :is(img, video){width:auto;max-width:100%;height:auto;margin-inline:auto}
.bk-w[data-maxh] .frame{width:auto;display:inline-block}
.bk-w[data-maxh]{display:flex;flex-direction:column;align-items:center}
.bk-w[data-maxh="50"]  :is(img, video){max-height:50svh}
.bk-w[data-maxh="60"]  :is(img, video){max-height:60svh}
.bk-w[data-maxh="75"]  :is(img, video){max-height:75svh}
.bk-w[data-maxh="90"]  :is(img, video){max-height:90svh}
.bk-w[data-maxh="100"] :is(img, video){max-height:100svh}
@media (max-width:760px){
  .bk-w[data-w="w50"],.bk-w[data-w="w33"]{max-width:100%}
}

/* Contenu servi pour les robots et les navigateurs sans JavaScript
   (lib/BricksSsr.php). Le thème le remplace à son premier rendu — mais
   entre-temps il est visible, et #app{position:fixed} + body{overflow:hidden}
   le rendaient ni lisible ni défilable. Il reste aussi seul à l'écran quand
   l'API ne répond pas. */
[data-ssr]{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(clamp(20px,6vw,56px) + var(--sa-t)) calc(clamp(18px,6vw,56px) + var(--sa-r))
          calc(56px + var(--sa-b)) calc(clamp(18px,6vw,56px) + var(--sa-l));
  line-height:1.7;color:var(--mur-mid);font-family:var(--mur-mono)}
[data-ssr] > *{max-width:820px;margin-inline:auto}
[data-ssr] h1,[data-ssr] h2{color:var(--mur-bright);font-weight:400;text-transform:uppercase;letter-spacing:.1em}
[data-ssr] a{color:var(--mur-accent)}
[data-ssr] img{max-width:100%;height:auto;display:block;margin:14px 0}
[data-ssr] ul{padding-left:18px}
[data-ssr] li{margin:0 0 10px}
/* Avis d'indisponibilité, posé À CÔTÉ du contenu servi et non à sa place. */
.mur-offline{position:relative;z-index:1;padding:16px clamp(18px,6vw,56px);
  background:rgba(249,176,61,.12);border-bottom:1px solid var(--mur-accent);
  color:var(--mur-accent);font-size:12px;letter-spacing:.12em}