:root{--bg:#0b0b0b;--fg:#f1f0e9;--muted:#999b98;--accent:#bcc5ff;--line:#343434}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:6px}img,video{max-width:100%;height:auto}h1,h2,h3,p{margin:0}::selection{background:var(--accent);color:#080808}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--fg);color:var(--bg);padding:15px}.skip:focus{top:10px}.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:12px 4%;border-bottom:1px solid var(--line);position:relative;z-index:5;background:var(--bg)}.identity img{width:120px;max-height:75px;object-fit:contain}.location{font-size:10px;letter-spacing:.12em}.site-header nav{display:flex;gap:35px;align-items:center;font-size:12px}.site-header sup{font-size:9px}.contact-link{border:1px solid #626262;border-radius:40px;padding:12px 20px}.hero{min-height:760px;height:calc(100svh - 100px);position:relative;padding:30px 4% 25px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden}.hero-top,.hero-bottom{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.08em;z-index:2}.hero h1{font-size:clamp(90px,15.5vw,250px);font-weight:500;letter-spacing:-.085em;line-height:.87;z-index:2;pointer-events:none;position:relative;max-width:1000px}.second-line{white-space:nowrap}.dot{color:var(--accent)}.hero-bottom p{font-size:15px;letter-spacing:-.02em}.hero-bottom>span{font-size:9px}.round-link{display:grid;place-items:center;border:1px solid #666;border-radius:50%;width:62px;height:62px;font-size:28px}.hero-collage{position:absolute;inset:0;z-index:1}.floating{position:absolute;display:block;transition:transform .5s;box-shadow:0 14px 50px #0007}.floating img{display:block;width:100%;height:100%;object-fit:cover}.one{right:7%;top:9%;width:27%;aspect-ratio:16/10;transform:rotate(8deg)}.two{right:2%;bottom:22%;width:19%;aspect-ratio:4/3;transform:rotate(-8deg)}.three{left:45%;bottom:10%;width:15%;aspect-ratio:4/3;transform:rotate(6deg)}.floating:hover{transform:rotate(0) scale(1.06)}.intro{padding:150px 4%;display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:.12em}.intro h2{font-size:clamp(30px,4.3vw,72px);font-weight:400;letter-spacing:-.05em;line-height:1.12}.intro h2 span{color:#8d8d89}.works{padding:0 4% 120px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:50px}.section-heading h2{font-size:clamp(100px,18vw,280px);letter-spacing:-.08em;font-weight:500;line-height:1}.section-heading>span{font-size:10px;text-align:right;line-height:1.7;padding-bottom:10px}.project-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:35px;row-gap:80px}.project:nth-child(6n+1){grid-column:1/-1}.project{min-width:0;scroll-margin-top:30px}.project summary{list-style:none;cursor:pointer}.project summary::-webkit-details-marker{display:none}.project-cover{position:relative;overflow:hidden;background:#1b1b1b;aspect-ratio:4/3}.project:nth-child(6n+1) .project-cover{aspect-ratio:16/9}.project-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}.project summary:hover img{transform:scale(1.025)}.project-open{position:absolute;right:20px;bottom:20px;background:var(--fg);color:var(--bg);width:50px;height:50px;display:grid;place-items:center;border-radius:50%;font-size:25px;transition:transform .3s}.project details[open] .project-open{transform:rotate(180deg)}.project-meta{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:17px}.project-meta h3{font-size:clamp(17px,2vw,30px);font-weight:400;letter-spacing:-.04em}.project-meta span{font-size:9px;white-space:nowrap}.project-gallery{display:grid;gap:20px;padding:25px 0 0}.project-gallery a,.project-gallery img,.project-gallery video{display:block;width:100%}.project-gallery img{object-fit:contain}.about{background:var(--fg);color:var(--bg);padding:120px 6%;display:grid;grid-template-columns:1fr 1fr;gap:12%}.about h2{font-size:clamp(60px,7vw,110px);line-height:1;letter-spacing:-.07em;font-weight:500;margin:35px 0}.about-title img{width:65%;filter:grayscale(1)}.about-copy p{font-size:17px;line-height:1.7}.about-copy h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin:40px 0 15px}.about-copy .section-text>div>div{font-size:12px;padding:12px 0;border-bottom:1px solid #ccc}.about-copy strong{display:block;font-weight:600;margin-bottom:5px}.about-copy hr{border:0;border-top:1px solid #ccc;margin-top:35px}.contact{padding:120px 4%;display:grid;grid-template-columns:1fr 1fr;gap:10%}.contact h2{font-size:clamp(60px,7vw,110px);font-weight:500;line-height:1;letter-spacing:-.06em;margin:35px 0}.contact h2 em{font-style:normal;color:var(--accent)}.contact-intro>a{display:block;font-size:14px;margin-top:15px;overflow-wrap:anywhere}.contact-form{align-self:center;min-width:0}.contact-form>.row{display:flex;flex-wrap:wrap;gap:24px}.contact-form .form-group{width:calc(50% - 12px)}.contact-form .col-md-12,.contact-form .col-12{width:100%}.contact-form label{display:block;font-size:10px;margin-bottom:8px;color:#aaa}.contact-form input:not([type=submit]),.contact-form textarea{display:block;max-width:100%;width:100%;border:0;border-bottom:1px solid #686868;border-radius:0;background:transparent;color:var(--fg);padding:10px 0 16px;font-size:16px}.contact-form textarea{resize:vertical;min-height:120px}.contact-form input[type=submit]{cursor:pointer;background:var(--fg);border:0;border-radius:40px;padding:18px 32px;color:var(--bg);font-size:13px}.contact-form input:disabled{opacity:.5;cursor:wait}.contact__msg{padding:18px;margin-bottom:24px;line-height:1.6;font-size:13px}.alert-success{background:#1d3328}.alert-danger{background:#512b30}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:30px 4%;font-size:10px;gap:20px}main{animation:entry 2s ease-out both}@keyframes entry{from{opacity:0}to{opacity:1}}.reveal-in{animation:reveal .85s ease-out both}@keyframes reveal{from{opacity:.15;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){main{max-width:2000px;margin:auto}}@media(max-width:800px){.site-header{height:85px}.location{display:none}.site-header nav{gap:17px;font-size:11px}.identity img{width:85px}.contact-link{padding:10px 12px}.hero{height:calc(90svh - 85px);min-height:560px}.hero h1{font-size:17vw}.hero-top{font-size:8px}.one{width:40%;right:8%;top:15%}.two{width:30%;right:7%;bottom:21%}.three{left:23%;width:27%;bottom:13%}.hero-bottom>span{display:none}.hero-bottom p{font-size:12px}.intro{padding:80px 5%;grid-template-columns:1fr;gap:25px}.works{padding-bottom:80px}.section-heading{margin-bottom:25px}.section-heading>span{font-size:8px}.project-grid{gap:45px 18px}.project-meta{align-items:flex-start;flex-direction:column;gap:5px}.project-meta h3{font-size:18px}.project-open{width:36px;height:36px;right:10px;bottom:10px;font-size:20px}.about,.contact{grid-template-columns:1fr;gap:50px;padding:80px 5%}.about-title img{width:50%}.about h2,.contact h2{font-size:70px}.contact-form{width:100%}footer{font-size:8px;flex-wrap:wrap}}@media(max-width:480px){.project-grid{grid-template-columns:1fr}.project:nth-child(6n+1){grid-column:auto}.project-cover,.project:nth-child(6n+1) .project-cover{aspect-ratio:4/3}.section-heading h2{font-size:95px}.section-heading>span{max-width:110px}.contact-form .form-group{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Project index — GIF identity and typographic list. */
.site-header{height:auto;min-height:190px;padding:22px 4%;gap:30px}
.identity{display:block;flex-shrink:0}
.identity img{width:clamp(180px,24vw,350px);max-height:190px;object-fit:contain}
.works{padding-top:60px}
.section-heading{margin-bottom:45px}
.section-heading h2{font-size:clamp(80px,12vw,180px)}
.project-grid{display:block;border-top:1px solid var(--line)}
.project{border-bottom:1px solid var(--line);scroll-margin-top:20px}
.project summary{display:flex;align-items:center;gap:35px;padding:30px 0;position:relative;transition:padding .35s ease,color .35s ease,background-color .35s ease}
.project-number{font-size:11px;color:var(--muted);min-width:25px;align-self:flex-start;padding-top:15px}
.project-meta{padding:0;display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;gap:20px;flex-direction:row}
.project-meta h3{font-size:clamp(30px,5.5vw,88px);font-weight:400;line-height:1.1;letter-spacing:-.055em;overflow-wrap:anywhere;transition:transform .35s ease}
.project-meta .project-symbol{font-size:clamp(28px,4vw,52px);line-height:1;font-weight:300;transition:transform .35s ease;display:block;flex-shrink:0}
.project details[open] .project-symbol{transform:rotate(45deg)}
.project details[open]>summary{color:var(--accent)}
.project summary:focus-visible{outline-offset:-2px}
.project-gallery{max-width:1200px;margin:0 auto;padding:10px 0 45px}
@media(hover:hover){.project summary:hover{padding-left:18px;padding-right:18px;color:var(--accent);background:#111}.project summary:hover h3{transform:translateX(6px)}}
@media(max-width:800px){.site-header{min-height:150px;gap:15px}.identity img{width:190px;max-height:130px}.site-header nav{gap:15px;flex-wrap:wrap;justify-content:flex-end}.works{padding-top:40px}.project summary{padding:25px 0;gap:18px}.project-number{padding-top:8px;min-width:18px}.project-meta{flex-direction:row;align-items:center}.project-meta h3{font-size:clamp(28px,6vw,50px)}.project-meta .project-symbol{font-size:28px}}
@media(max-width:480px){.site-header{flex-direction:column;align-items:flex-start;gap:15px;padding-bottom:25px}.identity img{width:220px;max-height:150px}.site-header nav{width:100%;justify-content:space-between}.section-heading h2{font-size:90px}.project summary{gap:12px}.project-meta{gap:10px}.project-meta h3{font-size:30px}.project-number{font-size:9px}.project-gallery{padding-bottom:25px}}
@media(prefers-reduced-motion:reduce){.project summary,.project-meta h3,.project-meta .project-symbol{transition:none!important}}

/* Continuous lowercase project list. */
.project-grid,.project{border:0}
.project summary{padding:9px 0;background:transparent;gap:0}
.project-meta{justify-content:flex-start}
.project-meta h3{font-weight:700;text-transform:lowercase;letter-spacing:-.055em;line-height:1.18;display:inline;padding:0 .09em;margin-left:-.09em;transition:background-color .18s ease,color .18s ease;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.project details[open]>summary{color:var(--fg)}
.project summary:focus-visible h3{background:#e8ff00;color:#080808}
@media(hover:hover){.project summary:hover{padding:9px 0;background:transparent;color:var(--fg)}.project summary:hover h3{transform:none;background:#e8ff00;color:#080808}}
@media(max-width:800px){.project summary{padding:9px 0;gap:0}}
@media(prefers-reduced-motion:reduce){.project-meta h3{transition:none}}

/* Full-width looping video header, matching the supplied layout. */
:root{--bg:#000;--accent:#e8ff00}
.video-header{height:36.458vw;min-height:280px;max-height:820px;padding:0;border:0;display:block;position:relative;isolation:isolate;background:#000}
.header-film{position:absolute;inset:0;overflow:hidden;z-index:-1}
.header-film video{display:block;width:100%;height:100%;object-fit:cover;opacity:.65}
.header-film::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.12) 0%,transparent 45%,#000 100%);pointer-events:none}
.video-header nav{position:absolute;right:4%;top:65px;display:flex;align-items:center;gap:32px}
.video-toggle{position:absolute;right:4%;bottom:80px;border:1px solid #555;color:#ddd;background:#0008;border-radius:30px;padding:8px 13px;font-size:10px;cursor:pointer;z-index:2}
.video-toggle[hidden]{display:none}
.works{position:relative;z-index:3;margin-top:-110px;padding:0 14% 120px;pointer-events:none}
.works>*{pointer-events:auto}
.section-heading{margin-bottom:20px}
.section-heading h1{color:#e8ff00;font-size:clamp(25px,2.6vw,54px);line-height:1.15;font-weight:700;letter-spacing:-.045em}
.project-grid{max-width:1450px}
.project summary{width:fit-content;max-width:100%;padding:9px 0}
.project-meta h3{font-size:clamp(34px,4.4vw,90px);font-weight:700;line-height:1.12}
.project-gallery{width:100%;max-width:none;background:#000}
.video-toggle:focus-visible{outline:2px solid #e8ff00;outline-offset:4px}
@media(max-width:800px){.video-header{height:43vw;min-height:250px}.video-header nav{top:30px;gap:22px}.video-toggle{bottom:48px}.works{margin-top:-45px;padding:0 7% 80px}.section-heading h1{font-size:30px}.project-meta h3{font-size:clamp(32px,5.5vw,60px)}}
@media(max-width:480px){.video-header{height:260px;min-height:0}.header-film video{object-fit:cover}.video-header nav{width:auto;left:6%;right:6%;justify-content:flex-end;gap:22px;top:22px}.video-toggle{right:6%;bottom:50px}.works{margin-top:-35px;padding:0 6% 60px}.section-heading h1{font-size:26px}.project-meta h3{font-size:clamp(29px,7vw,38px)}.project summary{padding:10px 0}}


/* HSBC film previews: lightweight visible poster + compact, accessible play overlay. */
.project-gallery .portfolio-video{position:relative;width:100%;aspect-ratio:16/9;background:#101010;overflow:hidden}
.project-gallery .portfolio-video video{display:block;width:100%;height:100%;object-fit:contain;aspect-ratio:16/9}
.project-gallery .portfolio-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:60px;height:60px;padding:0;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(0,0,0,.68);color:#fff;cursor:pointer;z-index:2;transition:background-color .2s ease,transform .2s ease;box-shadow:0 3px 14px #0007}
.project-gallery .portfolio-play svg{display:block;width:23px;height:23px;margin-left:3px}
.project-gallery .portfolio-play:hover{background:rgba(0,0,0,.90);transform:translate(-50%,-50%) scale(1.06)}
.project-gallery .portfolio-play:focus-visible{outline:2px solid #e8ff00;outline-offset:4px}
.project-gallery .portfolio-video.has-started .portfolio-play{display:none}
@media(max-width:800px){.project-gallery .portfolio-play{width:40px;height:40px;box-shadow:0 2px 10px #0008}.project-gallery .portfolio-play svg{width:15px;height:15px;margin-left:2px}}
@media(max-width:480px){.project-gallery .portfolio-play{width:36px;height:36px}.project-gallery .portfolio-play svg{width:14px;height:14px}}
@media(prefers-reduced-motion:reduce){.project-gallery .portfolio-play{transition:none}}


/* 27-10-2026 — Correctif de superposition video du header / liste de projets.
   Le header et la video restent a l'arriere-plan lorsque la liste commence
   par-dessus les 110 px de fondu (45/35 px sur tablette/mobile).
   L'ancien z-index:5 sur .site-header mettait le film par-dessus le texte,
   en particulier sur Safari. On cree deux niveaux independants : 0 et 2. */
.site-header.video-header{position:relative;z-index:0;isolation:isolate}
.video-header .header-film{z-index:0;pointer-events:none}
.video-header .header-film video{pointer-events:none}
.video-header nav{z-index:1}
main{position:relative;z-index:2}
/* Le texte et les projets occupent bien l'avant-plan du film. */
.works{z-index:3}

/* 27-10-2026 — Noms toujours ExtraBold, espacement legerement accru. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.project summary{padding:5px 0}
.project-meta h3{font-weight:800;line-height:1.06}
@media(hover:hover){.project summary:hover{padding:5px 0}}
@media(max-width:800px){.project summary{padding:5px 0}}
@media(max-width:480px){.project summary{padding:5px 0}}