:root{
  --black:#0d0d0d;
  --white:#ffffff;

  --surface:#ffffff;
  --surface-2:#f2f2f2;
  --chip-bg:#ffffff;
  --ink:#0d0d0d;
  --ink-mid:#6b6b6b;
  --ink-soft:#3d3d3d;
  --border-soft:#cfcfcf;
}
[data-theme="dark"]{
  --surface:#0d0d0d;
  --surface-2:#161616;
  --chip-bg:#202020;
  --ink:#f2f2f2;
  --ink-mid:#9a9a9a;
  --ink-soft:#d0d0d0;
  --border-soft:#2a2a2a;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--surface);
  font-family:"Schibsted Grotesk",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
main{flex:1 0 auto;}
footer{flex-shrink:0;}
a{color:inherit;text-decoration:none;}
a:hover{opacity:.7;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.work-tile:focus-visible,
.idx-tile:focus-visible,
.idx-hero:focus-visible,
.gallery-item:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:-2px;
}

.lang-fr{display:none;}
html[data-lang="fr"] .lang-en{display:none;}
html[data-lang="fr"] .lang-fr{display:revert;}

.lang-toggle{
  background:rgba(255,255,255,.1);
  border:none;
  border-radius:99px;
  padding:12px 14px;
  margin-right:0;
  cursor:pointer;
  color:#fff;
  font-family:inherit;
  font-weight:500;
  font-size:14px;
  letter-spacing:0;
  transition:transform .15s ease, background .2s ease;
  line-height:1;
}
.lang-toggle:hover{background:rgba(255,255,255,.12);}
.lang-toggle:active{transform:scale(0.88);}

.nav-burger{
  display:none;
  position:relative;
  z-index:101;
  width:32px;
  height:24px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  flex-direction:column;
  justify-content:space-between;
}
.nav-burger span{
  display:block;
  width:100%;
  height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-burger.is-open span:nth-child(1){transform:translateY(11px) rotate(45deg);}
.nav-burger.is-open span:nth-child(2){opacity:0;}
.nav-burger.is-open span:nth-child(3){transform:translateY(-11px) rotate(-45deg);}

/* ---------- Nav, partagee sur toutes les pages ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:74px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:24px;
  padding:0 44px;
  color:var(--white);
}
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(13,13,13,.5);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav .brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--white);
  text-decoration:none;
  justify-self:start;
}
.nav .brand img{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:12px;
  object-fit:cover;
  background:#fff;
  overflow:hidden;
  color:transparent;
}
.nav .brand-text{display:flex;flex-direction:column;gap:2px;}
.nav .brand-name{font-weight:700;font-size:17px;line-height:1;}
.nav .brand-role{font-weight:400;font-size:13px;line-height:1;color:rgba(255,255,255,.6);}
.nav-right{display:contents;}
#nav-ul{
  justify-self:center;
  background:rgba(255,255,255,.1);
  border-radius:99px;
  padding:5px;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.nav-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
}
.availability-badge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:99px;
  background:rgba(255,255,255,.1);
  font-weight:500;
  font-size:14px;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}
.availability-badge .dot{
  width:8px;height:8px;
  border-radius:99px;
  background:#3ddc72;
  box-shadow:0 0 6px rgba(61,220,114,.8);
  flex-shrink:0;
}
.nav-contact{padding:13px 22px;font-size:15px;font-weight:700;line-height:1;white-space:nowrap;}
.nav-vimeo{display:none;}
.nav ul{
  list-style:none;
  display:flex;
  gap:4px;
  margin:0;padding:0;
  font-weight:500;
  position:relative;
}
.nav-pill{
  position:absolute;
  top:0;left:0;
  border-radius:99px;
  background:#fff;
  transition:width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
  z-index:0;
  pointer-events:none;
  opacity:0;
}
.nav-pill.is-ready{opacity:1;}
.nav ul li{position:relative;z-index:1;}
.nav ul a{color:rgba(255,255,255,.82);display:inline-flex;align-items:center;padding:12px 20px;border-radius:99px;font-size:15px;font-weight:500;line-height:1;}
.nav ul a:hover{color:var(--white);opacity:1;}
.nav ul a.active{
  color:#0d0d0d;
  font-weight:700;
}
.theme-toggle{
  background:rgba(255,255,255,.1);
  border:none;
  padding:4px;
  margin:0;
  cursor:pointer;
  color:rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:40px;
  height:40px;
  border-radius:99px;
  flex-shrink:0;
}
.theme-toggle:hover{color:var(--white);opacity:1;}
.theme-toggle svg{
  position:absolute;
  top:10px;left:10px;
  width:20px;
  height:20px;
  display:block;
  transition:opacity .35s ease, transform .35s ease;
}
.theme-toggle .icon-sun{opacity:0;transform:rotate(-90deg) scale(.5);}
.theme-toggle .icon-moon{opacity:1;transform:rotate(0deg) scale(1);}
[data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0deg) scale(1);}
[data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(.5);}

/* ---------- Hero video, page d'accueil uniquement ---------- */
.hero{
  position:relative;
  width:100%;
  margin-top:74px;
  aspect-ratio:2/1;
  max-height:75vh;
  min-height:420px;
  overflow:hidden;
  background:var(--black);
}
.hero-video-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  --hero-zoom:1;
}
.hero-video-wrap video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  transform:scale(var(--hero-zoom));
  pointer-events:none;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%);
}
.hero-caption{
  position:absolute;
  right:44px;bottom:48px;
  z-index:2;
  color:rgba(255,255,255,.65);
  font-weight:500;
  font-size:13px;
  letter-spacing:.02em;
}
.hero-content{
  position:absolute;
  left:44px;right:44px;bottom:48px;
  z-index:2;
}
.hero-content h1{
  margin:0;
  color:var(--white);
  font-weight:700;
  font-size:clamp(48px,10vw,118px);
  line-height:.92;
  letter-spacing:-.045em;
}
.hero-content p{
  margin:16px 0 0;
  color:#ffffff;
  font-weight:500;
  font-size:clamp(20px,2.6vw,32px);
  line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}

/* ---------- Home : intro + stats ---------- */
.home-intro{
  background:var(--surface-2);
  color:var(--ink);
  padding:104px 44px 56px;
}
.home-intro-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:56px;
  align-items:start;
}
.home-intro-grid h2{
  margin:0;
  font-weight:700;
  font-size:clamp(32px,4vw,54px);
  line-height:1.12;
  letter-spacing:-.035em;
}
.home-intro-side{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding-top:12px;
}
.home-intro-side p{
  margin:0;
  font-weight:400;
  font-size:19px;
  line-height:1.65;
  color:var(--ink-mid);
}
.home-intro-side .btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.btn-solid{
  background:var(--ink);
  color:var(--surface);
  border-radius:99px;
  padding:14px 22px;
  font-weight:700;
  font-size:15px;
}
.btn-ghost{
  background:var(--chip-bg);
  color:var(--ink);
  border-radius:99px;
  padding:14px 22px;
  font-weight:500;
  font-size:15px;
}
.home-stats{
  max-width:1280px;
  margin:72px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.home-stats .stat-item{
  background:var(--chip-bg);
  border-radius:18px;
  padding:24px;
}
.home-stats .stat-num{color:var(--ink);}
.home-stats .stat-label{color:var(--ink-mid);}

/* ---------- Home : travaux selectionnes ---------- */
.home-selected{
  background:var(--surface);
  color:var(--ink);
  padding:88px 44px 100px;
}
.home-selected-inner{max-width:1280px;margin:0 auto;}
.home-selected-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  padding-bottom:30px;
}
.home-selected-head h2{
  margin:0;
  font-weight:700;
  font-size:clamp(28px,4vw,44px);
  letter-spacing:-.04em;
}
.work-tile{
  position:relative;
  border-radius:24px;
  background:linear-gradient(135deg,#2b2b2b 0%,#0a0a0a 75%);
  overflow:hidden;
  display:block;
  color:inherit;
}
.work-tile img,
.work-tile video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
  transition:transform .5s ease, filter .5s ease;
}
.work-tile:hover img,
.work-tile:hover video{
  transform:scale(1.035);
  filter:brightness(0.96);
}
[data-theme="dark"] .work-tile:hover img,
[data-theme="dark"] .work-tile:hover video{
  filter:brightness(1.06);
}
.work-feature{
  aspect-ratio:21/9;
  display:flex;
  align-items:flex-end;
}
.work-feature::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%);
  pointer-events:none;
  z-index:1;
}
.work-feature-inner{
  position:relative;
  z-index:2;
  padding:34px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  width:100%;
  gap:30px;
}
.work-feature-inner .work-kicker{
  font-weight:500;
  font-size:15px;
  color:rgba(255,255,255,.62);
}
.work-feature-inner .work-title{
  display:block;
  margin-top:10px;
  font-weight:700;
  font-size:clamp(28px,4vw,52px);
  letter-spacing:-.04em;
}
.work-row-2{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.work-row-3{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.work-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.work-card .work-tile{aspect-ratio:16/10;}
.work-row-3 .work-tile{aspect-ratio:1;}
.work-card-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.work-card-meta .work-name{
  font-weight:700;
  font-size:26px;
  color:var(--ink);
}
.work-card-meta .work-sub{
  font-weight:400;
  font-size:15px;
  color:var(--ink-mid);
  white-space:nowrap;
}
.work-row-3 .work-name{
  font-weight:500;
  font-size:19px;
  color:var(--ink);
}
.work-tile-label{
  position:relative;
  z-index:1;
  padding:14px 16px;
  font-size:12px;
  color:var(--ink-mid);
  align-self:flex-end;
  margin-top:auto;
}

/* ---------- Home : intro deux entrees ---------- */
.home-paths-intro{
  max-width:1280px;
  margin:0 auto;
  padding:96px 44px 0;
}
.home-paths-intro h2{
  margin:0;
  font-weight:700;
  font-size:clamp(28px,4vw,44px);
  letter-spacing:-.04em;
}
.home-paths-intro p{
  margin:16px 0 0;
  max-width:560px;
  font-weight:400;
  font-size:19px;
  line-height:1.65;
  color:var(--ink-mid);
}

/* ---------- Home : reconnaissances ---------- */
.home-recog{
  background:var(--surface-2);
  padding:88px 44px;
}
.home-recog-inner{
  max-width:1280px;
  margin:0 auto;
  background:var(--surface);
  border-radius:28px;
  padding:64px 56px;
}
.home-recog-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:56px;
  align-items:start;
}
.home-recog-grid h2{
  margin:0;
  font-weight:700;
  font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.035em;
}
.home-recog-grid p{
  margin:16px 0 0;
  font-weight:400;
  font-size:18px;
  line-height:1.65;
  color:var(--ink-mid);
}
.recog-badges{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.recog-badge{
  background:var(--surface);
  border-radius:18px;
  padding:24px;
}
.recog-badge .badge-title{
  font-weight:700;
  font-size:21px;
}
.recog-badge .badge-meta{
  display:block;
  margin-top:8px;
  font-weight:400;
  font-size:15px;
  color:var(--ink-mid);
}

/* ---------- Home : apercu About ---------- */
.home-about{
  background:var(--surface-2);
  padding:96px 44px;
}
.home-about-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0.65fr 1.6fr;
  gap:56px;
  align-items:center;
}
.home-about-grid h2{
  margin:0;
  font-weight:700;
  font-size:clamp(30px,4vw,52px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.home-about-grid p{
  margin:22px 0 0;
  max-width:560px;
  font-weight:400;
  font-size:19px;
  line-height:1.7;
  color:var(--ink-soft);
}
.home-about-meta{
  margin-top:34px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:560px;
}
.home-about-meta .meta-box{
  background:var(--surface-2);
  border-radius:18px;
  padding:22px 24px;
}
.home-about-meta .meta-box .meta-label{
  font-weight:400;
  font-size:15px;
  color:var(--ink-mid);
}
.home-about-meta .meta-box .meta-value{
  display:block;
  margin-top:7px;
  font-weight:700;
  font-size:19px;
}
.home-about-link{
  display:inline-block;
  margin-top:24px;
  font-weight:700;
  font-size:19px;
  text-decoration:underline;
  text-underline-offset:3px;
}

[data-slot].is-dragover{
  outline:3px dashed var(--ink);
  outline-offset:-3px;
}

/* ---------- Index Artistique/Technique, format magazine ---------- */
.idx-header{
  background:var(--surface-2);
  color:var(--ink);
  padding:130px 44px 40px;
}
.idx-header-row{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
  flex-wrap:wrap;
}
.idx-header-title{
  display:flex;
  align-items:flex-end;
  gap:30px;
  flex-wrap:wrap;
}
.idx-header-title h1{
  margin:0;
  font-weight:700;
  font-size:clamp(44px,7vw,82px);
  line-height:.92;
  letter-spacing:-.05em;
}
.idx-header-title p{
  margin:0 0 10px;
  max-width:420px;
  font-weight:400;
  font-size:18px;
  line-height:1.6;
  color:var(--ink-mid);
}
.idx-filters{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding-bottom:12px;
}
.idx-filters > span{
  border-radius:99px;
  padding:11px 18px;
  font-weight:500;
  font-size:14px;
  background:var(--chip-bg);
  color:var(--ink);
}
.idx-filters > span.is-active{
  background:var(--ink);
  color:var(--surface);
  font-weight:700;
}

.idx-hero{
  display:block;
  position:relative;
  aspect-ratio:32/9;
  background:radial-gradient(90% 130% at 22% 30%,#2b2b2b 0%,#0a0a0a 78%);
  overflow:hidden;
  color:var(--white);
}
.idx-hero-inner{
  position:relative;
  z-index:2;
  height:100%;
  padding:40px 44px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}
.idx-hero-kicker{font-weight:500;font-size:15px;color:rgba(255,255,255,.62);}
.idx-hero-title{
  display:block;
  margin-top:10px;
  font-weight:700;
  font-size:clamp(32px,5vw,60px);
  line-height:.98;
  letter-spacing:-.045em;
}
.idx-hero-side{display:flex;align-items:center;gap:18px;}
.idx-hero-desc{
  font-weight:400;
  font-size:15px;
  line-height:1.4;
  color:rgba(255,255,255,.6);
  text-align:right;
  max-width:220px;
}

.idx-body{background:var(--surface);padding:20px 0 0;}
.idx-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
  padding:20px 24px;
}
.idx-tile{display:flex;flex-direction:column;gap:12px;color:inherit;}
.idx-thumb{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:var(--surface-2);
  border:1px dashed var(--border-soft);
}
.idx-tile-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:0 4px;
}
.idx-tile-name{font-weight:700;font-size:22px;color:var(--ink);}
.idx-tile-tag{font-weight:400;font-size:14px;color:var(--ink-mid);white-space:nowrap;}

.idx-spotlight{max-width:1280px;margin:0 auto;padding:0 24px 20px;}
.idx-spotlight a,
.idx-spotlight-static{
  display:block;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:3/1;
  background:radial-gradient(90% 130% at 72% 30%,#2b2b2b 0%,#0a0a0a 78%);
  color:var(--white);
}
.idx-spotlight-inner{
  position:relative;
  z-index:2;
  height:100%;
  padding:36px 40px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}

.idx-cta{
  background:var(--surface-2);
  padding:64px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.idx-cta h2{margin:0;font-weight:700;font-size:clamp(26px,4vw,40px);letter-spacing:-.035em;}
.idx-cta p{margin:14px 0 0;max-width:520px;font-weight:400;font-size:18px;line-height:1.6;color:var(--ink-mid);}
.idx-cta-actions{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap;}

.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}
.span-4{grid-column:span 4;}
.span-5{grid-column:span 5;}
.span-6{grid-column:span 6;}
.span-7{grid-column:span 7;}
.span-8{grid-column:span 8;}
.span-12{grid-column:span 12;}

/* ---------- Page projet, gabarit riche en medias ---------- */
.proj-title-band{
  background:var(--surface-2);
  color:var(--ink);
  padding:140px 44px 40px;
}
.proj-title-row{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
  flex-wrap:wrap;
}
.proj-title-row h1{
  margin:0;
  font-weight:700;
  font-size:clamp(44px,7vw,88px);
  line-height:.88;
  letter-spacing:-.05em;
}
.proj-title-text{display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap;}
.proj-title-text .lede{
  margin:0 0 12px;
  max-width:380px;
  font-weight:400;
  font-size:18px;
  line-height:1.6;
  color:var(--ink-mid);
}
.proj-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding-bottom:14px;
  max-width:340px;
}
.proj-tags .chip{background:var(--chip-bg);color:var(--ink);}

.proj-quote{padding:56px 44px 44px;}
.proj-quote-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:start;
}
.proj-quote-grid h2{
  grid-column:span 2;
  margin:0;
  font-weight:700;
  font-size:clamp(22px,3vw,30px);
  line-height:1.15;
  letter-spacing:-.03em;
}

.proj-footer-nav{
  background:var(--surface-2);
  color:var(--ink);
  padding:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.proj-footer-nav a{font-weight:500;font-size:16px;color:var(--ink-mid);}

/* ---------- Index Artistique/Technique, format magazine ---------- */
.marquee{
  overflow:hidden;
  background:var(--surface-2);
  width:100%;
  margin:40px 0;
  padding:22px 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:48px;
  white-space:nowrap;
  animation:marquee-scroll 32s linear infinite;
}
.marquee-track span{
  font-weight:600;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-mid);
}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;}
}

/* ---------- Grille Profil, page d'accueil ---------- */
.paths{
  padding:120px 44px 140px;
  background:var(--surface-2);
}
.paths-label{
  max-width:1280px;
  margin:0 auto 40px;
  font-weight:700;
  font-size:clamp(28px,4vw,40px);
  color:var(--ink);
  letter-spacing:-.02em;
}
.paths-grid{
  max-width:1280px;
  margin:64px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:stretch;
}
.path-card{
  padding:64px 48px;
  border-radius:28px;
}
.path-card h2{
  margin:0;
  font-weight:700;
  font-size:clamp(32px,3.4vw,48px);
  line-height:1.05;
  letter-spacing:-.03em;
}
.path-card p{
  margin:22px 0 0;
  max-width:44ch;
  font-weight:400;
  font-size:18px;
  line-height:1.7;
}
.chips{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  padding:11px 18px;
  border-radius:99px;
  font-weight:500;
  font-size:15px;
  line-height:1;
}
.path-card--art{background:var(--black);color:var(--white);}
.path-card--art p{color:rgba(255,255,255,.78);}
.path-card--art .chip{background:rgba(255,255,255,.12);color:var(--white);}
.path-card--tech{background:var(--surface);color:var(--ink);}
.path-card--tech p{color:var(--ink-mid);}
.path-card--tech .chip{background:var(--chip-bg);color:var(--ink);}
.path-link{
  display:inline-block;
  margin-top:32px;
  font-weight:600;
  font-size:15px;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ---------- En-tete de page, About et Contact ---------- */
.page-header{
  max-width:1280px;
  margin:0 auto;
  padding:170px 44px 60px;
}
.page-header h1{
  margin:0;
  font-weight:700;
  font-size:clamp(44px,7vw,84px);
  line-height:.98;
  letter-spacing:-.04em;
}
.page-header .lede{
  margin:22px 0 0;
  max-width:640px;
  font-weight:400;
  font-size:20px;
  line-height:1.7;
  color:var(--ink-soft);
}

.info-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.info-item .info-title{
  font-weight:600;
  font-size:16px;
  color:var(--ink);
}
.info-item .info-meta{
  display:block;
  margin-top:2px;
  font-size:14px;
  color:var(--ink-mid);
}
.info-item .info-desc{
  margin-top:8px;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
}

/* ---------- En-tete type CV, About et Contact ---------- */
.cv-header{
  padding:170px 44px 60px;
}
.cv-header-inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:60px;
  justify-content:space-between;
  align-items:flex-start;
}
.cv-header-title h1{
  margin:0;
  font-weight:700;
  font-size:clamp(40px,6vw,72px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.cv-header-title .lede{
  margin:22px 0 0;
  max-width:480px;
  font-weight:400;
  font-size:19px;
  line-height:1.7;
  color:var(--ink-soft);
}
.cv-header-title .email-link{
  display:inline-block;
  margin-top:24px;
  font-weight:700;
  font-size:clamp(28px,4vw,44px);
  border-bottom:2px solid var(--ink);
  padding-bottom:4px;
}
.cv-header-meta{
  display:flex;
  gap:48px;
  flex-wrap:wrap;
}
.meta-item h3{
  margin:0 0 8px;
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-mid);
}
.meta-item p,
.meta-item a{
  margin:0;
  font-weight:500;
  font-size:16px;
  color:var(--ink);
}

.cv-portrait{
  max-width:1280px;
  margin:0 auto 20px;
  padding:0 44px;
}
.cv-portrait-box{
  width:100%;
  aspect-ratio:21/8;
  border-radius:20px;
  background:var(--surface-2);
  border:1px dashed var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-mid);
  font-size:14px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cv-portrait-box img,
.cv-portrait-box video,
.media-box img,
.media-box video,
.gallery-thumb img,
.gallery-thumb video,
.idx-hero img,
.idx-hero video,
.idx-thumb img,
.idx-thumb video,
.idx-spotlight img,
.idx-spotlight video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
  position:absolute;
  inset:0;
  transition:transform .5s ease;
}
.idx-tile:hover .idx-thumb img,
.idx-tile:hover .idx-thumb video{
  transform:scale(1.035);
}
.cv-portrait-box:has(img,video),
.media-box:has(img,video),
.gallery-thumb:has(img,video),
.work-tile:has(img,video),
.idx-hero:has(img,video),
.idx-thumb:has(img,video),
.idx-spotlight a:has(img,video),
.idx-spotlight-static:has(img,video){
  border:none;
  padding:0;
  background:transparent;
  box-shadow:inset 0 0 70px rgba(0,0,0,.55);
}

.cv-body{
  max-width:1280px;
  margin:0 auto;
  padding:80px 44px 120px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.bio-block{
  background:var(--surface-2);
  border-radius:22px;
  padding:36px 40px;
}
.bio-block h3{
  margin:0 0 12px;
  font-weight:700;
  font-size:13px;
  color:var(--ink-mid);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.bio-block p{
  margin:0;
  max-width:70ch;
  font-weight:400;
  font-size:18px;
  line-height:1.75;
  color:var(--ink-soft);
}
.bio-block .info-list{margin-top:22px;}
.bio-block .chips{margin-top:20px;}
.cv-body .chip{background:var(--chip-bg);}
.cv-btn{
  display:inline-block;
  margin-top:6px;
  padding:15px 30px;
  border-radius:99px;
  background:var(--ink);
  color:var(--surface);
  font-weight:600;
  font-size:15px;
  align-self:flex-start;
}
.cv-btn:hover{opacity:.85;}

/* ---------- Liste "Ou me trouver", page Contact ---------- */
.find-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.find-item{
  padding:14px 20px;
  border-radius:16px;
  background:var(--surface);
}
.find-item a{
  font-weight:600;
  font-size:16px;
}
.find-item span{
  display:block;
  margin-top:3px;
  font-size:13px;
  color:var(--ink-mid);
}

/* ---------- Grille Situation, page Contact ---------- */
.situation-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 32px;
}
.situation-grid .meta-item h3{margin-bottom:6px;}
.situation-grid .meta-item p{font-weight:500;font-size:16px;color:var(--ink);}

/* ---------- Pages projet detaillees ---------- */
.project-meta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.project-meta .meta-item p{color:var(--ink);}
.media-box{
  width:100%;
  aspect-ratio:16/9;
  border-radius:20px;
  background:var(--surface-2);
  border:1px dashed var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-mid);
  font-size:14px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.code-block{
  margin:0;
  padding:24px 26px;
  border-radius:16px;
  background:var(--ink);
  color:var(--surface);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:14px;
  line-height:1.7;
  overflow-x:auto;
  white-space:pre;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:24px;
}
.stat-item .stat-num{
  display:block;
  font-weight:700;
  font-size:clamp(28px,4vw,40px);
  letter-spacing:-.03em;
}
.stat-item .stat-label{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:var(--ink-mid);
}
.placeholder-note{
  margin-top:14px;
  font-size:13px;
  color:var(--ink-mid);
  font-style:italic;
}
.project-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.project-list-item{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 20px;
  padding:20px 24px;
  border-radius:16px;
  background:var(--surface);
}
.project-list-item .project-name{
  font-weight:600;
  font-size:17px;
}
.project-list-item .project-desc{
  flex:1 1 260px;
  font-size:15px;
  color:var(--ink-soft);
}
.project-list-item .project-link{
  font-size:14px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.project-footer-nav{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-top:8px;
}
.project-footer-nav a{
  font-weight:600;
  font-size:15px;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- Galerie Artistique ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
}
.gallery-item{
  grid-column:span 2;
  display:block;
  color:inherit;
}
.gallery-item--large{grid-column:span 3;}
.gallery-item .gallery-thumb{
  width:100%;
  aspect-ratio:4/3;
  border-radius:18px;
  background:var(--surface-2);
  border:1px dashed var(--border-soft);
  display:flex;
  align-items:flex-end;
  padding:14px 16px;
  font-size:12px;
  color:var(--ink-mid);
  transition:filter .3s ease, transform .3s ease;
  position:relative;
  overflow:hidden;
}
.gallery-item:hover .gallery-thumb{
  filter:brightness(0.97);
  transform:translateY(-3px);
}
[data-theme="dark"] .gallery-item:hover .gallery-thumb{
  filter:brightness(1.08);
}
.gallery-item .gallery-name{
  display:block;
  margin-top:14px;
  font-weight:600;
  font-size:16px;
  transition:opacity .3s ease;
}
.gallery-item:hover .gallery-name{
  opacity:.7;
}

/* ---------- Cartes Technique ---------- */
.tech-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.tech-card{
  display:block;
  padding:40px 40px 36px;
  border-radius:24px;
  background:var(--surface);
  color:inherit;
  transition:filter .3s ease, transform .3s ease;
}
.tech-card:hover{filter:brightness(0.97);transform:translateY(-3px);}
[data-theme="dark"] .tech-card:hover{filter:brightness(1.08);}
.tech-card .tech-title{
  display:block;
  font-weight:700;
  font-size:24px;
  letter-spacing:-.02em;
}
.tech-card .tech-desc{
  display:block;
  margin-top:12px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
}
.tech-card:hover .tech-title{opacity:.8;}

/* ---------- Slider avant/apres, reutilisable (About, pages projet) ---------- */
.compare{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  background:var(--surface-2);
  --pos:50%;
}
.compare img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  user-select:none;
}
.compare-after-wrap{
  position:absolute;
  inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.compare-handle{
  position:absolute;
  top:0;bottom:0;
  left:var(--pos);
  width:2px;
  background:rgba(255,255,255,.9);
  transform:translateX(-50%);
  pointer-events:none;
}
.compare-handle::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:34px;height:34px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transform:translate(-50%,-50%);
}
.compare-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
}
.compare-labels{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  font-size:13px;
  color:var(--ink-mid);
}

.media-box:has(img,video),
.cv-portrait-box:has(img,video){
  cursor:zoom-in;
  outline:none;
}
.media-box img,
.media-box video,
.cv-portrait-box img,
.cv-portrait-box video,
.gallery-thumb img,
.gallery-thumb video,
.work-tile img,
.work-tile video,
.idx-hero img,
.idx-hero video,
.idx-thumb img,
.idx-thumb video,
.idx-spotlight img,
.idx-spotlight video{
  outline:none;
  -webkit-user-drag:none;
  user-select:none;
}

.lightbox-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  cursor:zoom-out;
}
.lightbox-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.lightbox-overlay img,
.lightbox-overlay video{
  max-width:100%;
  max-height:100%;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:scale(.96);
  transition:transform .25s ease;
}
.lightbox-overlay.is-open img,
.lightbox-overlay.is-open video{
  transform:scale(1);
}

/* ---------- Contact ---------- */
.contact-grid{
  max-width:1280px;
  margin:0 auto;
  padding:80px 44px 120px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.contact-grid .bio-block{margin-bottom:0;}
.contact-col-left,
.contact-col-right{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.focus-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.focus-card{
  background:var(--surface);
  border-radius:16px;
  padding:22px 20px;
}
.focus-card h4{
  margin:0 0 12px;
  font-weight:700;
  font-size:16px;
  color:var(--ink);
}
.focus-card ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.focus-card li{
  font-size:14px;
  color:var(--ink-soft);
  padding-left:14px;
  position:relative;
}
.focus-card li::before{
  content:"-";
  position:absolute;
  left:0;
}
.contact-col-right .bio-block{
  background:var(--surface-2);
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-top:22px;
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-field label{
  font-weight:500;
  font-size:14px;
  color:var(--ink-mid);
}
.form-field input,
.form-field textarea{
  border:none;
  border-bottom:1px solid var(--border-soft);
  background:transparent;
  padding:10px 2px;
  font-family:inherit;
  font-size:17px;
  color:var(--ink);
  resize:vertical;
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-bottom-color:var(--ink);
}
.form-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}
.form-submit{
  align-self:flex-start;
  margin-top:6px;
  padding:16px 32px;
  border:none;
  border-radius:99px;
  background:var(--ink);
  color:var(--surface);
  font-family:inherit;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
}
.form-submit:hover{opacity:.85;}
.form-note{
  margin:0;
  font-weight:400;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-mid);
}
.form-note.is-visible{display:block;}
.form-note{display:none;}

/* ---------- Footer, partage sur toutes les pages ---------- */
footer{
  background:var(--black);
  color:var(--white);
  padding:54px 44px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  justify-content:space-between;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;
  color:rgba(255,255,255,.5);
}
.footer-bottom a{color:rgba(255,255,255,.5);}
.footer-bottom a:hover{color:var(--white);opacity:1;}
footer .headline{
  font-weight:700;
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.03em;
}
footer .email{
  display:inline-block;
  margin-top:16px;
  font-weight:400;
  font-size:22px;
  color:#a8a8a8;
}
.socials{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.socials a{
  padding:11px 20px;
  border-radius:99px;
  border:1px solid rgba(255,255,255,.35);
  font-weight:500;
  font-size:14px;
  color:var(--white);
}
.socials a:hover{background:rgba(255,255,255,.12);opacity:1;}

.socials--light{margin-top:4px;}
.socials--light a{
  border-color:var(--border-soft);
  color:var(--ink);
}
.socials--light a:hover{background:var(--surface);opacity:1;}

#about,
#artistique,
#technique,
#contact,
.path-card,
footer{
  scroll-margin-top:90px;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .paths-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .focus-grid{grid-template-columns:1fr;}
  .situation-grid{grid-template-columns:1fr;}
  .tech-grid{grid-template-columns:1fr;}
  .home-intro-grid{grid-template-columns:1fr;}
  .home-stats{grid-template-columns:1fr 1fr;}
  .work-row-2{grid-template-columns:1fr;}
  .work-row-3{grid-template-columns:1fr 1fr;}
  .home-recog-grid{grid-template-columns:1fr;}
  .recog-badges{grid-template-columns:1fr 1fr;}
  .home-recog-inner{padding:44px 28px;}
  .home-about-grid{grid-template-columns:1fr;}
  .idx-grid{grid-template-columns:1fr 1fr;}
  .span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:span 2;}
  .idx-hero{aspect-ratio:16/9;}
  .idx-spotlight a{aspect-ratio:16/9;}
}

@media (max-width:640px){
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery-item,
  .gallery-item--large{grid-column:span 2;}
  .home-stats{grid-template-columns:1fr 1fr;}
  .work-row-3{grid-template-columns:1fr;}
  .recog-badges{grid-template-columns:1fr;}
  .home-about-meta{grid-template-columns:1fr;}
  .idx-grid{grid-template-columns:1fr;}
  .span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:span 1;}
  .idx-header-title{flex-direction:column;align-items:flex-start;gap:14px;}
}

@media (max-width:720px){
  .nav{padding:20px 22px;display:flex;justify-content:space-between;}
  .hero{aspect-ratio:2/1;max-height:40vh;min-height:220px;}
  .hero-content{left:22px;right:22px;bottom:32px;}
  .hero-caption{right:22px;bottom:32px;font-size:11px;}
  .paths{padding:60px 22px 80px;}
  .path-card{padding:44px 30px;}
  .page-header{padding:140px 22px 40px;}
  .cv-header{padding:140px 22px 40px;}
  .idx-header{padding:120px 22px 32px;}
  .proj-title-band{padding:120px 22px 32px;}
  .proj-quote{padding:40px 22px 32px;}
  .proj-quote-grid{grid-template-columns:1fr 1fr;}
  .proj-quote-grid h2{grid-column:span 2;}
  .proj-footer-nav{padding:32px 22px;}
  .cv-portrait{padding:0 22px;}
  .cv-body{padding:56px 22px 80px;}
  .contact-grid{padding:0 22px 80px;}
  footer{padding:40px 22px;}

  /* Zones tactiles plus confortables */
  .lang-toggle{padding:10px 16px;}
  .proj-footer-nav a{display:block;padding:10px 0;}
  .idx-filters > span{padding:13px 18px;}

  /* Formats tres larges (21/9, 32/9...) trop ecrases sur petit ecran */
  .media-box[style*="21/9"],
  .media-box[style*="32/9"],
  #reel-embed{aspect-ratio:16/9 !important;}
  .hero-video-wrap{aspect-ratio:auto;}

  /* Menu mobile : place ici, apres les regles de base, pour etre sur de gagner */
  .nav-burger{display:flex;}
  .nav-right{
    display:flex;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    z-index:100;
    pointer-events:none;
    flex-direction:column;
    background:#0d0d0d;
    padding:100px 26px 32px;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-16px);
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .nav-right.is-open{
    pointer-events:auto;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
  }
  .nav-right ul li{
    opacity:0;
    transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .nav-right.is-open ul li{opacity:1;transform:translateY(0);}
  .nav-right ul li:nth-child(1){transition-delay:.05s;}
  .nav-right ul li:nth-child(2){transition-delay:.1s;}
  .nav-right ul li:nth-child(3){transition-delay:.15s;}
  .nav-right ul li:nth-child(4){transition-delay:.2s;}
  .nav-right ul li:nth-child(5){transition-delay:.25s;}
  #nav-ul{
    position:static;
    transform:none;
    background:none;
    padding:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .nav-pill{display:none;}
  .nav-right ul li{width:100%;}
  .nav-right ul a{
    display:block;
    padding:14px 2px;
    font-weight:700;
    font-size:clamp(34px,10vw,46px);
    letter-spacing:-.04em;
    color:rgba(255,255,255,.5);
    background:none;
  }
  .nav-right ul a.active{
    color:#fff;
    background:none;
  }
  .nav-actions{
    position:static;
    transform:none;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:auto;
    padding-top:32px;
  }
  .availability-badge{order:1;flex-basis:100%;justify-content:center;}
  .nav-contact{order:2;flex-basis:100%;text-align:center;padding:16px 22px;}
  .nav-vimeo,
  .lang-toggle,
  .theme-toggle{
    order:3;
    flex:1;
    width:auto;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:99px;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-weight:500;
    font-size:14px;
    text-decoration:none;
  }
  .theme-toggle{padding:0;}
  .theme-toggle svg{position:absolute;top:50%;left:50%;margin:-10px 0 0 -10px;width:20px;height:20px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}