/* ==========================================================================
   Oh my feed — Portfolio (galerie /realisations/ et pages projet)
   Compose avec les tokens de ds.css et les composants de site.css
   ========================================================================== */
main [id] { scroll-margin-top: 96px; }
:root { --pf-r: 22px; } /* arrondi commun à toutes les photos du portfolio */
.crumbs { margin-bottom: 28px; font-size: 13.5px; color: var(--ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); }
.crumbs a { transition: color .25s; }
.crumbs a:hover { color: var(--terra-deep); }
.crumbs [aria-current] { color: var(--terra-deep); font-weight: 500; }
.pic { position: relative; overflow: hidden; background: #CDBBA8; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }

/* ---------- Introduction ---------- */
.pf-hero { padding-top: clamp(128px, 13vw, 176px); padding-bottom: clamp(40px, 5vw, 64px); }
.pf-hero .grid { align-items: end; row-gap: 40px; }
.pf-hero-text { grid-column: 1 / 8; }
.pf-hero h1 { color: var(--terra); }
.pf-hero h1 .em { position: relative; display: inline-block; white-space: nowrap; }
.pf-hero h1 .scribble { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .26em; color: var(--terra); overflow: visible; }
.pf-hero .lead { margin-top: 28px; max-width: 50ch; }
.pf-hero-aside { grid-column: 9 / 13; color: var(--ink-2); font-size: 15px; }
/* Éventail de tirages : trois couvertures posées comme des photos papier */
.pf-fan { position: relative; height: clamp(190px, 17vw, 250px); margin-bottom: 36px; }
.pf-print { position: absolute; bottom: 0; width: 46%; aspect-ratio: 4 / 5; padding: 7px 7px 22px; background: #fff; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(38,32,28,.08), 0 18px 34px -18px rgba(38,32,28,.4); transform: rotate(var(--r)) translateY(var(--y, 0));
  transition: transform .6s var(--ease-out); }
.pf-print picture, .pf-print img { display: block; width: 100%; height: 100%; }
.pf-print img { object-fit: cover; border-radius: 5px; }
.pf-print--1 { left: 0; --r: -8deg; --y: 6px; }
.pf-print--2 { left: 27%; --r: 2deg; z-index: 2; --y: -10px; }
.pf-print--3 { left: 54%; --r: 9deg; --y: 4px; }
.pf-hero-aside:hover .pf-print--1 { transform: rotate(-11deg) translate(-8px, 4px); }
.pf-hero-aside:hover .pf-print--3 { transform: rotate(12deg) translate(8px, 2px); }
.pf-hero-aside p + p { margin-top: 12px; }
.pf-hero-aside .link { margin-top: 18px; justify-self: start; }

/* ---------- Filtres ---------- */
.pf-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 22px 0; border-top: 1px solid var(--line); }
.pf-filters .micro { margin-right: 8px; color: var(--ink-2); }
.pf-filter { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line); font: 500 14.5px/1 var(--f-text); color: var(--ink);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease); }
.pf-filter sup { font-size: 11px; color: var(--ink-2); transition: color .3s var(--ease); }
.pf-filter:hover { border-color: var(--terra); color: var(--terra-deep); }
.pf-filter:active { transform: scale(.97); }
.pf-filter[aria-pressed="true"] { background: var(--terra-deep); border-color: var(--terra-deep); color: var(--on-dark); }
.pf-filter[aria-pressed="true"] sup { color: rgba(244,239,232,.85); }
.pf-count { margin-left: auto; font-size: 14px; color: var(--ink-2); }

/* ---------- Galerie ---------- */
.pf-gallery { padding-bottom: clamp(72px, 9vw, 120px); }
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 21vw, 310px); grid-auto-flow: dense; gap: var(--gutter); }
.pf-item { position: relative; transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.pf-item.is-tall { grid-row: span 2; }
.pf-item.is-wide { grid-column: span 2; }
.pf-item.is-out { opacity: 0; transform: scale(.97); }
.pf-item[hidden] { display: none; }
.pf-card { position: absolute; inset: 0; display: block; border-radius: var(--pf-r); overflow: hidden; isolation: isolate; }
.pf-card .pic { position: absolute; inset: 0; }
.pf-card img { transition: transform 1.1s var(--ease-out); }
.pf-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(26,19,15,.84) 0%, rgba(26,19,15,.45) 38%, rgba(26,19,15,0) 70%);
  opacity: 0; transition: opacity .5s var(--ease); }
.pf-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; padding: 24px 24px 22px; color: #fff;
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.pf-info h2 { font: 500 clamp(21px, 1.8vw, 26px)/1.2 var(--f-display); letter-spacing: -.01em; }
.pf-info p { margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.9); }
.pf-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--on-dark); color: var(--terra-deep); font-size: 17px;
  transform: rotate(-45deg) scale(.85); transition: transform .5s var(--ease-out); }
.pf-card:hover img, .pf-card:focus-visible img { transform: scale(1.05); }
.pf-card:hover::after, .pf-card:focus-visible::after { opacity: 1; }
.pf-card:hover .pf-info, .pf-card:focus-visible .pf-info { opacity: 1; transform: none; }
.pf-card:hover .pf-arrow, .pf-card:focus-visible .pf-arrow { transform: rotate(-45deg) scale(1); }
.pf-card:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }
.pf-empty { padding: 48px 0; color: var(--ink-2); }
/* Écrans tactiles et mobiles : informations toujours visibles */
@media (hover: none), (max-width: 640px) {
  .pf-card::after { opacity: .9; }
  .pf-info { opacity: 1; transform: none; }
  .pf-arrow { transform: rotate(-45deg) scale(.85); }
}

/* ---------- Bandeau maillage ---------- */
.pf-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.pf-link { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid transparent;
  transition: transform .45s var(--ease-out), border-color .35s var(--ease), box-shadow .45s var(--ease-out); }
.pf-link:hover, .pf-link:focus-visible { transform: translateY(-4px); border-color: rgba(197,101,79,.45); box-shadow: 0 22px 44px -30px rgba(38,32,28,.4); }
.pf-link-ic { width: 36px; height: 36px; margin-bottom: 22px; color: var(--terra); }
.pf-link-ic path, .pf-link-ic circle { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pf-link .micro { color: var(--terra-deep); }
.pf-link b { margin-top: 10px; font: 500 clamp(21px, 1.8vw, 25px)/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.pf-link-txt { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pf-link-go { margin-top: auto; padding-top: 26px; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--terra-deep); }
.pf-link-go .arr { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; transition: transform .4s var(--ease-out), background-color .3s, color .3s; }
.pf-link:hover .pf-link-go .arr { transform: translateX(4px); background: var(--terra-deep); color: var(--on-dark); border-color: var(--terra-deep); }
.pf-link--accent { background: var(--terra-deep); }
.pf-link--accent .pf-link-ic, .pf-link--accent .micro, .pf-link--accent b, .pf-link--accent .pf-link-go { color: var(--on-dark); }
.pf-link--accent .pf-link-txt { color: rgba(244,239,232,.88); }
.pf-link--accent:hover { border-color: transparent; }
.pf-link--accent:hover .pf-link-go .arr { background: var(--on-dark); color: var(--terra-deep); border-color: var(--on-dark); }

/* ==========================================================================
   Page projet
   ========================================================================== */
.pj-hero { padding-top: clamp(124px, 12vw, 168px); }
.pj-hero .grid { align-items: end; row-gap: 36px; }
.pj-head { grid-column: 1 / 8; }
.pj-hero--solo .pj-head { grid-column: 1 / 11; }
.pj-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pj-cats a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(197,101,79,.1);
  font: 500 12.5px/1 var(--f-text); color: var(--terra-deep); transition: background-color .3s, color .3s; }
.pj-cats a:hover { background: var(--terra-deep); color: var(--on-dark); }
.pj-head h1 { color: var(--terra); overflow-wrap: break-word; }
@media (max-width: 400px) { .pj-head h1 { font-size: clamp(32px, 10vw, 40px); } }
.pj-lead { margin-top: 22px; max-width: 46ch; color: var(--ink); }
.pj-side { grid-column: 9 / 13; display: grid; gap: 26px; }
.pj-meta { display: grid; gap: 22px; }
.pj-meta dt { font: 500 11.5px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pj-meta dd { margin-top: 8px; font: 400 16px/1.45 var(--f-text); color: var(--ink); }
.pj-services { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pj-services li { display: inline-flex; align-items: center; gap: 8px; }
.pj-services li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--terra); }
.pj-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line);
  font: 500 14px/1 var(--f-text); color: var(--ink); transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease); }
.pj-link svg { width: 18px; height: 18px; fill: none; stroke: var(--terra); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.pj-link-ext { color: var(--terra-deep); transition: transform .35s var(--ease-out), color .3s; }
.pj-link:hover { border-color: var(--terra-deep); background: var(--terra-deep); color: var(--on-dark); }
.pj-link:hover svg { stroke: var(--on-dark); }
.pj-link:hover .pj-link-ext { color: var(--on-dark); transform: translate(2px, -2px); }
.pj-cover-wrap { margin-top: clamp(40px, 5vw, 72px); }
.pj-cover { aspect-ratio: 16 / 8; border-radius: var(--pf-r); }

/* Chapitres : texte court + image, en alternance */
.pj-ch { padding-top: clamp(64px, 8vw, 120px); }
.pj-ch-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 36px; align-items: center; }
.pj-ch-text { grid-column: 1 / 6; }
.pj-ch-media { grid-column: 7 / 12; }
.pj-ch--flip .pj-ch-text { grid-column: 8 / 13; order: 2; }
.pj-ch--flip .pj-ch-media { grid-column: 2 / 7; order: 1; }
.pj-ch--flip .pj-ch-media.is-land { grid-column: 1 / 8; }
.pj-ch--flip:has(.is-land) .pj-ch-text { grid-column: 9 / 13; }
.pj-ch:not(.pj-ch--flip):has(.is-land) .pj-ch-text { grid-column: 1 / 5; }
.pj-ch--solo .pj-ch-text { grid-column: 1 / 8; }
.pj-ch--flip.pj-ch--solo .pj-ch-text { grid-column: 6 / 13; order: 0; }
.pj-num { display: block; font: italic 600 15px/1 var(--f-display); letter-spacing: .06em; color: var(--terra); }
.pj-ch-text h2 { margin-top: 12px; font: 300 clamp(28px, 2.7vw, 40px)/1.12 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.pj-ch-text p { margin-top: 18px; font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.pj-points { margin-top: 18px; display: grid; gap: 8px; }
.pj-points li { position: relative; padding-left: 22px; color: var(--ink); }
.pj-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1.5px; background: var(--terra); }
.pj-ch-media img, .pj-row img, .pj-row video, .pj-ch-media video { display: block; width: 100%; height: auto; border-radius: var(--pf-r); }
.pj-ch-media.is-land img { aspect-ratio: auto; max-height: none; }
.pj-ch-media:not(.is-land) img { aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; object-position: var(--pos, center); }

/* Le projet en images */
.pj-story { padding-top: clamp(72px, 9vw, 128px); }
.pj-story-head { margin-bottom: clamp(28px, 3vw, 44px); }
.pj-story-head .h2 { margin-top: 12px; color: var(--ink); }
.pj-story-head .h2 .em { color: var(--terra); }
.pj-row { margin-bottom: var(--gutter); }
.pj-row--full img { max-height: 86vh; object-fit: cover; }
.pj-row--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.pj-row--pair figure:nth-child(2) { margin-top: clamp(32px, 6vw, 96px); }
.pj-row--pair img, .pj-row--solo img { aspect-ratio: 4 / 5; object-fit: cover; }
.pj-row--solo { width: min(100%, 560px); margin-left: auto; margin-right: auto; }
.pj-row img, .pj-ch-media img { transition: transform 1s var(--ease-out); }
.pj-row figure, .pj-row.pj-row--full, .pj-row.pj-row--solo, .pj-ch-media { overflow: hidden; border-radius: var(--pf-r); }
.pj-row figure:hover img, .pj-row--full:hover img, .pj-row--solo:hover img { transform: scale(1.025); }
.pj-quote { margin-top: clamp(64px, 8vw, 112px); }
.pj-quote { padding-block: clamp(48px, 5vw, 72px); background: var(--blush); }
.pj-quote blockquote { max-width: 60ch; font: 300 clamp(21px, 1.9vw, 28px)/1.38 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.pj-quote figcaption { margin-top: 20px; font-size: 14.5px; color: var(--ink-2); }
.pj-quote figcaption b { color: var(--ink); font-weight: 600; }
.pj-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding-block: clamp(48px, 6vw, 80px); }
.pj-nav a { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 14px; border-radius: 20px; border: 1px solid var(--line);
  transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.pj-nav a:hover { border-color: rgba(197,101,79,.45); transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(38,32,28,.35); }
.pj-nav .pic { aspect-ratio: 1; border-radius: 12px; }
.pj-nav .micro { color: var(--ink-2); }
.pj-nav b { display: block; margin-top: 8px; font: 500 21px/1.2 var(--f-display); color: var(--ink); }
.pj-nav .next { grid-template-columns: 1fr 96px; text-align: right; }
.pj-nav .next .pic { order: 2; }
.pj-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 28px 0 clamp(72px, 8vw, 112px); border-top: 1px solid var(--line); }
.pj-end p { font: 300 clamp(22px, 2vw, 28px)/1.3 var(--f-display); color: var(--ink); }
.pj-end p .em { color: var(--terra-deep); }
.pj-end div { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* =================== Tablette =================== */
@media (max-width: 1080px) {
  .pj-head, .pj-hero--solo .pj-head { grid-column: 1 / -1; }
  .pj-side { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: end; padding-top: 22px; border-top: 1px solid var(--line); }
  .pf-links { grid-template-columns: 1fr 1fr; }
  .pf-link--accent { grid-column: 1 / -1; }
  .pf-hero-text { grid-column: 1 / -1; }
  .pf-hero-aside { grid-column: 1 / 9; display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: end; }
  .pf-fan { margin-bottom: 0; height: 170px; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 34vw, 340px); }
}
/* =================== Mobile =================== */
@media (max-width: 640px) {
  .pj-side { grid-template-columns: 1fr; }
  .pj-cover { aspect-ratio: 4 / 3; }
  .pj-row--pair { grid-template-columns: 1fr; }
  .pj-row--pair figure:nth-child(2) { margin-top: 0; }
  .pf-hero { padding-top: 104px; }
  .pf-hero h1 { font-size: clamp(36px, 11vw, 44px); }
  .pf-hero-aside { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 24px; }
  .pf-fan { width: 240px; height: 160px; }
  .pf-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .pf-filters::-webkit-scrollbar { display: none; }
  .pf-filter { flex: none; }
  .pf-filters .micro, .pf-count { display: none; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px; }
  .pf-item, .pf-item.is-tall, .pf-item.is-wide { grid-row: auto; grid-column: auto; aspect-ratio: 4 / 5; }
  .pf-item.is-wide { aspect-ratio: 4 / 3; }
  .pf-info { padding: 18px; }
  .pf-links { grid-template-columns: 1fr; gap: 14px; }
  .pj-hero { padding-top: 104px; }
  .pj-nav { grid-template-columns: 1fr; }
  .pj-nav a, .pj-nav .next { grid-template-columns: 72px 1fr; text-align: left; }
  .pj-nav .next .pic { order: 0; }
}
@media (max-width: 900px) {
  .pj-ch-text, .pj-ch--flip .pj-ch-text, .pj-ch--solo .pj-ch-text, .pj-ch--flip.pj-ch--solo .pj-ch-text { grid-column: 1 / -1; order: 0; }
  .pj-ch-media, .pj-ch--flip .pj-ch-media { grid-column: 1 / -1; order: 1; }
  .pj-ch--flip:has(.is-land) .pj-ch-text, .pj-ch:not(.pj-ch--flip):has(.is-land) .pj-ch-text { grid-column: 1 / -1; }
  .pj-ch-media.is-land, .pj-ch--flip .pj-ch-media.is-land { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .pf-grid { grid-auto-rows: clamp(200px, 40vw, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-item, .pf-card img, .pf-info, .pf-arrow, .pf-card::after { transition: none; }
}