/* ================= TOILES : photo ou composition dessinée ================= */
.art{position:relative;display:block;width:100%;height:100%}
.art svg,.art img{display:block;width:100%;height:100%}
/* la photo apparaît en fondu sur l'aplat de couleur du cadre ; si elle échoue, l'aplat reste */
.art img{object-fit:cover;opacity:0;transition:opacity .7s}
.art img.is-ok{opacity:1}
.art img.is-ko{visibility:hidden}
html:not(.js) .art img{opacity:1}
.art__hd{position:absolute;inset:0}

/* le hero a sa propre feuille : css/hero.css */

/* ================= COLLECTION : une toile par écran ================= */
.feed{position:relative;border-top:var(--line);--capH:clamp(150px,21vh,196px)}
/* repères posés par-dessus les toiles : libellé, compteur et crans de progression, fixes tant que la collection est à l'écran */
.feed__hud{position:sticky;top:0;z-index:5;pointer-events:none;height:100vh}
/* les toiles remontent d'un écran pour passer sous les repères, qui repartent avec la dernière toile */
.feed__slides{margin-top:-100vh}
.feed__label{
  position:absolute;left:var(--gutter);top:calc(84px + env(safe-area-inset-top,0px));
  display:flex;gap:18px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.feed__label b{font-weight:400;color:var(--ink)}
/* Sur ordinateur, le défilement des sections, fixé à droite : un trait par section, bien espacés ; le nom de la section en
   cours s'écrit en noir sous son trait (survoler un autre trait fait paraître le sien, en gris) ; un clic y mène. Il paraît
   une fois le hero passé. Dans la collection, les traits des sections se resserrent et, sous « Collection », se déplient
   ses toiles en petits rectangles, chacun à la forme de sa toile (la colonne du défilement, déplacée là par main.js) :
   celui de la toile à l'écran est plein. */
.rail{display:none}
@media (min-width:1025px) and (hover:hover){
  .rail{
    position:fixed;z-index:55;right:var(--gutter);top:50%;transform:translateY(-50%);
    display:grid;justify-items:end;opacity:0;pointer-events:none;transition:opacity .5s;
  }
  .rail.is-on{opacity:1;pointer-events:auto}
  /* les traits ont un fin liseré clair et les noms un léger halo clair : tout reste lisible quand le défilement passe
     sur des toiles (la galerie va jusqu'au bord de l'écran) */
  .rail__sec{
    position:relative;display:flex;justify-content:flex-end;align-items:center;padding:21px 0 21px 26px;
    text-decoration:none;color:var(--muted);transition:color .3s,padding .7s var(--ease-io);
  }
  .rail.is-coll .rail__sec{padding-block:12px}
  .rail__label{
    position:absolute;right:0;top:calc(50% + 9px);
    font:400 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
    text-shadow:0 0 2px rgba(236,234,229,.95),0 0 7px rgba(236,234,229,.85);
    opacity:0;translate:0 -4px;pointer-events:none;transition:opacity .35s,translate .5s var(--ease-out),color .3s;
  }
  .rail__sec:hover .rail__label,.rail__sec:focus-visible .rail__label,.rail__sec.is-on .rail__label{opacity:1;translate:0 0}
  .rail__sec.is-on{color:var(--ink)}
  .rail__mark{display:block;width:32px;height:3px;border-radius:2px;background:var(--pencil);box-shadow:0 0 0 1px rgba(255,255,255,.35);transition:width .55s var(--ease-out),background-color .3s}
  .rail__sec:hover .rail__mark{width:40px;background:var(--ink)}
  .rail__sec.is-on .rail__mark{width:58px;background:var(--ink)}
  .rail__slot{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease-io)}
  .rail.is-coll .rail__slot{grid-template-rows:1fr}
  /* repliée, la colonne ne doit rien occuper : ses marges sont portées par le premier et le dernier bouton, qu'elle cache */
  /* --rh : la hauteur des rectangles, un peu plus petite sur un écran bas pour que la colonne tienne */
  .rail__slot > .feed__rail{position:static;transform:none;min-height:0;overflow:hidden;padding:0;--rh:clamp(15px,2.3vh,21px)}
  .rail__slot .feed__rail button{display:flex;justify-content:flex-end;padding:5px 0 5px 26px}
  .rail__slot .feed__rail button:first-child{padding-top:17px}
  .rail__slot .feed__rail button:last-child{padding-bottom:10px}
  .rail__slot .feed__rail i,.rail__slot .feed__rail button:hover i,.rail__slot .feed__rail button.is-on i{
    width:calc(var(--rh) * var(--ar,.75));height:var(--rh);border:1.5px solid var(--pencil);border-radius:1px;background:transparent;
    box-shadow:0 0 0 1px rgba(255,255,255,.3);transition:background-color .3s,border-color .3s;
  }
  .rail__slot .feed__rail button:hover i{border-color:var(--ink)}
  .rail__slot .feed__rail button.is-on i{border-color:var(--ink);background:var(--ink)}
  .is-dark-room .rail__sec{color:#a9a6b2}
  .is-dark-room .rail__sec.is-on{color:#e8e6df}
  .is-dark-room .rail__label{text-shadow:none}
  .is-dark-room .rail__mark{background:#8e8b96}
  .is-dark-room .rail__sec:hover .rail__mark,.is-dark-room .rail__sec.is-on .rail__mark{background:#e8e6df}
  .is-dark-room .rail__slot .feed__rail i{background:transparent;border-color:#8e8b96}
  .is-dark-room .rail__slot .feed__rail button:hover i{background:transparent;border-color:#e8e6df}
  .is-dark-room .rail__slot .feed__rail button.is-on i{background:#e8e6df;border-color:#e8e6df}
}
.feed__rail{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);display:grid;justify-items:end;pointer-events:auto}
.feed__rail button{display:block;padding:9px 0 9px 14px}
.feed__rail i{display:block;width:20px;height:2px;background:var(--pencil);transition:width .55s var(--ease-out),background-color .3s}
.feed__rail button:hover i{width:32px;background:var(--ink)}
.feed__rail button.is-on i{width:44px;background:var(--ink)}

.slide{
  position:relative;overflow:hidden;height:100vh;
  display:grid;place-items:center;
  padding:calc(116px + env(safe-area-inset-top,0px)) calc(var(--gutter) + 64px) var(--capH);
}
.slide + .slide{border-top:var(--line)}
/* --fw : largeur de la moulure du cadre ; --fgap : le jour entre la moulure et la toile ; --avail : la hauteur disponible */
.slide{--fw:clamp(9px,1.05vw,17px);--fgap:clamp(2px,.28vw,5px);--fb:calc(var(--fw) + var(--fgap));--avail:calc(100vh - 152px - var(--capH));--maxw:60vw}
/* la toile encadrée prend toute la place disponible sans jamais déborder, en largeur comme en hauteur */
.slide__art{
  position:relative;z-index:1;will-change:transform;perspective:1000px;
  width:min(100%,var(--maxw),calc((var(--avail) - 2 * var(--fb)) * var(--arn,1) + 2 * var(--fb)));
}
/* un vrai cadre noir : moulure anthracite un peu plus claire en haut (la lumière vient du dessus),
   onglets visibles aux angles, léger jour autour de la toile et ombre portée sur le mur */
.slide__frame{
  position:relative;display:block;width:100%;
  padding:var(--fgap);background:var(--frame-in);
  border-style:solid;border-width:var(--fw);border-color:var(--frame-hi) var(--frame) var(--frame-lo) var(--frame-mid);
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(20,18,18,.5),0 2px 5px rgba(20,18,18,.28);
}
/* le groupe qui s'incline au survol (le cadre et sa toile) */
.slide__tilt{position:relative;display:block}
/* toiles sans LED : l'ombre portée du cadre sur le mur ; main.js la fait glisser quand la toile bouge */
.slide__shadow{
  position:absolute;z-index:-1;inset:3% 2.5% -3%;border-radius:4px;pointer-events:none;
  background:rgba(18,16,14,.5);filter:blur(22px);transform:translate3d(0,18px,0);will-change:transform,opacity;
}
.slide__frame::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 3px 7px rgba(0,0,0,.55)}
/* la toile est fixe dans son cadre : aucun zoom au survol, seul l'ensemble cadre + toile s'incline */
.slide__frame .art{height:auto;aspect-ratio:var(--arn,1);overflow:hidden;background:var(--tone)}
/* collection Stella : des LED derrière la toile éclairent le mur tout autour du cadre, dans la couleur de la toile.
   main.js règle l'opacité du halo selon la place de la toile à l'écran */
/* Le halo n'est affiché que pour la toile à l'écran (classe is-lit posée par main.js).
   Toutes ses nappes sont des aplats de lumière floutés : aucune n'a de bord net, donc aucun contour
   ni rectangle clair n'apparaît quand le cadre s'incline ou que la lumière se déplace. */
.slide__halo{position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:0;will-change:opacity;display:none}
.slide__halo.is-lit,html:not(.js) .slide__halo{display:block}
html:not(.js) .slide__halo{opacity:1}
.slide__halo b,.slide__halo i,.slide__halo::before,.slide__halo::after{content:"";position:absolute;border-radius:8px;background:rgb(var(--glow));pointer-events:none}
/* la lumière de base, fixe : vive contre le cadre, puis de plus en plus diffuse sur le mur */
.slide__halo b{
  inset:-2px;filter:blur(7px);
  box-shadow:0 0 30px 6px rgba(var(--glow),.7),0 0 80px 14px rgba(var(--glow),.42),0 0 170px 24px rgba(var(--glow),.24),0 0 320px 30px rgba(var(--glow),.13);
}
/* quatre nappes de bord, une par côté, dans la couleur de la lumière et volontairement inégales (zones plus denses, zones plus faibles).
   main.js règle l'intensité de chacune selon l'inclinaison de la toile : le côté vers lequel elle penche s'éclaire, l'autre s'éteint presque */
.slide__halo u{position:absolute;pointer-events:none;filter:blur(20px);opacity:.55;will-change:opacity}
.slide__halo u.t,.slide__halo u.b{
  left:3%;right:3%;height:88px;
  background:
    radial-gradient(closest-side,rgba(var(--glow),1),rgba(var(--glow),0)) 3% 50%/23% 100% no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),.7),rgba(var(--glow),0)) 27% 50%/31% 100% no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),1),rgba(var(--glow),0)) 52% 50%/19% 100% no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),.75),rgba(var(--glow),0)) 74% 50%/29% 100% no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),1),rgba(var(--glow),0)) 98% 50%/21% 100% no-repeat,
    linear-gradient(rgba(var(--glow),.42),rgba(var(--glow),.42));
}
.slide__halo u.l,.slide__halo u.r{
  top:3%;bottom:3%;width:88px;
  background:
    radial-gradient(closest-side,rgba(var(--glow),.75),rgba(var(--glow),0)) 50% 4%/100% 24% no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),1),rgba(var(--glow),0)) 50% 31%/100% 20% no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),.7),rgba(var(--glow),0)) 50% 57%/100% 30% no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),1),rgba(var(--glow),0)) 50% 80%/100% 18% no-repeat,
    radial-gradient(closest-side,rgba(var(--glow),.8),rgba(var(--glow),0)) 50% 99%/100% 22% no-repeat,
    linear-gradient(rgba(var(--glow),.42),rgba(var(--glow),.42));
}
.slide__halo u.t{top:-44px}
.slide__halo u.b{bottom:-44px;transform:scaleX(-1)}
.slide__halo u.l{left:-44px}
.slide__halo u.r{right:-44px;transform:scaleY(-1)}
/* une zone d'ombre, cachée derrière le cadre au repos : quand la toile s'incline, main.js la fait dépasser du côté opposé à la lumière */
.slide__halo em{
  position:absolute;inset:5%;border-radius:10px;pointer-events:none;background:rgba(14,12,10,.6);filter:blur(30px);
  opacity:0;will-change:transform,opacity;
}
/* la lumière est vivante : deux nappes respirent à des rythmes différents une fois la toile en place */
.slide__halo::before{inset:-12px;filter:blur(30px);opacity:0;will-change:opacity,transform}
.slide__halo::after{inset:-34px;filter:blur(72px);opacity:0;will-change:opacity,transform}
.slide.is-active .slide__halo::before{animation:ledA 4.6s ease-in-out 1s infinite}
.slide.is-active .slide__halo::after{animation:ledB 3.1s ease-in-out .4s infinite}
@keyframes ledA{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.6;transform:scale(1.03)}}
@keyframes ledB{0%,100%{opacity:.1;transform:scale(1)}40%{opacity:.5;transform:scale(1.05)}72%{opacity:.24;transform:scale(1.02)}}
/* et une nappe suit le pointeur : main.js la déplace du côté où il se trouve et règle son intensité */
.slide__halo i{inset:-10px;filter:blur(40px);opacity:0;will-change:opacity,transform}
/* sous la toile : son cartel à gauche, les boutons à droite */
.slide__foot{
  position:absolute;z-index:3;left:var(--gutter);right:calc(var(--gutter) + 64px);bottom:clamp(22px,4.4vh,48px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
}
/* Le cartel : une petite plaque d'acier noirci, du même anthracite que les cadres, lisse et sans ornement.
   Elle fait partie du mur et ne bouge qu'avec lui : une arête claire en haut, une ombre courte en dessous, rien d'autre.
   Le nom et les caractéristiques y sont gravés, alignés à gauche. */
.plate{
  position:relative;min-width:0;max-width:100%;padding:13px 22px 12px;border-radius:2px;
  text-align:left;color:#e6e4de;background:var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(14,13,12,.4),0 7px 12px -6px rgba(14,13,12,.45);
}
.plate__title{
  font-family:var(--font-display);font-stretch:82%;font-weight:500;font-size:15px;line-height:1.15;
  letter-spacing:.16em;text-transform:uppercase;
}
.plate__meta{margin-top:6px;font-weight:300;font-size:10px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#a8a6a0}
/* la première fois qu'une toile arrive à l'écran, son cartel se grave de gauche à droite ; il reste gravé ensuite */
.js .plate__in{clip-path:inset(-6px 100% -6px -6px);transition:clip-path .85s var(--ease-io) .1s}
.js .slide.is-seen .plate__in{clip-path:inset(-6px)}
.slide__actions{display:flex;align-items:center;gap:8px;white-space:nowrap}
/* les boutons d'une toile se posent quand elle devient la toile affichée */
.js .slide__actions{opacity:0;transform:translateY(18px);transition:opacity .4s,transform .7s var(--ease-out)}
.js .slide.is-active .slide__actions{opacity:1;transform:none;transition-delay:.3s}

/* ---------- toile phosphorescente : l'interrupteur et la pièce dans le noir ---------- */
/* la pénombre : un voile bleuté et transparent sur le mur, qui assombrit le béton sans l'effacer,
   un peu moins dense au centre, comme quand l'œil s'habitue */
.slide__dark{
  position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(110% 85% at 50% 42%,rgba(22,19,34,.5) 0%,rgba(14,12,22,.6) 55%,rgba(8,7,13,.68) 100%);
}
.slide.is-dark .slide__dark{opacity:1;transition-duration:.22s}
/* la toile dans le noir : sa photo prise sans lumière, posée exactement sur l'autre ; elle bascule aussitôt */
.slide__frame .art--night{position:absolute;inset:var(--fgap);width:auto;height:auto;background:#07080d;opacity:0;transition:opacity .3s ease}
.slide.is-dark .art--night{opacity:1;transition:opacity .35s ease .05s}
/* sa lueur faiblit très lentement, comme une vraie peinture phosphorescente ; rallumer la recharge */
.art--night::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .3s}
.slide.is-dark .art--night::after{opacity:.18;transition:opacity 45s linear 2s}
/* un peu de cette lueur se pose sur le mur, autour du cadre */
.slide__glow{
  position:absolute;z-index:-1;inset:-3%;pointer-events:none;background:center/cover no-repeat;
  filter:blur(40px) saturate(1.5);opacity:0;transition:opacity .35s;
}
.slide.is-dark .slide__glow{opacity:.5;transition:opacity .6s ease .1s}
.slide.is-dark .slide__shadow{visibility:hidden}
/* dans la pénombre, le cadre noir s'assombrit avec le mur : la peinture luit devant */
.slide--night .slide__frame{transition:border-color .35s,background-color .35s}
.slide.is-dark .slide__frame{border-color:#202024 #1a1a1d #141416 #18181b;background-color:#08080a}

/* L'interrupteur : un bouton à bascule sur une plaque d'acier noirci, comme les cadres et les cartels, fixé au mur
   à droite de la toile (main.js le place). La bascule penche du côté enfoncé ; dans le noir, un petit témoin
   s'allume dans la couleur de la lueur pour qu'on le retrouve. */
.switch{
  position:absolute;z-index:4;display:grid;justify-items:center;gap:10px;width:max-content;transform:translateY(-50%);
  color:var(--muted);
}
.switch__plate{
  position:relative;display:block;width:48px;height:48px;border-radius:5px;background:var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(14,13,12,.45),0 8px 14px -6px rgba(14,13,12,.5);
  transition:box-shadow .4s var(--ease-out);
}
.switch__rocker{
  position:absolute;inset:10px 13px;border-radius:3px;
  background:linear-gradient(180deg,#4b4b4f,#323235 47%,#28282a 53%,#1d1d1f);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06);
  transform:perspective(60px) rotateX(12deg);transition:transform .35s var(--ease-back);
}
.switch[aria-pressed="true"] .switch__rocker{transform:perspective(60px) rotateX(-12deg)}
.switch__led{position:absolute;right:6px;top:6px;width:4px;height:4px;border-radius:50%;background:#3b3b3e;transition:background-color .4s,box-shadow .4s}
.switch[aria-pressed="true"] .switch__led{background:var(--night-glow,#27baa4);box-shadow:0 0 7px 2px var(--night-glow,#27baa4)}
/* les deux libellés sont superposés dans la même case : la largeur ne change pas, l'interrupteur ne bouge pas */
.switch__label{display:grid;justify-items:center;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:color .4s}
.switch__label > span{grid-area:1/1;transition:opacity .25s}
.switch__off,.switch[aria-pressed="true"] .switch__on{opacity:0}
.switch[aria-pressed="true"] .switch__off{opacity:1}
.switch:hover .switch__plate{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 3px rgba(14,13,12,.4),0 12px 18px -8px rgba(14,13,12,.55)}
.switch:active .switch__rocker{transition-duration:.12s}
.switch:focus-visible{outline:none}
.switch:focus-visible .switch__plate{outline:2px solid var(--cobalt);outline-offset:3px}
.slide.is-dark .switch{color:#b4b1bd}
.slide.is-dark .switch:focus-visible .switch__plate{outline-color:#e8e6df}

/* la pièce éteinte : la barre de navigation et les repères de la collection passent en clair sur sombre */
.nav,.nav__logo,.feed__label{transition:color .35s}
.is-dark-room .nav,.is-dark-room .nav__logo,.is-dark-room .nav__link{color:#dcd9d2}
.is-dark-room .nav.is-stuck{background:#2c2a31;border-bottom-color:rgba(255,255,255,.14)}
.is-dark-room .nav .pill{background:rgba(255,255,255,.06);color:#dcd9d2;border-color:rgba(255,255,255,.3)}
.is-dark-room .feed__label{color:#b0adb9}
.is-dark-room .feed__label b{color:#e8e6df}
.is-dark-room .feed__rail i{background:#8e8b96}
.is-dark-room .feed__rail button.is-on i,.is-dark-room .feed__rail button:hover i{background:#e8e6df}
.is-dark-room .cursor::before{background:#e8e6df}

@supports (height:100svh){
  .feed__hud{height:100svh}
  .feed__slides{margin-top:-100svh}
  .slide{height:100svh;--avail:calc(100svh - 152px - var(--capH))}
}

/* ================= GALERIE : une rangée par catégorie, qui défile vers la droite =================
   Le titre de la section reste dans les marges ; chaque rangée part de la marge de gauche et file jusqu'au bord droit
   de l'écran, pour qu'on voie qu'elle continue. Défilement natif, aimanté sur les toiles, sans barre de défilement :
   un filet sous la rangée montre où l'on en est, et deux flèches avancent ou reculent (main.js, rows). */
.wall{padding:var(--gap) 0;border-top:var(--line)}
.wall .section-head{margin:0 var(--gutter) clamp(32px,4.4vw,64px)}
.row{margin-bottom:clamp(44px,5.5vw,84px)}
.row:last-child{margin-bottom:0}
.row__head{display:flex;align-items:baseline;gap:14px;padding:0 var(--gutter);margin-bottom:clamp(14px,1.6vw,22px)}
.row__title{font-size:clamp(30px,3.4vw,48px);line-height:1}
.row__count{color:var(--muted)}
.row__nav{display:flex;gap:8px;margin-left:auto;align-self:center}
.row__btn{width:44px;height:44px;display:grid;place-items:center;border:var(--line);border-radius:50%;transition:background-color .3s,color .3s,opacity .3s}
.row__btn svg{width:17px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.row__btn[data-dir="-1"] svg{transform:scaleX(-1)}
.row__btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.row__btn:disabled{opacity:.25;cursor:default}
.row.is-static .row__nav,.row.is-static .row__bar{display:none}   /* une rangée qui tient dans l'écran ne défile pas */
.row__track{
  display:flex;gap:clamp(20px,2.6vw,44px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:8px var(--gutter) 6px;scrollbar-width:none;
}
.row__track::-webkit-scrollbar{display:none}
.row__track.is-dragging{scroll-snap-type:none;cursor:grabbing}
.row__track .tile{flex:0 0 auto;width:clamp(220px,23vw,340px);scroll-snap-align:start}
.row__bar{position:relative;height:1px;margin:clamp(12px,1.4vw,18px) var(--gutter) 0;background:rgba(20,18,18,.16);overflow:hidden}
.row__bar i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--ink)}
.tile{display:block;min-width:0;text-align:left}
/* chaque toile est montrée en entier dans une case carrée : ni recadrage, ni angle arrondi */
.tile__stage{display:grid;place-items:center;aspect-ratio:1}
.tile .art{width:min(100%,calc(100% * var(--arn,1)));height:auto;aspect-ratio:var(--arn,1);overflow:hidden;background:var(--tone);transition:transform .9s var(--ease-out)}
.js .tile .art{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease-io) calc(var(--i) * 70ms),transform .9s var(--ease-out)}
.js .row__track.is-in .tile .art{clip-path:inset(0 0 0 0)}
/* sous la toile : un filet, son nom et ses caractéristiques, qui se posent au survol */
.tile__cap{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;min-height:48px;margin-top:14px;padding-top:12px}
.tile__cap::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.tile__cap b{min-width:0;font-weight:400;font-size:clamp(22px,2.2vw,32px);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:.06em}
.tile__cap .mono{color:var(--muted);white-space:nowrap}
@media (hover:hover){
  .tile__cap b,.tile__cap .mono{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .6s var(--ease-out)}
  .tile:hover .tile__cap b,.tile:focus-visible .tile__cap b,.tile:hover .tile__cap .mono,.tile:focus-visible .tile__cap .mono{opacity:1;transform:none}
  .tile:hover .tile__cap .mono,.tile:focus-visible .tile__cap .mono{transition-delay:.07s}
  .tile:hover .tile__cap::before,.tile:focus-visible .tile__cap::before{transform:scaleX(1)}
  .tile:hover .art,.tile:focus-visible .art{transform:translateY(-6px) scale(1.02)}
}
@media (hover:none){
  .tile__cap::before{transform:scaleX(1)}
}

@media (max-width:860px){
  .row__track{gap:14px}
  .row__track .tile{width:62vw}   /* la toile suivante dépasse à droite : on voit qu'on peut faire glisser */
  .row__nav{display:none}
  .tile__cap{display:block;min-height:0;margin-top:8px;padding-top:6px}
  .tile__cap b{display:block;font-family:var(--font-body);font-stretch:100%;font-size:12px;letter-spacing:-.01em;line-height:1.25}
  .tile__cap .mono{display:none}
  .feed{--capH:clamp(176px,25vh,214px)}
  .slide{padding-inline:var(--gutter);--avail:calc(100vh - 140px - var(--capH));--maxw:100%}
  /* sur petit écran : le cartel à gauche sous la toile, les boutons toujours en dessous, à gauche (sur un grand téléphone,
     ils tenaient à côté du cartel et tombaient sur l'interrupteur, rangé en bas à droite) */
  .slide__foot{right:var(--gutter);flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
  /* sur une toile phosphorescente, le cartel s'arrête avant l'interrupteur : un nom très long passerait à la ligne */
  .slide--night .slide__foot .plate{max-width:calc(100% - 82px)}
  .plate{padding:11px 18px 10px}
  .plate__title{font-size:14px}
  .plate__meta{margin-top:5px;font-size:9.5px}
  .feed__rail{right:3px}
  .feed__rail button{padding:8px 0 8px 12px}
  .feed__rail i,.feed__rail button:hover i{width:8px}
  .feed__rail button.is-on i{width:13px}
  /* sur petit écran, l'interrupteur se range en bas à droite, à la hauteur du bouton « Détails » */
  .switch{left:auto;top:auto;right:var(--gutter);bottom:clamp(22px,4.4vh,48px);transform:none;gap:6px}
  .switch__plate{width:42px;height:42px}
  .switch__rocker{inset:9px 12px}
}
@media (max-width:860px){
  @supports (height:100svh){
    .slide{--avail:calc(100svh - 140px - var(--capH))}
  }
}
@media (prefers-reduced-motion:reduce){
  .js .slide__actions{opacity:1;transform:none}
  .js .plate__in{clip-path:none}
}