/* DigitoLab — dark pop art */
:root{
  --accent:var(--pink);
  --ink:#0b0b0f;
  --ink-2:#16161d;
  --paper:#f4f1ea;
  --muted:#a9a6b3;
  --pink:#ff2e88;
  --yellow:#ffd60a;
  --cyan:#5ee6d6;
  --lime:#b6f500;
  --red:#ff3131;
  --line:3px solid #000;
  --shadow:6px 6px 0 #000;
  --radius:14px;
  --display:"Bangers", Impact, sans-serif;
  --body:"Space Grotesk", system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font:400 17px/1.6 var(--body);
  overflow-x:hidden;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.2px, transparent 1.3px);
  background-size:14px 14px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:12px clamp(16px,4vw,48px);
  background:rgba(11,11,15,.88);backdrop-filter:blur(8px);
  border-bottom:2px solid #000;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{
  display:grid;place-items:center;width:38px;height:38px;
  background:var(--pink);color:#000;border:var(--line);border-radius:10px;
  font:28px/1 var(--display);box-shadow:3px 3px 0 #000;transform:rotate(-6deg);
}
.logo-text{font:26px/1 var(--display);letter-spacing:1px}
.logo-text b{color:var(--lime);font-weight:400}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{text-decoration:none;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.nav-links a:hover{color:var(--pink)}
.lang{display:flex;border:2px solid var(--paper);border-radius:999px;overflow:hidden}
.lang button{
  font:700 13px var(--body);padding:6px 10px;border:0;cursor:pointer;
  background:transparent;color:var(--paper);
}
.lang button[aria-pressed="true"]{background:var(--paper);color:#000}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border:var(--line);border-radius:999px;
  font:700 15px var(--body);text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;cursor:pointer;
  box-shadow:4px 4px 0 #000;transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn-pink{background:var(--pink);color:#000}
.btn-yellow{background:var(--yellow);color:#000}
.btn-dark{background:#000;color:var(--paper);border-color:#000}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:4px 4px 0 var(--pink)}
.btn-ghost:hover{box-shadow:6px 6px 0 var(--pink)}
.btn.is-soon{opacity:.6;pointer-events:none}

/* ---------- HERO ---------- */
.hero{
  display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;
  padding:clamp(32px,6vw,80px) clamp(16px,4vw,48px) 24px;
  max-width:1280px;margin:0 auto;
}
.kicker{
  display:inline-block;margin:0 0 12px;padding:4px 12px;
  background:var(--lime);color:#000;border:2px solid #000;
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.12em;
  transform:rotate(-2deg);
}
.hero-title{margin:0;font-family:var(--display);font-weight:400;line-height:.85;letter-spacing:2px}
.hero-title span{display:block}
.t1{
  font-size:clamp(84px,15vw,200px);color:var(--pink);
  -webkit-text-stroke:3px #000;text-shadow:8px 8px 0 #000, 10px 10px 0 var(--cyan);
}
.t2{
  font-size:clamp(64px,11vw,150px);color:var(--yellow);
  -webkit-text-stroke:3px #000;text-shadow:6px 6px 0 #000;
  margin-left:clamp(40px,10vw,140px);transform:rotate(-3deg);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.hero-art{position:relative;aspect-ratio:3/4;max-height:78vh;justify-self:center;width:100%;max-width:520px}
.hero-art .burst{position:absolute;inset:4% -4%;width:108%;height:92%;fill:var(--yellow);stroke:#000;stroke-width:2;animation:spin 60s linear infinite}
.hero-art .panel{
  position:absolute;inset:6% 12% 0;overflow:hidden;
  border:4px solid #000;border-radius:var(--radius);transform:rotate(2deg);
  background:var(--pink) radial-gradient(rgba(0,0,0,.35) 20%, transparent 22%) 0 0/14px 14px;
  box-shadow:10px 10px 0 #000, 14px 14px 0 var(--cyan);
}
.hero-art .panel img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.6))}
.bubble{
  position:absolute;top:8%;left:-4%;
  padding:10px 18px;background:#fff;color:#000;border:var(--line);border-radius:50%;
  font:clamp(26px,3vw,40px)/1 var(--display);transform:rotate(-10deg);box-shadow:var(--shadow);
}
.bubble::after{
  content:"";position:absolute;right:8px;bottom:-14px;width:22px;height:22px;
  background:#fff;border-right:var(--line);border-bottom:var(--line);transform:rotate(30deg) skew(15deg);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;background:var(--yellow);color:#000;
  border-block:var(--line);transform:rotate(-1.5deg);margin:32px -10px;
}
.marquee-track{display:flex;width:max-content;animation:scroll 28s linear infinite}
.marquee span{font:clamp(24px,3vw,36px)/1.6 var(--display);letter-spacing:2px;padding-right:24px;white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
.section{max-width:1280px;margin:0 auto;padding:clamp(48px,8vw,96px) clamp(16px,4vw,48px)}
.h2{
  font:400 clamp(44px,6vw,72px)/1 var(--display);letter-spacing:2px;margin:0 0 12px;
  color:var(--paper);text-shadow:4px 4px 0 var(--pink);
}
.h2 i{font-style:normal;color:var(--yellow);margin-left:10px;font-size:.6em;vertical-align:middle;text-shadow:none}
.h2.big{font-size:clamp(56px,9vw,120px)}
.lead{color:var(--muted);max-width:60ch;margin:0 0 32px}

/* ---------- GALERIE : CARTES PROJET ---------- */
.rubriques{display:grid;gap:clamp(56px,8vw,96px)}
.rubrique-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 28px;padding-left:16px;border-left:8px solid var(--yellow)}
#projets-2d .rubrique-head{border-left-color:var(--cyan)}
.rubrique-head h3{margin:0;font:400 clamp(36px,5vw,56px)/1 var(--display);letter-spacing:1.5px;color:var(--paper);text-shadow:3px 3px 0 var(--pink)}
.rubrique-count{background:var(--yellow);color:#000;border:2px solid #000;border-radius:999px;padding:1px 10px;font:700 12px var(--body);text-transform:uppercase}
#projets-2d .rubrique-count{background:var(--cyan)}
.rubrique-head p{flex-basis:100%;margin:0;color:var(--muted)}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:36px 32px}
.project{
  --accent:var(--pink);
  position:relative;display:flex;flex-direction:column;text-align:left;
  padding:0;border:var(--line);border-radius:var(--radius);
  background:var(--ink-2);color:var(--paper);cursor:pointer;font:inherit;
  box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s;
}
.p-pink{--accent:var(--pink)}.p-lime{--accent:var(--lime)}.p-yellow{--accent:var(--yellow)}.p-cyan{--accent:var(--cyan)}.p-red{--accent:var(--red)}
/* effet "pile" quand le projet contient plusieurs images */
.project.multi::before,.project.multi::after{
  content:"";position:absolute;inset:0;border:var(--line);border-radius:var(--radius);z-index:-1;transition:transform .15s;
}
.project.multi::before{background:var(--accent);transform:rotate(3deg) translate(6px,2px)}
.project.multi::after{background:var(--paper);transform:rotate(-2.5deg) translate(-4px,4px);z-index:-2}
.project{isolation:isolate}
.project:hover{transform:translate(-3px,-4px);box-shadow:9px 10px 0 var(--accent)}
.project.multi:hover::before{transform:rotate(6deg) translate(12px,4px)}
.project.multi:hover::after{transform:rotate(-5deg) translate(-10px,6px)}
.project-media{display:block;aspect-ratio:4/5;overflow:hidden;border-bottom:var(--line);border-radius:calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;background:#000}
.project-media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .4s}
.project:hover .project-media img{transform:scale(1.04)}
.project-media.cut{padding:16px}
.project-media.cut img{object-fit:contain;object-position:50% 50%;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.85))}
.project-media.bleed{padding:0}
.project-media.bleed img{object-fit:cover;object-position:50% 0;filter:none}
.project-media{position:relative}

/* ---------- EFFET HOLO (image principale des projets) ---------- */
.project{transform-style:preserve-3d;transition:transform .25s ease-out, box-shadow .15s}
.project.holo-live{transition:box-shadow .15s}
.project-media::before,.project-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit}
/* reflet arc-en-ciel + micro-rayures façon carte holo */
.project-media::before{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 6px),
    linear-gradient(115deg, transparent 18%, #ff2e88 28%, #ffd60a 38%, #5ee6d6 48%, #b6f500 58%, #8a5cff 68%, #ff2e88 78%, transparent 88%);
  background-size:100% 100%, 300% 300%;
  background-position:0 0, var(--hx,50%) var(--hy,50%);
  mix-blend-mode:color-dodge;opacity:0;
  transition:opacity .25s;
}
/* lueur qui suit la souris */
.project-media::after{
  background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 25%, transparent 55%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .25s;
}
.project:hover .project-media::before{opacity:.5;animation:holo-drift 7s ease-in-out infinite alternate}
.project.holo-live .project-media::before{animation:none}
.project:hover .project-media::after{opacity:1}
@keyframes holo-drift{
  from{background-position:0 0, 0% 30%}
  to{background-position:0 0, 100% 70%}
}
.project-badge{position:absolute;z-index:3;top:12px;left:12px;background:var(--accent);color:#000;border:2px solid #000;border-radius:999px;padding:2px 10px;font:700 12px var(--body);text-transform:uppercase;box-shadow:2px 2px 0 #000}
.lb-img [hidden]{display:none!important}
.lb-img video{display:block;max-height:calc(100dvh - 140px);max-width:100%;width:auto;margin:auto;background:#000}
.lb-thumb{position:relative}
.lb-thumb.is-video::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;text-shadow:0 0 6px #000;background:rgba(0,0,0,.25)}
.project-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;background:var(--ink-2);border-radius:0 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px)}
.project-tag{font:700 12px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.project-name{font:400 34px/1 var(--display);letter-spacing:1px}
.project-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;font-size:14px;color:var(--muted)}
.project-open{font-weight:700;color:var(--paper);text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.project:hover .project-open{color:var(--accent)}
.bg-pink  {background:var(--pink)   radial-gradient(rgba(0,0,0,.25) 18%, transparent 20%) 0 0/14px 14px}
.bg-yellow{background:var(--yellow) radial-gradient(rgba(0,0,0,.2) 18%, transparent 20%) 0 0/14px 14px}
.bg-cyan  {background:var(--cyan)   radial-gradient(rgba(0,0,0,.2) 18%, transparent 20%) 0 0/14px 14px}
.bg-lime  {background:var(--lime)   radial-gradient(rgba(0,0,0,.2) 18%, transparent 20%) 0 0/14px 14px}
.bg-red   {background:var(--red)    radial-gradient(rgba(0,0,0,.25) 18%, transparent 20%) 0 0/14px 14px}

/* ---------- CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:24px}
.card{
  position:relative;padding:28px;border:var(--line);border-radius:var(--radius);
  color:#000;box-shadow:var(--shadow);
}
.card:nth-child(2){transform:rotate(1deg)}
.card:nth-child(3){transform:rotate(-1deg)}
.card h3{font:400 38px/1 var(--display);letter-spacing:1px;margin:0 0 10px}
.card p{margin:0 0 16px}
.card-num{position:absolute;top:14px;right:18px;font:40px/1 var(--display);opacity:.35}
.c-cyan{background:var(--cyan)}.c-pink{background:var(--pink)}.c-lime{background:var(--lime)}

/* ---------- SHOP ---------- */
.shop-box{
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;
  padding:clamp(24px,4vw,48px);border:var(--line);border-radius:24px;
  background:var(--paper);color:#000;box-shadow:10px 10px 0 var(--yellow);
}
.shop-box .h2-inv{color:#000;text-shadow:4px 4px 0 var(--yellow)}
.shop-box p{max-width:44ch}
.shop-box img{border:var(--line);border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;transform:rotate(3deg);box-shadow:var(--shadow)}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:center}
.about-img{border:var(--line);border-radius:50%;aspect-ratio:1;object-fit:cover;width:100%;height:auto;box-shadow:10px 10px 0 var(--lime)}
.about p{color:#dcd8e4;max-width:56ch}

/* ---------- CONTACT ---------- */
.contact{text-align:center}
.contact .lead{margin-inline:auto}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.contact .btn{text-transform:none}

.footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:24px clamp(16px,4vw,48px);border-top:2px solid #222;color:var(--muted);font-size:14px;
}
.footer a{text-decoration:none}

/* ---------- VISIONNEUSE PROJET ---------- */
.lightbox{
  width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--ink) radial-gradient(rgba(255,255,255,.05) 1.2px, transparent 1.3px) 0 0/14px 14px;color:var(--paper);overflow:auto;
}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:transparent}
.lb-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:center;
  width:min(1240px,100%);padding:64px clamp(16px,4vw,48px) 32px;
}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.lb-img{border:var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:8px 8px 0 var(--accent);max-width:100%}
.lb-img:not(.cut),.lb-thumb:not(.cut){background:#000}
.lb-img.cut{padding:20px}
.lb-img.bleed{padding:0}
.lb-img img{max-height:calc(100dvh - 140px);width:auto;max-width:100%;margin:auto}
.lb-img.cut img{filter:drop-shadow(5px 5px 0 rgba(0,0,0,.85))}
.lb-img.bleed img{filter:none}
.lb-info{align-self:center}
.lb-tag{margin:0 0 6px;font:700 12px var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.lb-title{margin:0 0 14px;font:400 clamp(40px,4vw,56px)/1 var(--display);letter-spacing:1.5px;text-shadow:3px 3px 0 var(--accent)}
.lb-desc{margin:0 0 20px;color:#dcd8e4;font-size:16px}
.lb-caption{display:flex;align-items:baseline;gap:10px;margin:0 0 16px;padding:10px 12px;border:2px solid #2c2c36;border-radius:10px;font-size:14px;color:var(--paper)}
.lb-count{flex:none;background:var(--accent);color:#000;border-radius:999px;padding:1px 9px;font-size:12px}
.lb-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.lb-thumb{
  width:64px;height:80px;padding:0;border:2px solid #444;border-radius:8px;overflow:hidden;cursor:pointer;opacity:.6;transition:.12s;
}
.lb-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.lb-thumb.cut{padding:4px}.lb-thumb.cut img{object-fit:contain}
.lb-thumb.bleed{padding:0}.lb-thumb.bleed img{object-fit:cover;object-position:50% 0}
.lb-thumb:hover{opacity:1}
.lb-thumb[aria-current="true"]{opacity:1;border:3px solid var(--accent);transform:translateY(-3px)}
.lb-close,.lb-nav{
  position:absolute;z-index:2;border:var(--line);background:var(--paper);color:#000;cursor:pointer;
  width:48px;height:48px;border-radius:50%;font:700 24px/1 var(--body);box-shadow:3px 3px 0 var(--accent);
}
.lb-close{position:fixed;top:16px;right:16px}
.lb-nav{top:50%;transform:translateY(-50%);font-size:32px;line-height:40px}
.lb-prev{left:-8px}.lb-next{right:-8px}
.lb-nav:hover,.lb-close:hover{background:var(--accent)}
.lightbox.single .lb-nav,.lightbox.single .lb-thumbs{display:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;text-align:left}
  .hero-art{max-width:380px;order:-1}
  .shop-box,.about{grid-template-columns:1fr}
  .shop-box img{max-width:300px;justify-self:center}
  .about-img{max-width:320px;justify-self:center}
}
@media (max-width:900px){
  .lightbox[open]{align-items:flex-start}
  .lb-wrap{grid-template-columns:1fr;gap:20px;padding-top:72px}
  .lb-img img,.lb-img video{max-height:62dvh}
  .lb-prev{left:4px}.lb-next{right:4px}
  .lb-nav{width:42px;height:42px;font-size:28px;line-height:34px}
}
@media (max-width:640px){
  .nav-links{display:none}
  .lang{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- PAGES LÉGALES ---------- */
.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-links a:hover{color:var(--pink)}
.legal-nav a{font-size:13px}
.legal-nav a[aria-current="page"]{color:var(--yellow)}
.legal{max-width:860px;margin:0 auto;padding:clamp(32px,6vw,64px) clamp(16px,4vw,32px) 80px}
.legal .back{display:inline-block;margin-bottom:24px;color:var(--muted);text-decoration:none;font-size:14px}
.legal .back:hover{color:var(--pink)}
.legal h1{font:400 clamp(44px,7vw,72px)/1 var(--display);letter-spacing:2px;margin:0 0 8px;text-shadow:4px 4px 0 var(--pink)}
.legal h2{font:700 19px/1.3 var(--body);letter-spacing:.01em;color:var(--yellow);margin:36px 0 10px;padding-bottom:6px;border-bottom:1px solid #2c2c36}
.legal p,.legal li{color:#dcd8e4}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin:4px 0}
.legal a{color:var(--cyan)}
.legal .updated{color:var(--muted);font-size:14px}
.legal .tldr{background:var(--ink-2);border:2px solid var(--lime);border-radius:var(--radius);padding:14px 18px;box-shadow:4px 4px 0 var(--lime)}
.legal table{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid #2c2c36;padding:8px 10px;text-align:left;vertical-align:top;min-width:120px}
.legal th{background:var(--ink-2);color:var(--paper)}
.todo{background:var(--yellow);color:#000;font-weight:700;padding:0 6px;border-radius:4px}
.legal-note{margin:24px 0 0;color:var(--muted);font-size:14px}
.legal-note a{color:var(--cyan)}
@media (max-width:640px){.legal-page .nav-links{display:flex;gap:12px;margin-left:0;order:3;flex-basis:100%}.legal-page .nav{flex-wrap:wrap}}