html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: nav fixe; héro vidéo + phrase qui alterne (axe de comm); à propos texte / cube Rubik; 4 projets carrés + page « tous les projets » */
:root{
  --ink:#0d0c0b; --paper:#f2efe9; --orange:#ff5a36; --lilac:#c9b8f2; --violet:#8f6cf0; --grey:#8a857d;
  --f-disp:"Anybody","Arial Black",Impact,sans-serif;
  --f-body:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --g:clamp(24px,3.2vw,56px); --gl:max(var(--g),env(safe-area-inset-left,0px)); --gr:max(var(--g),env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.5;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.pad{padding-left:var(--gl);padding-right:var(--gr)}
.disp{font-family:var(--f-disp);font-weight:900;font-stretch:68%;text-transform:uppercase;line-height:.84;letter-spacing:-.01em;margin:0}
.pill{display:inline-flex;align-items:center;gap:12px;text-decoration:none;border-radius:999px;padding:12px 20px;font-weight:500;font-size:15px;transition:gap .3s,background .2s,color .2s;border:0;cursor:pointer;font-family:inherit}
.pill:hover{gap:20px}
.pill.ink{background:var(--ink);color:var(--paper)}
.pill.ink:hover{background:var(--violet)}
.more{align-self:flex-start;text-decoration:none;display:inline-flex;gap:14px;align-items:center;font-weight:500;transition:gap .3s,color .2s}
.more:hover{gap:24px;color:var(--violet)}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--paper);transition:background .35s,color .35s}
.nav.solid{background:var(--paper);color:var(--ink)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:block;line-height:0}
.logo img{height:40px;width:auto}
.nav ul{list-style:none;margin:0;padding:4px;display:flex;gap:2px;border-radius:999px;background:rgba(13,12,11,.5);transition:background .35s}
.nav.solid ul{background:rgba(13,12,11,.06)}
.nav ul a{display:block;padding:8px 16px;border-radius:999px;text-decoration:none;font-size:15px;transition:background .2s,color .2s}
.nav ul a:hover{background:rgba(242,239,233,.18)}
.nav.solid ul a:hover{background:rgba(13,12,11,.07)}
.nav ul a.on{background:var(--lilac);color:var(--ink)}
.nav .cta{background:var(--paper);color:var(--ink)}
.nav.solid .cta{background:var(--ink);color:var(--paper)}
.nav .cta:hover{background:var(--orange);color:var(--ink)}
.burger{display:none;background:var(--paper);color:var(--ink);border:0;border-radius:999px;padding:10px 18px;font:500 15px var(--f-body);cursor:pointer}
.nav.solid .burger{background:var(--ink);color:var(--paper)}
.mnav{position:fixed;inset:0;z-index:49;background:var(--lilac);color:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:4px;padding-block:96px 40px}
.mnav a{font-family:var(--f-disp);font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(56px,16vw,96px);line-height:.95;text-decoration:none}
.mnav a:hover{color:var(--violet)}
@media (max-width:820px){.nav ul,.nav .cta{display:none}.burger{display:block}}

/* ---------- HÉRO ---------- */
.hero{position:relative;height:clamp(560px,94svh,1040px);background:var(--ink);color:var(--paper);overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,11,.5),rgba(13,12,11,0) 25%,rgba(13,12,11,0) 45%,rgba(13,12,11,.72))}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.drag::after{content:"Lâche le fichier";position:absolute;inset:12px;border:1px dashed var(--orange);display:grid;place-items:center;font:500 15px var(--f-body);z-index:5;color:var(--paper);background:rgba(13,12,11,.45)}
.htxt{position:absolute;z-index:3;left:var(--gl);right:var(--gr);bottom:max(26px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:18px}
.lead{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;font-size:clamp(18px,1.7vw,24px)}
.dots{display:flex;gap:8px}
.dots button{position:relative;width:28px;height:10px;border-radius:999px;border:1.5px solid var(--paper);background:transparent;padding:0;cursor:pointer;transition:background .3s}
.dots button::after{content:"";position:absolute;inset:-14px -4px}
.dots button.on{background:var(--paper)}
.rot{position:relative;font-size:clamp(60px,10.4vw,200px);margin-top:.12em}
.phr{position:absolute;left:0;right:0;bottom:0;margin:0}
/* Les accents dépassent de la hauteur de ligne: le masque leur laisse de la place et le texte caché sort au-delà */
.phr .ln{display:block;overflow:hidden;padding-top:.2em;margin-top:-.2em;padding-bottom:.02em}
.phr .ln>span{display:block;transform:translateY(calc(100% + .25em));transition:transform .8s cubic-bezier(.7,0,.2,1)}
.phr.on .ln>span{transform:none}
.phr.out .ln>span{transform:translateY(calc(-100% - .25em))}
.phr .ln:nth-child(2)>span{transition-delay:.06s}
.phr.snap .ln>span{transition:none}
.rot .phr{top:0;bottom:auto}
.rot .phr:nth-child(1){color:var(--orange)}.rot .phr:nth-child(2){color:var(--lilac)}.rot .phr:nth-child(3){color:var(--paper)}
.tile input,.photo input{position:absolute;width:1px;height:1px;opacity:0}

/* ---------- À PROPOS + RUBIK ---------- */
.who{padding-block:clamp(90px,7vw,120px) clamp(90px,11vw,170px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.who-t{display:flex;flex-direction:column;gap:28px}
.who-t h2{font-size:clamp(56px,8.2vw,140px)}
.who-t h2 span.l{display:block}
.who-t h2 .l1{color:var(--orange)}.who-t h2 .l2{color:var(--violet)}
.who-t p{margin:0;max-width:40ch;font-size:clamp(18px,1.5vw,21px)}
.who-t p b{font-weight:500;color:var(--violet)}
.w{display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.w:hover{transform:rotate(-3deg) translateY(-.05em)}
.rk{display:flex;flex-direction:column;align-items:center;gap:22px;min-width:0}
.rbox{width:min(clamp(260px,32vw,470px),max(220px,48svh));aspect-ratio:1;max-width:100%;cursor:grab;touch-action:pan-y}
.rbox:active{cursor:grabbing}
.rbox canvas{width:100%!important;height:100%!important;display:block}
.dlab{position:relative;width:100%;font-size:clamp(36px,4.4vw,72px);text-align:center}
.dlab .phr{color:var(--violet)}
/* 3 boutons égaux en haut, 2 centrés dessous; la grille remplit la colonne jusqu'à la marge de droite */
.dpills{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:1fr;gap:6px;width:100%}
.dpills button{grid-column:span 2}
.dpills button:nth-child(4){grid-column:2/span 2}
@media (min-width:861px) and (max-width:1099px),(max-width:700px){.dpills{grid-template-columns:repeat(4,minmax(0,1fr))}.dpills button:nth-child(4){grid-column:span 2}.dpills button:nth-child(5){grid-column:2/span 2}}
.dpills button,.flt button{font:500 14px var(--f-body);border:0;background:rgba(13,12,11,.06);color:var(--ink);padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.dpills button:hover,.flt button:hover{background:rgba(143,108,240,.18)}
.dpills button.on,.flt button[aria-pressed="true"]{background:var(--violet);color:var(--paper)}
@media (max-width:860px){.who{grid-template-columns:minmax(0,1fr)}}

/* ---------- PROJETS ---------- */
.work{padding-block:clamp(40px,5vw,70px) clamp(90px,10vw,150px)}
.wh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.wh .disp{font-size:clamp(56px,8.2vw,140px)}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.pgrid.all{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;gap:12px;min-width:0;cursor:pointer}
.tile.hide{display:none}
.tile .vis{position:relative;display:block;aspect-ratio:1;max-width:100%;overflow:hidden;border-radius:4px}
.tile .bg{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tile:hover .bg{transform:scale(1.05)}
.tile .bg b{position:absolute;left:14px;bottom:10px;font-family:var(--f-disp);font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(40px,4.6vw,84px);line-height:.84;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pgrid.all .tile .bg b{font-size:clamp(44px,6vw,110px)}
.tile:hover .bg b{transform:translateY(-8px)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.has-img .bg b{display:none}
.tile.has-title .bg b{display:block;z-index:1}
.tile .go{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;transform:scale(0) rotate(-45deg);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.tile:hover .go{transform:scale(1) rotate(0)}
.tile .tc{display:flex;flex-direction:column;gap:2px}
.tile .tc strong{font-weight:500;font-size:18px}
.tile .tc span{color:var(--grey);font-size:14px}
@media (max-width:900px){.pgrid,.pgrid.all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.pgrid,.pgrid.all{grid-template-columns:1fr}}

.allp{padding-block:clamp(120px,14vw,190px) clamp(80px,10vw,140px)}
.allp .disp{font-size:clamp(64px,11vw,200px)}
.allp .intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin:28px 0 36px}
.allp .intro p{margin:0;max-width:44ch;font-size:clamp(18px,1.5vw,21px)}
.flt{display:flex;flex-wrap:wrap;gap:6px}
.back{margin-bottom:28px;display:inline-flex}
.band{background:var(--lilac);padding-block:clamp(56px,7vw,100px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.band .disp{font-size:clamp(44px,6vw,100px)}

/* ---------- ÉQUIPE ---------- */
.team{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:0 clamp(90px,10vw,150px)}
.photo{position:relative;min-height:clamp(340px,46vw,720px);background:var(--lilac);overflow:hidden;cursor:pointer}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:15px}
.photo .ph b{display:block;font-weight:400;font-size:22px}
.photo.has-img .ph{display:none}
.tt{display:flex;flex-direction:column;gap:22px;justify-content:center;padding-left:0}
.tt h2{font-size:clamp(44px,5.4vw,100px)}
.tt h2 span{color:var(--violet)}
.tt p{margin:0;max-width:44ch;font-size:clamp(18px,1.5vw,21px)}
@media (max-width:820px){.team{grid-template-columns:1fr}.tt{padding-left:var(--gl)}.tt h2{font-size:10.8vw}}

/* ---------- CONTACT ---------- */
.contact{background:var(--lilac);color:var(--ink);padding-block:clamp(72px,10vw,150px) 0}
.ask{margin:0 0 18px;font-size:18px}
.mail{display:block;width:100%;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;text-align:left;font-family:var(--f-disp);font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(26px,8.6vw,170px);line-height:.88;white-space:nowrap;transition:color .2s}
.mail:hover{color:var(--orange)}
.mail small{display:block;font:500 14px var(--f-body);text-transform:none;color:rgba(13,12,11,.6);margin-top:14px}
form{margin-top:clamp(56px,7vw,100px);font-size:clamp(22px,2.6vw,36px);line-height:1.6;letter-spacing:-.015em;max-width:1100px;color:rgba(13,12,11,.62)}
form input,form select{font:inherit;color:var(--ink);background:rgba(242,239,233,.6);border:0;padding:0 6px;outline:0;min-width:0;max-width:100%;border-radius:4px}
form input{width:9em}
form input#c-mail{width:11em}
form input:focus,form select:focus{background:var(--paper);color:var(--orange)}
form input::placeholder{color:rgba(13,12,11,.4)}
.send{margin-top:24px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
#ok{font-size:15px}
footer{margin-top:clamp(80px,10vw,140px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:22px 28px;color:rgba(13,12,11,.65);font-size:14px}
footer a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){footer{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 404 ---------- */
.nf{min-height:100svh;padding-block:88px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.nf-t{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.nf-t p{margin:0;max-width:44ch;font-size:clamp(18px,1.5vw,21px)}
.nf-t .nf-h{font-size:15px;color:var(--grey)}
.nf-t .nf-e{font-size:15px;font-weight:500;color:var(--orange)}
.nf h1{font-size:min(clamp(52px,7.4vw,130px),17svh);line-height:.98}
.nf h1 span{color:var(--violet)}
.nf{user-select:none;-webkit-user-select:none}
.nf-c{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;touch-action:none}
.cube404{position:relative;width:min(100%,60svh);aspect-ratio:1;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.nf-g{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.nf-g svg{overflow:visible;animation:nudge 1.5s ease-in-out infinite}
.nf-g path{fill:none;stroke:var(--paper);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px var(--ink)) drop-shadow(0 0 1px var(--ink))}
.nf-g span{background:var(--ink);color:var(--paper);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap}
@keyframes nudge{0%{transform:translateX(-26px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateX(26px);opacity:0}}
.cube404:active{cursor:grabbing}
.cube404 canvas{width:100%!important;height:100%!important;display:block}
.nf-s{margin:0;display:flex;gap:18px;font-size:15px;font-variant-numeric:tabular-nums}
.nf-s b{font-weight:500}
.nf-m{margin:0;min-height:1.5em;font-weight:500;color:var(--violet);text-align:center}
.nf-b{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.nf-b button{font:500 14px var(--f-body);border:0;background:rgba(13,12,11,.06);color:var(--ink);padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.nf-b button:hover:not(:disabled){background:rgba(143,108,240,.18)}
.nf-b button:disabled{color:var(--grey);cursor:default}
.nf-b button.go,.nf-b button.go:hover:not(:disabled){background:var(--violet);color:var(--paper);padding:12px 22px;font-size:15px}
.nf-b button.go:hover:not(:disabled){background:var(--orange);color:var(--ink)}
.no-cube .nf{grid-template-columns:minmax(0,1fr)}
.no-cube .nf-c,.no-cube .nf-h,.no-cube .nf-p{display:none}
@media (pointer:coarse){.nf-k{display:none}}
/* Téléphone: le cube et le bouton pour jouer doivent tenir dans le premier écran */
@media (max-width:860px){.nf{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:16px;padding-top:76px}.nf-t{gap:12px}.nf h1{font-size:clamp(44px,14.5vw,110px)}.nf-p,.nf-h{display:none}.cube404{width:min(100%,38svh)}.nf-m:empty{display:none}}

.cur{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--violet);pointer-events:none;z-index:60;transform:translate(-50%,-50%);transition:width .25s,height .25s;display:none}
.cur.lg{width:44px;height:44px}
@media (pointer:fine){.cur{display:block}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}