.portfolio-page > header { border-bottom:0; padding-top:17px }
.portfolio-page main { border-top:0 }

/* Catalogue */
.catalogue { padding-block:clamp(20px,3.5dvh,34px) var(--section-space) }
.catalogue-head { padding-bottom:16px; border-bottom:1px solid var(--line) }
.catalogue-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px 20px; border-bottom:1px solid var(--line); margin-bottom:14px }
.catalogue-bar[hidden] { display:none }
.catalogue-filters { display:flex; flex-wrap:wrap; gap:0 2px }
.catalogue-filters button { min-height:36px; padding:5px 7px; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font:inherit; font-size:calc(1em - 1pt); cursor:pointer }
.catalogue-filters button[aria-pressed="true"] { color:var(--peach); border-bottom-color:var(--peach) }
.catalogue-filters button:is(:hover,:focus-visible) { background:var(--peach); color:#22151d; border-radius:6px }
.catalogue-filters button:focus-visible { outline:2px solid var(--peach); outline-offset:2px }
.catalogue-status { margin:0; padding-block:7px; color:var(--muted); text-align:right; white-space:nowrap }
.catalogue-card[hidden] { display:none }
.catalogue-head h1 { display:flex; align-items:center; gap:10px; font-size:clamp(24px,3.5dvh,34px) }
.catalogue-head h1 svg { flex:none; width:.8em; height:.8em; color:var(--peach) }
.catalogue-grid {
  display:grid;
  --catalogue-columns:4;
  --catalogue-row:216px;
  grid-template-columns:repeat(var(--catalogue-columns),minmax(0,1fr));
  grid-auto-rows:var(--catalogue-row);
  gap:14px;
}
.catalogue-image { flex:none; width:100%; overflow:hidden; border-bottom:1px solid #f4af8a38; background:linear-gradient(155deg,#302331 0%,#201722 48%,#110e13 100%); height:144px }
.catalogue-image img { width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; object-position:center }
.catalogue-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; min-height:0; padding:9px 12px 10px; position:relative }
.catalogue-project { display:flex; flex-direction:column; height:100%; overflow:hidden }
.catalogue-copy .eyebrow { margin:0 0 3px; font-size:11px }
.catalogue-title h2 { font-size:calc(1em - 2pt) }
.catalogue-title { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; font-size:clamp(16px,1.5vw,21px) }
.catalogue-title .catalogue-cta { flex:none; width:1em; height:1em; color:var(--peach) }
.catalogue-project:hover .catalogue-cta,.catalogue-project:focus-visible .catalogue-cta { color:var(--text) }
.catalogue-pagination { display:flex; align-items:center; justify-content:center; gap:18px; margin:20px 0; color:var(--text) }
.catalogue-pagination[hidden] { display:none }
.catalogue-pagination span { min-width:7ch; text-align:center; font-variant-numeric:tabular-nums }
.catalogue-pagination button { min-height:34px; width:34px; padding:0; background:var(--plum); color:var(--text); cursor:pointer }
.catalogue-pagination button:disabled { opacity:.4; cursor:default; border-color:var(--line) }
@media(max-width:1024px), (max-width:1400px) and (pointer:coarse) {
  .catalogue-grid { --catalogue-columns:2 }
}
@media(max-width:600px) {
  .catalogue-grid { --catalogue-columns:1; --catalogue-row:238px }
  .catalogue-image { height:160px }
}

/* Fiches projet et modales */
.portfolio-page .portfolio-intro { background:none }
.case-content { padding-bottom:var(--section-space) }
.case-overview { margin:0; font:inherit }
@media(min-width:1025px) {
  .case-overview { max-width:75% }
}
.case-gallery { margin-top:15px }
.case-media { columns:2; column-gap:28px }
.case-media:has(> :only-child) { columns:1; max-width:820px }
.case-media figure { width:fit-content; max-width:100%; margin:0 0 28px; break-inside:avoid; overflow:hidden }
.case-media img { width:auto; max-width:100%; height:auto }
@media(max-width:560px) {
  .case-media { columns:1 }
}

html:has(.project-screen[open]) { overflow:hidden }
.project-screen {
  --project-bottom:30px;
  position:fixed; inset:var(--project-top,12px) 0 var(--project-bottom); box-sizing:border-box;
  height:calc(100dvh - var(--project-top,12px) - var(--project-bottom)); max-width:none; max-height:none;
  margin:0 auto; padding:0; border:1px solid var(--line); border-radius:17px; overflow-y:auto; overscroll-behavior:contain;
  background:var(--base); color:var(--text); box-shadow:0 13px 36px #0009,0 12px 26px -10px #f4af8a60,0 5px 14px -7px #f4af8a45;
}
.project-screen[open] { display:flex; flex-direction:column }
.project-screen.project-screen-presentation { --project-top:60px; inset:60px 60px var(--project-bottom); width:auto; height:calc(100dvh - 60px - var(--project-bottom)); margin:0 }
.project-screen::backdrop { background:#100c11c9 }
.project-screen-bar {
  position:sticky; top:0; z-index:2; background:#1e171ff2;
  border-bottom:1px solid var(--line); backdrop-filter:blur(12px);
}
.project-screen-nav { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:62px; padding:10px 0 }
.project-screen-heading { display:flex; align-items:center; gap:24px; min-width:0; flex:1 }
.project-screen-heading h1 { margin:0; font-size:calc(clamp(24px,3vw,44px) - 3pt); color:var(--peach); line-height:1.1 }
.project-screen-meta { min-width:0; display:grid; gap:3px; flex:1; overflow-wrap:anywhere }
.project-screen-category { justify-self:start; border-radius:5px; padding:2px 7px; font-size:11px; line-height:1.4; background:#55a9bc26; color:#55a9bc }
.project-screen-meta .case-overview { max-width:none; margin:0 }
.project-screen-actions { flex-shrink:0 }
.project-screen-actions,.project-screen-browse { display:flex; align-items:center; gap:8px }
.project-screen-browse[hidden] { display:none }
.project-screen-browse button:disabled { opacity:.38; cursor:default }
.project-screen-nav button { width:44px; height:44px; padding:0; border-radius:50%; color:var(--text); background:transparent; cursor:pointer }
.project-screen-content { position:relative; isolation:isolate; flex:1; display:grid }
.project-screen-outgoing { position:absolute; z-index:1; inset:0 0 auto; pointer-events:none }
.project-screen-browse button[aria-pressed="true"] { color:var(--peach); border-color:var(--peach) }
.project-screen .work { border-top:0; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch }
.project-screen .case-content { padding:15px 0; min-width:0; align-self:stretch; display:flex; align-items:flex-start; justify-content:center }
.project-screen .case-content:has(figure:only-child) { align-items:center }
.project-screen .case-gallery { margin-top:0; width:100% }
.project-screen .case-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; columns:auto; max-width:none }
.project-screen .case-media figure { margin:0; width:100%; min-width:0; aspect-ratio:4/3; display:flex; justify-content:center; align-items:center }
.project-screen .case-media img { width:100%; height:100%; max-height:100%; object-fit:contain }
.project-screen .case-media figure:only-child { grid-column:1 / -1; width:calc((100% - 15px) / 2); justify-self:center }
.project-screen .case-media figure:last-child { margin-bottom:0 }
.project-screen .work > .case-content,
.project-screen .project-screen-nav { width:auto; margin-left:15px; margin-right:15px }
@media(max-width:900px) {
  .project-screen,.project-screen.project-screen-presentation { inset:15px 15px var(--project-bottom); width:calc(100% - 30px); height:calc(100dvh - 15px - var(--project-bottom)); margin:0 }
  .project-screen-nav { flex-wrap:wrap }
  .project-screen-heading { flex:1 1 100%; gap:15px }
  .project-screen-heading h1 { font-size:20px }
  .project-screen-actions { margin-left:auto }
}
body:has(.project-screen[open]) :is(.project-wall .wall-track,.client-track) { animation-play-state:paused }

@media(max-width:560px) {
  .project-screen .case-media { grid-template-columns:minmax(0,1fr) }
  .project-screen .case-media figure:only-child { width:100% }
}