/* css/penderie.css — carte « penderie » : coverflow façon ana.sh (« clothes & bits »).
   3 pièces visibles : la centrale à 85 %, les voisines à 55 % / opacité .5, décalées de 58 % + 2rem.
   Chargé après css/home.css (jetons --card, --line, --moss, .hd, .card). */
.pend{--sh:clamp(200px,21vw,290px);gap:12px}
.pend:focus{outline:none}
.pend:focus-visible{border-color:var(--brand-400)}
.pend .hd .pend-ctl{display:flex;align-items:center;gap:6px;opacity:1}
.pend .hd .pend-all{text-decoration:none;transition:color .18s;margin-right:4px}
.pend .hd .pend-all:hover{color:var(--brand)}
.pend-sub{margin-top:-6px}

.pend-stage{position:relative;height:var(--sh);margin:2px -18px 0;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.pend-stage:active{cursor:grabbing}
.pend-track{position:absolute;inset:0;transform:translateX(var(--dx,0px));transition:transform .5s cubic-bezier(.22,1.1,.36,1)}
.pend-track.drag{transition:none}

.pend-slide{position:absolute;left:50%;top:50%;width:calc(var(--sh)*.8);height:var(--sh);border-radius:14px;overflow:hidden;
  background:transparent;border:0;box-shadow:none;
  transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;
  transition:transform .6s cubic-bezier(.22,1.12,.36,1),opacity .45s ease,border-color .2s}
.pend-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pend-slide img{object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.18))}
.pend-slide.contain img{object-fit:contain;padding:4%}
.pend-slide.on{transform:translate(-50%,-50%) scale(.85);opacity:1;z-index:3;pointer-events:auto}
.pend-slide.l1{transform:translate(-50%,-50%) translateX(calc(-58% - 2rem)) scale(.55);opacity:.5;z-index:2;pointer-events:auto}
.pend-slide.r1{transform:translate(-50%,-50%) translateX(calc(58% + 2rem)) scale(.55);opacity:.5;z-index:2;pointer-events:auto}
.pend-slide.l2{transform:translate(-50%,-50%) translateX(calc(-116% - 4rem)) scale(.4);opacity:0;z-index:1}
.pend-slide.r2{transform:translate(-50%,-50%) translateX(calc(116% + 4rem)) scale(.4);opacity:0;z-index:1}
.pend-slide.jump{transition:none!important}
.pend-slide.on:hover img{transform:translateY(-2px);transition:transform .3s}
.pend-slide.l1:hover,.pend-slide.r1:hover{opacity:.7}
/* sans JS : seule la première pièce se voit */
.pend:not(.ready) .pend-slide:not(.on){opacity:0}

.pend-nav{display:flex;align-items:center;justify-content:center;gap:12px}
.pend-arrow{background:transparent;border:0;color:var(--g300);width:24px;height:24px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:17px;line-height:1;padding:0 0 2px;transition:.2s}
.pend-arrow:hover{color:var(--strong)}
.pend-dots{display:flex;gap:6px;align-items:center}
.pend-dot{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--g200);cursor:pointer;
  transition:width .4s cubic-bezier(.22,1,.36,1),background .3s}
.pend-dot:hover{background:var(--g300)}
.pend-dot.on{width:32px;background:var(--g300)}

.pend-cap{display:grid;min-height:1.5em}
.tile.pend .pend-cap{display:none}
.pend-item{grid-area:1/1;opacity:0;transition:opacity .35s;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;pointer-events:none}
.pend-item.on{opacity:1;pointer-events:auto}
.pend-item b{color:var(--strong);font-weight:500}
.pend-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pend-item i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--g400);margin-left:auto}

/* sur la page portfolio : carte de clôture, centrée et pas trop large pour que le trio de pièces la remplisse */
.pend-wide{--sh:clamp(230px,24vw,320px);width:100%;max-width:840px;justify-self:center}
@media(max-width:680px){
  .pend,.tile.pend{--sh:clamp(190px,52vw,240px)}
  .pend-stage{margin:2px -14px 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
}
@media(prefers-reduced-motion:reduce){
  .pend-slide,.pend-track,.pend-dot,.pend-item{transition:none!important}
}
/* accueil (tuile de la grille) : le plateau prend la place qui reste */
.tile.pend{--sh:clamp(170px,15.5vw,222px);gap:10px}
.tile.pend .pend-stage{margin:0 -16px;flex:1;height:auto;min-height:var(--sh)}
.tile.pend .pend-slide{height:var(--sh);width:calc(var(--sh)*.8)}
.tile.pend .pend-cap{margin-top:0}
/* tuile étroite : le lien « tout voir » ne garde que sa flèche, le titre reste lisible */
@container (max-width:360px){.tile.pend .pend-all .txt{display:none}}
/* ordinateur (accueil plein écran) : le plateau prend la place qui reste, les pièces se mesurent à lui — doit rester APRÈS les règles .tile.pend ci-dessus */
@media(min-width:1081px) and (min-height:620px){
  .tile.pend .pend-stage{flex:1;min-height:90px;height:auto}
  .tile.pend .pend-slide{height:86%;width:auto;aspect-ratio:4/5}
}