/* ============================================================ ZAURAT AGENCY — feuille de style partagée (pages projet) Reprend les tokens du design system de la home. Chaque page projet définit --pbg / --pac / --ptx sur . ============================================================ */ :root{ --bg:#FAFAF7; --ink:#0A0A0A; --ink-soft:#141414; --grey:#6B6B6B; --line:#E2E2DD; --accent:#FFED00; --f-display:'Space Grotesk',system-ui,sans-serif; --f-serif:'Instrument Serif',Georgia,serif; --f-body:'Inter',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace; --wrap:1440px; --pad:clamp(20px,5vw,88px); --ease:cubic-bezier(0.22,1,0.36,1); --ease-io:cubic-bezier(0.65,0,0.35,1); /* défauts marque (surchargés par page) */ --pbg:#0A0A0A; --pac:#FFED00; --ptx:#FAFAF7; } /* mobile : marges latérales généreuses (les textes collaient aux bords) */ @media (max-width:760px){ :root{ --pad:32px; } } @media (max-width:360px){ :root{ --pad:26px; } } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .lenis.lenis-smooth{scroll-behavior:auto!important} body{font-family:var(--f-body);background:var(--bg);color:var(--ink);line-height:1.5;overflow-x:hidden;cursor:none} @media (pointer:coarse){body{cursor:auto}} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:var(--ink)} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)} .mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey)} .tag{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-serif);font-style:italic; font-weight:400;font-size:clamp(14px,1.5vw,16px);letter-spacing:0;text-transform:none;color:var(--grey);line-height:1} .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;margin-top:1px} .serif-i{font-family:var(--f-serif);font-style:italic;font-weight:400} .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}} /* Curseur */ .cursor{position:fixed;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--ink); pointer-events:none;z-index:9999;transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s;mix-blend-mode:difference} .cursor--label{width:74px;height:74px;background:#fff} .cursor__txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .25s} .cursor--label .cursor__txt{opacity:1} @media (pointer:coarse){.cursor{display:none}} /* Page fade-in (léger, pas de loader complet) */ body.pload{opacity:0} body.pready{opacity:1;transition:opacity .6s var(--ease)} /* Nav */ .nav{position:fixed;top:0;left:0;width:100%;z-index:800;display:flex;align-items:center;justify-content:space-between; padding:20px var(--pad);transition:padding .4s var(--ease),background .4s var(--ease)} .nav.scrolled{padding:12px var(--pad);background:rgba(250,250,247,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} /* nav adaptative : couleur de la marque au-dessus du hero, encre au scroll */ .nav__logo{height:25px;transition:height .4s var(--ease),filter .4s var(--ease);filter:invert(var(--nav-inv,0))} .nav.scrolled .nav__logo{height:20px;filter:invert(0)} .nav__links{display:flex;align-items:center;gap:30px} .nav__links a{font-family:var(--f-display);font-weight:500;font-size:16px;color:var(--ptx);position:relative;transition:color .4s var(--ease)} .nav.scrolled .nav__links a{color:var(--ink)} .nav__links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:width .35s var(--ease)} .nav__links a:hover::after{width:100%} .nav__cta{padding:10px 22px;border:1px solid currentColor;border-radius:100px;font-size:15px!important;transition:background .35s var(--ease),color .35s var(--ease),border-color .4s var(--ease)} .nav__cta::after{display:none} .nav__cta:hover{background:var(--ptx);color:var(--pbg);border-color:var(--ptx)} .nav.scrolled .nav__cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} @media (max-width:720px){.nav__links .hideM{display:none}} /* Boutons */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:100px; font-family:var(--f-display);font-weight:500;font-size:16px; transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s} .btn .ar{transition:transform .4s var(--ease)} .btn:hover .ar{transform:translateX(5px)} .btn--primary{background:var(--ink);color:var(--bg)} .btn--primary:hover{background:var(--ink-soft);transform:translateY(-2px)} .btn--ghost span.u{position:relative} .btn--ghost span.u::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .btn--ghost:hover span.u::after{transform:scaleX(1)} .btn--onbrand{background:var(--ptx);color:var(--pbg)} .btn--onbrand:hover{transform:translateY(-2px)} .btn--outline{border:1px solid currentColor} /* ============================================================ PAGE PROJET ============================================================ */ /* Barre de progression scroll */ .pbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--pac);z-index:900} /* Hero projet — plein cadre couleur de marque */ .phero{background:var(--pbg);color:var(--ptx);padding:calc(96px + 3vw) 0 clamp(40px,6vw,80px);position:relative;overflow:hidden} .phero__back{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12px; letter-spacing:.08em;text-transform:uppercase;color:var(--ptx);opacity:.7;transition:opacity .3s,gap .3s var(--ease)} .phero__back:hover{opacity:1;gap:14px} .phero__ey{margin:clamp(30px,5vw,60px) 0 0;color:var(--ptx);opacity:.72} .phero__title{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:.9; font-size:clamp(56px,13vw,190px);color:var(--pac);margin:14px 0 0} .phero__sub{font-family:var(--f-serif);font-style:italic;font-size:clamp(20px,2.6vw,32px); max-width:24ch;margin:24px 0 0;color:var(--ptx);line-height:1.28} .phero__meta{display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,72px);margin-top:clamp(40px,6vw,72px); border-top:1px solid color-mix(in srgb,var(--ptx) 24%,transparent);padding-top:26px} .phero__meta div{min-width:120px} .phero__meta dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:7px} .phero__meta dd{font-family:var(--f-display);font-weight:500;font-size:clamp(15px,1.5vw,18px)} /* Intro / contexte */ /* padding-block, pas padding : le raccourci écrasait le padding-inline de .wrap et collait le contenu aux bords (désalignement avec .phero / .pband / .pnext) */ .pintro{padding-block:clamp(70px,10vw,140px)} .pintro__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,110px);align-items:start} .pintro__l{position:sticky;top:110px} .pintro__l .tag{margin-bottom:20px} .pintro__l ul{list-style:none;margin-top:8px;border-top:1px solid var(--line)} .pintro__l li{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line); font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase} .pintro__l li span:last-child{color:var(--grey);text-align:right} .pintro__r h2{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.08; font-size:clamp(26px,3.6vw,46px);max-width:20ch} .pintro__r h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400} .pintro__r p{margin-top:26px;font-size:clamp(16px,1.5vw,19px);line-height:1.68;color:#2c2c2c;max-width:52ch} @media (max-width:860px){.pintro__grid{grid-template-columns:1fr;gap:30px}.pintro__l{position:static}} /* Bloc couleur de respiration */ .pband{background:var(--pbg);color:var(--ptx);padding:clamp(70px,11vw,150px) 0} .pband__q{font-family:var(--f-serif);font-style:italic;font-size:clamp(28px,5vw,64px);line-height:1.14; max-width:20ch;color:var(--pac)} .pband__q+.pband__c{margin-top:26px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7} /* Galerie art-zine (désorganisée) */ .pgal{padding-block:clamp(60px,9vw,130px)} .pgal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(30px,5vw,56px)} .pgal__head h2{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;font-size:clamp(30px,5vw,60px);line-height:.95} .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,34px);align-items:start} .grid figure{position:relative;overflow:hidden;border-radius:3px;background:#f0efe9; box-shadow:0 20px 50px rgba(0,0,0,.10)} .grid figure img{width:100%;height:100%;object-fit:cover} .grid figure.contain{background:var(--pbg)} .grid figure.contain img{object-fit:contain} .grid figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--f-mono);font-size:10px; letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55); padding:5px 9px;border-radius:100px;backdrop-filter:blur(4px)} /* placements */ .g-a{grid-column:1/8;aspect-ratio:16/10} .g-b{grid-column:8/13;margin-top:9%;aspect-ratio:3/4} .g-c{grid-column:1/5;margin-top:5%;aspect-ratio:4/5} .g-d{grid-column:5/10;aspect-ratio:1/1} .g-e{grid-column:10/13;margin-top:8%;aspect-ratio:3/5} .g-f{grid-column:2/8;margin-top:2%;aspect-ratio:16/9} .g-g{grid-column:8/12;aspect-ratio:4/5} .g-wide{grid-column:1/13;aspect-ratio:16/8} .g-half-l{grid-column:1/7;aspect-ratio:4/3} .g-half-r{grid-column:7/13;margin-top:7%;aspect-ratio:4/3} .rot-l{transform:rotate(-1.5deg)}.rot-r{transform:rotate(1.6deg)} .grid figure{transition:transform .6s var(--ease),box-shadow .6s var(--ease)} .grid figure:hover{transform:rotate(0) scale(1.012);box-shadow:0 30px 70px rgba(0,0,0,.18);z-index:2} @media (max-width:820px){ .grid{grid-template-columns:1fr;gap:16px} .grid figure{grid-column:1/-1!important;margin-top:0!important;transform:none!important;aspect-ratio:4/3!important} .grid figure.tallM{aspect-ratio:3/4!important} } /* Deliverables + credits */ .pcredits{padding-block:clamp(50px,8vw,110px);border-top:1px solid var(--line)} .pcredits__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)} .pcredits h3{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.4vw,30px);margin-bottom:22px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chips span{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase; padding:8px 14px;border:1px solid var(--line);border-radius:100px} .pcredits dl{display:grid;grid-template-columns:auto 1fr;gap:14px 22px;align-items:baseline} .pcredits dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)} .pcredits dd{font-family:var(--f-display);font-weight:500;font-size:16px} @media (max-width:720px){.pcredits__grid{grid-template-columns:1fr;gap:40px}} /* Next project */ .pnext{background:var(--nbg,#0A0A0A);color:var(--ntx,#FAFAF7);padding:clamp(60px,9vw,120px) 0;display:block;position:relative;overflow:hidden} .pnext .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.6} .pnext__t{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:.92; font-size:clamp(46px,10vw,150px);color:var(--nac,#FFED00);margin-top:14px;transition:transform .6s var(--ease)} .pnext:hover .pnext__t{transform:translateX(2.2vw)} .pnext__r{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:20px} .pnext__r .go{font-family:var(--f-serif);font-style:italic;font-size:clamp(18px,2vw,24px)} .pnext__r .ar{font-size:clamp(30px,4vw,54px);line-height:1;transition:transform .6s var(--ease)} .pnext:hover .ar{transform:translate(10px,0)} /* Footer (identique home) */ .footer{background:var(--ink);color:var(--bg);padding:clamp(50px,7vw,80px) 0 40px} .footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:clamp(50px,8vw,90px)} .footer__brand .fw{height:30px;filter:invert(1);margin-bottom:20px} .footer__brand p{color:#8f8f8a;max-width:34ch;font-size:15px;line-height:1.6} .fcol h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8f8f8a;margin-bottom:18px} .fcol a{display:block;padding:7px 0;font-size:15px;color:var(--bg);opacity:.85;transition:opacity .3s,transform .3s var(--ease)} .fcol a:hover{opacity:1;transform:translateX(4px);color:var(--accent)} .footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid #262626;padding-top:26px} .footer__bottom p{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:#8f8f8a} @media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}} /* ============================================================ MOBILE — pages projet ============================================================ */ @media (max-width:600px){ .phero{padding-top:96px} .phero__sub{font-size:clamp(19px,5.6vw,24px);max-width:none} .phero__meta{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px} .phero__meta div{min-width:0} .pintro__l li{font-size:11px;letter-spacing:.02em} .pintro__l li span:last-child{max-width:52%} .pband__q{font-size:clamp(26px,7.4vw,36px)} .pgal__head{flex-direction:column;align-items:flex-start;gap:8px} .pcredits__grid{gap:36px} .pnext__t{font-size:clamp(40px,13.5vw,68px)!important} .grid figcaption{font-size:9px;left:9px;bottom:9px;padding:4px 8px} } @media (max-width:380px){ .phero__meta{grid-template-columns:1fr} }