/* ============================================================
   SILLAGE — studio de direction artistique · éditorial "porcelaine"
   Palette : porcelaine froide / encre / ultramarine (Klein) + duos riso par projet
   Type : Instrument Serif (display) + Space Grotesk (UI & corps)
   ============================================================ */

@font-face{
  font-family:"Instrument";
  src:url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight:400; font-display:swap; font-style:normal;
}
@font-face{
  font-family:"Space";
  src:url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight:300 700; font-display:swap; font-style:normal;
}

:root{
  --porcelain:#EBE9E3;
  --porcelain-2:#E2DFD7;
  --paper:#F4F2EC;
  --ink:#16150F;
  --ink-2:#54514a;
  --ink-faint:#6a675d;
  --klein:#1D2AE8;
  --line:rgba(22,21,15,.16);
  --line-soft:rgba(22,21,15,.08);
  --font-display:"Instrument",Georgia,serif;
  --font-ui:"Space","Helvetica Neue",sans-serif;
  --wrap:1220px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--porcelain); color:var(--ink);
  font-family:var(--font-ui); font-weight:400;
  font-size:clamp(15.5px,1vw,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body:not(.no-cursor){cursor:none}
h1,h2,h3{font-family:var(--font-display); font-weight:400; line-height:1; margin:0; letter-spacing:.005em}
p{margin:0}
a{color:inherit; text-decoration:none}
em{font-style:italic}
ol,ul{margin:0; padding:0; list-style:none}
.wrap{width:min(var(--wrap),90vw); margin-inline:auto}
.sr-only,.skip{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip:focus{position:fixed; top:12px; left:12px; width:auto; height:auto; clip:auto; z-index:1000; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:6px; cursor:auto}
main[tabindex]:focus{outline:none}

/* ---------- custom cursor ---------- */
.cursor{position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--klein); pointer-events:none; z-index:999; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .26s cubic-bezier(.2,.8,.2,1), height .26s cubic-bezier(.2,.8,.2,1), background .26s; will-change:transform}
.cursor.grow{width:70px; height:70px; background:#fff}
.no-cursor .cursor{display:none}
/* curseur custom actif → on masque le curseur système même sur les contrôles */
body:not(.no-cursor) a,body:not(.no-cursor) button,body:not(.no-cursor) input,body:not(.no-cursor) [data-cursor]{cursor:none}
/* champs texte : garder le I-beam pour l'édition (le curseur custom masquerait le point d'insertion) */
body:not(.no-cursor) .ctrl-input{cursor:text}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--porcelain) 82%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; gap:24px; padding:18px 0}
.brand{font-family:var(--font-display); font-size:1.7rem; letter-spacing:-.01em}
.brand-dot{color:var(--klein)}
.nav-links{display:flex; gap:28px; margin-left:auto; font-size:.94rem; font-weight:500}
.nav-links a{position:relative; padding:2px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:0; background:var(--ink); transition:width .28s}
.nav-links a:hover::after{width:100%}
.nav-cta{display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:500; border:1px solid var(--line); padding:8px 15px; border-radius:999px; color:var(--ink-2); transition:border-color .25s, color .25s}
.nav-cta:hover{border-color:var(--ink); color:var(--ink)}
.av-dot{width:7px; height:7px; border-radius:50%; background:var(--klein); box-shadow:0 0 0 0 rgba(29,42,232,.5); animation:av 2.6s infinite}
@keyframes av{0%{box-shadow:0 0 0 0 rgba(29,42,232,.5)}70%{box-shadow:0 0 0 8px rgba(29,42,232,0)}100%{box-shadow:0 0 0 0 rgba(29,42,232,0)}}

/* burger (mobile) — caché sur desktop */
.nav-burger{display:none; position:relative; width:40px; height:36px; border:1px solid var(--line); border-radius:9px; background:transparent; cursor:pointer; padding:0}
.nav-burger:hover{border-color:var(--ink)}
.nav-burger:focus-visible{outline:2px solid var(--klein); outline-offset:2px}
.burger-bar,.burger-bar::before,.burger-bar::after{position:absolute; left:50%; width:18px; height:2px; background:var(--ink); border-radius:2px; transform:translateX(-50%); transition:transform .25s, top .25s, background .2s}
.burger-bar{top:50%; margin-top:-1px}
.burger-bar::before,.burger-bar::after{content:""}
.burger-bar::before{top:-6px}
.burger-bar::after{top:6px}
.nav.is-open .burger-bar{background:transparent}
.nav.is-open .burger-bar::before{top:0; transform:translateX(-50%) rotate(45deg)}
.nav.is-open .burger-bar::after{top:0; transform:translateX(-50%) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{padding:clamp(48px,9vw,120px) 0 0; position:relative}
.hero-eyebrow{font-size:.82rem; font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--klein); margin-bottom:34px}
.hero-title{font-size:clamp(2.9rem,8.4vw,7.4rem); line-height:.96; letter-spacing:-.015em; max-width:16ch}
.hero-title span{display:block}
/* stagger de lignes au reveal (animation du texte) */
.hero-title span:nth-child(2){transition-delay:.08s}
.hero-title span:nth-child(3){transition-delay:.16s}
.hero-title .hi{color:var(--klein)}
.hero-title .hi em{font-style:italic}
.hero-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-top:clamp(40px,6vw,72px); padding-bottom:clamp(40px,6vw,68px)}
.hero-lede{font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--ink-2); max-width:52ch}
.hero-scroll{font-family:var(--font-display); font-size:1.5rem; white-space:nowrap; border-bottom:1.5px solid var(--line); padding-bottom:4px; transition:border-color .25s}
.hero-scroll:hover{border-color:var(--ink)}
.hero-scroll span{display:inline-block; transition:transform .3s}
.hero-scroll:hover span{transform:translateY(4px)}

/* marquee */
.hero-marquee{border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:16px 0; overflow:hidden; white-space:nowrap; background:var(--ink); color:var(--porcelain)}
.mq-track{display:inline-flex; gap:30px; align-items:center; animation:marquee 26s linear infinite; will-change:transform}
.mq-track span{font-family:var(--font-display); font-size:1.5rem}
.mq-sep{color:var(--klein)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- TRAVAUX ---------- */
.travaux{padding:clamp(64px,9vw,120px) 0}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,56px)}
.sec-title{font-size:clamp(2rem,4.6vw,3.4rem); letter-spacing:-.01em}
.sec-title .count{color:var(--ink-faint); font-style:italic; font-size:.6em}
.sec-note{max-width:34ch; color:var(--ink-2); font-size:.96rem; text-align:right}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,36px)}
.work{position:relative}
/* duos riso par projet (déplacés depuis les style= inline → CSP stricte) */
.work[data-seed="7"]{--a:#1D2AE8;--b:#FF5C39}
.work[data-seed="23"]{--a:#0E1E14;--b:#8CD24A}
.work[data-seed="41"]{--a:#4413B8;--b:#F4C10F}
.work[data-seed="58"]{--a:#B31255;--b:#12324F}
.work[data-seed="72"]{--a:#175E52;--b:#EA7A2B}
.work[data-seed="90"]{--a:#20208C;--b:#F0568A}
.poster{display:block; width:100%; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:inherit; aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:linear-gradient(135deg,var(--a,#1D2AE8),var(--b,#FF5C39)); position:relative; box-shadow:0 1px 0 var(--line-soft); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s}
.poster:focus-visible{outline:2px solid var(--klein); outline-offset:4px}
.poster svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.poster::after{content:"↻ autre piste"; position:absolute; left:10px; bottom:10px; z-index:2; font-family:var(--font-ui); font-size:.7rem; font-weight:600; letter-spacing:.03em; color:var(--paper); background:rgba(22,21,15,.6); padding:4px 9px; border-radius:999px; opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s; pointer-events:none}
.work:hover .poster::after,.poster:focus-visible::after{opacity:1; transform:none}
.work:hover .poster{transform:translateY(-8px) scale(1.012); box-shadow:0 30px 50px -24px rgba(22,21,15,.45)}
.work-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:18px 2px 0}
.work-meta h3{font-size:1.5rem; letter-spacing:-.01em; transition:color .3s}
.work:hover .work-meta h3{color:var(--klein)}
.work-cat{font-size:.88rem; color:var(--ink-2); flex:1 1 auto}
.work-year{font-family:var(--font-ui); font-size:.8rem; font-weight:600; color:var(--klein); letter-spacing:.04em; transition:transform .3s cubic-bezier(.2,.8,.2,1); transform-origin:right}
.work:hover .work-year{transform:scale(1.18)}

/* ---------- APPROCHE ---------- */
.approche{padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); counter-reset:s}
.step{border-top:2px solid var(--ink); padding-top:22px}
.step-n{font-family:var(--font-ui); font-weight:600; font-size:.9rem; color:var(--klein); letter-spacing:.05em; display:block; margin-bottom:clamp(30px,5vw,58px)}
.step h3{font-size:clamp(1.7rem,2.6vw,2.3rem); margin-bottom:14px}
.step p{color:var(--ink-2); font-size:1rem; max-width:38ch}

/* ---------- STUDIO ---------- */
.studio{padding:clamp(64px,9vw,120px) 0; background:var(--paper); border-top:1px solid var(--line)}
.studio-in{display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(36px,6vw,80px); align-items:start}
.studio-statement{font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.1; letter-spacing:-.01em; margin-bottom:30px}
.studio-statement em{color:var(--klein); font-style:italic}
.studio-p{color:var(--ink-2); max-width:56ch; font-size:1.06rem}
.team{margin-top:34px; border-top:1px solid var(--line); display:grid; gap:0}
.team li{display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:.96rem; color:var(--ink-2); transition:color .25s, padding-left .3s cubic-bezier(.2,.8,.2,1)}
.team li:hover{color:var(--ink); padding-left:8px}
.team li span{font-family:var(--font-display); font-size:1.25rem; color:var(--ink); transition:color .25s}
.team li:hover span{color:var(--klein)}
.studio-stats{display:grid; gap:22px}
.stat{border-left:2px solid var(--klein); padding-left:18px; transition:padding-left .3s cubic-bezier(.2,.8,.2,1)}
.stat:hover{padding-left:24px}
.stat-n{display:block; font-family:var(--font-display); font-size:clamp(2.6rem,4vw,3.6rem); line-height:1; letter-spacing:-.02em; transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1), color .3s}
.stat:hover .stat-n{color:var(--klein); transform:scale(1.06)}
.stat-l{color:var(--ink-2); font-size:.94rem}

/* ---------- CONTACT ---------- */
.contact{padding:clamp(80px,12vw,160px) 0; text-align:center}
.contact-eyebrow{font-size:.82rem; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--klein); margin-bottom:26px}
.contact-title{font-size:clamp(2.6rem,6.6vw,5.6rem); line-height:1; letter-spacing:-.015em}
.contact-title em{font-style:italic}
.contact-mail{display:inline-block; margin-top:40px; font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.4rem); border-bottom:2px solid var(--line); padding-bottom:6px; transition:border-color .3s, color .3s}
.contact-mail:hover{border-color:var(--klein); color:var(--klein)}
.contact-fine{margin-top:26px; color:var(--ink-faint); font-size:.84rem; font-style:italic}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--ink); padding:40px 0}
.foot-in{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
.foot-brand{font-family:var(--font-display); font-size:1.6rem}
.foot-demo{color:var(--ink-2); font-size:.86rem; text-align:right; line-height:1.7}
.foot-demo a{border-bottom:1px solid var(--line); transition:border-color .25s}
.foot-demo a:hover{border-color:var(--klein); color:var(--klein)}

/* ---------- L'ATELIER (générateur jouable) ---------- */
.atelier{padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line); background:var(--paper)}
.atelier-lab{display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:clamp(32px,5vw,72px); align-items:center; margin-top:clamp(20px,3vw,32px)}
.atelier-stage{display:grid; place-items:center}
.atelier-poster{width:min(320px,82%); aspect-ratio:4/5; border-radius:8px; overflow:hidden; background:var(--porcelain-2); box-shadow:0 34px 64px -30px rgba(22,21,15,.55)}
.atelier-poster svg{width:100%; height:100%; display:block}
.atelier-controls{display:flex; flex-direction:column; gap:26px}
.ctrl{display:flex; flex-direction:column; gap:12px}
.ctrl-lab{font-family:var(--font-ui); font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-faint)}
.ctrl-input{width:92px; font-family:var(--font-display); font-size:2rem; line-height:1; text-align:center; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--porcelain); color:var(--ink)}
.ctrl-input:focus-visible{outline:2px solid var(--klein); outline-offset:2px; border-color:var(--klein)}
.swatches{display:flex; gap:10px; flex-wrap:wrap}
.swatch{width:42px; height:42px; border-radius:9px; border:2px solid transparent; box-shadow:inset 0 0 0 1px var(--line-soft); padding:0; cursor:pointer; transition:transform .2s}
.swatch:hover{transform:translateY(-2px)}
.swatch.is-active{border-color:var(--ink)}
.swatch:focus-visible{outline:2px solid var(--klein); outline-offset:2px}
.variants{display:flex; gap:8px; flex-wrap:wrap}
.vbtn{font-family:var(--font-ui); font-size:.86rem; font-weight:500; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink-2); cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.vbtn:hover{border-color:var(--ink); color:var(--ink)}
.vbtn.is-active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.vbtn:focus-visible{outline:2px solid var(--klein); outline-offset:2px}
.dice{align-self:flex-start; display:inline-flex; align-items:center; gap:10px; font-family:var(--font-ui); font-size:.98rem; font-weight:600; padding:13px 22px; border-radius:999px; border:0; background:var(--klein); color:#fff; cursor:pointer; box-shadow:0 12px 26px -12px rgba(29,42,232,.9); transition:transform .2s, box-shadow .2s}
.dice:hover{transform:translateY(-2px); box-shadow:0 18px 32px -12px rgba(29,42,232,.8)}
.dice:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.dice-face{font-size:1.35rem; line-height:1; display:inline-block}
.dice.rolling .dice-face{animation:roll .5s ease}
@keyframes roll{50%{transform:rotate(200deg) scale(1.25)}}
.atelier-fine{color:var(--ink-faint); font-size:.84rem; font-style:italic; max-width:42ch}

/* ---------- SERVICES ---------- */
.services{padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line)}
.svc-list{display:grid; gap:0}
.svc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:24px; align-items:baseline; padding:24px 4px; border-top:1px solid var(--line); transition:padding-left .3s cubic-bezier(.2,.8,.2,1)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc:hover{padding-left:14px}
.svc-n{font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.01em; transition:color .25s}
.svc:hover .svc-n{color:var(--klein)}
.svc-d{color:var(--ink-2); font-size:.98rem; max-width:46ch}

/* ---------- AVIS ---------- */
.avis{padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line); background:var(--paper)}
.avis-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,32px)}
.avis-card{margin:0; display:flex; flex-direction:column; gap:20px; padding:30px 28px; background:var(--porcelain); border-radius:8px; border:1px solid var(--line-soft); transition:transform .3s, box-shadow .3s}
.avis-card:hover{transform:translateY(-4px); box-shadow:0 26px 44px -26px rgba(22,21,15,.4)}
.avis-card blockquote{margin:0; font-family:var(--font-display); font-size:1.35rem; line-height:1.28}
.avis-card figcaption{font-family:var(--font-ui); font-size:.92rem; font-weight:600; color:var(--ink)}
.avis-card figcaption span{color:var(--ink-faint); font-weight:400}

/* ---------- reveals ---------- */
[data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .step{padding-top:18px}
  .step-n{margin-bottom:12px}
  .atelier-lab{grid-template-columns:1fr; gap:34px}
  .atelier-stage{order:-1}
  .avis-grid{grid-template-columns:1fr}
  .studio-in{grid-template-columns:1fr}
  .studio-stats{grid-template-columns:repeat(3,1fr); gap:16px}
  .stat-l{font-size:.82rem}
}
@media (max-width:640px){
  .nav-burger{display:inline-grid; place-items:center; margin-left:auto}
  .nav-cta{display:none}
  .nav-links{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; background:color-mix(in srgb,var(--porcelain) 96%,transparent); border-bottom:1px solid var(--line); padding:6px 0; backdrop-filter:blur(8px)}
  .nav.is-open .nav-links{display:flex}
  .nav-links a{padding:13px 20px; width:100%}
  .nav-links a::after{display:none}
  .grid{grid-template-columns:1fr; gap:34px}
  .sec-note{text-align:left}
  .svc{grid-template-columns:1fr; gap:6px; padding:20px 4px}
  .svc:hover{padding-left:0}
  .hero-foot{flex-direction:column; align-items:flex-start}
  .studio-stats{grid-template-columns:1fr}
  .foot-in{flex-direction:column; align-items:flex-start}
  .foot-demo{text-align:left}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1; transform:none}
  .mq-track{animation:none}
  body:not(.no-cursor){cursor:auto}
}