@font-face{font-family:Bricolage;src:url("assets/bricolage-latin.woff2") format("woff2");font-style:normal;font-weight:500 800;font-display:swap}
@font-face{font-family:Affiche;src:url("assets/display-extrabold.ttf") format("truetype");font-style:italic;font-weight:800;font-display:swap}
@font-face{font-family:Affiche;src:url("assets/display-medium.ttf") format("truetype");font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:Affiche;src:url("assets/display-bold.ttf") format("truetype");font-style:italic;font-weight:700;font-display:swap}
:root{--ink:#151211;--cream:#f8eddc;--purple:#610bc4;--gutter:clamp(19px,3.7vw,70px);--gap:clamp(12px,1.4vw,22px);font-family:Bricolage,sans-serif;color:var(--ink);background:var(--cream) url("assets/papier.webp")}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #f4a530;outline-offset:3px}
header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);height:clamp(53px,4.3vw,75px)}
.mark{font:italic 700 clamp(30px,2.7vw,45px)/1 Affiche,sans-serif;letter-spacing:normal;font-kerning:normal}nav{display:flex;align-items:center;gap:clamp(20px,3vw,48px);font-size:clamp(16px,1.5vw,22px);font-weight:550}nav button{padding:10px 0}nav a:hover,nav button:hover{text-decoration:underline}
.poster{container-type:size;height:clamp(440px,43.3vw,760px);position:relative;isolation:isolate;overflow:hidden;background:var(--purple) url("assets/encre.webp");color:var(--cream)}
.poster:before{content:"";position:absolute;inset:0;background:var(--cream) url("assets/papier.webp");clip-path:polygon(42% 100%,100% 42%,100% 100%);z-index:-1}
.poster-copy{position:relative;z-index:2;padding:clamp(22px,2.7vw,50px) 0 0 calc(var(--gutter)*1.35);pointer-events:none}
.poster-copy p{font-weight:550;letter-spacing:-.045em;font-size:clamp(22px,2.45vw,44px);margin:0 0 .55em}
h1{font:italic 800 clamp(102px,12vw,210px)/.9 Affiche,sans-serif;text-transform:uppercase;letter-spacing:normal;margin:0 0 .17em}
.cta{pointer-events:auto;display:inline-flex;align-items:center;gap:.48em;font-family:Bricolage,sans-serif;background:var(--cream) url("assets/papier.webp");color:var(--ink);font-size:clamp(18px,1.7vw,26px);font-weight:700;line-height:1.1;letter-spacing:0;padding:.52em .85em;min-height:44px}.cta:hover{box-shadow:4px 4px var(--ink)}
.portrait-mount{position:absolute;right:1.8%;bottom:-1px;height:auto;width:min(54%,102.42cqh);transform-origin:55% 4%;transition:transform .3s ease}
@media(hover:hover){.portrait-mount:has(.is-hovered){transform:scale(1.04)}}
#projets{padding:clamp(15px,1.65vw,28px) var(--gutter) 42px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}h2{font:680 clamp(27px,2.7vw,44px)/1.07 Bricolage,sans-serif;letter-spacing:-.018em;margin:0}.controls{display:flex;gap:4px}.controls button{border:1px solid #332d27;border-radius:50%;height:34px;width:34px;padding:0;line-height:1;font-size:17px}.controls button:hover{background:var(--ink);color:var(--cream)}
.viewport{overflow:hidden;touch-action:pan-y pinch-zoom;padding:4px 0}#track{display:flex;gap:var(--gap)}.card{flex:0 0 calc((100% - 2 * var(--gap))/3);min-width:0;position:relative;aspect-ratio:16/9;overflow:hidden;padding:0;background:#25152b;color:white;text-align:left}.card img{width:100%;height:100%;object-fit:cover;display:block}.card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#000b)}.card b{position:absolute;z-index:1;bottom:12px;left:13px;right:10px;text-shadow:0 1px 6px black}.card b:before{content:"▶";margin-right:.6em}.card:focus-visible{outline-offset:-4px;z-index:1}
dialog{width:min(92vw,490px);padding:0;border:0;color:var(--ink);background:var(--cream) url("assets/papier.webp");box-shadow:9px 9px #210536;max-height:90dvh}dialog::backdrop{background:#130b21c9}.contact-inner{padding:34px;position:relative}.contact-inner h2{font:720 clamp(32px,3.5vw,50px)/1.05 Bricolage,sans-serif;color:var(--purple);margin:0 0 24px}.close{font-size:30px;width:44px;height:44px;line-height:1}.contact-inner>.close{position:absolute;top:12px;right:12px}.contact-row{border-top:1px solid #998776;display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;padding:14px 0;gap:3px;text-align:left}.contact-row small{grid-column:1;font-size:13px}.contact-row strong{grid-column:1;font-size:clamp(20px,2vw,26px);letter-spacing:-.035em;user-select:text}.contact-row span{grid-column:2;grid-row:1/3}.feedback{min-height:1.1em;margin:4px 0 0;font-size:14px}
#player{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;background:transparent;color:white;box-shadow:none}
#player[open]{display:grid;place-items:center}
#player::backdrop{background:rgba(8,5,12,.95)}
#player .close{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:1}
#screen{width:min(96vw,150dvh,1560px);aspect-ratio:16/9;background:#090909}
#screen video{object-fit:contain;display:block;width:100%;height:100%;border:0}
#track{will-change:transform}
@media(prefers-reduced-motion:no-preference){
  :is(#contact,#gallery)[open]{animation:affiche-in .27s cubic-bezier(.22,.8,.32,1)}
  :is(#contact,#gallery)[open]::backdrop{animation:fond-in .2s ease-out}
}
@keyframes affiche-in{from{opacity:0;transform:translateY(14px) rotate(-1.5deg) scale(.98)}to{opacity:1;transform:none}}
@keyframes fond-in{from{opacity:0}to{opacity:1}}
@media(max-width:680px){.poster{height:clamp(450px,112vw,590px)}.poster-copy{padding:25px var(--gutter)}.poster-copy p{font-size:20px;margin-bottom:12px}h1{font-size:clamp(78px,16.8vw,115px);line-height:.87}.portrait-mount{max-width:none;width:72%;height:auto;right:-7%}.poster:before{clip-path:polygon(9% 100%,100% 55%,100% 100%)}.cta{font-size:18px;margin-top:6px}.section-head{align-items:center}.controls{gap:2px}.controls button{width:29px;height:29px}.card{flex-basis:84%}#projets{padding:19px var(--gutter) 25px}.contact-inner{padding:26px}}
@media(max-width:460px){.portrait-mount{width:63%;right:-4%}}
@media(prefers-reduced-motion:reduce){.portrait-mount{transition:none}.portrait-mount:has(.is-hovered){transform:none}}

#gallery{width:min(94vw,1080px);overscroll-behavior:contain}
@media (forced-colors: none) {
  #gallery {
    scrollbar-width: thin;
    scrollbar-color: #826a88 transparent;
  }
  @supports selector(::-webkit-scrollbar) {
    #gallery { scrollbar-width: auto; scrollbar-color: auto; }
  }
  #gallery::-webkit-scrollbar { width: 6px; }
  #gallery::-webkit-scrollbar-track { background: transparent; }
  #gallery::-webkit-scrollbar-thumb { background: #826a88; border-radius: 6px; }
  #gallery::-webkit-scrollbar-button { display: none; }
}
.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:20px 24px;position:sticky;top:0;z-index:2;background:var(--cream) url("assets/papier.webp")}
.gallery-head h2{font:720 clamp(32px,3.5vw,50px)/1.05 Bricolage,sans-serif;color:var(--purple)}
#project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 24px 24px}
#project-list .card{width:100%}
#playback-status{position:absolute;bottom:12px;max-width:90%;text-align:center;background:#17131c;color:white;padding:8px}
#playback-status:empty{display:none}
@media(max-width:760px){#project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px 16px}.gallery-head{padding:14px 16px}}
@media(max-width:480px){#project-list{grid-template-columns:1fr}}

.poster-copy .tagline{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(19px,2.05vw,36px);letter-spacing:0;margin:0 0 .28em}
.poster-copy .role{font-size:clamp(14px,1.15vw,19px);font-weight:500;letter-spacing:.065em;margin:0 0 1em}
.card b{font-weight:550}
.collection{margin:0 var(--gutter);padding:clamp(24px,3.3vw,55px) 0;border-top:1px solid #594b3e70}
.collection h2{margin:0}.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr));gap:clamp(15px,2vw,30px);margin-top:22px}
.review{margin:0;padding:0 20px 0 0}.review blockquote{margin:.5em 0 .7em;font:normal clamp(21px,2vw,32px)/1.3 Georgia,serif}
.review figcaption{font-size:15px}.stars{font-size:15px;color:#56069e;letter-spacing:.04em}
#client-count,.empty-preview{font-size:15px;line-height:1.4;margin:0;color:#51473f}
@media(max-width:680px){.poster-copy .tagline{font-size:clamp(17px,4.4vw,23px)}.poster-copy .role{font-size:13px;margin-bottom:12px}.portrait-mount{width:66%}.reviews-grid{margin-top:16px}}
@media(max-width:460px){.portrait-mount{width:61%;right:-3%}}

.review figcaption a{text-decoration:underline;text-underline-offset:.2em}.review blockquote + blockquote{margin-top:.8em}

.cta span{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .cta{transition:transform .18s ease,box-shadow .18s ease;animation:cta-arrive .36s ease-out both}
  .cta:is(:hover,:focus-visible){transform:translate(-2px,-2px);box-shadow:4px 4px var(--ink)}
  .cta span{transition:transform .2s ease}.cta:is(:hover,:focus-visible) span{transform:translate(3px,-3px)}
  .cta:active{transform:translate(1px,1px);box-shadow:1px 1px var(--ink)}
}
@keyframes cta-arrive{from{opacity:.85;translate:0 4px}to{opacity:1;translate:0 0}}
nav button{font-family:Bricolage,sans-serif;font-weight:700}
.views-proof{margin:0 var(--gutter);border-top:1px solid #594b3e70}
.views-proof summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(20px,2.4vw,38px) 0}
.views-proof summary::-webkit-details-marker{display:none}
.views-proof summary>span:first-child{display:flex;align-items:center;gap:clamp(12px,2vw,30px);font-size:clamp(16px,2vw,25px)}
.views-proof strong{color:var(--purple);font:italic 800 clamp(50px,6.5vw,100px)/1 Affiche,sans-serif}
.highlights-label{font-size:14px;text-decoration:underline;text-underline-offset:3px}
.highlights-label::after{content:" +"}details[open] .highlights-label::after{content:" −"}
.views-proof figure{margin:0 0 24px;max-width:720px}
.views-proof img{display:block;width:100%;height:auto}
.views-proof figcaption{margin:.6em 0;font-size:15px;color:#51473f}
.review figcaption{font-weight:700;margin-bottom:8px}.quote-count{display:block;margin-top:.25em;color:#51473f;font-size:13px;font-weight:400}
.multiple-quotes blockquote + blockquote{border-top:1px solid #594b3e55;padding-top:.75em}
#film-sources:not([hidden]){display:flex;gap:18px;flex-wrap:wrap;padding-top:10px;font-size:14px}
#film-sources a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:540px){.views-proof summary{flex-wrap:wrap;gap:6px}.views-proof summary>span:first-child{width:100%}}

.portrait-mount::before{content:"";position:absolute;inset:0;background:var(--cream) url("assets/papier.webp");clip-path:polygon(41.44% 2.50%,38.41% 3.75%,37.09% 5.00%,36.24% 6.25%,35.38% 7.50%,30.43% 8.75%,29.97% 10.00%,29.79% 11.25%,29.39% 12.50%,28.53% 13.75%,28.20% 15.00%,27.80% 16.25%,24.56% 17.50%,24.01% 18.75%,24.25% 20.00%,24.46% 21.25%,25.47% 22.50%,23.91% 23.75%,22.81% 25.00%,22.91% 26.25%,22.72% 27.50%,23.00% 28.75%,23.06% 30.00%,23.76% 31.25%,23.73% 32.50%,25.50% 33.75%,25.99% 35.00%,26.06% 36.25%,25.87% 37.50%,26.15% 38.75%,26.76% 40.00%,27.00% 41.25%,26.97% 42.50%,27.43% 43.75%,28.35% 45.00%,29.54% 46.25%,29.94% 47.50%,29.82% 48.75%,30.80% 50.00%,31.90% 51.25%,32.91% 52.50%,33.46% 53.75%,32.69% 55.00%,31.22% 56.25%,30.37% 57.50%,29.72% 58.75%,29.02% 60.00%,27.58% 61.25%,26.70% 62.50%,25.11% 63.75%,22.91% 65.00%,20.80% 66.25%,18.75% 67.50%,16.45% 68.75%,14.19% 70.00%,11.96% 71.25%,9.88% 72.50%,7.13% 73.75%,5.57% 75.00%,3.85% 76.25%,2.60% 77.50%,1.90% 78.75%,1.31% 80.00%,0.67% 81.25%,0.06% 82.50%,0.00% 83.75%,0.00% 85.00%,0.00% 86.25%,0.00% 87.50%,0.00% 88.75%,0.00% 90.00%,0.00% 91.25%,0.00% 92.50%,0.00% 93.75%,0.00% 95.00%,0.00% 96.25%,0.00% 97.50%,0.00% 98.75%,0.00% 100.00%,100.00% 100.00%,100.00% 98.75%,100.00% 97.50%,99.57% 96.25%,99.42% 95.00%,98.99% 93.75%,98.44% 92.50%,98.26% 91.25%,97.68% 90.00%,96.88% 88.75%,96.33% 87.50%,95.96% 86.25%,95.29% 85.00%,94.68% 83.75%,94.31% 82.50%,93.46% 81.25%,92.63% 80.00%,92.51% 78.75%,91.87% 77.50%,91.41% 76.25%,90.58% 75.00%,89.69% 73.75%,88.32% 72.50%,84.01% 71.25%,80.24% 70.00%,77.09% 68.75%,74.43% 67.50%,71.65% 66.25%,68.72% 65.00%,67.86% 63.75%,66.82% 62.50%,65.66% 61.25%,64.95% 60.00%,64.07% 58.75%,64.07% 57.50%,64.16% 56.25%,64.19% 55.00%,64.59% 53.75%,65.08% 52.50%,66.06% 51.25%,66.91% 50.00%,67.03% 48.75%,67.28% 47.50%,67.71% 46.25%,68.59% 45.00%,70.34% 43.75%,70.92% 42.50%,71.83% 41.25%,71.90% 40.00%,72.42% 38.75%,72.39% 37.50%,72.54% 36.25%,72.60% 35.00%,72.26% 33.75%,71.87% 32.50%,71.50% 31.25%,71.41% 30.00%,70.95% 28.75%,71.13% 27.50%,71.83% 26.25%,72.08% 25.00%,72.11% 23.75%,72.32% 22.50%,71.93% 21.25%,71.65% 20.00%,71.99% 18.75%,71.99% 17.50%,72.02% 16.25%,71.56% 15.00%,70.89% 13.75%,70.00% 12.50%,69.79% 11.25%,68.87% 10.00%,67.09% 8.75%,62.02% 7.50%,61.50% 6.25%,60.03% 5.00%,59.24% 3.75%,57.74% 2.50%,56.4% 1.45%,54.2% 1.1%,52.8% 1.85%,51.2% 1.65%,49.9% 2.55%,47.8% 1.55%,45.7% 1.0%,44.1% 1.35%,42.5% 2.05%);transform:translate(-.25%,.15%);pointer-events:none}
.portrait-mount .portrait{position:relative;display:block;width:100%;height:auto}

/* A shallow torn edge between the paper header and the purple poster. */
.poster::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: clamp(6px, .6vw, 10px);
  background: var(--cream) url("assets/papier.webp");
  clip-path: polygon(0 0,100% 0,100% 58%,96% 38%,91% 70%,89% 37%,82% 51%,79% 85%,76% 41%,70% 60%,65% 32%,62% 64%,57% 47%,52% 76%,49% 40%,42% 56%,37% 27%,34% 63%,29% 48%,24% 82%,20% 42%,15% 59%,10% 33%,6% 74%,0 47%);
  pointer-events: none;
}
.edit-track {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 32px;
  height: 1px;
  margin-left: 9px;
  background: currentColor;
}
.edit-track::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 6px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0,100% 0,100% 32%,65% 52%,65% 100%,40% 100%,40% 52%,0 32%);
}
@media (prefers-reduced-motion: no-preference) {
  .edit-track::after { animation: playhead 4.8s ease-in-out infinite alternate; }
}
@keyframes playhead {
  0%, 14% { transform: translateX(0); }
  86%, 100% { transform: translateX(26px); }
}

.starfield {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.starfield i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cream);
  animation: star-drift linear infinite;
}
@keyframes star-drift {
  from { transform: translate(0, 0) scale(.3); opacity: 0; }
  25% { opacity: .42; }
  78% { opacity: .88; }
  to { transform: translate(var(--x), var(--y)) scale(1.2); opacity: 0; }
}
.starfield.is-paused i { animation-play-state: paused; }
#contact-title:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .starfield i { animation-play-state: paused; }
}