/* MATIÈRE : ce qui change d'un client à l'autre tient dans :root. */
@font-face{font-family:"Bodoni";src:url(polices/bodoni-moda-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bodoni";src:url(polices/bodoni-moda-latin-wght-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(polices/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --fond:#F4F0EA;--panneau:#E6DED2;--encre:#1E1A16;--foncé:#171411;--doux:#6E665C;--trait:#DDD5C8;
  --accent:#9A7B5C;
  --titre:"Bodoni",Georgia,serif;--texte:"Inter",system-ui,sans-serif;
  --rayon:0px;--marge:clamp(20px,3.4vw,52px);--ecart:0px;--fond-menu:var(--foncé);--encre-menu:#F4F0EA;
  --doux-ease:cubic-bezier(.2,.75,.15,1);
}
body{font-size:16px}
h1,h2,h3{font-family:var(--titre);font-weight:400;line-height:1;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(40px,5.4vw,84px)}
h3{font-size:20px;line-height:1.15;letter-spacing:.04em}

/* Barre : transparente sur la photo, noir fumé dès le premier défilement */
.nav{color:#F4F0EA;transition:background-color .5s ease,padding .5s ease,transform .5s ease,backdrop-filter .5s}
.nav__logo{font-size:16px;letter-spacing:.2em;font-weight:500}
.nav__liens,.nav__contact{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav__liens a{opacity:.8;transition:opacity .3s}.nav__liens a:hover{opacity:1}
.nav--solide{background:rgba(23,20,17,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-block:14px}
@media(max-width:860px){.nav__contact{display:none}}

.fil{display:inline-flex;align-items:center;gap:34px;padding-bottom:8px;border-bottom:1px solid currentColor;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.fil i{width:16px;height:12px;background:currentColor;-webkit-mask:var(--fl) center/12px no-repeat;mask:var(--fl) center/12px no-repeat;transform:rotate(45deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fil:hover i{transform:rotate(45deg) translate(5px,-5px)}

/* Rideau : l'image monte depuis le bas */
.js [data-clip].bas{clip-path:none;transition:none}
.js [data-clip].bas>img{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--doux-ease) var(--d,0s),transform 1.9s var(--doux-ease) var(--d,0s)}
.js [data-clip].bas.vu>img{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.js [data-clip].bas>img{clip-path:none!important}}

/* Hero */
.hero{height:100svh;min-height:640px;overflow:hidden;color:#F4F0EA;background:var(--foncé)}
.hero__media{position:absolute;inset:0;animation:approche 3.2s var(--doux-ease) both}
.hero__img{position:absolute;left:0;top:0;width:100%;height:116%;object-fit:cover;will-change:transform;filter:saturate(.85) contrast(1.04)}
@keyframes approche{from{transform:scale(1.14);opacity:0}to{transform:none;opacity:1}}
.hero__voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,10,.66) 0%,rgba(18,14,10,.56) 45%,rgba(18,14,10,.86) 100%)}
.hero__txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--marge) clamp(36px,5vw,64px)}
h1{font-size:clamp(54px,9.4vw,156px);line-height:.92;display:flex;flex-direction:column}
.l2{padding-left:16vw}.l3{padding-left:32vw}
.hero__pied{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(28px,4vw,52px);padding-top:20px;border-top:1px solid rgba(244,240,234,.28);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* Studio */
.studio{display:grid;grid-template-columns:1fr .78fr .5fr;gap:clamp(16px,2vw,28px);padding-block:clamp(110px,13vw,200px);align-items:end}
.studio__txt{align-self:start}
.studio__txt p{margin-top:28px;max-width:20em;color:var(--doux);font-size:17px}
.studio__a{height:clamp(340px,46vw,680px)}
.studio__a img{height:116%;will-change:transform}
.studio__b{height:clamp(200px,22vw,330px);margin-bottom:clamp(60px,10vw,160px)}

/* Projets */
.projets{padding-bottom:clamp(90px,10vw,150px)}
.projets__tete{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(30px,3.6vw,52px)}
.projets .car__piste{padding-inline:var(--marge);scroll-padding-inline:var(--marge);gap:clamp(16px,2vw,28px)}
.projet{width:clamp(280px,42vw,640px);flex:none}
.grand{height:clamp(360px,34vw,520px)}
.projet__txt{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--trait)}
.projet__txt p{font-size:13px;color:var(--doux);letter-spacing:.06em;white-space:nowrap}
.projets__pied{margin-top:24px;font-size:13px;color:var(--doux);letter-spacing:.08em}

/* Pause plein écran */
.pause{height:clamp(480px,92vh,920px);overflow:hidden;background:var(--foncé);display:grid;place-items:center;color:#F4F0EA}
.pause img{position:absolute;left:0;top:-8%;width:100%;height:124%;object-fit:cover;filter:brightness(.55) saturate(.85);will-change:transform}
.pause p{position:relative;font-family:var(--titre);text-transform:uppercase;font-size:clamp(46px,7.4vw,124px);line-height:.95;text-align:center}

/* Prestations : section noir fumé */
.prest{background:var(--foncé);color:#F4F0EA;padding-block:clamp(100px,11vw,170px);--trait:rgba(244,240,234,.18)}
.prest__tete{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(44px,5vw,80px)}
.prest__tete p{max-width:21em;opacity:.7}
.prest__c{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);align-items:start}
.prest__c article:nth-child(even){margin-top:clamp(40px,7vw,110px)}
.prest__c .cadre{height:clamp(260px,26vw,400px);background:#2a2520}
.prest__c span{display:block;margin-top:18px;font-size:12px;letter-spacing:.14em;opacity:.55}
.prest__c h3{margin-top:6px}

/* Journal */
.journal{padding-block:clamp(110px,12vw,180px)}
.journal h2{margin-bottom:clamp(36px,4vw,60px)}
.journal__g{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:clamp(16px,2vw,28px);align-items:start}
.j1 .cadre{height:clamp(300px,36vw,540px)}.j2{margin-top:clamp(60px,9vw,140px)}.j2 .cadre{height:clamp(220px,24vw,360px)}.j3 .cadre{height:clamp(260px,29vw,440px)}
.journal h3{margin-top:16px;font-size:18px}

/* Contact */
.contact{background:var(--panneau)}
.contact__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px);padding-block:clamp(100px,11vw,160px)}
.contact h2+p{margin-top:30px;line-height:1.9;color:var(--doux)}
.contact .champ{margin-bottom:6px}
.pied{display:flex;justify-content:space-between;gap:20px;padding-block:24px;border-top:1px solid rgba(30,26,22,.14);font-size:13px;color:var(--doux)}

@media(max-width:860px){
  .l2{padding-left:10vw}.l3{padding-left:20vw}
  .hero__pied{flex-direction:column;align-items:flex-start}
  .studio{grid-template-columns:1fr 1fr}.studio__txt{grid-column:1/-1;margin-bottom:20px}.studio__a{height:92vw}.studio__b{height:52vw;margin-bottom:0}
  .projet{width:78vw}.grand{height:96vw}
  .prest__tete{flex-direction:column;align-items:flex-start}
  .prest__c{grid-template-columns:1fr 1fr}.prest__c .cadre{height:58vw}
  .journal__g,.contact__in{grid-template-columns:1fr}.j2{margin-top:0}.j1 .cadre,.j2 .cadre,.j3 .cadre{height:72vw}
}
@media(prefers-reduced-motion:reduce){.hero__media{animation:none}}

.contact__img{height:clamp(300px,32vw,480px)}