/* =========================================================
   Jacob Giasson — portfolio
   Design system + components, shared by every page.

   01  Tokens & themes (dark / light via html[data-theme]; .theme-alt = inverse section)
   02  Base & reset
   03  Background (blueprint grid + canvas, dark areas only)
   04  Typography
   05  Layout (wrap, sections, split)
   06  Components: buttons, links, tags, stats, specs
   07  Header & mobile menu
   08  Hero (all pages) + ghost word + section index
   09  Theme toggle
   10  Home: projects, about teaser
   11  Accordion (services)
   12  Contact + footer
   13  Case studies: cover, media, next project
   14  Klaviyo: capabilities, gallery, lightbox, flows
   15  Story: timeline
   16  Motion: reveals, cursor, page transitions
   17  Responsive + reduced motion
   ========================================================= */

/* ---------- 01 Tokens & themes ---------- */
/* dark palette: the page in dark mode, and inverse sections in light mode */
:root,
html[data-theme="light"] .theme-alt{
  --bg:#0B0C0F;
  --fg:#F2EFE9;
  --fg-2:#AAA7A0;          /* body copy  ≈ 8.4:1 */
  --fg-3:#86837D;          /* meta       ≈ 5.3:1 */
  --line:rgba(242,239,233,.10);
  --line-2:rgba(242,239,233,.18);
  --surface:#131418;
  --surface-2:#1A1B20;
  --accent-text:var(--accent);      /* small accent text */
  --accent-display:var(--accent);   /* accent words in headlines */
  --ghost:rgba(242,239,233,.028);
  --nav-bg:rgba(14,15,18,.86);
  --menu-bg:rgba(14,15,18,.97);
  --grid-minor:rgba(242,239,233,.022);
  --grid-major:rgba(242,239,233,.05);
  --canvas-ink:237,235,230;
  color-scheme:dark;
}
/* light palette: the page in light mode, and inverse sections in dark mode */
html[data-theme="light"],
.theme-alt{
  --bg:#EFEBE4;
  --fg:#121316;
  --fg-2:#56534E;          /* ≈ 6.8:1 */
  --fg-3:#6E6A64;          /* ≈ 4.7:1 */
  --line:rgba(18,19,22,.12);
  --line-2:rgba(18,19,22,.24);
  --surface:#E5E0D7;
  --surface-2:#DBD5CA;
  --accent-text:color-mix(in srgb,var(--accent) 55%,#000);
  --accent-display:color-mix(in srgb,var(--accent) 80%,#000);
  --ghost:rgba(18,19,22,.045);
  --nav-bg:rgba(239,235,228,.9);
  --menu-bg:rgba(239,235,228,.98);
  --grid-minor:rgba(18,19,22,.035);
  --grid-major:rgba(18,19,22,.07);
  --canvas-ink:30,30,34;
  color-scheme:light;
}
.theme-alt{background:var(--bg);color:var(--fg)}
/* Polices de secours calées sur Archivo et Geist : pendant le chargement des polices,
   les titres prennent déjà la bonne largeur, donc la page ne saute pas (CLS). */
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");font-weight:100 900;font-stretch:50% 112%;size-adjust:103.2%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");font-weight:100 900;font-stretch:113% 200%;size-adjust:129.4%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Roboto"),local("Roboto-Regular");font-weight:100 549;size-adjust:101.5%}
@font-face{font-family:"Geist Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");font-weight:550 900;size-adjust:99.2%}
:root{
  --accent:#FF6A3D;        /* set by the accent switcher */
  --on-accent:#0B0C0F;

  /* type */
  --f-display:"Archivo","Archivo Fallback","Geist",ui-sans-serif,system-ui,sans-serif;
  --f-sans:"Geist","Geist Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fs-hero:clamp(2.6rem,.9rem + 4.7vw,5.6rem);     /* page H1 */
  --fs-h2:clamp(2.3rem,1.2rem + 3.9vw,5rem);          /* section H2 */
  --fs-proj:clamp(1.9rem,1.25rem + 2.2vw,3.3rem);     /* project titles */
  --fs-h3:clamp(1.25rem,1.1rem + .5vw,1.6rem);        /* sentence-case titles */
  --fs-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-label:.75rem;

  /* space (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section:clamp(96px,11vw,160px);
  --gutter:clamp(20px,4vw,40px);
  --max:1280px;
  --prose:64ch;
  --header-h:92px;

  /* shape */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.2,.75,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --dur:.35s;
}

/* ---------- 02 Base & reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);-webkit-text-size-adjust:100%}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
body{
  min-height:100vh;background:var(--bg);color:var(--fg);
  font-family:var(--f-sans);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{padding:0;list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
html[data-theme="light"] :focus-visible,.theme-alt :focus-visible{outline-color:var(--fg)}
.skip{position:fixed;left:var(--s-4);top:var(--s-4);z-index:500;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:var(--r-sm);
  font-weight:600;font-size:var(--fs-sm);transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 03 Background (dark areas) ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
.bg-layer{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(130% 90% at 50% 0%,#000 30%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.18) 100%);
          mask-image:radial-gradient(130% 90% at 50% 0%,#000 30%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.18) 100%)}
.bg-grid{position:absolute;left:0;right:0;top:-160px;bottom:-160px;
  --minor:var(--grid-minor);--major:var(--grid-major);
  background-image:linear-gradient(var(--major) 1px,transparent 1px),linear-gradient(90deg,var(--major) 1px,transparent 1px),
    linear-gradient(var(--minor) 1px,transparent 1px),linear-gradient(90deg,var(--minor) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  background-position:0 0,calc(50% + 80px) 0,0 0,calc(50% + 16px) 0;
  transform:translate3d(0,var(--py,0px),0);will-change:transform}
.bg-spot{opacity:0;transition:opacity .6s var(--ease);
  -webkit-mask-image:radial-gradient(260px circle at var(--mx,50%) var(--my,-400px),#000 0%,rgba(0,0,0,.3) 45%,transparent 100%);
          mask-image:radial-gradient(260px circle at var(--mx,50%) var(--my,-400px),#000 0%,rgba(0,0,0,.3) 45%,transparent 100%)}
.bg-spot .bg-grid{--minor:color-mix(in srgb,var(--accent) 14%,transparent);--major:color-mix(in srgb,var(--accent) 30%,transparent)}
.bg.has-pointer .bg-spot{opacity:1}
.bg-canvas{position:absolute;inset:0;width:100%;height:100%}
.bg::after{content:"";position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 04 Typography ---------- */
.display,.h2,.h-proj{font-family:var(--f-display);font-weight:800;font-stretch:100%;text-transform:uppercase;color:var(--fg);text-wrap:balance}
.display{font-size:var(--fs-hero);line-height:.94;letter-spacing:-.045em}
.h2{font-size:var(--fs-h2);line-height:.92;letter-spacing:-.04em}
.h-proj{font-size:var(--fs-proj);line-height:1;letter-spacing:-.035em}
.h3{font-family:var(--f-sans);font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--fg)}
/* accent words: same family, expanded width, accent colour */
.display em,.h2 em,.h-proj em{font-style:normal;font-stretch:125%;letter-spacing:-.04em;color:var(--accent-display)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--fg-2);max-width:56ch;text-wrap:pretty}
.prose p{color:var(--fg-2);max-width:var(--prose);text-wrap:pretty}
.prose p+p{margin-top:1.1em}
.label{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- 05 Layout ---------- */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section)}
.section:not(.theme-alt) + .section:not(.theme-alt),
.theme-alt + .theme-alt{padding-top:0}
.sec-head{display:grid;gap:var(--s-5);max-width:min(1120px,100%);margin-bottom:var(--s-8)}
.split{display:grid;gap:var(--s-8)}
.split > .sec-head{margin-bottom:0}
@media(min-width:960px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-9)}
  .split > .sec-head{align-self:start;position:sticky;top:calc(var(--header-h) + 32px)}
  .split .h2{font-size:clamp(2.2rem,1.2rem + 2.6vw,4rem)}
}

/* ---------- 06 Components ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 22px;border-radius:10px;
  border:1px solid transparent;font-size:var(--fs-sm);font-weight:500;line-height:1;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform .3s var(--ease-out),translate .3s var(--ease-out),width .35s var(--ease-out);
  will-change:transform}
.btn .i{display:inline-block;transition:transform var(--dur) var(--ease-out)}
.btn:hover .i{transform:translateX(3px)}
.btn .i.up{transform:none}
.btn:hover .i.up{transform:translate(2px,-2px)}
.btn-primary{background:var(--fg);color:var(--bg)}
.btn-primary:hover{background:var(--accent);color:var(--on-accent)}
.btn-ghost{border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn-sm{height:40px;padding:0 16px;font-size:var(--fs-xs);border-radius:9px}
.btn:active{transform:scale(.97)}

.link{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--fg)}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;
  transform:scaleX(.3);transform-origin:left;transition:transform .5s var(--ease-out)}
.link:hover::after,a:hover .link::after{transform:scaleX(1)}
.link .i{transition:transform var(--dur) var(--ease-out)}
.link:hover .i,a:hover .link .i{transform:translateX(4px)}

.tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-size:var(--fs-xs);color:var(--fg-2);white-space:nowrap}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:clamp(24px,4vw,56px);row-gap:var(--s-4)}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.stat dd{font-family:var(--f-display);font-weight:800;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.6rem);letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.stat dt{margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--fg-3)}
.stats--lg{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s-5)}
.stats--lg .stat dd{white-space:nowrap}
.stats--lg .stat{padding-top:var(--s-5);border-top:1px solid var(--line-2);container-type:inline-size}
.stats--lg .stat dd{font-size:min(5rem,15cqi)}
.stats--lg .stat dt{font-size:var(--fs-sm);margin-top:var(--s-3)}

/* specs row (case heroes) */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);width:100%}
.specs > div{padding-top:var(--s-4);border-top:1px solid var(--line-2)}
.specs dt{font-size:var(--fs-xs);color:var(--fg-3)}
.specs dd{margin-top:var(--s-1);font-size:var(--fs-sm);font-weight:500;color:var(--fg)}
@media(min-width:960px){.specs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 07 Header ---------- */
.site-header{position:sticky;top:0;z-index:100;padding-top:14px}
.site-header::before{content:"";position:absolute;inset:0 0 -14px;z-index:-1;pointer-events:none;background:linear-gradient(var(--bg) 85%,transparent)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);height:64px;
  padding:0 10px 0 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--nav-bg);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);transition:background .4s var(--ease)}
.brand{font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:var(--s-6)}
.nav-links a{position:relative;font-size:var(--fs-sm);font-weight:500;color:var(--fg-2);transition:color .2s}
.nav-links a:hover{color:var(--fg)}
.nav-links a[aria-current]{color:var(--fg)}
.nav-links a[aria-current]::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--accent)}
.nav-tools{display:flex;align-items:center;gap:var(--s-2)}
.lang{display:inline-flex;align-items:center;height:40px;padding:0 4px;border-radius:9px;border:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--fg-3)}
.lang span{display:grid;place-items:center;height:30px;min-width:32px;padding:0 6px;border-radius:6px;transition:color .2s,background .2s}
.lang span.on{color:var(--fg);background:var(--surface-2)}
.lang:hover span:not(.on){color:var(--fg-2)}
.hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2)}
.hamburger span{display:block;width:16px;height:1.5px;background:var(--fg);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.hamburger span+span{margin-top:4px}
.menu-open .hamburger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-open .hamburger span:nth-child(2){opacity:0}
.menu-open .hamburger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{display:none;margin:8px var(--gutter) 0;padding:var(--s-2) var(--s-5) var(--s-4);border:1px solid var(--line);border-radius:14px;
  background:var(--menu-bg)}
.mobile-menu a{display:flex;justify-content:space-between;align-items:center;padding:var(--s-4) 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:800;font-size:1.6rem;letter-spacing:-.03em;text-transform:uppercase}
.mobile-menu a::after{content:"→";content:"→" / "";font-family:var(--f-sans);font-size:1rem;color:var(--fg-3)}
.mobile-menu a:last-child{border-bottom:0;color:var(--accent)}
@media(max-width:480px){
  .nav{gap:var(--s-3);padding:0 8px 0 16px}
  .brand{font-size:15px}
  .nav-tools{gap:6px}
  .lang{height:38px}
  .nav-tools .theme-toggle{width:38px;height:38px} /* .nav-tools prefix: the base .theme-toggle rule comes later in the sheet and was winning */
  .lang span{min-width:28px;height:28px;padding:0 4px}
  .hamburger{width:40px;height:40px}
}
/* the header needs ~366px as set above; below that the hamburger was pushed off-screen (320px) or ate the nav padding (357-365px) */
@media(max-width:365px){
  .nav{gap:8px;padding:0 6px 0 12px}
  .brand{font-size:13px}
  .nav-tools{gap:4px}
  .lang span{min-width:24px}
}
@media(max-width:339px){
  .brand{font-size:12px}
}
@media(max-width:860px){
  .nav-links,.nav-tools .btn{display:none}
  .hamburger{display:flex}
  .nav-tools{margin-left:auto}
}

/* ---------- 08 Hero ---------- */
.hero-shell{position:relative;overflow:hidden;isolation:isolate}
.ghost{position:absolute;left:50%;top:46%;z-index:-1;transform:translate(-50%,-50%) translateY(var(--gy,0px));pointer-events:none;user-select:none;
  font-family:var(--f-display);font-weight:900;font-stretch:125%;text-transform:uppercase;white-space:nowrap;
  font-size:clamp(7rem,26vw,26rem);line-height:.8;letter-spacing:-.06em;color:var(--ghost)}
.hero{display:grid;gap:var(--s-7);align-content:center;min-height:calc(100svh - var(--header-h));padding-block:var(--s-7) var(--s-6)}
.hero-main{display:grid;gap:var(--s-6);justify-items:start;align-content:center}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2)}
.hero-media{position:relative;width:100%;max-width:480px;aspect-ratio:4/5;justify-self:end;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease-out)}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-media figcaption{position:absolute;left:var(--s-4);bottom:var(--s-4);z-index:2;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(11,12,15,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:var(--fs-xs);color:#F2EFE9}
@media(min-width:1024px){.hero{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);column-gap:var(--s-8)}}
@media(max-width:1023px){.hero-media{justify-self:stretch;max-width:none;aspect-ratio:16/10}}

/* page index at the bottom of the home hero */
.index{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);align-self:end}
.index a{display:flex;gap:var(--s-3);align-items:baseline;padding-bottom:var(--s-4);position:relative;font-size:var(--fs-sm);color:var(--fg-3);transition:color .2s}
.index a b{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);color:var(--fg-3)}
.index a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line-2);transform-origin:left;transition:background .3s}
.index a:hover{color:var(--fg)}
.index a:hover::after{background:var(--accent)}
.index a:hover b{color:var(--accent)}
@media(max-width:860px){.index{display:none}}

/* case + story heroes */
.page-hero{display:grid;gap:var(--s-6);justify-items:start;padding-block:clamp(56px,9vh,120px) var(--s-8)}
.page-hero .lead{max-width:60ch}
.story-hero{grid-template-columns:minmax(0,1fr);justify-items:stretch}
.story-intro{display:grid;gap:var(--s-6);justify-items:start;align-content:end}
.story-photo{position:relative;width:100%;max-width:440px;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.story-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%}
@media(min-width:960px){
  .story-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);column-gap:var(--s-8);align-items:end}
  .story-hero .story-photo{justify-self:end}
}

/* ---------- 09 Theme toggle ---------- */
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;border:1px solid var(--line);color:var(--fg);
  transition:border-color .2s,background .2s}
.theme-toggle:hover{border-color:var(--line-2);background:var(--surface-2)}
.theme-toggle svg{width:19px;height:19px;overflow:visible}
.theme-toggle .core{transform-origin:12px 12px;transition:transform .6s var(--ease-out)}
.theme-toggle .cut{transition:transform .6s var(--ease-out)}
.theme-toggle .rays{transform-origin:12px 12px;opacity:0;transform:rotate(-60deg) scale(.4);transition:transform .6s var(--ease-out),opacity .35s}
html[data-theme="light"] .theme-toggle .core{transform:scale(.56)}
html[data-theme="light"] .theme-toggle .cut{transform:translate(9px,-9px)}
html[data-theme="light"] .theme-toggle .rays{opacity:1;transform:none}
/* theme switch: circular reveal from the toggle (View Transitions) */
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-theme::view-transition-old(root){z-index:1}
html.vt-theme::view-transition-new(root){z-index:2}

/* scroll: lead paragraphs light up word by word, media drift slightly */
[data-scrub] .sw{transition:opacity .25s linear}
[data-parallax] > img,[data-parallax] > video{scale:1.12}

/* ---------- 10 Home: projects, about ---------- */
.projects{display:grid}
.project{display:grid;gap:var(--s-6);padding-block:var(--s-7);border-top:1px solid var(--line)}
.project:last-child{border-bottom:1px solid var(--line)}
.project-media{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.project-media > img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
a.project:hover .project-media > img{transform:scale(1.04)}
/* hover preview: a short muted loop fades in over the card image (added by js/script.js, section 18) */
.project-preview{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.is-previewing > .project-preview{opacity:1}
.project-num{position:absolute;top:var(--s-4);left:var(--s-4);z-index:2;display:grid;place-items:center;min-width:44px;height:30px;padding:0 10px;
  border-radius:var(--r-pill);background:rgba(11,12,15,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--f-mono);font-size:var(--fs-label);color:#F2EFE9}
.project-body{display:flex;flex-direction:column;gap:var(--s-5);align-self:center}
.project-body p{color:var(--fg-2);max-width:46ch}
.project-body .stats{padding-top:var(--s-5);border-top:1px solid var(--line)}
.project-tags{padding-top:var(--s-5);border-top:1px solid var(--line)}
@media(min-width:900px){
  .project{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8)}
  .project--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .project--flip .project-media{order:2}
}
.mails{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:32px 32px 0;align-items:start;
  background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.mails img{width:100%;aspect-ratio:9/26;object-fit:cover;object-position:top;border-radius:10px 10px 0 0;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
  transition:transform 1s var(--ease-out)}
.mails img:nth-child(2){margin-top:40px}
.mails--page img{aspect-ratio:auto;height:auto}
.mails img:nth-child(3){margin-top:14px}
a.project:hover .mails img:nth-child(1){transform:translateY(-10px)}
a.project:hover .mails img:nth-child(2){transform:translateY(-18px)}
a.project:hover .mails img:nth-child(3){transform:translateY(-8px)}

.about{display:grid;gap:var(--s-8);align-items:center}
.about-media{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);max-width:520px}
.about-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
/* tablet/mobile: full-width 16/11 photos. Kept after the .about-media / .story-photo base rules (it used to sit before them and never applied) */
@media(max-width:959px){.about-media,.story-photo{max-width:none}.about-media img,.story-photo img{aspect-ratio:16/11}}
.about-body{display:grid;gap:var(--s-6);justify-items:start}
/* portrait variant: the photo is 2:3, so it keeps its shape instead of the 4:5 / 16:11 crops */
.about-media--portrait img{aspect-ratio:2/3;object-position:50% 18%}
@media(max-width:959px){.about-media--portrait{max-width:380px}.about-media--portrait img{aspect-ratio:4/5}}
/* the tools live with the profile, below the portrait */
.about-tools{margin-top:clamp(72px,9vw,128px);display:grid;gap:var(--s-7)}
/* roles: who / where / when, as plain rows */
.roles{display:grid;width:100%;max-width:660px;border-top:1px solid var(--line);list-style:none}
.roles li{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 152px;gap:var(--s-4);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.roles b{font-weight:600;color:var(--fg)}
.roles span{color:var(--fg-2)}
.roles .date{font-family:var(--f-mono);font-size:var(--fs-xs);white-space:nowrap;text-align:right}
@media(max-width:600px){.roles li{grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-4)}.roles li span:nth-of-type(1){grid-column:1;grid-row:2}.roles .date{grid-column:2;grid-row:1}}
@media(min-width:960px){.about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-9)}}

/* ---------- 11 Accordion ---------- */
.accordion{border-top:1px solid var(--line-2)}
.acc-item{border-bottom:1px solid var(--line-2)}
.acc-item > h3{font:inherit}
.acc-head{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-5);padding:var(--s-6) 0;text-align:left}
.acc-num{font-family:var(--f-mono);font-size:var(--fs-label);color:var(--fg-3);transition:color .2s}
.acc-t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,1.1rem + 1.2vw,2.2rem);line-height:1;letter-spacing:-.035em}
.acc-head:hover .acc-num,.acc-item.open .acc-num{color:var(--accent-text)}
.acc-plus{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);flex:none;transition:transform .45s var(--ease-out),background .3s,border-color .3s}
.acc-plus::before,.acc-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--fg);transform:translate(-50%,-50%);transition:transform .45s var(--ease-out),background .3s}
.acc-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-item.open .acc-plus{transform:rotate(180deg);background:var(--fg);border-color:var(--fg)}
.acc-item.open .acc-plus::before,.acc-item.open .acc-plus::after{background:var(--bg)}
.acc-item.open .acc-plus::after{transform:translate(-50%,-50%) rotate(0)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-inner{overflow:hidden;min-height:0}
.acc-content{display:grid;gap:var(--s-4);padding:0 0 var(--s-6) calc(var(--s-5) + 2.4ch)}
.acc-content p{color:var(--fg-2);max-width:58ch}
@media(max-width:600px){.acc-content{padding-left:0}.acc-head{gap:var(--s-4)}}

/* ---------- 12 Contact + footer ---------- */
.contact{display:grid;gap:var(--s-8)}
.contact .display{font-size:clamp(2.3rem,.9rem + 6vw,7.5rem);max-width:15ch}
.contact-row{display:grid;gap:var(--s-6);align-items:end}
@media(min-width:960px){.contact-row{grid-template-columns:minmax(0,1fr) auto}}
.mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}
.mail-big{position:relative;font-family:var(--f-display);font-weight:700;font-stretch:110%;font-size:clamp(1.1rem,.7rem + 2vw,2.4rem);letter-spacing:-.03em;
  white-space:nowrap}
.mail-big::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);transform-origin:left;transition:transform .6s var(--ease-out)}
.mail-big:hover::after{transform:scaleX(.15)}
.copy[data-copied]{border-color:var(--accent);color:var(--accent)}
.cv-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)}
.cv-row p{color:var(--fg-2);max-width:48ch}
@media(max-width:600px){.cv-row .btn{width:100%}}

/* school project pages: Figma boards shown as white sheets */
.cover-wide{border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.cover-wide img{display:block;width:100%;height:auto}
.board-wrap{display:grid;gap:var(--s-5);margin-top:var(--s-7);justify-items:start}
.board{width:100%;max-width:1152px;margin:0;border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.board img{display:block;width:100%;height:auto}
.board a{display:block;cursor:zoom-in}
@media(min-width:900px){.board-trio{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.board-pair{max-width:1152px}
@media(min-width:900px){.board-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.board-pair .board{max-width:none}}

/* page viewer: a tall mockup shown at a readable size, scrolled inside a frame */
.viewer{margin-top:var(--s-7);max-width:1152px;display:grid;gap:var(--s-4)}
.viewer-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5)}
.viewer-tabs{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.viewer-tabs button{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-size:var(--fs-sm);font-weight:500;color:var(--fg-2);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.viewer-tabs button:hover{color:var(--fg);border-color:var(--fg)}
.viewer-tabs button[aria-selected="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.viewer-open{font-size:var(--fs-sm);font-weight:500;color:var(--fg-2);transition:color .2s}
.viewer-open:hover{color:var(--fg)}
.viewer-panel{height:min(78vh,820px);overflow:auto;overscroll-behavior:contain;border-radius:var(--r-lg);background:#fff;box-shadow:0 0 0 1px var(--line);
  scrollbar-width:thin}
.viewer-panel[hidden]{display:none}
.viewer-panel img{display:block;width:100%;height:auto}
.viewer-hint{font-size:var(--fs-xs);color:var(--fg-3)}

/* Figma stage: a small animated "Figma file open" scene, drawn in container units (1cqw = 1 % of the card width) */
.project-media > .fstage{position:absolute;inset:0}
.fstage{container-type:inline-size;overflow:hidden;background:#17171b;color:#e8e8ea;user-select:none;pointer-events:none;font-family:var(--f-sans)}
.fstage::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 58% at 50% 46%,rgba(255,255,255,.1),transparent 72%),radial-gradient(circle,rgba(255,255,255,.14) .09cqw,transparent .17cqw);
  background-size:100% 100%,2.4cqw 2.4cqw}
.fstage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.6))}
.fs-bar{position:absolute;left:2cqw;top:2cqw;z-index:6;display:flex;align-items:center;gap:1cqw;padding:.9cqw 1.6cqw .9cqw 1.2cqw;border-radius:1cqw;
  background:#2a2a2f;box-shadow:0 0 0 .1cqw rgba(255,255,255,.07);font-size:1.45cqw;font-weight:600}
.fs-bar svg{width:1.4cqw;height:1.9cqw;fill:#fff}
.fs-bar span{color:#9a9aa1;font-weight:500}
.fs-zoom{position:absolute;right:2cqw;top:2.2cqw;z-index:6;padding:.7cqw 1.3cqw;border-radius:.9cqw;background:#2a2a2f;font-size:1.3cqw;color:#bdbdc4;box-shadow:0 0 0 .1cqw rgba(255,255,255,.07)}
.fs-frame{position:absolute;z-index:2;left:calc(var(--x)*1cqw);top:calc(var(--y)*1cqw);width:calc(var(--w)*1cqw);height:calc(var(--h)*1cqw);
  background:#fff;border-radius:.3cqw;transform:rotate(var(--r,0deg));
  box-shadow:0 .1cqw 0 rgba(255,255,255,.06),0 2.6cqw 4.8cqw -1.2cqw rgba(0,0,0,.8);animation:fs-float 7s ease-in-out infinite alternate;animation-delay:var(--f)}
.fs-frame.is-sel{z-index:4;outline:.22cqw solid #0d99ff}
@keyframes fs-float{from{translate:0 -.55cqw}to{translate:0 .55cqw}}
.fs-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.fs-clip img{display:block;width:100%;height:auto}
.fs-name{position:absolute;left:0;top:-2.5cqw;display:flex;align-items:center;gap:.6cqw;font-size:1.35cqw;font-weight:500;color:#9d9da4;white-space:nowrap}
.fs-name u{display:inline-block;width:1.1cqw;height:1.1cqw;border:.15cqw solid currentColor;border-radius:.2cqw;
  background:linear-gradient(currentColor,currentColor) 50% 0/.15cqw 100% no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% .15cqw no-repeat}
.is-sel .fs-name{color:#0d99ff}
.fs-h{position:absolute;width:1cqw;height:1cqw;background:#fff;border:.18cqw solid #0d99ff;border-radius:.12cqw}
.fs-h.tl{left:-.6cqw;top:-.6cqw}.fs-h.tr{right:-.6cqw;top:-.6cqw}.fs-h.bl{left:-.6cqw;bottom:-.6cqw}.fs-h.br{right:-.6cqw;bottom:-.6cqw}
.fs-pill{position:absolute;left:50%;bottom:-3.5cqw;translate:-50% 0;padding:.35cqw 1cqw;border-radius:.6cqw;background:#0d99ff;color:#fff;font-style:normal;font-size:1.3cqw;font-weight:600;white-space:nowrap}
.fs-hover{position:absolute;inset:0;outline:.2cqw solid #0d99ff;opacity:0;animation:fs-on 14s linear infinite}
@keyframes fs-on{0%,2%{opacity:0}4%,16%{opacity:1}19%,100%{opacity:0}}
.fs-lines{position:absolute;inset:0;width:100%;height:100%;z-index:5;overflow:visible}
.fs-flow{fill:none;stroke:#0d99ff;stroke-width:.35;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:fs-draw 14s linear infinite}
@keyframes fs-draw{0%{stroke-dashoffset:1;opacity:1}8%,60%{stroke-dashoffset:0;opacity:1}72%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.fs-arrow{fill:none;stroke:#0d99ff;stroke-width:.35;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:fs-arrow 14s linear infinite}
@keyframes fs-arrow{0%{opacity:0}1%,50%{opacity:1}62%,100%{opacity:0}}
.fs-guide{position:absolute;z-index:5;left:calc(var(--x1)*1cqw);width:calc((var(--x2) - var(--x1))*1cqw);top:calc(var(--y)*1cqw);height:0;opacity:0;animation:fs-on 14s linear infinite}
.fs-guide i{position:absolute;left:0;right:0;top:-.1cqw;height:.2cqw;background:#f24e1e}
.fs-guide b{position:absolute;left:50%;top:-2.7cqw;translate:-50% 0;padding:.3cqw .85cqw;border-radius:.5cqw;background:#f24e1e;color:#fff;font-size:1.2cqw;font-weight:600}
.fs-tools{position:absolute;left:50%;bottom:2.4cqw;translate:-50% 0;z-index:6;display:flex;gap:.6cqw;padding:.8cqw 1.2cqw;border-radius:1.4cqw;
  background:#2a2a2f;box-shadow:0 0 0 .1cqw rgba(255,255,255,.08),0 1.2cqw 2.4cqw rgba(0,0,0,.5)}
.fs-tool{width:3.2cqw;height:3.2cqw;padding:.75cqw;border-radius:.8cqw;fill:#cfcfd5;stroke:#cfcfd5}
.fs-tool.is-on{background:#0d99ff;fill:#fff;stroke:#fff}
.fs-tool-anim{animation:fs-tool 14s linear infinite}
@keyframes fs-tool{0%,2%{background:transparent}4%,16%{background:#0d99ff;fill:#fff;stroke:#fff}19%,100%{background:transparent}}
.fs-cursor{position:absolute;left:0;top:0;z-index:8;translate:calc(var(--cx2)*1cqw) calc(var(--cy2)*1cqw);animation:fs-cursor 14s ease-in-out infinite}
.fs-cursor svg{display:block;width:2.4cqw;height:2.4cqw;fill:#a259ff;stroke:#fff;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 .1cqw .15cqw rgba(0,0,0,.45))}
.fs-cursor b{position:absolute;left:1.7cqw;top:2.3cqw;padding:.35cqw .9cqw;border-radius:0 .8cqw .8cqw .8cqw;background:#a259ff;color:#fff;font-size:1.3cqw;font-weight:600;white-space:nowrap}
@keyframes fs-cursor{
  0%,100%{translate:calc(var(--cx0)*1cqw) calc(var(--cy0)*1cqw)}
  16%,24%{translate:calc(var(--cx1)*1cqw) calc(var(--cy1)*1cqw)}
  36%,44%{translate:calc(var(--cx2)*1cqw) calc(var(--cy2)*1cqw)}
  56%,64%{translate:calc(var(--cx3)*1cqw) calc(var(--cy3)*1cqw)}
  76%,84%{translate:calc(var(--cx4)*1cqw) calc(var(--cy4)*1cqw)}
}
@media(prefers-reduced-motion:reduce){
  .fs-frame,.fs-hover,.fs-flow,.fs-arrow,.fs-guide,.fs-tool-anim,.fs-cursor{animation:none!important}
  .fs-flow{opacity:1;stroke-dashoffset:0}.fs-arrow{opacity:1}
}

/* contact: live Montréal time + ready-made emails */
.reach{display:grid;gap:var(--s-4);padding-top:var(--s-6);border-top:1px solid var(--line)}
.mtl{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:500;color:var(--fg)}
.mtl-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#3fbf73;box-shadow:0 0 0 0 rgba(63,191,115,.5);animation:mtl-pulse 2.4s ease-out infinite}
@keyframes mtl-pulse{0%{box-shadow:0 0 0 0 rgba(63,191,115,.5)}70%,100%{box-shadow:0 0 0 9px rgba(63,191,115,0)}}
.reach-lead{max-width:58ch;color:var(--fg-2)}
.reach-btns{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media(max-width:600px){.reach-btns .btn{width:100%}}

/* 404 mini-game */
.game{position:relative;max-width:760px;border-radius:var(--r-lg);overflow:hidden;background:#0B0C0F;box-shadow:0 0 0 1px var(--line)}
.game-hud{display:flex;justify-content:space-between;gap:var(--s-4);padding:14px 18px;color:#F2EFE9;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase}
.game-hud b{font-weight:500;color:rgba(242,239,233,.55);margin-right:6px}
.game-hud i{font-style:normal;color:#F2EFE9}
.game canvas{display:block;width:100%;aspect-ratio:8/5;touch-action:none;outline-offset:-3px}
.game-panel{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s-3);padding:var(--s-6);text-align:center;background:rgba(11,12,15,.82);color:#F2EFE9}
.game-panel[hidden]{display:none}
.game-title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.5rem,1rem + 2vw,2.4rem);line-height:1}
.game-text{max-width:42ch;color:rgba(242,239,233,.72);font-size:var(--fs-sm)}
.game-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-3)}
.game-btn{height:46px;padding:0 22px;border-radius:10px;border:1px solid #F2EFE9;background:#F2EFE9;color:#0B0C0F;font-size:var(--fs-sm);font-weight:500;transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease-out)}
.game-btn:hover{background:var(--accent);border-color:var(--accent)}
.game-btn:active{transform:scale(.97)}
.game-btn--ghost{background:transparent;color:#F2EFE9;border-color:rgba(242,239,233,.4)}
.game-btn--ghost:hover{background:#F2EFE9;color:#0B0C0F;border-color:#F2EFE9}
.game-btn[hidden]{display:none}

/* changelog */
.log{display:grid;max-width:900px;border-top:1px solid var(--line)}
.log-item{display:grid;gap:var(--s-3) var(--s-7);padding:var(--s-6) 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.log-item{grid-template-columns:200px minmax(0,1fr)}}
.log-date{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--fg-3);padding-top:6px}
.log-body{display:grid;gap:var(--s-4)}
.log-list{display:grid;gap:var(--s-2);list-style:none}
.log-list li{position:relative;padding-left:20px;color:var(--fg-2);max-width:62ch}
.log-list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--accent)}
.log-shake{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-top:var(--s-6);color:var(--fg-2);font-size:var(--fs-sm)}
.log-shake [hidden]{display:none}

/* shake: falling drops + hidden message (mobile) */
.shake-drops{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.shake-drops i{position:absolute;top:-30px;width:14px;height:20px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#6CB8FF;opacity:.9;animation:shake-fall var(--d,1.8s) cubic-bezier(.4,0,.9,.6) var(--w,0s) forwards}
@keyframes shake-fall{to{transform:translateY(calc(100vh + 60px));opacity:.2}}
.shake-note{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:71;translate:-50% 20px;max-width:min(92vw,420px);padding:14px 18px;border-radius:12px;
  background:var(--fg);color:var(--bg);font-size:var(--fs-sm);font-weight:500;line-height:1.35;text-align:center;opacity:0;transition:opacity .35s var(--ease),translate .45s var(--ease-out)}
.shake-note.on{opacity:1;translate:-50% 0}

/* welcome-back note + flows dialog */
.vnote{position:fixed;left:var(--s-5);bottom:calc(var(--s-5) + env(safe-area-inset-bottom));z-index:65;display:grid;gap:var(--s-3);width:min(420px,calc(100vw - 32px));
  padding:var(--s-5) var(--s-5) var(--s-4);border-radius:var(--r-lg);background:var(--surface-2);color:var(--fg);box-shadow:0 0 0 1px var(--line-2),0 24px 50px -24px rgba(0,0,0,.55);
  opacity:0;translate:0 16px;transition:opacity .4s var(--ease),translate .5s var(--ease-out)}
.vnote.on{opacity:1;translate:0 0}
.vnote-label{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.vnote-text{padding-right:var(--s-5);font-size:var(--fs-sm);line-height:1.5}
.vnote-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.vnote-link{font-size:var(--fs-xs);font-weight:500;color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.vnote-link:hover{color:var(--fg)}
.vnote-x{position:absolute;right:10px;top:8px;width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;color:var(--fg-3);transition:color .2s,background .2s}
.vnote-x:hover{color:var(--fg);background:var(--line)}
@media(max-width:600px){.vnote{left:16px;right:16px;width:auto}}
.flows-dialog{width:min(720px,calc(100vw - 32px));max-height:min(86vh,820px);margin:auto;padding:var(--s-6);border:0;border-radius:var(--r-lg);background:var(--bg);color:var(--fg);
  box-shadow:0 0 0 1px var(--line-2),0 40px 90px -30px rgba(0,0,0,.7);overflow:auto;overscroll-behavior:contain}
.flows-dialog::backdrop{background:rgba(5,6,8,.62);backdrop-filter:blur(4px)}
.flows-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}
.flows-head h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1}
.flows-close{flex:none;width:36px;height:36px;border-radius:50%;font-size:24px;line-height:1;color:var(--fg-2);border:1px solid var(--line-2);transition:background .2s,color .2s}
.flows-close:hover{background:var(--fg);color:var(--bg)}
.flows-intro{margin-top:var(--s-4);color:var(--fg-2);font-size:var(--fs-sm);max-width:60ch}
.flows-flow{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.flows-flow h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.flows-desc{margin-top:var(--s-1);color:var(--fg-3);font-size:var(--fs-sm)}
.flows-steps{display:grid;gap:var(--s-3);margin-top:var(--s-4);list-style:none}
.flows-steps li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--s-4);align-items:baseline;padding:12px 16px;border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm)}
.flows-steps b{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
@media(max-width:560px){.flows-steps li{grid-template-columns:1fr;gap:2px}}
.flows-keep{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);color:var(--fg-2);font-size:var(--fs-xs);max-width:62ch}
.flows-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-4)}
.flows-done{font-size:var(--fs-sm);color:var(--accent-text)}

/* style guide page */
.sg-themes{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
@media(min-width:900px){.sg-themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sg-theme{padding:var(--s-5);border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line-2)}
.sg-theme > .label{color:inherit;opacity:.7}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s-4) var(--s-3);margin-top:var(--s-4)}
.sg-sw{display:grid;gap:6px;text-align:left;font-size:var(--fs-xs);line-height:1.3;color:inherit}
.sg-sw i{display:block;aspect-ratio:4/3;border-radius:var(--r-md);background:var(--c);box-shadow:0 0 0 1px rgba(128,128,128,.4);transition:transform .35s var(--ease-out)}
.sg-sw:hover i{transform:translateY(-3px)}
.sg-sw b{font-weight:600}
.sg-sw small{display:block;font-size:11px;opacity:.65}
.sg-sw span{font-family:var(--f-mono);opacity:.75}
.sg-sw[data-copied] span{opacity:1;color:var(--accent-text)}
.sg-accents{margin-top:var(--s-5);padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface)}
.sg-accents .sg-sw i{aspect-ratio:3/2}
.sg-accents [aria-pressed="true"] i{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--fg)}
.sg-fonts{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
@media(min-width:900px){.sg-fonts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sg-font{display:grid;gap:var(--s-3);align-content:start;padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface)}
.sg-aa{font-size:clamp(4rem,3rem + 3vw,6.5rem);line-height:.9;color:var(--fg)}
.sg-font h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.sg-font p{color:var(--fg-2);font-size:var(--fs-sm)}
.sg-try{display:grid;gap:var(--s-3);margin-top:var(--s-7);max-width:560px}
.sg-try input{width:100%;height:52px;padding:0 18px;border-radius:var(--r-md);border:1px solid var(--line-2);background:transparent;color:var(--fg);font:inherit;font-size:var(--fs-body)}
.sg-try input:focus{outline:none;border-color:var(--fg)}
.sg-demo{margin-top:var(--s-5);display:grid;gap:var(--s-3)}
.sg-demo .display{font-size:clamp(2.2rem,1.2rem + 4vw,4.6rem);overflow-wrap:anywhere}
.sg-sizes{display:grid;margin-top:var(--s-7);border-top:1px solid var(--line)}
.sg-size{display:grid;grid-template-columns:150px minmax(0,1fr) 64px;gap:var(--s-4);align-items:baseline;padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.sg-size .label{white-space:nowrap}
.sg-size > span:nth-child(2){min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sg-size .px{text-align:right;font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3)}
@media(max-width:620px){.sg-size{grid-template-columns:1fr auto}.sg-size > span:nth-child(2){grid-column:1/-1;grid-row:2}}
.sg-space{display:grid;gap:var(--s-2);margin-top:var(--s-7)}
.sg-space div{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:var(--s-4)}
.sg-space .px{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3)}
.sg-space i{display:block;height:22px;width:calc(var(--n)*1px);max-width:100%;border-radius:4px;background:var(--accent);transition:transform .4s var(--ease-out);transform-origin:left}
.sg-space div:hover i{transform:scaleY(1.5)}
.sg-radii{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-7)}
.sg-radii div{display:grid;place-content:center;width:112px;height:80px;border:1.5px solid var(--accent);border-radius:var(--r);font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-2)}
.sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-6)}
.sg-note{margin-top:var(--s-4);color:var(--fg-3);font-size:var(--fs-sm);max-width:62ch}
.sg-blocks{display:grid;gap:var(--s-7);margin-top:var(--s-7)}
.sg-block{display:grid;gap:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--line)}
.sg-ph{display:grid;place-content:center;height:100%;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,1rem + 3vw,3.6rem);letter-spacing:-.04em;text-transform:uppercase;color:var(--fg-3);
  background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 14px,var(--surface-2) 14px,var(--surface-2) 28px)}
.sg-card{display:grid;gap:var(--s-5);max-width:760px}
.sg-card .project{pointer-events:auto}

/* ---------- 12b Human buttons: text swaps + small bubbles ---------- */
.btn.is-swap{overflow:hidden}
.btn[data-said]{border-color:var(--accent)}
.btn-primary[data-said]{background:var(--accent);color:var(--on-accent)}
.tip{position:fixed;left:0;top:0;z-index:60;pointer-events:none;max-width:min(260px,calc(100vw - 24px));padding:8px 12px;border-radius:9px;
  background:var(--fg);color:var(--bg);font-size:var(--fs-xs);font-weight:500;line-height:1.25;white-space:nowrap;
  opacity:0;transform:translateY(-4px) scale(.96);transform-origin:50% 0;transition:opacity .2s var(--ease),transform .3s var(--ease-out)}
.tip.on{opacity:1;transform:none}

.site-footer{position:relative;overflow:hidden;border-top:1px solid var(--line);padding-top:var(--s-8)}
.foot-grid{display:grid;gap:var(--s-7)}
@media(min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;align-items:start}}
.foot-grid .brand{display:block;font-size:22px;margin-bottom:var(--s-3)}
.foot-tag{color:var(--fg-2);font-size:var(--fs-sm);max-width:32ch}
.prose .tags{margin-top:var(--s-6)}
.foot-col{display:grid;gap:var(--s-3);align-content:start}
.foot-col .label{margin-bottom:var(--s-1)}
.foot-col a{font-size:var(--fs-sm);color:var(--fg-2);width:fit-content;transition:color .2s}
.foot-col a:hover{color:var(--fg)}
.socials{display:flex;gap:var(--s-2)}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);color:var(--fg-2);
  transition:color .2s,border-color .2s,background .2s}
.socials a:hover{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.socials svg{width:18px;height:18px;fill:currentColor}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-4);margin-top:var(--s-8);
  padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--fg-3)}
.pal{display:flex;align-items:center;gap:var(--s-2)}
.pal .sw{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);transition:transform .3s var(--ease-out),box-shadow .2s}
.pal .sw{position:relative}
.pal .sw::after{content:"";position:absolute;inset:-4px;border-radius:50%} /* zone tactile de 26 px, même look */
.pal .sw:hover{transform:scale(1.15)}
.pal .sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--c)}
.foot-mark{margin-top:var(--s-6);margin-bottom:-.2em;font-family:var(--f-display);font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(4rem,17.5vw,17rem);line-height:.8;letter-spacing:-.06em;color:var(--fg);opacity:.06;white-space:nowrap;
  text-align:center;user-select:none;pointer-events:none}
.foot-mark::before{content:attr(data-mark)} /* mot décoratif en CSS : hors du texte de la page */

/* ---------- 13 Case studies ---------- */
.cover{border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.cover img{width:100%;height:auto}
.case-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}
.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.media-grid figure{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.media-grid video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.frame{position:relative;border-radius:var(--r-md);overflow:hidden;background:#000}
.frame video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.frame--tall{width:100%;max-width:380px;justify-self:center}
.frame--tall video{aspect-ratio:9/16;object-fit:cover}
figure.shot{margin:0}
.next-card{display:grid;gap:var(--s-5);padding-block:var(--s-7);border-block:1px solid var(--line)}
.next-card .h2{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);transition:color .4s var(--ease)}
.next-card .h2 .i{font-family:var(--f-sans);font-weight:400;flex:none;transition:transform .5s var(--ease-out),color .3s}
.next-card:hover .h2{color:var(--accent-text)}
.next-card:hover .h2 .i{transform:translateX(10px)}
.next-card .label{order:2}
.vid-toggle{position:absolute;right:var(--s-3);bottom:var(--s-3);z-index:3;height:30px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid rgba(242,239,233,.24);background:rgba(11,12,15,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:#F2EFE9;opacity:0;transition:opacity .25s,border-color .2s}
figure:hover .vid-toggle,.vid-toggle:focus-visible,.vid-toggle.is-paused{opacity:1}
@media(hover:none){.vid-toggle{opacity:1}}

/* ambiance photos (case study) */
.photo-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-4)}
.photo-grid figure{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.photo-grid .wide{grid-column:span 8;aspect-ratio:3/2}
.photo-grid .tall{grid-column:span 4}
.photo-grid img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.photo-grid{grid-template-columns:1fr}.photo-grid .wide,.photo-grid .tall{grid-column:auto;aspect-ratio:3/2}}

/* campaign page: sticky section list + a white 680 px column, like on Kickstarter */
.ks-page{padding-top:var(--s-6)}
.ks-layout{display:grid;gap:var(--s-7)}
.ks-toc{display:none}
@media(min-width:1024px){
  .ks-layout{grid-template-columns:240px minmax(0,1fr);gap:var(--s-9);align-items:start}
  .ks-toc{display:grid;align-content:start;position:sticky;top:calc(var(--header-h) + 24px);
    max-height:calc(100vh - var(--header-h) - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
}
@media(min-width:1024px) and (max-width:1279px){.ks-layout{grid-template-columns:200px minmax(0,1fr);gap:var(--s-7)}}
@media(min-width:1024px) and (max-height:760px){.ks-toc a{padding-block:4px}}
/* below 1024px the list becomes a sticky, horizontally scrolling strip of chips */
@media(max-width:1023px){
  .ks-toc{display:flex;gap:var(--s-2);position:sticky;top:78px;z-index:5;overflow-x:auto;padding:var(--s-3) var(--gutter);
    margin-inline:calc(var(--gutter) * -1);background:var(--bg);scrollbar-width:none}
  .ks-toc::-webkit-scrollbar{display:none}
  /* .ks-layout prefix: the base .ks-toc a / a.on rules below come later in the sheet and were overriding the chip padding and border */
  .ks-layout .ks-toc a,.ks-layout .ks-toc a.on{flex:none;padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);white-space:nowrap}
  .ks-layout .ks-toc a.on{border-color:var(--accent)}
}
.ks-toc a{display:flex;gap:var(--s-3);align-items:baseline;padding:7px 0 7px 14px;border-left:1px solid var(--line-2);
  font-size:var(--fs-sm);line-height:1.35;color:var(--fg-3);transition:color .2s,border-color .2s}
.ks-toc a b{flex:none;font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;color:var(--fg-3);transition:color .2s}
.ks-toc a:hover{color:var(--fg)}
.ks-toc a.on{color:var(--fg);border-left:2px solid var(--accent);padding-left:13px}
.ks-toc a.on b{color:var(--accent-text)}
.ks-paper{width:100%;max-width:760px;justify-self:start;padding:clamp(20px,4vw,40px);border-radius:var(--r-lg);
  background:#fff;color:#13294B;box-shadow:0 30px 80px -40px rgba(0,0,0,.6);color-scheme:light}
html[data-theme="light"] .ks-paper{box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(0,0,0,.3)}
.ks-sec + .ks-sec{margin-top:clamp(40px,6vw,64px);padding-top:clamp(40px,6vw,64px);border-top:1px solid #E7EAF0}
.ks-sec > * + *{margin-top:var(--s-4)}
.ks-h{display:flex;gap:var(--s-3);align-items:baseline;margin-bottom:var(--s-5);font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.025em;line-height:1.05;font-size:clamp(1.3rem,1rem + 1vw,1.75rem);color:#13294B}
.ks-h > span[aria-hidden]{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.04em;color:#5E6675}
.ks-sec img,.ks-media{display:block;width:100%;max-width:680px;margin-inline:auto}
.ks-sec img{height:auto;border-radius:var(--r-sm)}
.ks-media{position:relative;border-radius:var(--r-sm);overflow:hidden;background:#0B0C0F}
.ks-media video{width:100%;height:auto;display:block}
.ks-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);max-width:680px;margin-inline:auto}
.ks-colors img{border-radius:var(--r-sm)}
/* phones: the white column runs edge to edge so the 680 px graphics stay readable */
@media(max-width:700px){.ks-paper{width:auto;margin-inline:calc(var(--gutter) * -1);border-radius:0;padding:var(--s-6) 14px}.ks-h{padding-inline:calc(var(--gutter) - 14px)}.ks-colors{gap:8px}}

/* ---------- 14 Klaviyo ---------- */
.cap-grid{display:grid;gap:var(--s-6) var(--s-6)}
@media(min-width:640px){.cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cap{display:grid;gap:var(--s-3);align-content:start;padding-top:var(--s-5);border-top:1px solid var(--line-2)}
.cap .num{font-family:var(--f-mono);font-size:var(--fs-label);color:var(--accent-text)}
.cap .h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);line-height:1}
.cap p{color:var(--fg-2);font-size:var(--fs-sm)}

.gallery-wrap{position:relative}
.gallery{display:flex;gap:var(--s-4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:var(--s-5);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.gallery.drag{scroll-snap-type:none;cursor:grabbing}
.gallery.can-drag{cursor:grab}
.gallery::-webkit-scrollbar{height:6px}
.gallery::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--r-pill)}
.shot{position:relative;display:block;flex:0 0 auto;height:min(64vh,500px);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  scroll-snap-align:start;user-select:none}
.shot video[controls]{pointer-events:auto}
.shot video{aspect-ratio:9/16}
.gallery .shot:focus-visible{outline-offset:-3px}
.shot img,.shot video{height:100%;width:auto;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform .8s var(--ease-out)}
.gallery--emails .shot{flex-basis:calc((100% - var(--s-4)*2)/3);height:min(70vh,560px);padding:0;text-align:left}
.gallery--emails .shot img{width:100%;object-position:top}
.gallery--emails .shot:hover img{transform:scale(1.03)}
.shot-cover{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:var(--s-8) var(--s-4) var(--s-4);
  background:linear-gradient(180deg,transparent,rgba(11,12,15,.94) 60%);color:#F2EFE9;font-size:var(--fs-xs);font-weight:500;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out)}
.shot-cover .label{color:#AAA7A0}
.shot:hover .shot-cover,.shot:focus-visible .shot-cover{opacity:1;transform:none}
@media(hover:none){.shot-cover{opacity:1;transform:none}}
.gallery-foot{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-2)}
.gallery-foot .progress{flex:1;max-width:240px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.gallery-foot .progress i{position:absolute;inset:0 auto 0 0;width:20%;background:var(--accent);transition:width .2s linear}
.gal-nav{display:flex;gap:var(--s-2);margin-left:auto}
.gal-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);color:var(--fg);font-size:15px;
  transition:opacity .25s,background .2s,border-color .2s,color .2s}
.gal-arrow:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.gal-arrow.off{opacity:.3;pointer-events:none}
@media(max-width:900px){.gallery--emails .shot{flex-basis:calc((100% - var(--s-4))/2)}}
@media(max-width:560px){.gallery--emails .shot{flex-basis:82%;height:62vh}.shot{height:56vh}.gallery-foot .label{display:none}}

.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:80px var(--s-4) var(--s-8);
  overflow:auto;overscroll-behavior:contain;color:#F2EFE9;background:transparent}
/* blur lives on ::backdrop: a backdrop-filter on the dialog itself would make it the containing block of the fixed .lb-bar/.lb-close, so they scrolled away */
.lightbox::backdrop{background:rgba(6,7,8,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox[open]{animation:lb-in .35s var(--ease-out)}
.lightbox[open]::backdrop{animation:lb-in .35s var(--ease-out)}
@keyframes lb-in{from{opacity:0}}
.lb-bar{position:fixed;top:var(--s-4);left:var(--s-4);z-index:2;height:46px;display:flex;align-items:center;gap:var(--s-3)}
.lb-btn,.lb-close{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;border:1px solid rgba(242,239,233,.2);background:rgba(17,18,22,.9);transition:background .2s,border-color .2s}
.lb-btn:hover,.lb-close:hover{background:#1A1B20;border-color:rgba(242,239,233,.4)}
.lb-close{position:fixed;top:var(--s-4);right:var(--s-4);z-index:2}
.lb-count{min-width:5ch;text-align:center;color:#AAA7A0}
.lb-inner{max-width:600px;margin:0 auto}
.lb-inner img{width:100%;border-radius:var(--r-md)}
.lb-inner.is-mobile{max-width:390px}
.lightbox [hidden]{display:none!important}
.lb-views{display:flex;gap:6px;margin-left:var(--s-2)}
.lb-view{height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(242,239,233,.2);background:rgba(17,18,22,.9);color:#F2EFE9;font-size:var(--fs-sm);transition:background .2s,color .2s}
.lb-view[aria-pressed="true"]{background:#F2EFE9;color:#0B0C0F;border-color:#F2EFE9}
@media(max-width:600px){.lb-views{position:fixed;left:var(--s-4);bottom:var(--s-4);margin:0}}

/* ---------- Command palette (Ctrl / Cmd + K) ----------
   Blur lives on ::backdrop, not on the dialog (see the lightbox note above). */
.cmdk{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:min(16vh,140px) var(--s-4) var(--s-5);
  background:transparent;color:var(--fg);overflow:hidden}
.cmdk::backdrop{background:rgba(6,7,8,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cmdk[open],.cmdk[open]::backdrop{animation:lb-in .2s var(--ease-out)}
.cmdk-box{width:min(640px,100%);margin:0 auto;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.65);overflow:hidden}
.cmdk-input{display:block;width:100%;height:58px;padding:0 var(--s-5);border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--fg);font:inherit;font-size:1rem}
.cmdk-input::placeholder{color:var(--fg-2);opacity:1}
.cmdk-input:focus-visible{outline-offset:-4px;border-radius:var(--r-lg)}
.cmdk-list{list-style:none;margin:0;padding:var(--s-2);max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain}
.cmdk-item{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:10px var(--s-3);border-radius:var(--r-md);cursor:pointer;color:var(--fg-2)}
.cmdk-item[aria-selected="true"]{background:var(--surface-2);color:var(--fg)}
.cmdk-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}
.cmdk-tag{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-2)}
.cmdk-sw{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.cmdk-empty{margin:0;padding:var(--s-5);color:var(--fg-2);font-size:var(--fs-sm)}
.cmdk-help{margin:0;padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);color:var(--fg-2)}
html.has-cursor .cmdk,html.has-cursor .cmdk *{cursor:auto!important}
html.has-cursor .cmdk-item{cursor:pointer!important}
.cmdk-hint{display:inline-flex;align-items:center;gap:4px;padding:2px;border-radius:8px}
.cmdk-hint kbd{font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;padding:5px 8px;border:1px solid var(--line-2);border-radius:6px;color:var(--fg-2);transition:color .2s,border-color .2s}
.cmdk-hint:hover kbd{color:var(--fg);border-color:var(--fg-3)}
@media(max-width:600px){.cmdk{padding-top:var(--s-6)}}

.flows{display:grid;gap:var(--s-5)}
.flow{display:grid;gap:var(--s-5);padding-top:var(--s-6);border-top:1px solid var(--line)}
.flow-head{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-5);align-content:start}
.flow-num{grid-row:span 2;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:.9;letter-spacing:-.04em;color:var(--fg-3)}
.flow-head p{color:var(--fg-2);font-size:var(--fs-sm);max-width:40ch}
.flow .frame video{aspect-ratio:1920/1004;background:var(--surface)}

/* ---------- Flow maps (klaviyo.html): the real structure of each flow, block by block ---------- */
.fmap{display:grid;gap:var(--s-4)}
.fmap-hint{margin:0;color:var(--fg-2)}
.fmap-list{list-style:none;margin:0;padding:0 0 0 26px;position:relative;display:grid;gap:10px;align-content:start}
.fmap-list::before{content:"";position:absolute;left:8px;top:22px;bottom:22px;width:1px;background:var(--line-2)}
.fmap-list--root::before{transform-origin:top;transition:transform 1.8s var(--ease-out)}
.js .fmap-list--root::before{transform:scaleY(0)}
.js .fmap.in .fmap-list--root::before{transform:none}
.fnode{position:relative;min-width:0}
.js .fmap .fnode{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js .fmap.in .fnode{opacity:1;transform:none}
.fnode-btn{position:relative;display:grid;gap:3px;width:100%;padding:14px 48px 14px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);color:var(--fg);text-align:left;transition:border-color .2s,background .2s}
.fnode-btn::before{content:"";position:absolute;left:-23px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--fg-3);transition:background .2s,border-color .2s}
.fnode-btn:hover{border-color:var(--fg-3)}
.fnode-btn[aria-expanded="true"]{border-color:var(--fg);background:var(--surface-2)}
.fnode-btn:hover::before,.fnode-btn[aria-expanded="true"]::before,.fnode--trigger .fnode-btn::before{background:var(--accent);border-color:var(--accent)}
.fnode-kind{color:var(--fg-2)}
.fnode-title{font-weight:600;font-size:var(--fs-sm);line-height:1.35}
.fnode-sub{color:var(--fg-2);font-size:var(--fs-xs);line-height:1.4;overflow-wrap:anywhere}
.fnode-plus{position:absolute;right:16px;top:50%;width:14px;height:14px;margin-top:-7px}
.fnode-plus::before,.fnode-plus::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.fnode-plus::after{transform:rotate(90deg)}
.fnode-btn[aria-expanded="true"] .fnode-plus::after{transform:none}
.fnode--delay{padding-block:2px}
.fnode-chip{display:inline-flex;align-items:center;padding:5px 12px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--bg);font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.4;letter-spacing:.04em;color:var(--fg-2)}
.fnode-chip--action{border-style:solid;color:var(--fg)}
.fdetail{margin-top:8px;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);animation:fd-in .35s var(--ease-out)}
.fdetail[hidden]{display:none}
@keyframes fd-in{from{opacity:0;transform:translateY(-6px)}}
.has-shot .fdetail:not([hidden]){display:grid;gap:var(--s-5)}
@media(min-width:720px){.has-shot .fdetail:not([hidden]){grid-template-columns:200px minmax(0,1fr)}}
.fdetail-fig,.fdetail-meta{min-width:0}
.fshot{position:relative;display:block;width:100%;max-width:260px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface-2)}
.fshot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease-out)}
.fshot:hover img{transform:scale(1.03)}
.fshot-cap{position:absolute;inset:auto 0 0 0;display:flex;padding:var(--s-7) var(--s-3) var(--s-3);background:linear-gradient(transparent,rgba(6,7,8,.88));color:#F2EFE9;font-size:var(--fs-xs);opacity:0;transition:opacity .3s}
.fshot:hover .fshot-cap,.fshot:focus-visible .fshot-cap{opacity:1}
@media(hover:none){.fshot-cap{opacity:1}}
.fmeta{margin:0;display:grid;gap:12px}
.fmeta dt{margin-bottom:2px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.fmeta dd{margin:0;font-size:var(--fs-sm);color:var(--fg);overflow-wrap:anywhere}
.fmeta-list{margin:0;padding-left:1.1em;display:grid;gap:4px;list-style:disc}
.fdetail-note{margin:var(--s-3) 0 0;font-size:var(--fs-xs);line-height:1.5;color:var(--fg-2)}
.fbranches{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-4)}
.fbranch{min-width:0;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-md)}
.fbranch-label{margin:0 0 var(--s-2);color:var(--fg-2)}
.fbranch-end{margin:0;font-size:var(--fs-xs);color:var(--fg-2)}
.fbranch .fmap-list{padding-left:20px}
.fbranch .fmap-list::before{left:5px}
.fbranch .fnode-btn::before{left:-20px}
.fbranch .has-shot .fdetail:not([hidden]){grid-template-columns:1fr}   /* branch columns are narrow: image above the text */

/* ---------- Tools: monochrome logos, grouped by use, no levels or percentages ---------- */
.tools{display:grid}
.tool-group{display:grid;gap:var(--s-5);padding-block:var(--s-6);border-top:1px solid var(--line)}
.tool-group-head{display:grid;gap:var(--s-2);align-content:start}
.tool-group-head p{margin:0;max-width:40ch;color:var(--fg-2);font-size:var(--fs-sm)}
.tool-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tool{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--fg);font-size:var(--fs-sm);font-weight:500;line-height:1.25;transition:border-color .2s}
.tool:hover{border-color:var(--fg-3)}
.tool svg{flex:none;width:24px;height:24px;fill:currentColor}
.tool svg.wide{width:32px;height:32px;margin-inline:-4px}
.tool-logos{display:flex;flex:none;gap:6px}
.section--tools{padding-block:0}
.proj-tools{display:grid;gap:var(--s-4);padding-block:var(--s-6);border-top:1px solid var(--line)}
.proj-tools .label{margin:0;color:var(--fg-2)}
.proj-tools .tool-list{display:flex;flex-wrap:wrap;gap:10px}
.proj-tools .tool{padding:10px 14px}
@media(min-width:960px){.tool-group{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-8);align-items:start}}
@media(min-width:720px){.fbranches--2,.fbranches--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.fbranches--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.flow{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-8);align-items:start}.flow-head{grid-row:1 / span 2}.flow .fmap,.flow .frame{grid-column:2}}

/* ---------- 15 Story ---------- */
.timeline{position:relative;display:grid}
.tl-item{position:relative;display:grid;gap:var(--s-2);padding:0 0 var(--s-7) var(--s-7)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:5px;top:10px;bottom:-10px;width:1px;background:var(--line-2)}
.tl-item:last-child::before{display:none}
.tl-item::after{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--fg-3);transition:border-color .4s,background .4s}
.tl-item.in::after{border-color:var(--fg);background:var(--fg)}
.tl-item:last-child::after{background:var(--accent);border-color:var(--accent)}
.tl-year{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);line-height:1;letter-spacing:-.04em;color:var(--fg)}
.tl-item p{color:var(--fg-2);max-width:58ch}
.after-tl{margin-top:var(--s-7);padding-left:var(--s-7)}

/* ---------- 16 Motion ---------- */
/* scroll reveals (hidden states only apply when JS runs) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
/* media: clip-wipe reveal */
.js .reveal{clip-path:inset(14% 8% 14% 8% round var(--r-lg));transition:clip-path 1.3s var(--ease-io)}
.js .reveal > img,.js .reveal > video,.js .reveal > .mails{transform:scale(1.12);transition:transform 1.6s var(--ease-out)}
.js .in .reveal,.js .reveal.in{clip-path:inset(0 0 0 0 round var(--r-lg))}
.js .hero-media.reveal{transition:clip-path 1.3s var(--ease-io),transform .6s var(--ease-out)}
.js .in .reveal > img,.js .in .reveal > video,.js .in .reveal > .mails,.js .reveal.in > img,.js .reveal.in > video,.js .reveal.in > .mails{transform:none}
/* headline words rise from a mask */
.w{display:inline-block;overflow:hidden;vertical-align:top;white-space:nowrap;padding:.24em .04em .16em;margin:-.24em -.04em -.16em}
.w > span{display:inline-block;transition:transform 1s var(--ease-out),filter 1s var(--ease-out)}
.js [data-intro]:not(.lit) .w > span,.js .rv:not(.in) .w > span{transform:translateY(135%);filter:blur(10px)}
.js .hero-in{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out) .35s,transform .9s var(--ease-out) .35s}
.js .lit .hero-in{opacity:1;transform:none}

/* cursor: a design-tool crosshair. Four accent corners frame it at rest and
   snap around links/buttons like a selection box; projects show a "Voir" disc. */
html.has-cursor,html.has-cursor *{cursor:none!important}
/* the modal lightbox sits in the top layer, above the custom cursor: give it the native pointer back */
html.has-cursor .lightbox,html.has-cursor .lightbox *{cursor:auto!important}
html.has-cursor .lightbox button,html.has-cursor .lightbox button *{cursor:pointer!important}
/* display:contents: no stacking context of its own, so the crosshair's blend mode sees the real page */
.cursor{display:none}
.has-cursor .cursor{display:contents}
.cursor > *{position:fixed;left:0;top:0;z-index:600;pointer-events:none;transition:opacity .25s}
/* crosshair inverts whatever is under it, so it reads on dark, cream and photos */
.cursor-cross{width:0;height:0;mix-blend-mode:difference}
.cursor-cross::before,.cursor-cross::after{content:"";position:absolute;background:#fff}
.cursor-cross::before{left:-11px;top:-.75px;width:22px;height:1.5px}
.cursor-cross::after{left:-.75px;top:-11px;width:1.5px;height:22px}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--accent)}
.cursor-frame{width:30px;height:30px;transition:transform .45s var(--ease-out),width .45s var(--ease-out),height .45s var(--ease-out),opacity .25s}
.cursor-frame i{position:absolute;width:8px;height:8px;border:0 solid var(--accent);transition:width .35s var(--ease-out),height .35s var(--ease-out)}
.cursor-frame i:nth-child(1){left:0;top:0;border-top-width:2px;border-left-width:2px}
.cursor-frame i:nth-child(2){right:0;top:0;border-top-width:2px;border-right-width:2px}
.cursor-frame i:nth-child(3){left:0;bottom:0;border-bottom-width:2px;border-left-width:2px}
.cursor-frame i:nth-child(4){right:0;bottom:0;border-bottom-width:2px;border-right-width:2px}
.cursor.frame .cursor-frame i{width:12px;height:12px}
.cursor.down .cursor-frame i{width:5px;height:5px}
.cursor-label{width:92px;height:92px;margin:-46px 0 0 -46px;display:grid;place-items:center;border-radius:50%;background:var(--accent);
  opacity:0;scale:.4;transition:opacity .25s,scale .45s var(--ease-out)}
.cursor-label span{font-size:13px;font-weight:600;color:var(--on-accent)}
.cursor.label .cursor-label{opacity:1;scale:1}
.cursor.label .cursor-cross,.cursor.label .cursor-frame,.cursor.label .cursor-dot{opacity:0}
.cursor.hidden > *{opacity:0!important}

/* page-to-page transition (Chrome/Edge/Safari 18+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .6s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}

/* Shared-element transition (cross-document): the Kickstarter card on the home page grows into the cover
   image of kickstarter.html, and shrinks back on the way home. Only these two elements carry the name.
   Other pages have no matching element, so the image just fades like the rest (:only-child). */
.project[href="kickstarter.html"] .project-media,.cover{view-transition-name:vt-ks}
::view-transition-group(vt-ks){animation-duration:.8s;animation-timing-function:cubic-bezier(.76,0,.24,1)}
::view-transition-old(vt-ks),::view-transition-new(vt-ks){height:100%;object-fit:cover;mix-blend-mode:normal}
::view-transition-old(vt-ks):only-child{animation:vt-out .35s var(--ease-io) both}
::view-transition-new(vt-ks):only-child{animation:vt-in .6s var(--ease-out) both}
/* while a transition runs, show both elements in their revealed state so the snapshot is complete
   (the scroll-reveal would otherwise hide them: clip-path / scale / fade until JS adds .in) */
html:active-view-transition .cover,html:active-view-transition .project[href="kickstarter.html"] .project-media{clip-path:inset(0 0 0 0 round var(--r-lg))!important}
html:active-view-transition .cover > img,html:active-view-transition .project[href="kickstarter.html"] .project-media > img{transform:none!important}
html:active-view-transition .project[href="kickstarter.html"]{opacity:1!important;transform:none!important}

/* ---------- 17 Responsive + reduced motion ---------- */
@media(max-width:860px){
  :root{--header-h:86px}
  .stats--lg{grid-template-columns:1fr}
  .menu-open .mobile-menu{display:block}
  .hero{min-height:0;padding-top:var(--s-7)}
}
/* long words in big titles ("typographie", "l’espacement") must not push the page sideways on small phones */
@media(max-width:430px){.h2{font-size:1.9rem}}
@media(max-width:340px){.h2{font-size:1.5rem}.display,.contact .display{font-size:2.05rem}.h-proj{font-size:1.7rem}}
@media(max-width:600px){
  .stats{column-gap:18px}
  .stat dd{font-size:1.6rem}
  .media-grid{grid-template-columns:1fr}
  .mail-row .btn{width:100%}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .actions .btn{flex:1 1 auto}
  .case-cta .btn{flex:1 1 100%;white-space:normal;height:auto;min-height:52px;padding-block:14px;text-align:center}
  .project-num{top:var(--s-3);left:var(--s-3)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv,.js .hero-in{opacity:1;transform:none}
  .js .reveal{clip-path:none}
  .cmdk[open]::backdrop,.lightbox[open]::backdrop{animation:none} /* *::before/after above doesn't reach ::backdrop */
  .js .reveal > *{transform:none!important}
  .w > span{transform:none!important}
  .hero-media{transform:none}
  @view-transition{navigation:none}
}