/* css/portfolio.css — page portfolio : la mise en page d'ana.sh (avatar, phrase d'intro, puis par projet un titre,
   un paragraphe et une bande d'images qui défile), mais sur toute la largeur de la page : le texte est aligné sur
   la gouttière --pad à gauche, les bandes d'images filent jusqu'au bord droit.
   Pas de 100vw : il inclut la barre de défilement et décalerait les images par rapport au texte. */

.folio.page-wrap{--pad:clamp(20px,4vw,56px);max-width:none;padding:clamp(48px,6vw,80px) 0 clamp(72px,8vw,110px)}
.folio{display:grid;gap:clamp(44px,5vw,64px)}

/* mots « _forts_ » de l'admin */
.folio em{font-weight:600;font-style:normal;color:var(--fg)}

/* en-tête */
.folio-head{padding:0 var(--pad);display:grid;gap:12px;justify-items:start}
.folio-head .back-link{margin-bottom:2px}
.folio-head .pill{display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:none;border-radius:0;
  box-shadow:none;font-size:14px;color:var(--muted)}
.folio-head .pill img,.folio-head .pill .av{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top;margin:0}
.folio-head .pill .av{display:grid;place-items:center;background:var(--g100);color:var(--fg);font-size:24px;font-weight:600}
.folio-head .say{font-size:16px;font-weight:400;line-height:1.5;color:var(--fg);max-width:52ch}
.folio-head .lede{font-size:16px;line-height:1.5;color:var(--muted);max-width:66ch}
.folio-head .eb{margin-top:4px}
.folio-head .eb s{width:3px;height:3px;border-radius:50%;background:var(--g300);text-decoration:none;flex:none;display:inline-block}

/* un projet : étiquette, titre, texte, bande d'images */
.work{background:none;border:0;box-shadow:none;padding:0;display:grid;gap:8px;width:100%}
.work>.hd{padding:0 var(--pad)}
.work>.hd .end{color:var(--g400)}
.work-text{padding:0 var(--pad);display:grid;gap:6px;justify-items:start}
.work-text h2{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--fg)}
.work-text p{font-size:16px;line-height:1.55;color:var(--muted);max-width:68ch}
.work-text .go{margin-top:4px}

/* bande d'images : commence à la gouttière, file jusqu'au bord droit */
.strip{--sh:clamp(180px,19vw,300px);width:100%;margin-top:10px;padding:4px var(--pad);
  display:flex;gap:8px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scroll-padding-left:var(--pad);scroll-padding-right:var(--pad);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.frame{flex:none;scroll-snap-align:start;margin:0;display:grid;gap:8px;max-width:min(88vw,1100px)}
.frame .shot{width:auto}
.frame .shot img{height:var(--sh);width:auto;max-width:100%;aspect-ratio:auto;object-fit:cover;display:block}
.frame figcaption{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g400);padding-left:2px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* carte penderie de fin */
.folio .pend-wide{--sh:clamp(200px,22vw,280px);width:calc(100% - var(--pad)*2);max-width:none;margin:8px var(--pad) 0;justify-self:auto}

/* lightbox à vignettes (fond et boutons : css/cards.css) */
.folio-lb img#lbImg{cursor:grab;touch-action:pan-y;transition:transform .25s;max-height:68vh}
.folio-lb img#lbImg:active{cursor:grabbing;transition:none}
.folio-lb figure{gap:11px}
.lb-thumbs{display:flex;gap:6px;overflow-x:auto;max-width:min(100%,760px);padding:2px;scrollbar-width:none}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumbs button{flex:none;padding:0;border:1px solid transparent;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.08);cursor:pointer;height:46px;opacity:.45;transition:opacity .2s,border-color .2s}
.lb-thumbs button img{height:100%;width:auto;display:block}
.lb-thumbs button:hover{opacity:.8}
.lb-thumbs button.on{opacity:1;border-color:#fff}
.folio-lb .lb-btn[hidden]{display:none}

@media(max-width:680px){
  .strip{--sh:clamp(170px,52vw,260px)}
  .lb-thumbs button{height:38px}
}
@media(prefers-reduced-motion:reduce){.folio-lb img#lbImg{transition:none!important}}