html{overflow-x:clip}
.pleine{width:100vw;margin-left:calc(50% - 50vw);
  --gut:max(clamp(20px,4.5vw,64px),calc((100vw - var(--page-large,1560px))/2))}

.matter{padding:calc(clamp(60px,9vh,110px) * var(--eh,1)) 0 calc(clamp(50px,8vh,100px) * var(--eb,1))}
.matter .head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;
  padding:0 var(--gut) 34px;flex-wrap:wrap}
.matter h2{font-family:var(--f-titres),ui-serif,Georgia,serif;font-weight:var(--w-titres-demi,600);
  font-size:clamp(30px,5vw,66px);letter-spacing:-.04em;line-height:.9;margin:0}
.matter .head p{font-size:var(--t-md,15px);color:var(--mute);max-width:36ch;margin:0}


.matter{--rail-bord:var(--line);--rail-btn:rgba(255,255,255,.92);--rail-btn-t:var(--ink);--rail-btn-h:#fff;
  --rail-piste:color-mix(in srgb,var(--ink) 12%,transparent);--rail-curseur:var(--ink);
  --rail-aide:color-mix(in srgb,var(--ink) 66%,transparent)}

.matter .rail{padding:6px 18px 10px;scroll-padding-inline:18px}
.matter .bdf-c{flex:none;position:relative;display:block;width:clamp(210px,30vw,440px);aspect-ratio:1;
  border-radius:calc(var(--arrondi,16px) * 1.4);overflow:hidden;scroll-snap-align:start;
  background:#EFE9DD;text-decoration:none;color:#fff}
.matter .bdf-c img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.matter .bdf-c::after{content:"";position:absolute;inset:auto 0 0 0;height:36%;
  background:linear-gradient(transparent,rgba(0,0,0,.5))}
.matter .bdf-c span{position:absolute;left:clamp(14px,1.6vw,22px);bottom:clamp(12px,1.3vw,18px);z-index:2;
  font-family:var(--f-titres),ui-serif,Georgia,serif;font-weight:var(--w-titres-demi,600);
  font-size:clamp(17px,1.9vw,28px);letter-spacing:-.03em;line-height:1}

.matter .bdf-p:not(:has(span))::after{display:none}
.matter .rnav{top:50%}