/* pages.css — portfolio.html + projet.html (shared with styles.css tokens) */
.pg{min-height:100vh}
.pg-inner{max-width:1200px;margin:0 auto}
.pg-head{padding-top:clamp(120px,16vh,180px)}
.topnav .nav-right a.is-active{opacity:1;text-decoration:underline;text-underline-offset:6px}
/* Book bg tone-in when page opens on parchment (no black intro before) */
.page-portfolio,.page-project{background:var(--bone)}
.page-portfolio .topnav,.page-project .topnav{mix-blend-mode:normal;color:var(--ink)}
.page-portfolio .topnav .cta,.page-project .topnav .cta{border-color:rgba(20,18,16,.5)}
.page-project .pj-hero ~ * .topnav{color:#fff}
.page-project .topnav{color:#fff;mix-blend-mode:difference}

/* ---------- Filters ---------- */
.filters{margin-top:34px;display:flex;flex-direction:column;gap:12px}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter-label{font-family:var(--f-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);width:56px}
.chip{border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-family:var(--f-sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--ink);cursor:pointer;transition:all .25s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.chip .n{opacity:.55;margin-left:6px;font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:0}
.filter-count{margin-top:16px;font-family:var(--f-serif);font-style:italic;font-size:16px;color:var(--muted)}
.folio-empty{padding:60px 0;font-family:var(--f-serif);font-style:italic;font-size:20px;color:var(--muted);text-align:center}
.tile.hide{display:none}

/* ---------- Project hero ---------- */
.pj-hero{position:relative;height:88vh;min-height:520px;background:var(--ink);overflow:hidden}
.pj-hero-media{position:absolute;inset:0}
.pj-hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);will-change:transform;display:block}
.pj-hero-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(40px,7vh,80px);color:var(--bone)}
.pj-back{font-family:var(--f-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,227,212,.8);margin-bottom:auto;padding-top:96px;transition:color .3s}
.pj-back:hover{color:#fff}
.pj-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(234,227,212,.82);margin-bottom:12px}
.pj-title{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,7vw,104px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;max-width:16ch;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.pj-hashtags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 18px}
.pj-hashtags span{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(234,227,212,.9)}
.pj-hashtags span::before{content:'#';color:var(--red);margin-right:2px}

/* ---------- Narrative + meta ---------- */
.pj-grid{display:grid;grid-template-columns:260px 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.pj-meta{position:sticky;top:110px;border-top:1px solid var(--line)}
.pj-meta-row{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.pj-meta-row span{font-family:var(--f-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pj-meta-row b{font-family:var(--f-serif);font-weight:500;font-size:19px;color:var(--ink)}
.pj-credits b{font-size:15px;line-height:1.5;font-style:italic;color:var(--ink-soft)}
.pj-meta .btn-inline{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--f-sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-bottom:6px;border-bottom:1px solid var(--ink)}
.pj-meta .btn-inline .plus{transition:transform .3s var(--ease)}
.pj-meta .btn-inline:hover{color:var(--red-deep);border-color:var(--red-deep)}
.pj-meta .btn-inline:hover .plus{transform:rotate(45deg)}
.pj-body .feat-title{margin-bottom:26px}
.pj-body .body-serif p{margin-bottom:1em}
.pj-body .body-serif p:first-child::first-letter{float:left;font-family:var(--f-serif);font-style:italic;font-weight:600;font-size:5em;line-height:.72;padding:.06em .1em 0 0;color:var(--red-deep)}
@media(max-width:860px){.pj-grid{grid-template-columns:1fr}.pj-meta{position:static}}

/* ---------- Gallery (masonry) ---------- */
/* ---- Planches : composition éditoriale (grille 12 colonnes, pleines pages, doubles pages, citations) ---- */
.pj-lede{font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2.4vw,32px);line-height:1.35;color:var(--ink);margin-bottom:26px;max-width:30ch}
.pj-source{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.pj-source-k{font-family:var(--f-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pj-source-b p{font-size:17px;color:var(--ink-soft)}
.pj-matieres b{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.7;color:var(--ink)}
.pj-matieres b i{font-style:normal;color:var(--red-deep);margin:0 6px}
.pj-plates{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,28px);margin-top:28px;align-items:start}
.plate{margin:0;grid-column:span 12}
.plate a{display:block;overflow:hidden;background:var(--bone-2);border:1px solid var(--line);cursor:zoom-in}
.plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease),filter .5s;filter:saturate(.96)}
.plate a:hover img{transform:scale(1.03);filter:saturate(1.04)}
.plate figcaption{display:flex;gap:10px;align-items:baseline;margin-top:8px;font-family:var(--f-serif);font-style:italic;font-size:14px;color:var(--muted)}
.plate figcaption b{font-family:var(--f-serif);font-style:italic;font-weight:600;color:var(--red-deep);white-space:nowrap}
.pl--full a{aspect-ratio:16/9}
.pl--l8{grid-column:1 / span 8}.pl--l8 a{aspect-ratio:4/3}
.pl--r4{grid-column:9 / span 4}.pl--r4 a{aspect-ratio:3/4}
.pl--3{grid-column:span 4}.pl--3 a{aspect-ratio:1/1}
.pl--3.tall a{aspect-ratio:3/4}
.pl--l7{grid-column:1 / span 7}.pl--l7 a{aspect-ratio:5/4}
.pl--r5{grid-column:8 / span 5;margin-top:clamp(40px,8vh,120px)}.pl--r5 a{aspect-ratio:4/5}
.pl--r8{grid-column:5 / span 8}.pl--r8 a{aspect-ratio:16/10}
.pl--l4{grid-column:1 / span 4;margin-top:clamp(30px,6vh,90px)}.pl--l4 a{aspect-ratio:4/5}
.pl-quote{grid-column:2 / span 10;padding:clamp(20px,4vh,50px) 0;font-family:var(--f-serif);font-style:italic;font-size:clamp(24px,3vw,42px);line-height:1.25;color:var(--ink);text-align:center;max-width:26ch;margin:0 auto}
.pl-quote::before{content:'—';display:block;color:var(--red-deep);font-style:normal;margin-bottom:10px}
.pl-mat{grid-column:1 / span 12;padding:clamp(16px,3vh,36px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:clamp(16px,1.8vw,24px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pl-mat span::before{content:'·';color:var(--red-deep);margin-right:22px}
.pl-mat span:first-child::before{content:none}
@media(max-width:860px){
  .pj-plates{gap:14px}
  .pl--l8,.pl--r4,.pl--l7,.pl--r5,.pl--r8,.pl--l4{grid-column:span 12;margin-top:0}
  .pl--3{grid-column:span 6}
  .pl-quote{grid-column:span 12;font-size:22px}
}
/* ---- Portfolio : couverture peinte + grille magazine ---- */
.folio-cover{position:relative;min-height:88vh;background:var(--ink);overflow:hidden;color:var(--bone)}
.folio-cover-media{position:absolute;inset:0}
.folio-cover-media img{width:100%;height:100%;object-fit:cover;object-position:38% 50%;display:block;transform:scale(1.03)}
.folio-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.35) 0%,rgba(20,18,16,0) 30%,rgba(20,18,16,.15) 60%,rgba(20,18,16,.78) 100%)}
.folio-cover-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(40px,7vh,80px);z-index:2;max-width:820px}
.folio-cover-copy .ch-title{color:var(--bone);text-shadow:0 2px 40px rgba(0,0,0,.5)}
.folio-cover-copy .ch-title em{color:var(--red)}
.folio-cover-copy .lede-serif{color:rgba(234,227,212,.9);max-width:52ch;text-shadow:0 1px 20px rgba(0,0,0,.5)}
.folio-cover-plate{position:absolute;right:var(--pad);bottom:22px;z-index:2;font-family:var(--f-serif);font-style:italic;font-size:14px;color:rgba(234,227,212,.65)}
.folio-tools{padding-top:34px}
.folio-full{padding:0 clamp(12px,1.4vw,22px)}
.folio-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;align-items:center;padding:0 clamp(6px,1vw,14px) 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-row .chip .n{display:none}
/* grille magazine : 6 colonnes, motif de 6 tuiles (grande + haute / trois carrés / deux moyennes) */
.folio-mag{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,22px);align-items:start}
.folio-mag .tile{margin:0;border:0;background:transparent;grid-column:span 2}
.folio-mag .tile .ph{aspect-ratio:1/1;background:var(--bone-2)}
.folio-mag .tile:nth-child(6n+1){grid-column:span 4}.folio-mag .tile:nth-child(6n+1) .ph{aspect-ratio:16/10}
.folio-mag .tile:nth-child(6n+2){grid-column:span 2}.folio-mag .tile:nth-child(6n+2) .ph{aspect-ratio:4/5}
.folio-mag .tile:nth-child(6n+3) .ph,.folio-mag .tile:nth-child(6n+4) .ph,.folio-mag .tile:nth-child(6n+5) .ph{aspect-ratio:1/1}
.folio-mag .tile:nth-child(6n){grid-column:span 6}.folio-mag .tile:nth-child(6n) .ph{aspect-ratio:21/9}
.folio-mag .tile:nth-child(6n) .tile-cap .t{font-size:22px}
.folio-mag .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease),filter .5s;filter:saturate(.96)}
.folio-mag .tile:hover img{transform:scale(1.04);filter:saturate(1.05)}
.folio-mag .tile-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 2px 6px}
.folio-mag .tile-cap .t{font-family:var(--f-display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.folio-mag .tile-cap .m{font-family:var(--f-serif);font-style:italic;font-size:14px;color:var(--muted);white-space:nowrap}
.folio-mag .tile-idx{color:#fff;mix-blend-mode:normal;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.folio-mag .tile-meta{display:none}
@media(max-width:1000px){.folio-mag .tile,.folio-mag .tile:nth-child(6n+1),.folio-mag .tile:nth-child(6n+2){grid-column:span 3}.folio-mag .tile:nth-child(6n){grid-column:span 6}}
@media(max-width:640px){.folio-mag{grid-template-columns:1fr}.folio-mag .tile,.folio-mag .tile:nth-child(n){grid-column:span 1}.folio-mag .tile:nth-child(n) .ph{aspect-ratio:4/3}.folio-cover{min-height:70vh}.folio-cover-media img{object-position:22% 50%}}
/* mur d'images de la page portfolio : pleine largeur */
.folio-grid--page{margin-top:24px}
.pj-gallery{columns:3;column-gap:clamp(12px,1.5vw,22px);margin-top:28px}
@media(max-width:900px){.pj-gallery{columns:2}}
@media(max-width:560px){.pj-gallery{columns:1}}
.pj-gallery a{display:block;break-inside:avoid;margin:0 0 clamp(12px,1.5vw,22px);overflow:hidden;border:1px solid var(--line);background:var(--bone-2);cursor:zoom-in}
.pj-gallery img{width:100%;display:block;transition:transform .9s var(--ease),filter .5s;filter:saturate(.96)}
.pj-gallery a:hover img{transform:scale(1.04);filter:saturate(1.04)}

/* ---------- Next project ---------- */
.pj-next-wrap{padding-bottom:clamp(60px,10vh,120px)}
.pj-next{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(40px,7vh,80px);color:inherit}
.pj-next-img{overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.pj-next-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pj-next:hover .pj-next-img img{transform:scale(1.05)}
.pj-next-title{font-family:var(--f-serif);font-weight:500;font-size:clamp(32px,4.4vw,60px);line-height:1;margin:8px 0 10px}
.pj-next-meta{font-family:var(--f-serif);font-style:italic;font-size:17px;color:var(--muted)}
@media(max-width:760px){.pj-next{grid-template-columns:1fr}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(20,18,16,.96);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.lightbox button{position:absolute;background:transparent;border:0;color:var(--bone);font-family:var(--f-serif);font-size:44px;line-height:1;cursor:pointer;padding:16px;opacity:.75;transition:opacity .2s}
.lightbox button:hover{opacity:1}
.lb-close{top:14px;right:22px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(--f-serif);font-style:italic;font-size:14px;color:rgba(234,227,212,.7)}

/* ---------- Démarche page ---------- */
.phases-long{list-style:none;margin-top:10px}
.phases-long .ph{display:grid;grid-template-columns:90px 1fr 380px;gap:clamp(20px,3.5vw,54px);align-items:start;padding:clamp(44px,7vh,80px) 0;border-top:1px solid var(--line)}
.phases-long .ph:last-child{border-bottom:1px solid var(--line)}
.ph-n{font-family:var(--f-serif);font-style:italic;font-size:clamp(48px,6vw,88px);color:var(--red-deep);line-height:.9;position:sticky;top:110px}
.ph-body .feat-title{font-size:clamp(28px,3.4vw,46px);margin-bottom:16px}
.ph-body .feat-lede{font-size:clamp(17px,1.5vw,21px);max-width:60ch;margin-bottom:18px}
.deliverables{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start;border-top:1px solid var(--line-soft);padding-top:14px;margin-top:6px}
.deliverables span{font-family:var(--f-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.deliverables ul{list-style:none;columns:2;column-gap:24px}
.deliverables li{font-family:var(--f-serif);font-size:17px;line-height:1.5;color:var(--ink-soft);break-inside:avoid;padding-left:14px;position:relative}
.deliverables li::before{content:'—';position:absolute;left:0;color:var(--red-deep)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 18px}
.mode{border:1px solid var(--line);padding:16px 18px;background:rgba(243,238,226,.5)}
.mode b{display:block;font-family:var(--f-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.mode p{font-family:var(--f-serif);font-size:16px;line-height:1.5;color:var(--ink-soft)}
.ph-fig{overflow:hidden;border:1px solid var(--line);position:sticky;top:110px}
.ph-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;will-change:transform;filter:saturate(.96)}
.ph-fig figcaption{padding:10px 12px;font-family:var(--f-serif);font-style:italic;font-size:13px;color:var(--muted);background:var(--paper)}
.ph-cta{text-align:center;padding:clamp(60px,10vh,120px) 0 20px}
.ph-cta .feat-lede{margin:0 auto 22px}
@media(max-width:1000px){.phases-long .ph{grid-template-columns:70px 1fr}.ph-fig{grid-column:2;position:static;max-width:520px}}
@media(max-width:640px){.phases-long .ph{grid-template-columns:1fr}.ph-n{position:static}.ph-fig{grid-column:1}.deliverables{grid-template-columns:1fr}.deliverables ul{columns:1}.modes{grid-template-columns:1fr}}

/* ---- Mots-dièse géants qui traversent la galerie d'un projet au scroll ----
   Générés par projet (data/projects-full.json → hashtags / hashtags_en), rouge translucide en surimpression. */
.pj-gal{position:relative}
.pj-tag-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.pj-tag{position:absolute;left:0;white-space:nowrap;font-family:var(--f-display);font-weight:700;
  font-size:clamp(58px,11.5vw,200px);line-height:.78;letter-spacing:-.02em;
  color:var(--red);opacity:.60;will-change:transform;transform:translate3d(0,0,0)}
.pj-tag i{font-style:normal}
.pj-tag--xl{font-size:clamp(92px,20vw,340px);opacity:.52}
.pj-tag--s{font-size:clamp(40px,7vw,124px);opacity:.66}
@media(max-width:860px){
  .pj-tag{font-size:clamp(46px,17vw,124px);opacity:.60}
  .pj-tag--xl{font-size:clamp(68px,27vw,180px);opacity:.52}
  .pj-tag--s{font-size:clamp(34px,12vw,92px);opacity:.66}
}