/* eykfrance.com — fiches projet (/portfolio/<projet>/)
   Même salle noire que le reste du site. Le film d'abord, en très grand, puis le récit du projet
   rythmé par les images : chaque extrait porte son timecode, comme sur une timeline. */
.fi{--bloc-f:clamp(80px,9.5vw,160px);--ecart:clamp(10px,1.1vw,20px)}
.pj-in{padding-inline:var(--goutt)}

/* ---------- En-tête ---------- */
.pj-hero{margin-top:calc(-1*var(--hd-space));padding:calc(var(--hd-space) + clamp(48px,6vw,104px)) 0 clamp(36px,4vw,64px)}
.v2 a.pj-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(44px,5.4vw,96px);font:300 15px/1.3 var(--f-fin);color:var(--gris);text-decoration:none;transition:color .25s}
.pj-back span{display:inline-block;transition:transform .45s var(--out)}
.v2 a.pj-back:hover{color:var(--blanc)}
.pj-back:hover span{transform:translateX(-5px)}
.pj-k{display:flex;align-items:center;gap:11px;margin:0 0 clamp(16px,1.6vw,26px);font:400 14px/1.3 var(--f-fin);letter-spacing:0;color:var(--gris)}
.pj-k:before{content:"";flex:none;width:7px;height:7px;background:var(--bleu)}
.v2 h1.pg-t.pj-t{font-size:min(7.6vw,150px);text-wrap:balance}
.pj-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px clamp(24px,3vw,56px);margin-top:clamp(36px,4.4vw,72px);padding-top:clamp(24px,2.6vw,40px);border-top:1px solid var(--trait)}
.pj-meta small{display:block;margin-bottom:8px;font:400 14px/1.3 var(--f-fin);color:var(--gris)}
.pj-meta b{display:block;font:300 clamp(17px,1.4vw,22px)/1.3 var(--f-fin);letter-spacing:-.01em}
.v2 .pj-meta a,.v2 .pj-p a,.v2 .pj-cr a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.4);transition:text-decoration-color .25s}
.v2 .pj-meta a:hover,.v2 .pj-p a:hover,.v2 .pj-cr a:hover{text-decoration-color:var(--bleu)}

/* ---------- Le film ---------- */
.v2 button.pj-v,.sa-pl{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:calc(var(--r)*1.5);overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px rgba(255,255,255,.1);color:var(--blanc);cursor:pointer}
.v2 button.pj-v:hover,.v2 button.pj-v:focus{background:var(--surface);color:var(--blanc)}
.pj-v img,.sa-pl video,.pj-v2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--out),filter .6s ease}
.pj-v:after,.sa-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.6) 100%);pointer-events:none}
.v2 button.sa-btn{position:absolute;inset:0;z-index:1;width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--blanc);cursor:pointer}
.v2 button.sa-btn:hover,.v2 button.sa-btn:focus{background:none;color:var(--blanc)}
.sa-pl.is-playing .sa-btn{display:none}
.pj-pl{position:absolute;z-index:1;top:50%;left:50%;width:clamp(68px,7vw,124px);aspect-ratio:1;border-radius:50%;translate:-50% -50%;border:1px solid rgba(255,255,255,.55);background:rgba(10,10,14,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:scale .6s var(--out),background .3s,border-color .3s}
.pj-pl:after{content:"";position:absolute;top:50%;left:54%;translate:-50% -50%;border-style:solid;border-width:.62em 0 .62em 1em;border-color:transparent transparent transparent currentColor;font-size:clamp(13px,1.3vw,22px)}
.pj-snd{position:absolute;z-index:1;left:clamp(18px,2.4vw,40px);bottom:clamp(16px,2.2vw,36px);display:inline-flex;align-items:center;gap:12px;font:700 12px/1 var(--f-fin);letter-spacing:.14em;text-transform:uppercase}
.pj-snd i{display:inline-flex;align-items:flex-end;gap:3px;height:14px}
.pj-snd b{width:2px;height:100%;background:currentColor;transform-origin:50% 100%;transform:scaleY(.45)}
.pj-snd b:nth-child(2){transform:scaleY(1)}
.pj-snd b:nth-child(3){transform:scaleY(.7)}
@media(hover:hover){
  .pj-v:hover img,.pj-v2:hover img{scale:1.03}
  .pj-v:hover .pj-pl,.sa-btn:hover .pj-pl,.pj-v2:hover .pj-pl{scale:1.08;background:var(--bleu);border-color:var(--bleu)}
  .pj-v:hover .pj-snd b,.sa-btn:hover .pj-snd b{animation:niveau .7s ease-in-out infinite alternate}
  .pj-v:hover .pj-snd b:nth-child(2),.sa-btn:hover .pj-snd b:nth-child(2){animation-delay:-.35s}
  .pj-v:hover .pj-snd b:nth-child(3),.sa-btn:hover .pj-snd b:nth-child(3){animation-delay:-.6s}
}
@keyframes niveau{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
/* Autres films du projet */
.pj-vx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ecart);margin-top:var(--ecart)}
.v2 button.pj-v2{position:relative;display:block;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:var(--surface);color:var(--blanc);cursor:pointer}
.v2 button.pj-v2:hover,.v2 button.pj-v2:focus{background:var(--surface);color:var(--blanc)}
.pj-v2 .pj-pl{width:clamp(48px,4.2vw,68px)}
.pj-v2 .pj-pl:after{font-size:12px}

/* ---------- Récit ---------- */
.pj-sec{padding-top:var(--bloc-f)}
.pj-sec.kt-media,.pj-sec:has(>.pj-in>.pj-gal){padding-top:clamp(44px,5vw,88px)}
.kt-media+.kt-media{padding-top:var(--ecart)}
.pj-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px clamp(40px,7vw,140px);align-items:start}
.v2 .pj h2.pj-t{font-size:clamp(36px,4.5vw,84px);line-height:.95}
.pj-sub{display:block;margin:0 0 10px;font:400 14px/1.3 var(--f-fin);color:var(--gris)}
.pj-p+.pj-sub{margin-top:clamp(28px,2.6vw,40px)}
.pj-p{margin:0 0 1.15em;font:300 clamp(17px,1.3vw,20px)/1.65 var(--f-fin);color:rgba(255,255,255,.8)}
.pj-p:last-child{margin-bottom:0}
.pj-p strong{font-weight:500;color:var(--blanc)}
.pj-paris{margin-top:clamp(28px,2.6vw,40px);font-size:15px;color:var(--gris)}

/* ---------- Images et extraits ---------- */
.kt-media .pj-in{display:grid;gap:clamp(28px,3vw,44px) var(--ecart)}
.kt-strip .pj-in{grid-template-columns:repeat(3,minmax(0,1fr))}
.kt-duo .pj-in{grid-template-columns:repeat(2,minmax(0,1fr))}
.kt-split .pj-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;column-gap:clamp(40px,6vw,120px)}
.kt-f{margin:0}
.kt-im{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.kt-im img,.kt-im video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.kt-im video{opacity:0;transition:opacity .7s ease}
.kt-im video.is-on{opacity:1}
.kt-f figcaption,.kt-pcap{display:flex;align-items:baseline;gap:14px;margin:0;padding-top:14px;font:300 14px/1.5 var(--f-fin);color:var(--gris)}
.kt-tc{flex:none;padding:4px 7px 3px;border:1px solid var(--trait);border-radius:4px;font:400 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--blanc)}
.v2 .kt-split blockquote{margin:0;padding:0;border:0;font:200 clamp(26px,3.1vw,56px)/1.1 var(--f-fin);letter-spacing:-.035em;color:var(--blanc);text-wrap:balance}
.kt-split blockquote strong{font-family:var(--f-gras);font-weight:400;letter-spacing:-.03em}
.kt-pg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--ecart)}
.kt-p .kt-im{aspect-ratio:4/5}
.pj-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ecart)}
.pj-gal figure{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.pj-gal .w{grid-column:1/-1}
.pj-gal .w2{grid-column:span 2}
.pj-gal img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* Mise au point à l'arrivée à l'écran */
.rv .kt-im img,.rv .pj-gal img,.rv .pj-v img,.rv .sa-pl video{filter:blur(24px) brightness(.55);scale:1.1;transition:filter 1.5s var(--out) var(--d,0s),scale 2s var(--out) var(--d,0s)}
.rv .is-in .kt-im img,.rv .pj-gal .is-in img,.rv .pj-v.is-in img,.rv .sa-pl.is-in video{filter:none;scale:1}
.rv .pj-v.is-set img{transition:scale 1.4s var(--out),filter .6s ease}
.rv .kt-f figcaption,.rv .kt-split blockquote{opacity:0;transition:opacity .9s ease calc(var(--d,0s) + .45s)}
.rv .kt-f.is-in figcaption,.rv .kt-split .is-in+blockquote{opacity:1}

/* ---------- Chiffres, note d'intention ---------- */
.pp-in{padding-inline:var(--goutt)}
.pp-stats,.pj-st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px var(--ecart);margin-top:clamp(48px,5.4vw,96px);padding-top:clamp(24px,2.6vw,40px);border-top:1px solid var(--trait)}
.pp-stats b,.pj-st b{display:block;margin-bottom:10px;font:400 clamp(34px,4.4vw,80px)/1 var(--f-gras);letter-spacing:-.035em;white-space:nowrap}
.pp-stats span,.pj-st span{display:block;max-width:15em;font:300 15px/1.45 var(--f-fin);color:var(--gris)}
.pp-q{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px clamp(40px,7vw,140px);margin-top:clamp(56px,6.4vw,112px)}
.pp-quote{margin:0;font:200 clamp(26px,3.1vw,56px)/1.1 var(--f-fin);letter-spacing:-.035em;text-wrap:balance}
.pp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(24px,2.6vw,40px) 0 0;padding:0;list-style:none}
.pp-tags li{margin:0;padding:9px 16px;border:1px solid var(--trait);border-radius:999px;font:300 14px/1 var(--f-fin);color:rgba(255,255,255,.85)}

/* ---------- Du script à l'écran : chapitres + fiches de découpage ---------- */
.pp-h{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:var(--bloc-f);padding-top:clamp(24px,2.6vw,40px);border-top:1px solid var(--trait)}
.v2 .pp-h h3{margin:0;font:200 clamp(28px,3.2vw,58px)/1 var(--f-fin);letter-spacing:-.04em;color:var(--blanc)}
.pp-h h3 strong{font-family:var(--f-gras);font-weight:400;letter-spacing:-.03em}
.pp-h>span{font:300 15px/1.4 var(--f-fin);color:var(--gris)}
.pp-sb{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px clamp(32px,4vw,72px);align-items:start;margin-top:clamp(32px,3.6vw,60px)}
.pp-cl{margin:0;padding:0;list-style:none;counter-reset:none}
.pp-cl li{margin:0}
.v2 button.pp-cb{position:relative;display:grid;grid-template-columns:2.6em 1fr;gap:4px 0;width:100%;margin:0;padding:18px 0;border:0;border-top:1px solid var(--trait);border-radius:0;background:none;text-align:left;white-space:normal;color:var(--gris);cursor:pointer;transition:color .3s}
.v2 button.pp-cb:hover,.v2 button.pp-cb:focus{background:none;color:var(--blanc)}
.v2 button.pp-cb.on{color:var(--blanc)}
.pp-cn{font:400 12px/1.9 var(--f-mono);letter-spacing:.04em}
.pp-ct{font:300 clamp(19px,1.7vw,26px)/1.25 var(--f-fin);letter-spacing:-.015em;text-transform:none}
.pp-cd{grid-column:2;padding-top:4px;font:300 15px/1.55 var(--f-fin);letter-spacing:0;text-transform:none;color:var(--gris)}
.pp-bar{position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--blanc);transform:scaleX(0);transform-origin:0 50%}
.pp-cb.on .pp-bar{transform:scaleX(1)}
.rv .pp-cb.on .pp-bar{animation:barre var(--duree,10s) linear both}
@keyframes barre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pp-st{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.pp-st img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(18px);scale:1.06;transition:opacity .6s ease,filter 1.1s var(--out),scale 1.4s var(--out)}
.pp-st img.on{opacity:1;filter:none;scale:1}
.pp-cap{min-height:1.5em;margin:14px 0 0;font:300 14px/1.5 var(--f-fin);color:var(--gris)}
.pp-dc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ecart);margin-top:clamp(32px,3.6vw,60px)}
.pp-f{margin:0}
.pp-fi{position:relative;display:block;height:100%;min-height:clamp(300px,24vw,400px);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);cursor:pointer}
.pp-fr{position:relative;display:flex;flex-direction:column;height:100%;padding:clamp(22px,2vw,32px);transition:opacity .5s ease,filter .8s var(--out)}
.pp-fr header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(20px,2vw,32px);padding-bottom:16px;border-bottom:1px solid var(--trait);font:400 clamp(20px,1.7vw,26px)/1 var(--f-gras);letter-spacing:-.02em}
.pp-fr em{font:400 12px/1 var(--f-mono);letter-spacing:.04em;font-style:normal;color:var(--gris)}
.pp-fr dl{display:grid;grid-template-columns:4.6em 1fr;gap:12px 14px;margin:0 0 24px}
.pp-fr dt{margin:0;font:400 14px/1.5 var(--f-fin);color:var(--gris)}
.pp-fr dd{margin:0;font:300 15px/1.5 var(--f-fin);color:rgba(255,255,255,.85)}
.pp-hint{display:inline-flex;align-items:center;gap:10px;margin-top:auto;font:700 12px/1 var(--f-fin);letter-spacing:.14em;text-transform:uppercase}
.pp-hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.pp-bk{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
.pp-bk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px);scale:1.08;transition:filter 1s var(--out),scale 1.3s var(--out)}
.pp-bk .pp-hint{position:absolute;left:clamp(18px,1.6vw,26px);bottom:clamp(16px,1.5vw,24px);padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pp-fi[aria-pressed="true"] .pp-fr{opacity:0;filter:blur(10px)}
.pp-fi[aria-pressed="true"] .pp-bk{opacity:1}
.pp-fi[aria-pressed="true"] .pp-bk img{filter:none;scale:1}
.pp-fi:focus-visible{outline:2px solid var(--bleu);outline-offset:4px}

/* ---------- Générique ---------- */
.pj-cr{margin:0;padding:0;list-style:none;border-top:1px solid var(--trait)}
.pj-cr li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin:0;padding:17px 0;border-bottom:1px solid var(--trait);font:300 clamp(16px,1.25vw,19px)/1.4 var(--f-fin)}
.pj-cr li span:first-child{flex:none;color:var(--gris)}
.pj-cr li span:last-child{text-align:right}

/* ---------- Appel au devis ---------- */
.pj-cta{padding-top:var(--bloc-f)}
.pj-cta-b{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap;padding:clamp(32px,5vw,96px) clamp(24px,4.4vw,84px);border-radius:calc(var(--r)*1.5);overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.pj-cta-b:before{content:"";position:absolute;z-index:-1;right:-18%;top:-70%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle closest-side,rgba(35,74,255,.5),rgba(35,74,255,0))}
.v2 .pj .pj-cta h2.pj-t{font-size:clamp(40px,5.6vw,104px)}
.pj-cta .pj-p{max-width:28em;margin:clamp(18px,1.8vw,28px) 0 0}
.v2 a.pj-btn{display:inline-flex;align-items:center;gap:14px;padding:22px 34px;border-radius:999px;border:1px solid var(--blanc);background:var(--blanc);color:var(--noir);font:700 12px/1 var(--f-fin);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.v2 a.pj-btn:hover{background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.pj-btn .ar{display:inline-flex}
.pj-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .45s var(--out)}
.pj-btn svg+svg{display:none}
.pj-btn:hover svg{transform:translateX(5px)}

/* ---------- À voir aussi ---------- */
.pj-next{padding-top:var(--bloc-f)}
.pj-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 32px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,64px)}
.v2 a.pj-lk{display:inline-block;padding-bottom:5px;border-bottom:1px solid currentColor;font:400 15px/1.3 var(--f-fin);text-decoration:none;background:linear-gradient(var(--bleu),var(--bleu)) left bottom/0 1px no-repeat;transition:background-size .45s var(--out),border-color .3s}
.v2 a.pj-lk:hover{background-size:100% 1px;border-color:transparent}
.pj-next .wk-im{height:auto;aspect-ratio:3/2}

@media(max-width:1024px){
  .pp-sb{grid-template-columns:1fr}
  .pp-vw{order:-1}
  .pp-dc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .pj-2,.pp-q,.kt-split .pj-in{grid-template-columns:1fr}
  .pj-meta,.pp-stats,.pj-st{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt-pg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2 h1.pg-t.pj-t{font-size:clamp(40px,10.5vw,92px)}
}
@media(max-width:640px){
  .kt-strip .pj-in,.kt-duo .pj-in,.pp-dc{grid-template-columns:1fr}
  .pj-gal,.pj-vx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-gal .w2{grid-column:1/-1}
  .pj-snd{font-size:11px;letter-spacing:.1em}
  .pj-cr li{flex-direction:column;gap:2px}
  .pj-cr li span:last-child{text-align:left}
  .v2 a.pj-btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .pj-snd b{animation:none!important}
}

/* Le point bleu reste accroché au dernier mot du titre (jamais seul à la ligne) */
.v2 .pj h2.pj-t strong:after{content:".";display:inline;width:auto;height:auto;margin:0;background:none;color:var(--bleu)}
.pp-q{align-items:start}
.pp-q>.pj-k{margin-top:.9em}
.v2 .pj .pj-cta h2.pj-t strong:after{content:none}
.kt-21.kt-wide .kt-im,.kt-21.kt-split .kt-im{aspect-ratio:2/1}.kt-21.kt-strip .kt-im,.kt-21.kt-duo .kt-im{aspect-ratio:16/10}