/* Styles propres à la page « projets » (repris de la maquette). */
/* ---- Projets : « Ce qu'on a construit. » ------------------------------------
   Ouverture : le cadre du logo sert de planche-contact (les projets y défilent),
   puis les cinq lettres tombent dedans : chaque pièce devient un filtre.
   Ensuite : filtres collants, grille, fiche détaillée, barres par métier.       */
.pj-hero { --len: 1.8; }
.pj-hero .pin-stage { background: #fff; display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 20px;
  padding: calc(var(--bar-h) + 16px) max(20px, env(safe-area-inset-right, 0px)) calc(64px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
@media (min-width: 900px) { .pj-hero .pin-stage { padding-left: 64px; padding-right: 64px; padding-bottom: 48px; row-gap: 28px; } }
.pj-box { position: relative; min-height: 0; display: grid; place-items: center; }
.pj-frame { --copy: 290px; position: relative; aspect-ratio: 234 / 113;
  width: min(100%, 900px, max(240px, calc((100svh - var(--bar-h) - var(--copy)) * 2.07))); }
@media (min-width: 900px) { .pj-frame { --copy: 330px; } }
.pj-frame .cadre { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pj-sheet, .pj-veil { position: absolute; left: 7.69%; right: 7.69%; top: 15.93%; bottom: 15.93%; }
.pj-sheet { overflow: hidden; container-type: size; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pj-row { display: flex; flex: none; width: max-content; height: calc((100cqh - 6px) / 2); animation: pjMarq var(--d, 80s) linear infinite; }
@media (min-width: 900px) { .pj-row { height: calc((100cqh - 12px) / 3); } }
.pj-row.r1, .pj-row.r3, .pj-row.r5, .pj-row.r7 { animation-direction: reverse; }
.pj-row.r0 { --d: 92s; } .pj-row.r1 { --d: 84s; } .pj-row.r2 { --d: 100s; } .pj-row.r3 { --d: 76s; } .pj-row.r4 { --d: 88s; } .pj-row.r5 { --d: 96s; } .pj-row.r6 { --d: 80s; } .pj-row.r7 { --d: 104s; }
@keyframes pjMarq { to { transform: translateX(-50%); } }
.mv-paused .pj-row { animation-play-state: paused; }
.pj-tl { position: relative; flex: none; height: 100%; aspect-ratio: 1; margin-right: 6px; overflow: hidden; }
.pj-tl .pj-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pj-veil { background: rgba(255,255,255,.86); opacity: 0; }
.pj-logo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pj-logo .pc { cursor: pointer; outline: none; }
.pj-logo .pc:focus-visible > * { stroke: var(--encre); stroke-width: 3; }
html:not(.is-static) .pj-logo .pc { opacity: 0; }
.pj-copy, .pj-msg { grid-row: 2; grid-column: 1; min-width: 0; }
.pj-copy { display: grid; gap: 12px; }
.pj-copy h1 { display: grid; gap: 10px; }
.pj-copy .giant { font-size: clamp(2.8rem, 12.5vw, 7rem); color: var(--encre); }
.pj-copy .lead { font-size: 1rem; max-width: 34em; }
@media (min-width: 900px) { .pj-copy .lead { font-size: var(--t-lead); } }
.pj-count { font: 500 .8125rem/1.3 var(--f-mono); color: var(--encre-2); }
.pj-msg { align-self: end; display: grid; gap: 10px; visibility: hidden; }
.pj-msg__t { font: 750 clamp(2rem, 8.6vw, 4.4rem)/.92 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.pj-msg__s { font-size: 1rem; color: var(--encre-2); max-width: 30em; }
.pj-msg__s b { color: var(--encre); font-weight: 600; }

/* Liste : filtres collants, grille */
.pj-list { padding-top: clamp(48px, 8vw, 96px); }
.pj-list__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.pj-status { font: 500 .875rem/1.3 var(--f-mono); color: var(--encre-2); }
.pj-filters { position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 18px calc(-1 * max(20px, env(safe-area-inset-left, 0px))) 0; padding: 10px max(20px, env(safe-area-inset-left, 0px));
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.pj-filters::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .pj-filters { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); } }
@media (min-width: 768px) { .pj-filters { margin-left: -40px; margin-right: -40px; padding-left: 40px; padding-right: 40px; flex-wrap: wrap; overflow: visible; } }
@media (min-width: 1200px) { .pj-filters { margin-left: -64px; margin-right: -64px; padding-left: 64px; padding-right: 64px; } }
.pj-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); background: #fff; color: var(--encre); font: 600 .875rem/1 var(--f-text); cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.pj-chip .ic { width: 16px; height: 16px; flex: none; color: var(--encre); }
.pj-chip .n { font: 500 .75rem/1 var(--f-mono); color: var(--encre-2); }
.pj-chip:hover { border-color: var(--encre); }
.pj-chip[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.pj-chip[aria-pressed="true"] .n { color: #A9B4BC; }
.pj-chip[aria-pressed="true"] .ic { color: #fff; }
.pj-grid { display: grid; grid-auto-flow: row dense; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; margin-top: 24px; }
@media (min-width: 700px) { .pj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; margin-top: 32px; } }
@media (min-width: 1240px) { .pj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pj-card { min-width: 0; }
.pj-open { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.pj-cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--cvbg); }
@media (min-width: 700px) { .pj-cover { aspect-ratio: 4 / 3; } }
.pj-glyph { position: absolute; right: -6%; bottom: -32%; height: 132%; width: auto; transition: transform .7s var(--ease); }
.cv-n1 .pj-glyph { right: auto; left: 34%; bottom: auto; top: -44%; height: 122%; }
.cv-n2 .pj-glyph { right: 10%; bottom: -8%; height: 84%; }
.pj-glyph.cv-point { height: 58%; bottom: -10%; right: 8%; }
.cv-n1 .pj-glyph.cv-point { top: -18%; left: 44%; height: 58%; }
.pj-cover .pj-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pj-open:hover .pj-img, .pj-open:focus-visible .pj-img, .pj-open:hover .pj-glyph { transform: scale(1.05); }
.pj-tag { position: absolute; left: 8px; top: 8px; display: none; padding: 4px 6px; font: 500 .6875rem/1 var(--f-mono); background: rgba(255,255,255,.9); color: var(--encre); }
.pj-card.is-fallback .pj-tag, .pj-dlg__cover .is-fallback .pj-tag { display: block; }
.pj-body { display: grid; gap: 6px; }
.pj-title { font: 600 .9375rem/1.25 var(--f-text); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 700px) { .pj-title { font-size: 1.0625rem; } }
.pj-open:hover .pj-title { text-decoration: underline; text-underline-offset: 3px; }
.pj-meta { font: 500 .75rem/1.35 var(--f-mono); color: var(--encre-2); }
.pj-dots { display: flex; gap: 4px; }
.pj-dots i { width: 9px; height: 9px; background: var(--c); }
.pj-cta { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: 28px 22px 26px; background: var(--encre); color: #fff; }
@media (min-width: 700px) { .pj-cta { grid-column: span 2; padding: 36px 32px; } }
.pj-cta::after { content: ""; position: absolute; right: -28px; bottom: -28px; width: 120px; height: 58px; border: 10px solid rgba(255,255,255,.12); border-left-color: transparent; }
.pj-cta__t { position: relative; font: 750 clamp(1.7rem, 6.4vw, 2.6rem)/.95 var(--f-display); letter-spacing: -.03em; max-width: 14em; }
.pj-cta__s { position: relative; color: #A9B4BC; max-width: 34em; }
.pj-cta .btn { position: relative; justify-self: start; margin-top: 6px; --b-bg: #fff; --b-fg: var(--encre); }
.pj-note { margin-top: 32px; max-width: 60em; }

/* Bas de page : ce que chaque pièce a construit */
.pj-sum__grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .pj-sum__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; } .pj-sum__cta { grid-column: 2; } }
.pj-sum__head { display: grid; gap: 14px; }
.pj-sum__head .lead { font-size: 1rem; }
@media (min-width: 900px) { .pj-sum__head .lead { font-size: var(--t-lead); } }
.pj-bars { display: grid; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.pj-bar-row button, .pj-bar-row .row-in { width: 100%; min-height: 44px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ic nm ct" "tr tr tr";
  align-items: center; gap: 10px 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--encre); text-align: left; font: inherit; cursor: pointer; }
@media (min-width: 700px) { .pj-bar-row button, .pj-bar-row .row-in { grid-template-columns: 24px minmax(0, 15em) minmax(0, 1fr) 4.5em; grid-template-areas: "ic nm tr ct"; } }
.pj-bar-row .row-in { cursor: default; }
.pj-bar-row .ic { grid-area: ic; width: 22px; height: 22px; }
.pj-bar-row .nm { grid-area: nm; font-weight: 600; font-size: .9375rem; }
.pj-bar-row .tr { grid-area: tr; position: relative; height: 14px; background: rgba(18,26,33,.07); }
.pj-bar-row .tr i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--k, 0) * 100%); background: var(--c); transform-origin: 0 50%; }
.pj-bar-row .ct { grid-area: ct; font: 600 1.25rem/1 var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.pj-bar-row button:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.pj-bar-row.is-soon .tr { height: 2px; background: repeating-linear-gradient(90deg, #8A949C 0 6px, transparent 6px 12px); }
.pj-bar-row.is-soon .ct { font: 500 .8125rem/1 var(--f-mono); color: var(--encre-2); }
.pj-bar-row.is-soon .nm { color: var(--encre-2); }
.pj-sum__cta { display: grid; gap: 16px; padding-top: 8px; }
.pj-sum__cta .t3 { max-width: 20em; }

/* Fiche détaillée : feuille en bas sur téléphone, fenêtre au centre sur ordinateur */
html.pj-lock { overflow: hidden; }
.pj-dlg { width: 100%; max-width: 100%; max-height: 90svh; margin: auto 0 0; padding: 0; border: 0; background: #fff; color: var(--encre); border-radius: 16px 16px 0 0; overflow: hidden; }
.pj-dlg[open] { animation: pjUp .45s var(--ease); }
.pj-dlg::backdrop { background: rgba(18,26,33,.58); }
@keyframes pjUp { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 760px) { .pj-dlg { width: min(760px, 92vw); max-height: 88svh; margin: auto; border-radius: 4px; } }
.pj-dlg__in { max-height: inherit; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pj-dlg__x { position: absolute; z-index: 2; right: 12px; top: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--encre); font: 400 1.75rem/1 var(--f-text); cursor: pointer; box-shadow: 0 4px 16px -6px rgba(0,0,0,.35); }
.pj-dlg__cover .pj-cover { aspect-ratio: 16 / 9; }
.pj-dlg__body { display: grid; gap: 14px; padding: 20px 20px 28px; }
@media (min-width: 760px) { .pj-dlg__body { padding: 28px 36px 36px; } }
.pj-dlg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-mchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); font: 600 .75rem/1 var(--f-text); }
.pj-mchip i { width: 9px; height: 9px; background: var(--c); }
.pj-dlg__t { font: 750 clamp(1.6rem, 6vw, 2.4rem)/1 var(--f-display); letter-spacing: -.03em; padding-right: 8px; }
.pj-dlg__meta { font: 500 .8125rem/1.4 var(--f-mono); color: var(--encre-2); }
.pj-dlg__accord { padding: 10px 12px; background: #FFF6D6; border-left: 3px solid var(--jaune); font-size: .875rem; }
.pj-dlg__sum { font-size: 1.0625rem; line-height: 1.6; }
.pj-dlg__team { font-size: .9375rem; color: var(--encre-2); }
.pj-dlg__team b { color: var(--encre); font-weight: 600; }
.pj-dlg__links { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.pj-dlg__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--encre); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.pj-dlg__links a::after { content: "↗"; font-weight: 400; text-decoration: none; }
.pj-dlg__cta { display: grid; gap: 12px; margin-top: 6px; padding: 18px; background: var(--brume); }
.pj-dlg__cta p { font-size: .9375rem; }
.pj-dlg__cta .btn { justify-self: start; }

/* Rendu posé (mouvement réduit, sans GSAP) */
.is-static .pj-hero .pin-stage { display: grid; grid-template-rows: auto auto auto; gap: 28px; }
.is-static .pj-row { animation: none; }
.is-static .pj-veil { opacity: 1; }
.is-static .pj-copy, .is-static .pj-msg { grid-row: auto; }
.is-static .pj-msg { visibility: visible; }
.is-static .pj-frame { width: min(100%, 900px); }