/* Bandito Studio — portfolio : page des clients (mur de logos) et pages projet animées au défilement
   Les scènes reçoivent --p (0 → 1) depuis pf.js : 0 quand la scène commence, 1 quand elle se termine. */

/* ================= Page portfolio : emplacement 3D + mur de logos ================= */
.pf-hero{position:relative;min-height:100vh;min-height:100svh;padding:clamp(110px,16vh,160px) var(--gut) clamp(40px,7vh,70px);display:grid;grid-template-rows:auto 1fr;gap:clamp(24px,4vh,40px)}
.pf-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,7vw,112px);line-height:.98;letter-spacing:-.02em;max-width:12ch}
.pf-hero .lead{max-width:560px;margin-top:22px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--ink-2)}
/* emplacement réservé à la future animation 3D isométrique */
.pf-stage{position:relative;min-height:clamp(260px,42vh,520px);border-radius:8px;overflow:hidden;
  background:
    repeating-linear-gradient(30deg,transparent 0 46px,rgba(0,0,0,.045) 46px 47px),
    repeating-linear-gradient(150deg,transparent 0 46px,rgba(0,0,0,.045) 46px 47px),
    linear-gradient(180deg,rgba(255,255,255,.6),rgba(246,246,246,.9))}
.pf-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.pf-stage__note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a7a7a7;white-space:nowrap}

.pf-wall{padding:clamp(60px,10vh,110px) var(--gut) clamp(80px,12vh,130px)}
.pf-wall__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,5vh,52px)}
.pf-wall__head h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,56px);line-height:1.05}
.pf-wall__head p{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pf-logos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pf-logos li:nth-child(4),.pf-logos li:nth-child(5){grid-column:span 1}
.pf-logo{position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#fff;border:1px solid #ececec;isolation:isolate;
  opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.pf-logo.in{opacity:1;transform:none}
.pf-logo__cover{position:absolute;inset:0;background:var(--c1) center/cover no-repeat;clip-path:circle(0% at var(--mx,50%) var(--my,50%));transition:clip-path .7s cubic-bezier(.6,0,.2,1);z-index:-1}
.pf-logo__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.pf-logo__mark{position:absolute;inset:18% 16% 26%;display:grid;place-items:center;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s}
.pf-logo__mark img{max-width:100%;max-height:100%;object-fit:contain}
.pf-logo__mark .on-dark{display:none}
.pf-logo__meta{position:absolute;left:20px;right:20px;bottom:16px;display:flex;justify-content:space-between;align-items:end;gap:12px}
.pf-logo__name{font-family:var(--display);font-size:clamp(17px,1.4vw,22px);color:var(--ink);transition:color .4s}
.pf-logo__tags{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:right;transition:color .4s}
.pf-logo__go{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:var(--ink);font-size:18px;transform:scale(0) rotate(-45deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){
  .pf-logo:hover .pf-logo__cover,.pf-logo:focus-visible .pf-logo__cover{clip-path:circle(150% at var(--mx,50%) var(--my,50%))}
  .pf-logo:hover .pf-logo__mark,.pf-logo:focus-visible .pf-logo__mark{transform:translateY(-6%) scale(.86)}
  .pf-logo:hover .pf-logo__mark .on-light,.pf-logo:focus-visible .pf-logo__mark .on-light{display:none}
  .pf-logo:hover .pf-logo__mark .on-dark,.pf-logo:focus-visible .pf-logo__mark .on-dark{display:block}
  .pf-logo:hover .pf-logo__name,.pf-logo:hover .pf-logo__tags,.pf-logo:focus-visible .pf-logo__name,.pf-logo:focus-visible .pf-logo__tags{color:#fff}
  .pf-logo:hover .pf-logo__go,.pf-logo:focus-visible .pf-logo__go{transform:none}
}
@media(max-width:900px){.pf-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pf-logos{grid-template-columns:1fr}.pf-logo__tags{display:none}}

/* ================= Pages projet ================= */
.pj{--c1:#222;--c2:#555;--c3:#ddd;--hero:#fff;--on:#fff;background:#fff}
.pj img{display:block;max-width:100%}
.pj .mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* --- hero : la plaque du logo rétrécit, la couleur de la marque envahit l'écran --- */
.pj-hero{height:230vh;position:relative}
.pj-hero__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--hero)}
.pj-hero__wash{position:absolute;inset:0;background:var(--c1);clip-path:circle(calc(var(--p,0) * 160%) at 50% 50%)}
.pj-hero__plate{position:relative;z-index:2;width:min(70vw,720px);aspect-ratio:16/9;display:grid;place-items:center;border-radius:10px;
  background:var(--hero);box-shadow:0 30px 80px rgba(0,0,0,calc(var(--p,0) * .35));
  transform:translateY(calc(var(--p,0) * var(--py,-14vh))) scale(calc(1 - var(--p,0) * .52))}
.pj-hero__plate img{width:72%;max-height:72%;object-fit:contain}
.pj-hero__txt{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(30px,8vh,80px);text-align:center;color:var(--on);
  opacity:clamp(0,calc((var(--p,0) - .45) * 3),1);transform:translateY(calc((1 - var(--p,0)) * 60px))}
.pj-hero__txt h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.4vw,104px);line-height:1;letter-spacing:-.02em}
.pj-hero__txt p{max-width:640px;margin:18px auto 0;font-size:clamp(15px,1.2vw,18px);line-height:1.6;opacity:.85}
.pj-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.pj-tags span{padding:7px 14px;border:1px solid currentColor;border-radius:99px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pj-cue{position:absolute;z-index:3;left:50%;bottom:28px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8a;opacity:calc(1 - var(--p,0) * 4)}
.pj-cue i{display:block;margin:8px auto 0;width:1px;height:40px;background:currentColor;animation:pjCue 1.6s ease-in-out infinite;transform-origin:top}
@keyframes pjCue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* --- intro : la phrase s'allume mot à mot --- */
.pj-say{background:var(--c1);color:var(--on);padding:clamp(80px,16vh,170px) var(--gut)}
.pj-say p{max-width:1100px;font-family:var(--display);font-size:clamp(26px,3.4vw,54px);line-height:1.18;letter-spacing:-.01em}
.pj-say .w{opacity:.16;transition:opacity .35s}
.pj-say .w.on{opacity:1}
.pj-say__facts{display:flex;flex-wrap:wrap;gap:12px 48px;margin-top:clamp(40px,7vh,70px);opacity:.8}

/* --- chapitre : en-tête numéroté --- */
.pj-ch{position:relative;background:var(--bg,#fff);color:var(--fg,var(--ink))}
.pj-ch__head{padding:clamp(70px,12vh,130px) var(--gut) clamp(12px,2vh,22px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 60px;align-items:end}
.pj-ch__head .mono{color:var(--accent,var(--c1))}
.pj-ch__head h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.02em;margin-top:10px}
.pj-ch__head p{font-size:clamp(15px,1.15vw,18px);line-height:1.65;opacity:.75;max-width:520px}
@media(max-width:800px){.pj-ch__head{grid-template-columns:1fr}}

/* --- apparitions --- */
.rv{opacity:0;transform:translateY(50px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-clip{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.6,0,.2,1)}
.rv-clip.in{clip-path:inset(0 0 0 0)}

/* --- scène « logo » : déclinaisons qui défilent, écran épinglé --- */
.pj-logos{position:relative}
.pj-logos__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.pj-logos__pane{position:absolute;inset:0;display:grid;place-items:center;background:var(--pbg);clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.pj-logos__pane.on,.pj-logos__pane.past{clip-path:inset(0 0 0 0)}
.pj-logos__pane img{width:min(62vw,700px);max-height:56vh;object-fit:contain;transform:scale(.9);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pj-logos__pane.on img{transform:none}
.pj-logos__pane img.is-tall{width:auto;height:68vh;max-height:none}
.pj-logos__cap{position:absolute;left:var(--gut);bottom:clamp(24px,5vh,48px);color:var(--pfg,#fff)}
.pj-logos__count{position:absolute;right:var(--gut);bottom:clamp(24px,5vh,48px);color:var(--pfg,#fff)}

/* --- palette de la charte --- */
.pj-pal{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));min-height:70vh}
.pj-pal__sw{position:relative;background:var(--sw);color:var(--swfg,#fff);padding:28px clamp(16px,2vw,28px);display:flex;flex-direction:column;justify-content:flex-end;
  transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.6,0,.2,1)}
.pj-pal.in .pj-pal__sw{transform:none}
.pj-pal__sw b{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.6vw,26px)}
.pj-pal__sw span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;margin-top:6px;opacity:.8}
@media(max-width:700px){.pj-pal{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}.pj-pal__sw{min-height:34vh}}

/* --- grilles d'images --- */
.pj-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);padding:0 var(--gut) clamp(70px,12vh,130px)}
.pj-grid figure{grid-column:span var(--s,6);margin:0;border-radius:8px;overflow:hidden;background:var(--tile,#f3f3f3)}
.pj-grid figure.pad{padding:clamp(20px,3vw,48px);display:grid;place-items:center}
.pj-grid img{width:100%;height:100%;object-fit:cover}
.pj-grid figure.pad img,.pj-grid figure.fit img{object-fit:contain}
@media(max-width:800px){.pj-grid figure{grid-column:1/-1}}

/* --- galerie horizontale épinglée --- */
.pj-hz{position:relative}
.pj-hz__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.pj-hz__track{display:flex;gap:clamp(16px,2vw,32px);padding:0 var(--gut);will-change:transform;transform:translateX(calc(var(--p,0) * var(--dx,0px) * -1))}
.pj-hz__it{flex:0 0 auto;height:min(66vh,640px);margin:0;display:flex;flex-direction:column;gap:12px}
.pj-hz__it img{height:100%;width:auto;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.18);background:#fff}
.pj-hz__it figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.pj-hz__bar{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,4vh,36px);height:2px;background:rgba(127,127,127,.25)}
.pj-hz__bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--accent,var(--c1))}
@media(max-width:700px){.pj-hz__it{height:52vh}}

/* --- image pleine largeur : zoom arrière au passage --- */
.pj-full{position:relative;height:110vh;overflow:hidden;background:var(--bg,#111)}
.pj-full img{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover;transform:scale(calc(1.22 - var(--p,0) * .22)) translateY(calc((var(--p,0) - .5) * -6%))}
.pj-full.fit img{object-fit:contain;inset:8% var(--gut);width:calc(100% - 2 * var(--gut));height:84%}
.pj-full__cap{position:absolute;left:var(--gut);bottom:clamp(24px,5vh,48px);color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* --- deux visuels qui glissent en sens inverse --- */
.pj-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);padding:0 var(--gut) clamp(70px,12vh,130px);align-items:center}
.pj-duo figure{margin:0;border-radius:8px;overflow:hidden}
.pj-duo figure:first-child{transform:translateY(calc((var(--p,0) - .5) * 14vh))}
.pj-duo figure:last-child{transform:translateY(calc((var(--p,0) - .5) * -14vh))}
@media(max-width:700px){.pj-duo{grid-template-columns:1fr}.pj-duo figure{transform:none!important}}

/* --- scène web : écran d'ordinateur + téléphone --- */
.pj-web{position:relative}
.pj-web__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;padding:clamp(70px,10vh,100px) var(--gut) 40px}
.pj-mac{position:relative;width:min(78vw,1120px);transform:perspective(1600px) rotateX(calc((1 - var(--p,0)) * 18deg)) scale(calc(.86 + var(--p,0) * .14));transform-origin:50% 100%}
.pj-mac__scr{position:relative;aspect-ratio:16/10;max-height:68vh;margin:0 auto;border:clamp(8px,1vw,14px) solid #141414;border-bottom-width:clamp(14px,1.6vw,22px);border-radius:14px 14px 4px 4px;overflow:hidden;background:#fff}
.pj-mac__scr img{width:100%;height:auto;transform:translateY(calc(var(--p,0) * var(--sy,0px) * -1))}
.pj-mac__base{height:clamp(10px,1.2vw,16px);margin:0 -5%;border-radius:0 0 14px 14px;background:linear-gradient(#d7d7d7,#a9a9a9)}
.pj-phone{position:absolute;right:clamp(-10px,-1vw,0px);bottom:-4%;width:clamp(110px,15vw,210px);aspect-ratio:9/19.5;border:clamp(5px,.6vw,8px) solid #141414;border-radius:clamp(18px,2.2vw,30px);overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.35);
  transform:translateX(calc((1 - var(--p,0)) * 40vw)) rotate(calc((1 - var(--p,0)) * 12deg))}
.pj-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.pj-web__link{position:absolute;left:var(--gut);bottom:clamp(20px,4vh,40px)}
@media(max-width:700px){.pj-mac{width:100%}.pj-phone{width:30vw}}

/* --- bande de recherches : très haute image qui défile dans un cadre --- */
.pj-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);padding:0 var(--gut) clamp(70px,12vh,130px);align-items:start}
.pj-strip__win{position:sticky;top:90px;height:calc(100vh - 140px);border-radius:8px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px #eee}
.pj-strip__win img{width:100%;transform:translateY(calc(var(--p,0) * var(--sy,0px) * -1))}
.pj-strip__txt{padding-top:10vh}
.pj-strip__txt p{font-size:clamp(16px,1.3vw,20px);line-height:1.6;opacity:.8;margin-bottom:60vh}
@media(max-width:800px){.pj-strip{grid-template-columns:1fr}.pj-strip__win{position:relative;top:0;height:70vh}.pj-strip__txt p{margin-bottom:24px}}

/* --- navigation des chapitres (côté gauche) --- */
.pj-nav{position:fixed;z-index:40;left:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;opacity:0;pointer-events:none;transition:opacity .4s;mix-blend-mode:difference;color:#fff}
.pj-nav.on{opacity:1;pointer-events:auto}
.pj-nav a{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.pj-nav a i{width:14px;height:1px;background:currentColor;transition:width .3s}
.pj-nav a span{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.pj-nav a.is-on i{width:34px}
.pj-nav a.is-on span{opacity:1;transform:none}
@media(hover:hover){.pj-nav:hover a span{opacity:1;transform:none}}
@media(max-width:900px){.pj-nav{display:none}}

/* --- client suivant --- */
.pj-next{display:block;position:relative;overflow:hidden;background:var(--nc1);color:var(--non,#fff);padding:clamp(36px,7vh,72px) var(--gut);isolation:isolate}
.pj-next .mono{opacity:.7}
.pj-next b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(44px,8vw,140px);line-height:1;letter-spacing:-.02em;margin-top:14px}
.pj-next em{font-style:normal;display:inline-block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.pj-next:hover em{transform:translateX(24px)}}
.pj-back{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px var(--gut);background:#fff;border-top:1px solid #eee}
.pj-back a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* le menu du haut reste lisible sur les fonds colorés */
.pj ~ .hdr,.hdr{transition:transform .35s,background .35s}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-clip,.pf-logo{opacity:1;transform:none;clip-path:none;transition:none}
  .pj-cue i{animation:none}
}

/* ajustements mise en page portfolio */
.pf-hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:1fr;align-items:center;gap:clamp(30px,4vw,70px)}
.pf-hero h1{font-size:clamp(44px,5.6vw,92px);max-width:11ch}
.pf-stage{height:100%;min-height:clamp(300px,62vh,640px)}
.pf-logo__meta{flex-direction:column;align-items:flex-start;gap:4px}
.pf-logo__tags{text-align:left}
@media(max-width:900px){.pf-hero{grid-template-columns:1fr}.pf-stage{min-height:40vh}.pf-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-logos li,.pf-logos li:nth-child(n){grid-column:auto}.pf-logos li:nth-child(n) .pf-logo{aspect-ratio:4/3}}
@media(max-width:560px){.pf-logos{grid-template-columns:1fr}}

@media(max-width:900px){.pf-logos li:nth-child(n) .pf-logo__mark{inset:18% 16% 26%}}
.pf-logo__cover::after{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 55%,transparent),color-mix(in srgb,var(--c1) 88%,#000))}
.pj-grid figure{max-height:78vh}
.pj :where(img){height:auto}
/* mur : 6 références par ligne */
.pf-logos{grid-template-columns:repeat(6,minmax(0,1fr))}
.pf-logos li,.pf-logos li:nth-child(n){grid-column:auto}
.pf-logos li:nth-child(n) .pf-logo{aspect-ratio:1/1}
.pf-logos .pf-logo__tags{display:none}
@media(max-width:1200px){.pf-logos{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1024px){.pf-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.pf-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.pf-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pf-logos li:nth-child(n) .pf-logo__mark{inset:16% 14% 30%}
.pf-logo__meta{left:16px;right:16px;bottom:14px}
/* en-tête portfolio : comme la page Print (scène plein écran, titre centré en haut) */
.pf-hero{position:relative;display:block;height:100vh;height:100svh;min-height:560px;padding:0;margin:0;overflow:hidden}
.pf-hero .pf-stage{position:absolute;inset:0;height:auto;min-height:0;border-radius:0;border:0}
.pf-hero__head{position:absolute;z-index:3;left:0;right:0;top:clamp(92px,13vh,124px);display:flex;flex-direction:column;align-items:center;gap:2.2vh;padding:0 16px;text-align:center;pointer-events:none}
.pf-hero__head .intro__title{max-width:980px;margin:0;background:rgba(255,255,255,.78);padding:.1em .3em}
.pf-hero__lead{max-width:620px;margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:var(--ink-2);background:rgba(255,255,255,.78);padding:.3em .6em}
.pf-hero .pf-stage__note{position:absolute;left:0;right:0;top:auto;transform:none;white-space:normal;padding:0 16px;bottom:clamp(150px,22vh,220px);text-align:center}
.pf-hero__scroll{top:auto;bottom:clamp(20px,4vh,40px);margin-top:0;pointer-events:auto;color:#fff}
.pf-hero h1.intro__title{font-size:clamp(26px,3.9vw,58px);line-height:1.05;letter-spacing:-.01em;max-width:980px}
/* année + lieu en tête de page projet et sur les cartes */
.pj-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pj-hero__meta b{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.01em;line-height:1;padding:.06em .32em;border:1.5px solid currentColor;border-radius:4px}
.pf-logos .pf-logo__tags{display:block;font-size:10px;letter-spacing:.1em}
/* tri du mur : date / A-Z */
.pf-wall__head{align-items:center}
.pf-wall__head h2{margin-right:auto}
.pf-sort{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.pf-sort__lbl{color:var(--ink-2);margin-right:4px}
.pf-sort button{font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:8px 14px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;transition:background .2s,color .2s}
.pf-sort button[aria-pressed="true"]{background:var(--ink);color:#fff}
@media(hover:hover){.pf-sort button[aria-pressed="false"]:hover{background:var(--coral)}}
.pf-sort button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.pf-logos li{transition:opacity .3s}
.pf-logos.is-sorting li{opacity:0}
.pf-logos li:nth-child(n) .pf-logo__mark{inset:14% 16% 36%}
.pf-logos .pf-logo__mark{display:flex;align-items:center;justify-content:center}
.pf-logos .pf-logo__mark img{max-width:100%;max-height:100%;width:auto;height:auto;min-height:0}
.pf-logos .pf-logo__name{font-size:clamp(14px,1.1vw,18px);line-height:1.2}
/* flèches directrices (Logis) : grille de flèches qui convergent vers un point */
.pj-arrows{position:relative;height:340vh}
.pj-arrows__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff}
.pj-arrows__cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.pj-arrows__steps{position:absolute;left:var(--gut);bottom:clamp(30px,8vh,80px);width:min(440px,calc(100% - 2*var(--gut)));list-style:none;margin:0;padding:0;display:grid}
.pj-arrows__steps li{grid-area:1/1;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px #e3eef2;padding:20px 22px;font-size:clamp(16px,1.3vw,20px);line-height:1.45;color:#23395b;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s}
.pj-arrows__steps li.on{opacity:1;transform:none}
.pj-arrows__steps li span{display:block;font-size:12px;letter-spacing:.14em;color:#2c8fa8;margin-bottom:6px}
.pj-arrows__hint{position:absolute;right:var(--gut);bottom:clamp(30px,8vh,80px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7aa9b8;opacity:0;transition:opacity .4s}
.pj-arrows.free .pj-arrows__hint{opacity:1}
@media(hover:none){.pj-arrows__hint{display:none}}
/* séquence d'étapes (flip-book au scroll) */
.pj-seq{position:relative}
.pj-seq__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--sbg,#ececea);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(70px,10vh,100px) var(--gut) clamp(40px,7vh,70px)}
.pj-seq__frames{position:relative;height:100%;min-height:0}
.pj-seq__f{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;transition:opacity .25s linear}
.pj-seq__f.on{opacity:1}
.pj-seq__f img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pj-seq__caps{list-style:none;margin:0;padding:0;display:grid}
.pj-seq__caps li{grid-area:1/1;font-family:var(--display);font-size:clamp(22px,2.4vw,38px);line-height:1.15;color:var(--fg,#1d1d1b);opacity:0;transform:translateY(16px);transition:opacity .35s,transform .35s}
.pj-seq__caps li.on{opacity:1;transform:none}
.pj-seq__caps li span{display:block;font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px}
.pj-seq__bar{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(18px,3vh,30px);height:2px;background:rgba(0,0,0,.08)}
.pj-seq__bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--accent)}
@media(max-width:800px){.pj-seq__stick{grid-template-columns:1fr;grid-template-rows:1fr auto}.pj-seq__caps li{font-size:20px}}
/* film 3D piloté par le scroll */
.pj-film{position:relative}
.pj-film__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#f2f2f0}
.pj-film__cv,.pj-film__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-film__poster{z-index:0}.pj-film__cv{z-index:1}
.pj-film__caps{position:absolute;z-index:2;left:var(--gut);bottom:clamp(40px,9vh,90px);margin:0;padding:0;list-style:none;display:grid;width:min(520px,calc(100% - 2*var(--gut)))}
.pj-film__caps li{grid-area:1/1;background:rgba(255,255,255,.93);padding:18px 22px;font-family:var(--display);font-size:clamp(18px,1.6vw,26px);line-height:1.25;color:#1f3a63;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.pj-film__caps li.on{opacity:1;transform:none}
.pj-film__bar{position:absolute;z-index:2;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.08)}
.pj-film__bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--accent,#c8a97e)}
.pj-film__hint{position:absolute;z-index:2;right:var(--gut);top:clamp(80px,12vh,110px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1f3a63;background:rgba(255,255,255,.8);padding:6px 10px}
/* award */
.pj-award{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(50px,9vh,100px) var(--gut)}
.pj-award figure{margin:0;border-radius:6px;overflow:hidden}
.pj-award figure img{width:100%;height:auto;display:block}
.pj-award__kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pj-award h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,52px);line-height:1.05;margin:.3em 0 .5em;color:var(--fg,#111)}
.pj-award__txt p:last-child{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--fg,#333);opacity:.85}
@media(max-width:800px){.pj-award{grid-template-columns:1fr}}
/* vidéo + client (Scaldis) */
.pj-video{padding:clamp(40px,7vh,90px) var(--gut);background:var(--vbg,transparent)}
.pj-video figure{margin:0 auto;max-width:1400px}
.pj-video video{width:100%;height:auto;display:block;border-radius:6px;background:#000;aspect-ratio:16/9;box-shadow:0 30px 80px -30px rgba(0,0,0,.45)}
.pj-video figcaption{margin-top:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg,#333);opacity:.7}
.pj-client{display:flex;align-items:center;gap:clamp(20px,4vw,60px);margin:0 var(--gut) clamp(40px,7vh,80px);padding:clamp(20px,3vw,36px);background:#fff;border-radius:6px;color:#1f2a3a}
.pj-client img{width:clamp(160px,22vw,300px);height:auto;display:block;flex:none}
.pj-client p{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.55}
.pj-client b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8a7350;margin-bottom:.4em}
@media(max-width:700px){.pj-client{flex-direction:column;align-items:flex-start}}
/* filtre par période */
.pf-filter{margin-left:8px}
.pf-logos li[hidden]{display:none}
@media(max-width:700px){.pf-filter{margin-left:0}}
.pf-filter{flex-wrap:wrap}
.pf-filter button{white-space:nowrap}
@media(max-width:420px){.pf-filter button{padding:8px 11px}}
/* moins d'espace entre le titre de section et le premier contenu */
.pj-ch__head + .pj-video,.pj-ch__head + .pj-award{padding-top:clamp(10px,2vh,24px)}
/* visuel "fit" réduit : 6e paramètre du bloc full (--fs) */
.pj-full.fit img{inset:calc(8% + (1 - var(--fs,1)) * 42%) calc(var(--gut) + (1 - var(--fs,1)) * (50% - var(--gut)));width:calc((100% - 2 * var(--gut)) * var(--fs,1));height:calc(84% * var(--fs,1))}
/* visuel large ajusté : image dans le haut, légende juste dessous, zoom d'entrée léger */
.pj-full.fit.snug img{inset:3% var(--gut) 62px;width:calc(100% - 2 * var(--gut));height:calc(97% - 62px);transform:scale(calc(1.06 - var(--p,0) * .06))}
.pj-full.fit.snug .pj-full__cap{bottom:24px}
/* séquence d'images réduite : 4e paramètre du bloc seq (--ss) */
.pj-seq__f img{max-width:calc(100% * var(--ss,1));max-height:calc(100% * var(--ss,1))}
/* filtre par type : rangée pleine largeur sous l'en-tête du mur */
.pf-types{flex-basis:100%;flex-wrap:wrap;row-gap:8px}
.pf-types button[hidden]{display:none}
.pf-types button{white-space:nowrap}
/* en-tête du mur : titre seul, puis période + type + A-Z sur une même ligne */
.pf-wall__head h2{flex-basis:100%}
.pf-wall__head{justify-content:flex-start;gap:14px 28px}
.pf-types{flex-basis:auto}
.pf-filter{margin-left:0}
/* une seule ligne sur grand écran : boutons un peu plus compacts */
.pf-wall__head{gap:12px 20px}
.pf-wall__head .pf-sort{gap:5px;font-size:11px;letter-spacing:.08em}
.pf-wall__head .pf-sort button{padding:7px 11px}