*{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#0d0d0d;
  --white:#f2f0ed;
  --mid:#888;
  --line:rgba(0,0,0,.1);
}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',sans-serif;background:var(--white);color:var(--black);overflow-x:hidden;cursor:none}
body:hover{cursor:none;}
#title:hover{cursor:none;}
a:hover{cursor:none;}

/* ─── CURSOR ─── */
.cursor{
  position:fixed;
  width:12px;
  height:12px;
  background:var(--white);
  border-radius:50%;
  pointer-events:none;
  transform:translate3d(-50%,-50%,0);
  z-index:9999;
  transition:width .2s ease,height .2s ease,background .2s ease,opacity .2s ease;
  mix-blend-mode:difference;
}
.cursor.hover{width:40px;height:40px}
.cursor-ring{
  position:fixed;
  width:40px;
  height:40px;
  border:1px solid rgba(131, 131, 131, 0.551);
  border-radius:50%;
  pointer-events:none;
  transform:translate3d(-50%,-50%,0);
  z-index:9998;
  transition:transform .08s linear
}

/* ─── HERO ─── */
.hero{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.15) 0%,rgba(10,10,10,.55) 100%);z-index:2}

#title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(60px,12vw,180px);
  letter-spacing:-.05em;
  line-height:.8;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-65%);
  z-index:3;
  mix-blend-mode:difference;
  color:white;
  cursor:pointer;
  white-space:nowrap;
}
#title.sticky{
  mix-blend-mode:normal;
  position:fixed;
  top:0;
  left:8vw;
  transform:none;
  height:80px;
  display:flex;
  align-items:center;
  font-size:clamp(18px,2vw,28px);
  z-index:99;
  color:var(--black);
}
#title span{display:inline-block;transform:translateY(110%);opacity:0}


#title.sticky span{
  scale:var(--s, 1);
  transition:scale .08s ease;
}


/* TAGLINE — juste sous le logo */
.tagline{
  position:absolute;
  bottom:35%;left:50%;
  transform:translate(-50%, -50%);
  z-index:3;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:300;
  font-size:clamp(20px,1.1vw,35px);
  mix-blend-mode:difference;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  white-space:nowrap;
}

/* NAV */
.nav-hero{position:absolute;bottom:8%;width:100%;display:flex;justify-content:center;gap:clamp(30px,5vw,80px);z-index:3;font-weight:400;font-size:.9rem;letter-spacing:.15em;text-transform:uppercase}
.nav-hero a{color:rgba(245,242,238,.8);text-decoration:none;transition:color .3s ease}
.nav-hero a:hover{color:white}
.nav-hero.sticky{
  position:fixed;top:0;bottom:auto;left:0;right:0;
  height:80px;
  padding:0 8vw;
  display:flex;align-items:center;justify-content:flex-end;
  background:rgba(242,240,237,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  z-index:98;
  width:100%;
  transform:none;
}
.nav-hero.sticky a{color:var(--black)}

/* ─── DIVIDER ─── */
.divider{display:flex;align-items:center}
.divider-line{flex:1;height:1px;background:var(--line)}

/* ─── WORK ─── */
#projets-pro{padding:100px 8vw;background:var(--white)}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px}
.section-label{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mid)}
.section-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(52px,7vw,110px);font-weight:700;line-height:.85;letter-spacing:-.01em;color:var(--black);margin-top:8px;text-transform:uppercase}
.section-count{font-family:'Barlow Condensed',sans-serif;font-size:clamp(52px,7vw,110px);font-weight:300;color:rgba(0,0,0,.07);letter-spacing:-.02em}

/* GRID sans espace */
.projects-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  grid-template-rows:auto auto;
  gap:0;
  width:100%;
  line-height:0; /* élimine les espaces inline */
}
.project-item{
  position:relative;
  overflow:hidden;
  cursor:none;
  background:#c0bcb7;
  display:block; /* évite baseline gap */
}
.project-item:nth-child(1){grid-column:1;grid-row:1;aspect-ratio:16/10}
.project-item:nth-child(2){grid-column:2;grid-row:1 / span 2} /* couvre les 2 rangées */
.project-item:nth-child(3){grid-column:1;grid-row:2;aspect-ratio:16/10}

.project-bg-placeholder{
  width:100%;height:100%;
  display:block;
  transition:all .8s cubic-bezier(.2,.6,.2,1);
  filter: grayscale(1);
}
.project-item:hover .project-bg-placeholder{transform:scale(1.04);filter: grayscale(0);}
.project-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 55%);opacity:0;transition:opacity .5s ease}
.project-item:hover .project-overlay{opacity:1}
.project-info{
  position:absolute;
  bottom:15px;left:0;right:0;
  padding:22px;
  transform:translateY(6px);
  opacity:0;
  transition:all .5s ease;
}

.project-item:hover .project-info{transform:translateY(0);opacity:1}
.project-info .cat{
  font-family:'Barlow Condensed',sans-serif;
  font-size:.68rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(245,242,238,.6);
  margin-bottom:30px
}
.project-info .proj-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(22px,2.5vw,38px);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:white}
.proj-inner{width:100%;height:100%;display:flex;align-items:flex-end;padding:16px}
.proj-inner span{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.2)}

/* ─── STATEMENT — image pleine largeur ─── */
#statement{width:100%;position:relative;overflow:hidden;background:var(--black)}
.statement-img-placeholder{
  width:100%;height:26vh;display:block;position:relative;
  background:#0a0a0a;
}
.statement-img{
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 25%;
}

.statement-img-placeholder::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 28% 65%, rgba(55,45,30,.65) 0%,transparent 70%),
    radial-gradient(ellipse 55% 75% at 82% 28%, rgba(15,18,28,.9) 0%,transparent 70%);
}
.statement-img-placeholder::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px);
}
.statement-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size:256px;opacity:.45;
}
.statement-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%);z-index:2}
.statement-content{position:absolute;bottom:20px;left:8vw;right:8vw;z-index:3}
.statement-content blockquote{
  font-family:'Barlow Condensed',sans-serif;
  font-style:italic;
  font-size:clamp(32px,5vw,76px);
  font-weight:300;
  letter-spacing:.01em;
  line-height:1.05;
  color:white;
}
.statement-content blockquote em{font-style:normal;font-weight:700}
.statement-content cite{
  display:block;margin-top:14px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.28);
}

/* ─── ARTS ─── */
#projets-perso{padding:100px 8vw;background:var(--white)}
.arts-intro{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;margin-bottom:80px}
.arts-text h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(48px,7vw,110px);
  font-weight:700;line-height:.9;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--black);
}
.arts-text h2 em{font-style:italic;font-weight:300;color:var(--mid)}
.arts-body{font-size:.88rem;line-height:1.9;color:rgba(0,0,0,.48)}
.section-label-dark{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mid);margin-bottom:14px}




.arts-strip{display:flex;gap:3px;line-height:0}
.strip-item{flex:1;min-width:0;aspect-ratio:2/3;overflow:hidden;position:relative;cursor:none;display:block}
.strip-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(40%);
  transition:transform .8s cubic-bezier(.2,.6,.2,1),filter .6s ease;
}
.strip-item:hover .strip-img{transform:scale(1.05);filter:grayscale(0%)}
.strip-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);transition:background .4s ease;z-index:1}
.strip-item:hover .strip-overlay{background:rgba(0,0,0,.1)}
.strip-label{
  position:absolute;bottom:14px;left:14px;z-index:2;
  display:flex;flex-direction:column;gap:4px;
}
.strip-label-main{
  font-family:'Barlow Condensed',sans-serif;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;
  color:rgba(255,255,255,.65);
  transition:color .3s ease, transform .35s ease;
}
.strip-label-sub{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;font-size:.72rem;
  color:white;opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease;
}
.strip-item:hover .strip-label-main{
  color:white;
  transform:translateY(-20px);
}
.strip-item:hover .strip-label-sub{opacity:1;transform:translateY(0)}
.strip-item a{
  display:block;width:100%;height:100%;
  position:absolute;inset:0;z-index:3;
}

/* ─── PHOTO (prestation) — mosaïque, même langage visuel que Video ─── */
#projets-photo{padding:100px 8vw 110px;background:var(--white)}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  width:100%;
  line-height:0;
}
.photo-tile{
  position:relative;
  overflow:hidden;
  cursor:none;
  background:#c0bcb7;
  display:block;
  aspect-ratio:3/4;
}
.photo-tile img{
  width:100%;height:100%;
  display:block;
  transition:all .8s cubic-bezier(.2,.6,.2,1);
  filter:grayscale(1);
}
.photo-tile:hover img{transform:scale(1.04);filter:grayscale(0)}
.photo-tile-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 55%);opacity:0;transition:opacity .5s ease}
.photo-tile:hover .photo-tile-overlay{opacity:1}
.photo-tile-info{
  position:absolute;
  bottom:15px;left:0;right:0;
  padding:20px;
  transform:translateY(6px);
  opacity:0;
  transition:all .5s ease;
}
.photo-tile:hover .photo-tile-info{transform:translateY(0);opacity:1}
.photo-tile-info .cat{
  font-family:'Barlow Condensed',sans-serif;
  font-size:.68rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(245,242,238,.6);
  margin-bottom:10px
}
.photo-tile-info .ttl{font-family:'Barlow Condensed',sans-serif;font-size:clamp(18px,1.8vw,28px);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:white}
.photo-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:52px;
  font-family:'Barlow Condensed',sans-serif;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--black);text-decoration:none;
  border-bottom:1px solid var(--black);padding-bottom:4px;transition:gap .25s ease;
  cursor:none;
}
.photo-cta:hover{gap:16px}
.photo-preview-empty{
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mid);margin-top:8px;
}




/* ─── CONTACT ─── */
#contact{padding:120px 8vw;background:var(--white)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:start}
.about-col h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(48px,6vw,100px);
  font-weight:700;line-height:.9;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--black);
}
.about-col h2 .name-italic{font-style:italic;font-weight:300;color:var(--mid)}
.about-col p{margin-top:28px;font-size:.88rem;line-height:1.9;color:rgba(0,0,0,.48);max-width:380px}
.about-col .meta{margin-top:36px;display:flex;flex-direction:column;gap:8px}
.about-col .meta span{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.28)}
.about-col .meta a{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--black);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.about-col .meta a:hover{border-color:var(--black)}
.contact-col{padding-top:16px}
.contact-col h3{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mid);margin-bottom:44px}
.contact-links{display:flex;flex-direction:column}
.contact-link{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--black);transition:padding-left .25s ease}
.contact-link:first-child{border-top:1px solid var(--line)}
.contact-link:hover{padding-left:10px}
.contact-link .link-name{font-family:'Barlow Condensed',sans-serif;font-size:clamp(26px,3.5vw,50px);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.contact-link .link-arrow{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;transition:transform .25s ease}
.contact-link:hover .link-arrow{transform:translateX(5px)}
.contact-link .link-desc{font-family:'Barlow Condensed',sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.28);margin-top:1px}

/* ─── FOOTER — brut, scandinave ─── */
footer{
  padding:26px 8vw;
  border-top:2px solid var(--black);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(0,0,0,.3);
}
footer .footer-center{
  text-align:center;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.35em;
  color:var(--black)
}
footer .footer-center a{
  text-decoration: none;
  color: #0a0a0a;
}
.footer-sites{
  display:block;margin-top:6px;font-weight:400;letter-spacing:.15em;
  font-size:.62rem;text-transform:lowercase;
}
.footer-sites a,.footer-sites-soon{color:rgba(0,0,0,.35);text-decoration:none;transition:color .25s ease}
.footer-sites a.active{color:var(--black);font-weight:700}
.footer-sites a:hover{color:var(--black)}
.footer-sites-sep{margin:0 6px;color:rgba(0,0,0,.2)}
.footer-sites-soon{cursor:default}
footer .footer-right{text-align:right}

/* ─── REVEAL ─── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .85s cubic-bezier(.2,.6,.2,1),transform .85s cubic-bezier(.2,.6,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity .85s cubic-bezier(.2,.6,.2,1),transform .85s cubic-bezier(.2,.6,.2,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(36px);transition:opacity .85s cubic-bezier(.2,.6,.2,1),transform .85s cubic-bezier(.2,.6,.2,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  .contact-grid,.arts-intro{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .project-item:nth-child(n){grid-column:1;grid-row:auto;aspect-ratio:16/9}
  .section-header{flex-direction:column;align-items:flex-start;gap:8px}
  .arts-strip{flex-wrap:wrap}
  .strip-item{flex:0 0 calc(50% - 2px)}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  footer{grid-template-columns:1fr;text-align:center;gap:6px}
  footer .footer-right{text-align:center}
}
@media(max-width:600px){
  .nav-hero.sticky{gap:20px;font-size:.75rem}
}