/* ===========================================================
   Erwan Dumerchez — Portfolio canvas · v2
   =========================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#050505; --bg2:#0b0b0a; --bg3:#141413;
  --ink:#fafaf7; --ink2:#d6d6cf; --ink3:#9c998f;
  --border:rgba(255,255,255,.20); --border2:rgba(255,255,255,.11);
  --accent:#5b8cff;
  --ff:'Open Sans',system-ui,sans-serif;
  --ff-t:'Open Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--ff);
  overflow:hidden; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0}

/* ── HEADER ───────────────────────────────────── */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:88;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:26px clamp(18px,3.4vw,46px);
  pointer-events:none;
  background:linear-gradient(#050505cc,#05050500);
}
.hd>*{pointer-events:auto}
.brand{text-decoration:none; display:block; line-height:1; color:var(--ink);
  transition:opacity .35s var(--ease)}
body.sheet-open .brand{opacity:0; pointer-events:none}
.brand-n{
  display:block; font-family:var(--ff-t); font-weight:800;
  font-size:clamp(13px,1.05vw,15px); letter-spacing:.12em; text-transform:uppercase;
}
.brand-r{
  display:block; margin-top:7px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink3);
}
.nav{display:flex; align-items:center; gap:6px}
.nav-b{
  position:relative; padding:9px 14px; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.15em;
  text-transform:uppercase; font-weight:500; color:var(--ink2);
  transition:color .25s var(--ease); cursor:pointer;
}
.nav-b:hover,.nav-b[aria-expanded="true"]{color:var(--ink)}
.nav-b::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-b:hover::after{transform:scaleX(1)}
.car{
  width:5px;height:5px;margin-left:8px;display:inline-block;vertical-align:middle;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease);
}
.drop{position:relative}
.drop.on .car{transform:translateY(1px) rotate(225deg)}
.drop-m{
  position:absolute; top:calc(100% + 12px); right:0; width:262px;
  background:rgba(10,10,9,.92); backdrop-filter:blur(22px);
  border:1px solid var(--border2); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .4s var(--ease),visibility .3s;
}
.drop.on .drop-m{opacity:1;visibility:visible;transform:none}
.drop-i{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  width:100%; padding:12px 14px; text-align:left; cursor:pointer;
  font-size:13px; letter-spacing:.04em; color:var(--ink2);
  transition:background .25s,color .25s;
}
.drop-i:hover{background:rgba(255,255,255,.05); color:var(--ink)}
.drop-i.on{color:var(--ink)}
.drop-i.on::before{content:''; width:4px; height:4px; background:var(--accent);
  position:absolute; left:5px; top:50%; margin-top:-2px; border-radius:50%}
.drop-i b{font-weight:500}
.drop-i span{font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums}

/* ── CANVAS ───────────────────────────────────── */
#stage{position:fixed; inset:0; z-index:1; touch-action:none}
#stage.grab{cursor:grabbing}
#world{position:absolute; top:0; left:0; width:100%; height:100%}

.item{
  position:absolute; display:block; text-align:left;
  padding:0; cursor:pointer;
  animation:lev var(--d,8s) ease-in-out var(--dl,0s) infinite;
}
@keyframes lev{
  0%,100%{ transform:translateY(calc(var(--a,7px) * -1)) }
  50%    { transform:translateY(var(--a,7px)) }
}
@media (prefers-reduced-motion:reduce){ .item{animation:none} }
.ph{
  position:relative; overflow:hidden; background:var(--bg3);
  opacity:var(--o,.9); transition:opacity .5s var(--ease);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
}
.ph img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:saturate(.26) contrast(1.03) brightness(.92);
  transform:scale(1.02); opacity:0;
  transition:filter .55s var(--ease), transform .8s var(--ease), opacity .8s;
}
.ph img.rdy{opacity:1}
.ph::after{
  content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,.09);
  transition:border-color .4s var(--ease);
}
.meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; gap:14px; padding:22px 22px 18px;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.meta .t{
  font-family:var(--ff-t); font-weight:800; font-size:18px;
  letter-spacing:.02em; text-transform:none; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.meta .s{font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink2); white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.85)}

@media (hover:hover){
  .item:hover .ph{opacity:1}
  .item:hover .ph img{filter:saturate(1.08) contrast(1.02) brightness(1.06); transform:scale(1)}
  .item:hover .ph::after{border-color:rgba(255,255,255,.3)}
  .item:hover .meta{opacity:1; transform:none}
  .item:hover .meta{opacity:1; transform:none}
}
body.touch .ph{opacity:1}
body.touch .ph img{filter:saturate(1) brightness(1)}
body.touch .meta{opacity:1; transform:none}

/* ── HUD ──────────────────────────────────────── */
.hud{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:24px clamp(18px,3.4vw,46px);
  pointer-events:none;
  background:linear-gradient(#05050500,#050505cc);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.hud-f{color:var(--ink); font-weight:600}
.hud-t{color:var(--ink3)}
.vign{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 50%,transparent 60%,rgba(5,5,5,.42) 100%);
}
.loader{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-items:center;
  transition:opacity .6s var(--ease),visibility .6s}
.loader span{width:34px;height:1px;background:var(--ink3);position:relative;overflow:hidden}
.loader span::after{content:'';position:absolute;inset:0;background:var(--ink);
  animation:ld 1.1s var(--ease) infinite}
@keyframes ld{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.loader.off{opacity:0;visibility:hidden}

/* ── CURSEUR ──────────────────────────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:80; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  transition:opacity .3s; opacity:0;
}
.cursor span{
  display:block; width:100%; height:100%; border:1px solid rgba(255,255,255,.5);
  border-radius:50%; transition:transform .35s var(--ease), background .35s;
}
.cursor.on{opacity:1}
.cursor.hot span{transform:scale(.42); background:var(--ink); border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  #stage,#stage *{cursor:none}
}

/* ── SHEETS ───────────────────────────────────── */
.sheet{
  position:fixed; inset:0; z-index:70; background:var(--bg);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .6s var(--ease), visibility .5s;
}
.sheet.open{opacity:1; visibility:visible; transform:none}
.sheet-x{
  position:fixed; top:22px; left:clamp(18px,3.4vw,46px); z-index:89;
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:#050505;
  padding:13px 20px; border:1px solid #fff; background:#fff;
  transition:opacity .25s; cursor:pointer;
}
.sheet-x:hover{opacity:.82}
.sheet-x i{width:9px;height:9px;position:relative;display:block}
.sheet-x i::before,.sheet-x i::after{content:'';position:absolute;inset:auto 0 4px 0;height:1px;background:currentColor}
.sheet-x i::before{transform:rotate(45deg)}
.sheet-x i::after{transform:rotate(-45deg)}
.sheet-in{max-width:1280px; margin:0 auto; padding:clamp(90px,12vh,150px) clamp(20px,5vw,64px) 140px}

.eyebrow{font-family:var(--ff-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink2); margin-bottom:24px}
.pg-h{
  font-family:var(--ff-t); font-weight:800; line-height:.96;
  font-size:clamp(38px,7vw,86px); letter-spacing:-.035em; margin-bottom:30px;
}
.pg .pg-lead{font-size:clamp(16px,1.6vw,20px); line-height:1.7; color:var(--ink2); max-width:none}
.pg p{margin-bottom:18px; font-size:16.5px; line-height:1.78; color:var(--ink2); max-width:70ch}

/* projet */
.pj-head{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(30px,6vw,80px); align-items:start}
@media(max-width:880px){.pj-head{grid-template-columns:1fr}}
.pj-sub{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:20px}
.pj-acc{font-size:clamp(16px,1.7vw,21px); line-height:1.6; color:var(--ink); margin-bottom:22px; max-width:46ch}
.pj-desc{line-height:1.8; color:var(--ink2); max-width:60ch}
.pj-yt{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  padding:13px 22px; border:1px solid var(--border); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  transition:background .3s,border-color .3s;
}
.pj-yt:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3)}
.cr{border-top:1px solid var(--border2)}
.cr-r{display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; padding:13px 0;
  border-bottom:1px solid var(--border2); font-size:13.5px}
.cr-l{color:var(--ink3); letter-spacing:.04em}
.cr-v{color:var(--ink)}
.sec-t{
  margin:clamp(60px,9vw,110px) 0 26px; padding-top:26px; border-top:1px solid var(--border2);
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink2);
}
.sec-t b{color:var(--ink); font-weight:600}

/* comparateur avant/après */
.cmp{
  position:relative; overflow:hidden; background:var(--bg3);
  margin-bottom:clamp(18px,2.6vw,34px); touch-action:none; user-select:none;
  --p:50%;
}
.cmp img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.cmp .b{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp .b img{position:absolute; inset:0; height:100%}
.cmp .bar{
  position:absolute; top:0; bottom:0; left:var(--p); width:1px;
  background:rgba(255,255,255,.85); transform:translateX(-.5px); pointer-events:none;
}
.cmp .bar::after{
  content:''; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.85); border-radius:50%;
  background:rgba(5,5,5,.28); backdrop-filter:blur(4px);
}
.cmp .lb{
  position:absolute; top:16px; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  font-style:normal; padding:6px 10px; background:rgba(5,5,5,.55); backdrop-filter:blur(6px);
  pointer-events:none;
}
.cmp .lb.l{left:16px; color:var(--ink2)}
.cmp .lb.r{right:16px; color:var(--ink)}
@media(min-width:900px){ .cmp{cursor:ew-resize} }

/* contact */
.ct-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--border2); border:1px solid var(--border2); margin:48px 0 34px}
.ct-b{background:var(--bg); padding:26px 24px}
.ct-l{display:block; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); margin-bottom:12px}
.ct-v{font-size:16.5px; color:var(--ink); text-decoration:none; line-height:1.5}
a.ct-v:hover{color:var(--accent)}
.soc{display:flex; flex-wrap:wrap; gap:26px; margin-bottom:46px}
.soc a{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); text-decoration:none; transition:color .3s}
.soc a:hover{color:var(--ink)}
.cta{
  display:inline-block; padding:18px 34px; background:var(--ink); color:#050505;
  font-family:var(--ff-t); font-weight:800; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; transition:opacity .3s
}
.cta:hover{opacity:.82}

/* about */
.ab-h{font-size:clamp(36px,5vw,68px); line-height:1.05; letter-spacing:-.03em;
  max-width:22ch; hyphens:none; overflow-wrap:normal; margin-bottom:52px}
.pg-about{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,5vw,72px); align-items:start}
@media(max-width:880px){.pg-about{grid-template-columns:1fr}}
.ab-img img{width:100%; display:block; filter:saturate(.35) contrast(1.03); transition:filter .8s var(--ease)}
.ab-img:hover img{filter:saturate(1)}
.ab-serv{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border2);
  border:1px solid var(--border2); margin-top:44px}
.ab-serv div{background:var(--bg); padding:22px}
.ab-serv b{display:block; font-family:var(--ff-t); font-size:11px; color:var(--ink3); margin-bottom:8px}
.ab-serv span{font-size:14px}

@media(max-width:760px){
  .hud-t{display:none}
  .brand-r{display:none}
  .nav-b{padding:9px 10px; font-size:11px}
}

/* ===========================================================
   v2.1 — hero, liste par thème, contact, services, langue
   =========================================================== */

/* bouton Contact accentué (comme le site actuel) */
.nav-cta{
  margin-left:8px; padding:10px 20px; color:#fff;
  background:var(--rgb-r,#ff3226); font-weight:600;
}
.nav-cta:hover{color:#fff; background:#e02a1f}
.nav-cta::after{display:none}
a.nav-b{text-decoration:none; display:inline-block}

/* sélecteur de langue */
.lang{position:relative; margin-left:10px}
.lang-b{
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  min-width:104px; padding:10px 20px; border:1px solid var(--border); color:var(--ink2);
  font-family:var(--ff-mono); font-size:12.5px; font-weight:600; letter-spacing:.15em;
  transition:color .25s,border-color .25s;
}
.lang-b:hover{color:var(--ink); border-color:rgba(255,255,255,.3)}
.lang-m{
  position:absolute; top:calc(100% + 10px); right:0; min-width:150px;
  background:rgba(10,10,9,.94); backdrop-filter:blur(22px);
  border:1px solid var(--border2); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .36s var(--ease),visibility .28s;
}
.lang.on .lang-m{opacity:1; visibility:visible; transform:none}
.lang.on .car{transform:translateY(1px) rotate(225deg)}
.lang-m button{
  display:block; width:100%; text-align:left; padding:11px 13px; cursor:pointer;
  font-size:13px; color:var(--ink2); transition:background .25s,color .25s;
}
.lang-m button:hover{background:rgba(255,255,255,.05); color:var(--ink)}
.lang-m button.on{color:var(--ink)}

/* ── HERO ─────────────────────────────────────── */
.hero{
  position:fixed; inset:0; z-index:85; overflow:hidden;
  display:grid; place-items:center; text-align:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
body.entered .hero{opacity:0; visibility:hidden; pointer-events:none}
html.routed .hero{display:none}
.hero-car{position:absolute; inset:0}
.hero-car img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s var(--ease);
  filter:saturate(.5) brightness(.5);
  transform:scale(1.06);
}
.hero-car img.on{opacity:1}
.hero-veil{
  position:absolute; inset:0;
  background:radial-gradient(110% 80% at 50% 50%,rgba(5,5,5,.35) 0%,rgba(5,5,5,.9) 100%);
}
.hero-in{position:relative; z-index:2; padding:0 24px}
.hero-name{
  font-family:var(--ff-t); font-weight:800; line-height:.9;
  font-size:clamp(52px,11vw,160px); letter-spacing:-.045em;
}
.hero-name em{font-style:italic; font-weight:800}
.hero-sub{
  margin-top:28px; font-family:var(--ff-mono); font-size:clamp(13px,1.4vw,16px);
  font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--ink2);
}
.hero-go{
  margin-top:52px; display:inline-flex; align-items:center; gap:14px; cursor:pointer;
  padding:16px 30px; border:1px solid var(--border-hi,rgba(255,255,255,.28));
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  transition:background .3s,border-color .3s;
}
.hero-go:hover{background:rgba(255,255,255,.08); border-color:#fff}
.hero-go i{
  width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.soc-bar{
  position:fixed; z-index:86; bottom:26px; left:0; right:0;
  display:flex; justify-content:center; gap:12px; pointer-events:none;
  transition:opacity .4s var(--ease), visibility .4s;
}
.soc-bar a{
  pointer-events:auto;
  font-family:var(--ff-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); padding:11px 20px;
  border:1px solid rgba(255,255,255,.26); background:rgba(5,5,5,.5);
  backdrop-filter:blur(10px); transition:background .28s, border-color .28s, color .28s;
}
.soc-bar a:hover{background:#fff; border-color:#fff; color:#050505}
body.sheet-open .soc-bar,
body.entered .soc-bar,
html.routed .soc-bar{opacity:0; visibility:hidden}

/* ── LISTE DES PROJETS PAR THÈME ──────────────── */
.lst-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:52px}
.lst-tab{
  padding:13px 24px; border:1px solid var(--border); cursor:pointer;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2);
  transition:color .25s,border-color .25s,background .25s;
}
.lst-tab:hover{color:var(--ink); border-color:rgba(255,255,255,.4)}
.lst-tab.on{color:#050505; background:var(--ink); border-color:var(--ink)}
.lst-tab span{margin-left:10px; font-size:10px; opacity:.65; font-variant-numeric:tabular-nums}

.lst-sec{margin-bottom:clamp(48px,7vw,86px)}
.lst-h{
  display:flex; align-items:baseline; gap:18px; margin-bottom:26px;
  padding-bottom:16px; border-bottom:1px solid var(--border2);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink3);
}
.lst-h b{color:var(--ink); font-weight:600; font-family:var(--ff-t); letter-spacing:.16em}
.lst-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:clamp(22px,2.6vw,34px)}
.lst-c{display:block; text-align:left; cursor:pointer; width:100%;
  color:var(--ink); text-decoration:none}   /* <a> : pas de bleu de lien */
.lst-c .im{position:relative; overflow:hidden; background:var(--bg3)}
.lst-c img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:saturate(.38) brightness(1); transform:scale(1.03);
  transition:filter .5s var(--ease), transform .7s var(--ease);
}
.lst-c .im::after{content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,.09)}
.lst-c:hover img{filter:saturate(1.06) brightness(1.04); transform:scale(1)}
.lst-c .tt{
  display:block; margin-top:16px; font-family:var(--ff-t); font-weight:800;
  font-size:14.5px; letter-spacing:.08em; text-transform:uppercase;
}
.lst-c .ss{display:block; margin-top:7px; font-size:13.5px; color:var(--ink3)}

/* ── CONTACT (reprise du site actuel) ─────────── */
.ct-two{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(34px,6vw,86px); align-items:start; margin-top:46px}
@media(max-width:880px){.ct-two{grid-template-columns:1fr}}
.ct-line{padding:18px 0; border-bottom:1px solid var(--border2)}
.ct-line:first-child{padding-top:0}
.ct-line a,.ct-line span{font-size:clamp(15px,1.6vw,19px); font-weight:600; color:var(--ink); text-decoration:none}
.ct-line a:hover{color:var(--accent)}
.frm{display:flex; flex-direction:column; gap:14px}
.frm input,.frm textarea{
  width:100%; background:var(--bg3); border:1px solid var(--border2);
  color:var(--ink); font:inherit; font-size:16px; padding:18px 20px;
  transition:border-color .3s,background .3s;
}
.frm textarea{min-height:150px; resize:vertical}
.frm input::placeholder,.frm textarea::placeholder{color:var(--ink3)}
.frm input:focus,.frm textarea:focus{outline:none; border-color:rgba(255,255,255,.3); background:#17171a}
.frm button{
  align-self:flex-end; margin-top:8px; cursor:pointer;
  padding:17px 38px; background:var(--accent); color:#fff;
  font-family:var(--ff-t); font-weight:800; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; transition:opacity .3s;
}
.frm button:hover{opacity:.85}
.frm button:disabled{opacity:.5; cursor:default}
.frm-ok{display:none; align-self:flex-end; font-size:13px; color:var(--rgb-g,#23d84e)}

/* ── SERVICES ─────────────────────────────────── */
.srv{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border2);
  border:1px solid var(--border2); margin-top:34px}
@media(max-width:760px){.srv{grid-template-columns:1fr}}
.srv-c{background:var(--bg); padding:30px 28px}
.srv-c b{display:block; font-family:var(--ff-t); font-size:12px; color:var(--ink3); margin-bottom:14px}
.srv-c h3{font-family:var(--ff-t); font-weight:800; font-size:16.5px; letter-spacing:.07em;
  text-transform:uppercase; margin-bottom:12px}
.srv-c p{font-size:15.5px; line-height:1.72; color:var(--ink2); margin:0}

/* ===========================================================
   v2.2 — Fiche projet (reprise de /projects/<id>/, photos agrandies)
   =========================================================== */
:root{
  --rgb-r:#ff3226; --accent2:#23d84e;
  --border-hi:rgba(255,255,255,.28);
  --ff-mono:'Hind',system-ui,sans-serif;   /* petites étiquettes, comme sur le site */
  --ease-out:cubic-bezier(.16,1,.3,1);
}
#projectBody{max-width:1560px}          /* + 25 % de large : photos plus grandes */

.pp-head{margin-bottom:48px}
.pp-eyebrow{font-family:var(--ff-mono); font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px}
.pp-title{font-family:var(--ff-t); font-weight:800; font-size:clamp(42px,6.6vw,82px);
  line-height:1.04; letter-spacing:-.035em; color:var(--ink)}
.pp-sub{font-family:var(--ff-mono); font-size:18px; letter-spacing:.01em; color:var(--ink2); margin-top:16px}

.pp-main{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:64px; align-items:start}
@media(max-width:1000px){ .pp-main{grid-template-columns:1fr; gap:40px} .pp-aside{position:static} }

.pp-cmp{position:relative; overflow:hidden; aspect-ratio:16/9; user-select:none;
  touch-action:none; background:var(--bg3); border:1px solid var(--border2); cursor:col-resize; --p:50%}
.pp-cmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.pp-cmp .cmp-a{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.pp-handle{position:absolute; top:0; bottom:0; left:var(--p); transform:translateX(-50%);
  width:2px; background:var(--accent); z-index:3; pointer-events:none}
.pp-handle::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:rgba(250,250,247,.92); box-shadow:0 4px 24px rgba(0,0,0,.5)}
.pp-tag{position:absolute; bottom:18px; z-index:4; font-family:var(--ff-mono); font-size:11px;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:7px 14px;
  background:rgba(5,5,5,.72); backdrop-filter:blur(6px); pointer-events:none; font-style:normal}
.pp-tag.l{left:18px; color:var(--ink2)}
.pp-tag.r{right:18px; color:var(--bg); background:var(--ink)}

.pp-media{min-width:0}
.pp-desc{margin-top:38px}
.pp-p{font-size:18px; line-height:1.75; color:var(--ink2); max-width:none}

.pp-aside{position:sticky; top:104px; display:flex; flex-direction:column; gap:30px}
.pp-specs{display:flex; flex-direction:column}
/* crédits empilés : tout aligné à gauche, plus de valeurs ferrées à droite
   qui se cassaient sur deux lignes en escalier */
.pp-spec{padding:15px 0; border-bottom:1px solid var(--border2)}
.pp-spec:last-child{border-bottom:0}
.pp-spec dt{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:6px}
.pp-spec dd{font-size:16px; font-weight:600; line-height:1.45; color:var(--ink)}
.pp-cta{background:var(--bg2); border:1px solid var(--border2); padding:26px}
.pp-cta-t{font-family:var(--ff-mono); font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:12px}
.pp-cta-p{font-size:15.5px; line-height:1.68; color:var(--ink2); margin-bottom:22px}
.pp-btn{display:inline-flex; align-items:center; font-family:var(--ff-mono); font-size:12px;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:15px 28px;
  background:var(--accent); border:1px solid var(--accent); color:#060606;
  text-decoration:none; transition:all .25s var(--ease-out)}
.pp-btn:hover{background:transparent; color:var(--accent)}
.pp-btn--red{background:var(--rgb-r); border-color:var(--rgb-r); color:#fff}
.pp-btn--red:hover{background:transparent; color:var(--rgb-r)}
.pp-btn--green{background:var(--accent2); border-color:var(--accent2); color:#060606}
.pp-btn--green:hover{background:transparent; color:var(--accent2)}

/* planche de photogrammes — pleine largeur */
.pp-stills{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.8vw,24px); margin-top:clamp(64px,8vw,104px)}
@media(max-width:720px){ .pp-stills{grid-template-columns:1fr} }
.pp-stills img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border:1px solid var(--border2)}

.pp-video{margin-top:clamp(64px,8vw,104px); position:relative; aspect-ratio:16/9;
  background:var(--bg3); border:1px solid var(--border2)}
.pp-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}

.pp-next{margin-top:clamp(72px,9vw,112px); padding-top:44px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:32px}
.pp-next-l{font-family:var(--ff-mono); font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:10px}
.pp-next-t{font-family:var(--ff-t); font-weight:800; font-size:clamp(24px,3vw,40px);
  color:var(--ink); line-height:1.12; letter-spacing:-.02em}
@media(max-width:700px){ .pp-next{flex-direction:column; align-items:flex-start; gap:22px} }


/* ── Visionneuse plein écran (clic sur un photogramme) ───── */
.lb{
  position:fixed; inset:0; z-index:95; display:grid; place-items:center;
  background:rgba(5,5,5,.74); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  opacity:0; visibility:hidden; transition:opacity .32s var(--ease), visibility .32s;
}
.lb.on{opacity:1; visibility:visible}
.lb img{
  max-width:94vw; max-height:88vh; width:auto; height:auto; object-fit:contain;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9); transform:scale(.985);
  transition:transform .38s var(--ease);
}
.lb.on img{transform:none}
.lb-x{
  position:absolute; top:22px; right:26px; width:46px; height:46px; cursor:pointer;
  font-size:26px; line-height:1; color:#050505; background:#fff; border:1px solid #fff;
  transition:opacity .25s;
}
.lb-x:hover{opacity:.82}
.lb-a{
  position:absolute; top:50%; transform:translateY(-50%); cursor:pointer;
  width:54px; height:64px; font-size:30px; line-height:1; color:var(--ink);
  background:rgba(5,5,5,.5); border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px); transition:background .25s,color .25s,border-color .25s;
}
.lb-a:hover{background:#fff; color:#050505; border-color:#fff}
#lbP{left:22px}
.lb-n{right:22px}
.lb-c{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; color:var(--ink2);
}
.pp-stills img{cursor:zoom-in}
@media(max-width:700px){ .lb-a{display:none} }


/* ── Correctifs À propos / Services ──────────────────────── */
.ab-txt a{ color:var(--ink); text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.45);
  transition:text-decoration-color .25s }
.ab-txt a:hover{ text-decoration-color:#fff }

.srv-t{ font-family:var(--ff-t); font-weight:800; font-size:clamp(28px,3.6vw,46px);
  letter-spacing:-.025em; color:var(--ink); margin-bottom:30px;
  padding-top:30px; border-top:1px solid var(--border2) }
.srv{ margin-top:0 }
.srv-c{ padding:34px 32px }
.srv-c h3{ font-size:18px; margin-bottom:14px }
.srv-c p{ font-size:16px }

/* ===========================================================
   MOBILE — pas de plateau, pas de navigation à la souris :
   hero plein écran puis liste verticale, page qui défile.
   =========================================================== */
#mob{display:none}
.burger{display:none}
.mmenu{display:none}

@media (max-width:860px){
  body{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch }
  body.sheet-open{ overflow:hidden }

  /* le plateau et tout ce qui va avec disparaissent */
  #stage, .cursor, .vign, .soc-bar{ display:none !important }

  /* hero : dans le flux, plein écran, jamais masqué */
  /* pas d'écran d'accueil : on arrive directement sur les projets */
  .hero{ display:none !important }
  #mob{ position:relative; z-index:1 }
  body.sheet-open #mob{ visibility:hidden !important }

  /* liste des projets */
  #mob{ display:block; padding:96px 20px 90px }
  #mob .lst-grid{ grid-template-columns:1fr; gap:34px }
  .lst-c .tt{ font-size:16px }
  .lst-c .ss{ font-size:14px }

  .mob-foot{
    margin-top:72px; padding-top:34px; border-top:1px solid var(--border2);
    display:flex; flex-direction:column; gap:22px; align-items:flex-start;
  }
  .mob-foot > a{ font-size:16px; font-weight:600; color:var(--ink); text-decoration:none }
  .mob-soc{ display:flex; flex-wrap:wrap; gap:10px }
  .mob-soc a{
    font-family:var(--ff-mono); font-size:12px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none; color:var(--ink);
    padding:10px 16px; border:1px solid rgba(255,255,255,.26);
  }

  /* en-tête compact + menu plein écran */
  .hd{ padding:18px 20px; align-items:center }
  .brand-r{ display:none }
  .nav{ display:none }
  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    width:44px; height:44px; align-items:flex-end; cursor:pointer;
  }
  .burger span{ display:block; height:2px; width:26px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s }
  .burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg) }
  .burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg) }

  .mmenu{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    position:fixed; inset:0; z-index:92; background:var(--bg); padding:28px;
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  }
  .mmenu.on{ opacity:1; visibility:visible }
  .mmenu > button:not(.mmenu-x), .mmenu > a{
    text-align:left; padding:18px 0; cursor:pointer; text-decoration:none;
    font-family:var(--ff-t); font-weight:800; font-size:30px; letter-spacing:-.02em;
    color:var(--ink); border-bottom:1px solid var(--border2);
  }
  /* croix dessinée en deux barres : pas de glyphe à la merci de la police */
  .mmenu-x{
    position:absolute; top:18px; right:22px; width:46px; height:46px;
    background:#fff; cursor:pointer; font-size:0; color:transparent;
  }
  .mmenu-x::before, .mmenu-x::after{
    content:''; position:absolute; top:50%; left:50%; width:18px; height:2px;
    background:#050505; margin:-1px 0 0 -9px;
  }
  .mmenu-x::before{ transform:rotate(45deg) }
  .mmenu-x::after{ transform:rotate(-45deg) }
  .mmenu-lang{ display:flex; gap:10px; margin-top:34px }
  .mmenu-lang button{
    font-family:var(--ff-mono); font-size:13px; font-weight:600; letter-spacing:.16em;
    padding:12px 22px; border:1px solid var(--border); color:var(--ink2); cursor:pointer;
  }
  .mmenu-lang button.on{ background:#fff; border-color:#fff; color:#050505 }

  /* panneaux : marges resserrées */
  .sheet-in{ padding:96px 20px 90px }
  .sheet-x{ top:16px; left:20px; padding:11px 16px; font-size:11px }
  .pp-stills{ grid-template-columns:1fr }
  .pp-main{ gap:34px }
  .srv{ grid-template-columns:1fr }
  .ct-two{ gap:34px }
  .frm button{ align-self:stretch; text-align:center; justify-content:center }
}