/* Refined, original visual system inspired by the editorial contrast and
   motion of Adham Dannaway. The owner's original dk. emblem is preserved. */
:root {
  --paper:#fcfbf8; --surface:#fff; --ink:#292929; --muted:#6c6c6c;
  --line:#e5e3de; --pale:#f6f4ef; --accent:#b45287;
  --font-display:'Proxima Nova';
  --font-body:'Proxima Nova';
  --easing:cubic-bezier(.16,1,.3,1);
  --accent-blue:#428eae;
}
:root[data-theme='dark'] {
  --paper:#18191b; --surface:#222427; --ink:#f5f3f0;
  --muted:#bdc0c0; --line:#404246; --pale:#222326;
  --accent:#d793b7; --accent-blue:#7ab6cf;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {--paper:#18191b; --surface:#222427; --ink:#f5f3f0;
    --muted:#bdc0c0; --line:#404246; --pale:#222326; --accent:#d793b7; --accent-blue:#7ab6cf;}
}
html {scroll-padding-top:86px;}
body,.blog-page {background:var(--paper);color:var(--ink);font-family:var(--font-body);}
h1,h2,h3,.section-title,.blog-intro h1,.blog-card h2 {font-family:var(--font-display);font-weight:800;letter-spacing:-.058em;}
.shell {width:min(1190px,calc(100% - 84px));}
.site-header,.blog-header {background:var(--paper);border-bottom:1px solid var(--line); height:91px; position:sticky;top:0;z-index:100;}
.site-header .header-inner {width:min(1190px,calc(100% - 84px));}
/* The original 2026 dk. icon: circular disc with a tilted lettermark. */
.header-inner > .brand,.blog-header .blog-brand {
  width:59px;height:59px;min-width:59px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#171a16;border:1px solid #d5d5d1;
  font-family:var(--font-reference);font-size:33px;font-weight:700;
  letter-spacing:-4px;box-shadow:0 2px 12px #00000006;
  transition:transform .45s var(--easing),box-shadow .3s ease;
}
.header-inner > .brand span,.blog-header .blog-brand span {
  font-size:33px;line-height:1;letter-spacing:-5px;padding-right:5px;
  transform:rotate(-12deg);font-weight:700;color:#171a16;
}
.header-inner > .brand:hover,.blog-header .blog-brand:hover { transform:rotate(-7deg) scale(1.045);box-shadow:0 6px 22px #00000014; }
.is-condensed .brand,.is-condensed .blog-brand { transform:none; }
#main-nav,.blog-header nav {gap:clamp(17px,3vw,43px);}
#main-nav > a,.blog-header nav > a {font-size:15px;font-weight:700;letter-spacing:-.01em;opacity:.7;color:var(--ink);}
#main-nav > a.active,#main-nav > a:is(:hover,:focus-visible),.blog-header nav > a:is(:hover,:focus-visible),.blog-header nav > a[aria-current] {opacity:1;color:var(--ink);}
#main-nav > a::after,.blog-header nav > a::after {height:2px;background:var(--accent);}
.theme-toggle {border-radius:50%;background:transparent;color:var(--ink);border-color:var(--line);}
/* Reference-inspired three-column editorial hero: reserve full widths for text */
.about-hero {padding-top:0;background:var(--paper);}
.hero-stage {
  --portrait-size:clamp(350px,35vw,510px);
  --pointer-split:50%;--portrait-lean:0px;
  width:min(1330px,calc(100% - 70px));
  min-height:clamp(500px,47vw,650px);
  display:grid;grid-template-columns:minmax(0,1fr) var(--portrait-size) minmax(0,1fr);
  align-items:center;position:relative;isolation:isolate;overflow:hidden;
}
.hero-stage::before {
  content:'';position:absolute;top:14%;left:50%;width:min(44vw,560px);height:min(44vw,560px);
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 45% 60%,rgba(76,140,178,.075),transparent 67%);
}
.hero-mode,.hero-mode-build,.hero-mode-lead {
  display:flex;position:relative;z-index:4;min-width:0;min-height:auto;
  flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;
  background:none;color:var(--ink);padding:0;gap:17px;text-decoration:none;
}
.hero-mode-build {grid-column:1;align-items:flex-start;padding-right:12px;}
.hero-mode-lead {grid-column:3;align-items:flex-start;padding-left:12px;}
.hero-mode-title,.hero-mode-lead .hero-mode-title {
  display:block;max-width:100%;font-family:var(--font-display);
  font-size:clamp(27px,2.65vw,39px);font-weight:900;
  letter-spacing:-.062em;line-height:1.08;white-space:nowrap;
  color:var(--ink);transition:none;transform:none;
}
.hero-mode-build .hero-mode-title { color:var(--accent-blue); }
.hero-mode-lead .hero-mode-title { color:var(--ink); }
.hero-mode-detail {max-width:330px;width:auto;color:var(--muted);opacity:1;
 font-family:var(--font-body);font-weight:500;letter-spacing:-.015em;
 font-size:clamp(14px,1.13vw,16px);line-height:1.65;}
.hero-stage .hero-mode:is(:hover,:focus-visible),
.hero-stage .hero-mode:is(:hover,:focus-visible) .hero-mode-detail {background:none;color:var(--muted);text-decoration:none;}
.hero-stage .hero-mode:is(:hover,:focus-visible) .hero-mode-title {color:inherit;transform:none;}
.hero-mode-build:is(:hover,:focus-visible) .hero-mode-title {color:var(--accent-blue) !important;}
.hero-mode-lead:is(:hover,:focus-visible) .hero-mode-title {color:var(--ink) !important;}
.hero-portrait {
  position:absolute;z-index:3;left:50%;bottom:0;transform:translateX(-50%);
  width:var(--portrait-size);height:var(--portrait-size);overflow:visible;pointer-events:none;
}
.hero-portrait img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;}
.hero-portrait .portrait-natural {filter:none;transform:translate3d(var(--portrait-lean),0,0);}
.hero-portrait .portrait-editorial {
  clip-path:inset(0 calc(100% - var(--pointer-split)) 0 0);
  filter:grayscale(1) contrast(1.12) brightness(1.12);
  transform:translate3d(var(--portrait-lean),0,0);will-change:clip-path,transform;
}
.hero-portrait::before {
  content:'';display:block;position:absolute;inset:12% 11% 10%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(76,140,178,.1),transparent 72%);
  filter:blur(14px);z-index:-1;
}
.hero-portrait::after {display:none;}
.hero-summary {padding:40px 20px 64px;text-align:center;border-top:1px solid var(--line);}
.hero-summary > p {color:var(--ink);max-width:720px;font-size:clamp(22px,2.1vw,27px);line-height:1.43;font-weight:600;letter-spacing:-.035em;}
.hero-summary .inline-link {font-weight:700;margin-top:12px;border-color:var(--accent);}
.hero-summary .inline-link:hover {color:var(--accent);}
/* Projects, skills and process: editorial sections like the reference, not dashboard panels */
.band {padding-block:clamp(82px,9vw,142px);border-color:var(--line);}
.pale {background:var(--pale);box-shadow:none;}
.section-kicker {font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--accent);margin:0 0 16px;}
.heading-point {color:var(--accent);}
.section-title,.work-copy h2 {font-size:clamp(41px,4.8vw,68px);line-height:1.06;letter-spacing:-.063em;margin-bottom:50px;}
.capabilities-layout {grid-template-columns:1fr 1.15fr 1fr;gap:40px;}
.capabilities-copy h3 {font-size:clamp(24px,2.8vw,38px);font-weight:800;}
.capabilities-copy:first-child h3 {color:var(--accent-blue);}
.capabilities-copy:last-child h3 {color:var(--accent);}
.capabilities-picture svg {filter:drop-shadow(0 22px 35px #00000010);}
.plain-list {font-size:18px;line-height:1.95;}
.split-row {gap:clamp(40px,5.5vw,90px);}
.work-visual {height:445px;}
.work-window {border:9px solid var(--surface);background:var(--surface);border-radius:13px;box-shadow:0 24px 65px #00000016,0 0 0 1px var(--line);transform:perspective(1000px) rotateY(-5deg);transition:transform .5s var(--easing);}
.work-window:hover {transform:perspective(1000px) rotateY(0deg) translateY(-4px);}
.work-phone {box-shadow:0 20px 40px #00000023;}
.work-copy .intro {font-size:clamp(20px,2.3vw,28px);color:var(--ink);}
.selected-projects {gap:35px 38px;padding-top:66px;margin-top:75px;}
.selected-project {transition:transform .5s var(--easing);}
.selected-project:is(:hover,:focus-visible) {transform:translateY(-7px);}
.selected-image {border:0;border-radius:8px;background:var(--pale);box-shadow:0 0 0 1px var(--line);overflow:hidden;}
.selected-project:nth-child(2) .selected-image {background:#eaf4f6;}
.selected-project:nth-child(3) .selected-image {background:#f7e7ef;}
.selected-project:nth-child(4) .selected-image {background:#f5f1e6;}
.selected-project .selected-image img {transition:transform .8s var(--easing),filter .7s ease;}
.selected-project:is(:hover,:focus-visible) .selected-image img {transform:scale(1.055) translate3d(var(--card-tx,0px),var(--card-ty,0px),0);}
.selected-project h3 {font-size:clamp(23px,2.3vw,31px);margin:20px 0 6px;}
.selected-project h3 > span {color:var(--accent);}
.selected-project p {font-size:15px;}
.process-grid {gap:45px;}
.process-grid::before {top:28px;}
.process-bar,.turquoise,.pink,.yellow {width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:var(--surface);}
.process-bar span {font-family:var(--font-body);font-weight:900;color:var(--accent);font-size:17px;}
.process-step h3 {font-size:clamp(22px,2vw,30px);}
.process-step p {font-size:16px;}
.contact-band {background:var(--surface);}
.contact-band h2 {font-size:clamp(40px,5vw,68px);line-height:1.08;}
.contact-form .button,.button {border-radius:5px;background:var(--accent-blue);border-color:var(--accent-blue);color:white;font-weight:800;transition:transform .3s var(--easing),box-shadow .3s ease;}
.button:hover {background:var(--accent-blue);transform:translateY(-3px);box-shadow:0 10px 26px #397d9b30;}
.form-field input,.form-field textarea {border-radius:4px;}
.snapshots {gap:20px;padding-block:24px 60px;}
.snapshot {border-radius:5px;background:var(--surface);border:1px solid var(--line);box-shadow:none;}
.snapshot:hover {transform:translateY(-6px);box-shadow:0 12px 32px #00000015;}
.site-footer {background:var(--pale);}
.site-footer,.blog-footer {font-size:14px;}
.text-page {max-width:980px;padding-block:clamp(65px,7vw,115px);}
.text-page h1 {font-size:clamp(48px,6vw,84px);color:var(--ink);}
.text-page h2 {font-size:clamp(30px,3vw,46px);margin-top:60px;}
.text-page .intro {font-size:clamp(21px,2.4vw,30px);color:var(--ink);}
.text-page p,.text-page li {color:var(--muted);}
.text-page .project-detail {max-width:800px;padding-block:56px;border-color:var(--line);}
.text-page .project-detail img {border-radius:5px;box-shadow:0 12px 42px #00000010;}
.text-page .callout {background:var(--pale);border-left:4px solid var(--accent-blue);}
.blog-page .blog-shell {width:min(1190px,calc(100% - 84px));max-width:none;}
.blog-header > .blog-shell {width:min(1190px,calc(100% - 84px));}
.blog-header {color:var(--ink);}
.blog-header .blog-brand {font-size:inherit;}
.blog-header nav {margin-left:auto;}
.blog-header .blog-contact-link {border-color:var(--line);}
.blog-intro h1 {font-size:clamp(60px,7.5vw,110px);}
.blog-card {transition:transform .35s var(--easing);}
.blog-card:hover {transform:translateY(-6px);}
.blog-card:hover .blog-card-visual {transform:translate3d(var(--card-tx,0px),var(--card-ty,0px),0);}
.blog-card-visual {transition:transform .4s var(--easing);}
.blog-card-visual {border-radius:7px;}
.blog-card-meta,.blog-read {color:var(--muted);}
@media (max-width:1150px) {
 .hero-stage {--portrait-size:clamp(330px,39vw,450px);width:calc(100% - 58px);}
 .hero-mode-title,.hero-mode-lead .hero-mode-title {font-size:clamp(22px,2.7vw,33px);}
 .hero-mode-detail {font-size:13px;}
}
@media (max-width:860px) {
 .hero-stage {--portrait-size:clamp(270px,40vw,350px);min-height:530px;}
 .hero-mode-title,.hero-mode-lead .hero-mode-title {font-size:clamp(17px,2.45vw,24px);}
 .hero-mode-detail {font-size:12px;line-height:1.5;}
 .capabilities-layout {gap:15px;}
 .work-visual {height:350px;}
 .split-row {gap:35px;}
}
@media (max-width:700px) {
 .site-header,.blog-header {height:74px;}
 .site-header .header-inner,.blog-header > .blog-shell {width:calc(100% - 38px);}
 .header-inner > .brand,.blog-header .blog-brand {width:53px;height:53px;min-width:53px;}
 .header-inner > .brand span,.blog-header .blog-brand span {font-size:30px;}
 .hero-stage {--portrait-size:min(91vw,430px);width:calc(100% - 30px);height:auto;min-height:calc(var(--portrait-size) + 118px);grid-template-columns:1fr 1fr;align-items:start;padding-top:36px;}
 .hero-mode,.hero-mode-build,.hero-mode-lead {min-height:0;align-self:start;gap:8px;padding:0 4px 0 0;}
 .hero-mode-build {grid-column:1;}
 .hero-mode-lead {grid-column:2;padding-left:4px;}
 .hero-mode-title,.hero-mode-lead .hero-mode-title {font-size:clamp(15px,3.6vw,25px);line-height:1.13;letter-spacing:-.055em;}
 .hero-mode-detail {font-size:clamp(10px,2.3vw,13px);line-height:1.45;}
 .hero-portrait {width:var(--portrait-size);height:var(--portrait-size);bottom:0;}
 .hero-summary {padding:25px 0 42px;}
 .hero-summary > p {font-size:20px;}
 .snapshots {gap:9px;padding-block:18px 42px;}
 .band {padding-block:80px;}
 .shell,.blog-page .blog-shell {width:calc(100% - 38px);}
 .section-title,.work-copy h2 {font-size:clamp(37px,8vw,55px);}
 .split-row {gap:40px;}
 .selected-projects {gap:32px 16px;}
 .selected-project h3 {font-size:18px;}
 .process-grid {gap:18px;}
 .contact-band h2 {font-size:clamp(36px,9vw,55px);}
 .blog-header nav {gap:12px;}
 .blog-header nav>a {font-size:12px;}
}

/* Final responsive pass: one layout at every breakpoint. */
@media (max-width:900px) {
  html, body { overflow-x:hidden; }
  .site-header, .blog-header { height:76px; }
  .site-header .header-inner, .blog-header > .blog-shell {
    width:calc(100% - 42px); min-height:76px; justify-content:space-between;
  }
  .header-inner > .brand, .blog-header .blog-brand {
    width:auto; height:auto; min-width:0; padding:0; background:transparent;
    border:0; box-shadow:none; color:#f7f7f2;
  }
  .header-inner > .brand span, .blog-header .blog-brand span { font-size:30px; }
  .menu-toggle {
    display:flex; order:4; width:44px; height:44px; margin-left:10px;
    padding:9px; border:0; background:transparent; flex-direction:column;
    justify-content:center; gap:6px;
  }
  .menu-toggle span { display:block; width:25px; height:2px; background:#f7f7f2; transition:transform .25s ease, opacity .25s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .theme-toggle { order:3; margin-left:auto; }
  #main-nav {
    display:none; position:absolute; top:76px; left:0; right:0; z-index:120;
    margin:0; padding:8px 21px 18px; flex-direction:column; align-items:stretch;
    gap:0; background:#101010; border-top:1px solid #2e2e2e;
  }
  #main-nav.is-open { display:flex; }
  #main-nav > a { padding:14px 0; border-bottom:1px solid #2e2e2e; font-size:17px; color:#f7f7f2; }
  .hero-stage {
    --portrait-size:clamp(255px,39vw,345px); width:calc(100% - 42px);
    min-height:clamp(420px,57vw,525px);
    grid-template-columns:minmax(0,1fr) var(--portrait-size) minmax(0,1fr);
    padding-top:0;
  }
  .hero-mode, .hero-mode-build, .hero-mode-lead { gap:10px; padding-inline:0; }
  .hero-mode-build { padding-right:clamp(8px,2vw,20px); }
  .hero-mode-lead { padding-left:clamp(8px,2vw,20px); }
  .hero-mode-title, .hero-mode-lead .hero-mode-title { font-size:clamp(24px,4.7vw,42px); line-height:.98; white-space:normal; }
  .hero-mode-detail { max-width:170px; font-size:clamp(12px,1.8vw,14px); line-height:1.45; }
  .hero-portrait { width:var(--portrait-size); height:var(--portrait-size); }
  .hero-portrait .portrait-natural, .hero-portrait .portrait-editorial { transform:translate3d(var(--portrait-lean),0,0) scale(1.35); transform-origin:50% 27%; }
  .hero-code { right:1%; bottom:11%; font-size:12px; }
  .hero-summary { padding:18px 0 30px; }
  .hero-summary > p { font-size:clamp(17px,2.6vw,21px); }
  .band { padding-block:clamp(62px,8vw,88px); }
  .shell, .blog-page .blog-shell { width:calc(100% - 42px); }
  .split-row { gap:38px; }
}

@media (max-width:560px) {
  .site-header .header-inner, .blog-header > .blog-shell { width:calc(100% - 30px); }
  .hero-stage { --portrait-size:min(78vw,330px); width:calc(100% - 30px); min-height:calc(var(--portrait-size) + 158px); padding-top:22px; }
  .hero-mode-title, .hero-mode-lead .hero-mode-title { font-size:clamp(20px,7vw,30px); }
  .hero-mode-detail { max-width:122px; font-size:11px; }
  .hero-portrait .portrait-natural, .hero-portrait .portrait-editorial { transform:translate3d(var(--portrait-lean),0,0) scale(1.3); }
  .hero-summary { padding:16px 0 26px; }
  .hero-summary > p { font-size:17px; }
  .band { padding-block:58px; }
  .shell, .blog-page .blog-shell { width:calc(100% - 30px); }
  .footer-inner { align-items:flex-start; flex-direction:column; padding-block:30px; }
  .footer-inner > nav { margin-left:0; flex-wrap:wrap; gap:14px 18px; }
}

/* Responsive unifié : le hero conserve la composition de référence dès la
   tablette. Les anciennes règles de 700px laissaient encore le portrait à
   500px dans une fenêtre de 760px, ce qui poussait le texte hors écran. */
@media (max-width:900px) {
  html, body { overflow-x:hidden; }
  .site-header, .blog-header { height:76px; }
  .site-header .header-inner, .blog-header > .blog-shell {
    width:calc(100% - 42px);
    min-height:76px;
    justify-content:space-between;
  }
  .header-inner > .brand, .blog-header .blog-brand {
    width:auto; height:auto; min-width:0; padding:0;
    background:transparent; border:0; box-shadow:none;
    color:#f7f7f2;
  }
  .header-inner > .brand span, .blog-header .blog-brand span { font-size:30px; }
  .menu-toggle {
    display:flex;
    order:4;
    width:44px; height:44px;
    margin-left:10px;
    padding:9px;
    border:0;
    background:transparent;
    flex-direction:column;
    justify-content:center;
    gap:6px;
  }
  .menu-toggle span {
    display:block;
    width:25px; height:2px;
    background:#f7f7f2;
    transition:transform .25s ease, opacity .25s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .theme-toggle { order:3; margin-left:auto; }
  #main-nav {
    display:none;
    position:absolute;
    top:76px; left:0; right:0;
    z-index:120;
    margin:0;
    padding:8px 21px 18px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#101010;
    border-top:1px solid #2e2e2e;
  }
  #main-nav.is-open { display:flex; }
  #main-nav > a {
    padding:14px 0;
    border-bottom:1px solid #2e2e2e;
    font-size:17px;
    color:#f7f7f2;
  }
  .hero-stage {
    --portrait-size:clamp(255px,39vw,345px);
    width:calc(100% - 42px);
    min-height:clamp(420px,57vw,525px);
    grid-template-columns:minmax(0,1fr) var(--portrait-size) minmax(0,1fr);
    padding-top:0;
  }
  .hero-mode, .hero-mode-build, .hero-mode-lead {
    gap:10px;
    padding-inline:0;
  }
  .hero-mode-build { padding-right:clamp(8px,2vw,20px); }
  .hero-mode-lead { padding-left:clamp(8px,2vw,20px); }
  .hero-mode-title, .hero-mode-lead .hero-mode-title {
    font-size:clamp(24px,4.7vw,42px);
    line-height:.98;
    white-space:normal;
  }
  .hero-mode-detail {
    max-width:170px;
    font-size:clamp(12px,1.8vw,14px);
    line-height:1.45;
  }
  .hero-portrait {
    width:var(--portrait-size);
    height:var(--portrait-size);
  }
  .hero-portrait .portrait-natural, .hero-portrait .portrait-editorial {
    transform:translate3d(var(--portrait-lean),0,0) scale(1.35);
    transform-origin:50% 27%;
  }
  .hero-code { right:1%; bottom:11%; font-size:12px; }
  .hero-summary { padding:18px 0 30px; }
  .hero-summary > p { font-size:clamp(17px,2.6vw,21px); }
  .band { padding-block:clamp(62px,8vw,88px); }
  .shell, .blog-page .blog-shell { width:calc(100% - 42px); }
  .split-row { gap:38px; }
  .footer-inner { gap:18px; }
}

@media (max-width:560px) {
  .site-header .header-inner, .blog-header > .blog-shell { width:calc(100% - 30px); }
  .hero-stage {
    --portrait-size:min(78vw,330px);
    width:calc(100% - 30px);
    min-height:calc(var(--portrait-size) + 158px);
    padding-top:22px;
  }
  .hero-mode-title, .hero-mode-lead .hero-mode-title { font-size:clamp(20px,7vw,30px); }
  .hero-mode-detail { max-width:122px; font-size:11px; }
  .hero-portrait .portrait-natural, .hero-portrait .portrait-editorial { transform:translate3d(var(--portrait-lean),0,0) scale(1.3); }
  .hero-summary { padding:16px 0 26px; }
  .hero-summary > p { font-size:17px; }
  .band { padding-block:58px; }
  .shell, .blog-page .blog-shell { width:calc(100% - 30px); }
  .footer-inner { align-items:flex-start; flex-direction:column; padding-block:30px; }
  .footer-inner > nav { margin-left:0; flex-wrap:wrap; gap:14px 18px; }
}
@media (max-width:390px) {
 .hero-stage {width:calc(100% - 26px);min-height:calc(var(--portrait-size) + 126px);}
 .hero-mode-title,.hero-mode-lead .hero-mode-title {font-size:clamp(13.5px,3.4vw,16px);}
 .hero-mode-detail {font-size:10px;}
 .blog-header .blog-brand {width:49px;height:49px;min-width:49px;}
}
/* Entrance animation shared by project, about and editorial blog pages. */
@media (prefers-reduced-motion:no-preference) {
  .ref-js .ref-reveal {opacity:0;translate:0 18px;transition:opacity .68s ease,translate .8s var(--easing);}
  .ref-js .ref-reveal.ref-shown {opacity:1;translate:0 0;}
}
@media (prefers-reduced-motion:reduce) {
 .selected-project,.selected-project .selected-image img,.work-window,.snapshot,.button,.header-inner > .brand,.blog-header .blog-brand {transition:none!important;animation:none!important;}
}
/* Portrait rapproché, sans halo coloré derrière la silhouette. */
.hero-stage::before,.hero-portrait::before {content:none;display:none;}
.hero-portrait .portrait-natural,.hero-portrait .portrait-editorial {
  transform:translate3d(var(--portrait-lean),0,0) scale(1.35);
  transform-origin:50% 30%;
}
.hero-portrait .portrait-natural {filter:none;}
.hero-portrait .portrait-editorial {display:none;}
:root[data-theme='light'] #main-nav > a,
:root[data-theme='light'] .blog-header nav > a,
:root[data-theme='light'] #main-nav > a.active,
:root[data-theme='light'] #main-nav > a:hover,
:root[data-theme='light'] .blog-header nav > a:hover,
:root[data-theme='light'] .blog-header nav > a[aria-current] {color:#111;opacity:1;}

/* Direction 2026 : une scène éditoriale dense, volontairement presque monochrome.
   Ces règles remplacent les essais de couleurs précédents sans toucher au contenu. */
:root {
  --paper:#f5f5f2;
  --surface:#ffffff;
  --ink:#111111;
  --muted:#61615e;
  --line:#d9d9d4;
  --pale:#ecece7;
  --accent:#111111;
  --accent-blue:#111111;
}
:root[data-theme='dark'] {
  --paper:#111111;
  --surface:#181818;
  --ink:#f5f5f2;
  --muted:#b9b9b4;
  --line:#30302e;
  --pale:#1d1d1c;
  --accent:#f5f5f2;
  --accent-blue:#f5f5f2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper:#111111; --surface:#181818; --ink:#f5f5f2; --muted:#b9b9b4;
    --line:#30302e; --pale:#1d1d1c; --accent:#f5f5f2; --accent-blue:#f5f5f2;
  }
}
.site-header,.blog-header {
  height:90px;
  background:#101010;
  border-bottom:0;
  color:#f7f7f2;
}
.header-inner > .brand,.blog-header .blog-brand {
  width:auto; height:auto; min-width:0; padding:0;
  background:transparent; color:#f7f7f2; border:0; border-radius:0;
  box-shadow:none; font-size:31px;
}
.header-inner > .brand span,.blog-header .blog-brand span {color:#f7f7f2;}
.header-inner > .brand:hover,.blog-header .blog-brand:hover {box-shadow:none;}
#main-nav > a,.blog-header nav > a,
#main-nav > a.active,#main-nav > a:is(:hover,:focus-visible),
.blog-header nav > a:is(:hover,:focus-visible),.blog-header nav > a[aria-current],
:root[data-theme='light'] #main-nav > a,
:root[data-theme='light'] .blog-header nav > a,
:root[data-theme='light'] #main-nav > a.active,
:root[data-theme='light'] #main-nav > a:hover,
:root[data-theme='light'] .blog-header nav > a:hover,
:root[data-theme='light'] .blog-header nav > a[aria-current] {color:#f7f7f2;}
#main-nav > a::after,.blog-header nav > a::after {background:#f7f7f2;}
.theme-toggle {color:#f7f7f2;border-color:#454545;}
.about-hero {background:var(--paper);}
.hero-stage {
  --portrait-size:clamp(470px,43vw,605px);
  width:min(1260px,calc(100% - 56px));
  min-height:clamp(460px,46vw,600px);
  grid-template-columns:minmax(230px,1fr) var(--portrait-size) minmax(230px,1fr);
  align-items:center;
  overflow:hidden;
}
.hero-stage::before,.hero-portrait::before {content:none;display:none;}
.hero-mode,.hero-mode-build,.hero-mode-lead {gap:14px;}
.hero-mode-build {padding-right:0;}
.hero-mode-lead {padding-left:0;}
.hero-mode-title,.hero-mode-lead .hero-mode-title {
  font-size:clamp(38px,4.65vw,62px);
  line-height:.94;
  letter-spacing:-.078em;
  color:var(--ink);
}
.hero-mode-build .hero-mode-title,.hero-mode-lead .hero-mode-title {color:var(--ink);}
.hero-mode-detail {
  max-width:258px;
  font-size:15px;
  line-height:1.48;
  color:var(--muted);
}
.hero-mode-build:is(:hover,:focus-visible) .hero-mode-title,
.hero-mode-lead:is(:hover,:focus-visible) .hero-mode-title {color:var(--ink)!important;}
.hero-portrait {
  width:var(--portrait-size); height:var(--portrait-size);
  overflow:hidden;
}
.hero-portrait img {object-fit:contain;object-position:center bottom;}
.hero-portrait .portrait-natural,.hero-portrait .portrait-editorial {
  transform:translate3d(var(--portrait-lean),0,0) scale(1.56);
  transform-origin:50% 26%;
}
.hero-portrait .portrait-natural {filter:none;}
.hero-portrait .portrait-editorial {
  display:block;
  clip-path:inset(0 calc(100% - var(--pointer-split)) 0 0);
  filter:grayscale(1) contrast(1.18) brightness(1.04);
  will-change:clip-path,transform;
}
.hero-code {
  position:absolute; z-index:1; right:4.5%; bottom:15%;
  color:var(--ink); opacity:.13; pointer-events:none;
  font:700 clamp(15px,1.65vw,22px)/1.4 var(--font-reference);
  letter-spacing:-.08em;
}
.hero-summary {padding:20px 0 30px;border-top:1px solid var(--line);}
.hero-summary > p {max-width:620px;font-size:clamp(17px,1.6vw,21px);line-height:1.42;}
.hero-summary .inline-link,.hero-summary .inline-link:hover {color:var(--ink);border-color:var(--ink);}
.snapshots {display:none;}
.band {padding-block:clamp(66px,7vw,98px);}
.section-kicker,.heading-point,.capabilities-copy:first-child h3,.capabilities-copy:last-child h3,
.selected-project h3 > span {color:var(--ink);}
.section-title,.work-copy h2 {margin-bottom:36px;}
.capabilities-picture svg {filter:grayscale(1) contrast(1.1);}
.work-window {box-shadow:0 18px 45px #00000013;}
.selected-project:nth-child(2) .selected-image,
.selected-project:nth-child(3) .selected-image,
.selected-project:nth-child(4) .selected-image {background:var(--pale);}
.contact-form .button,.button,.button:hover {
  background:var(--ink); border-color:var(--ink); color:var(--paper); box-shadow:none;
}
.button:hover {transform:translateY(-2px);}
.process-bar span {color:var(--ink);}
.text-page .callout {border-left-color:var(--ink);}
@media (max-width:1150px) {
  .hero-stage {--portrait-size:clamp(390px,42vw,510px);width:calc(100% - 48px);}
  .hero-mode-title,.hero-mode-lead .hero-mode-title {font-size:clamp(31px,4.4vw,49px);}
  .hero-code {right:2%;}
}
@media (max-width:700px) {
  .site-header,.blog-header {height:74px;}
  .hero-stage {
    --portrait-size:min(106vw,500px);
    width:calc(100% - 28px);
    min-height:calc(var(--portrait-size) + 126px);
    padding-top:27px;
  }
  .hero-mode-title,.hero-mode-lead .hero-mode-title {font-size:clamp(22px,7vw,34px);}
  .hero-mode-detail {font-size:11px;max-width:138px;}
  .hero-code {font-size:13px;right:2%;bottom:11%;}
  .hero-summary {padding:17px 0 25px;}
  .hero-summary > p {font-size:17px;}
  .band {padding-block:66px;}
}

/* Final responsive pass: one layout at every breakpoint. */
@media (max-width:900px) {
  html, body { overflow-x:hidden; }
  .site-header, .blog-header { height:76px; }
  .site-header .header-inner, .blog-header > .blog-shell {
    width:calc(100% - 42px); min-height:76px; justify-content:space-between;
  }
  .header-inner > .brand, .blog-header .blog-brand {
    width:auto; height:auto; min-width:0; padding:0; background:transparent;
    border:0; box-shadow:none; color:#f7f7f2;
  }
  .header-inner > .brand span, .blog-header .blog-brand span { font-size:30px; }
  .menu-toggle {
    display:flex; order:4; width:44px; height:44px; margin-left:10px;
    padding:9px; border:0; background:transparent; flex-direction:column;
    justify-content:center; gap:6px;
  }
  .menu-toggle span { display:block; width:25px; height:2px; background:#f7f7f2; transition:transform .25s ease, opacity .25s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .theme-toggle { order:3; margin-left:auto; }
  #main-nav {
    display:none; position:absolute; top:76px; left:0; right:0; z-index:120;
    margin:0; padding:8px 21px 18px; flex-direction:column; align-items:stretch;
    gap:0; background:#101010; border-top:1px solid #2e2e2e;
  }
  #main-nav.is-open { display:flex; }
  #main-nav > a { padding:14px 0; border-bottom:1px solid #2e2e2e; font-size:17px; color:#f7f7f2; }
  .hero-stage {
    --portrait-size:clamp(255px,39vw,345px); width:calc(100% - 42px);
    min-height:clamp(420px,57vw,525px);
    grid-template-columns:minmax(0,1fr) var(--portrait-size) minmax(0,1fr);
    padding-top:0;
  }
  .hero-mode, .hero-mode-build, .hero-mode-lead { gap:10px; padding-inline:0; }
  .hero-mode-build { padding-right:clamp(8px,2vw,20px); }
  .hero-mode-lead { padding-left:clamp(8px,2vw,20px); }
  .hero-mode-title, .hero-mode-lead .hero-mode-title { font-size:clamp(24px,4.7vw,42px); line-height:.98; white-space:normal; }
  .hero-mode-detail { max-width:170px; font-size:clamp(12px,1.8vw,14px); line-height:1.45; }
  .hero-portrait { width:var(--portrait-size); height:var(--portrait-size); }
  .hero-portrait .portrait-natural, .hero-portrait .portrait-editorial { transform:translate3d(var(--portrait-lean),0,0) scale(1.35); transform-origin:50% 27%; }
  .hero-code { right:1%; bottom:11%; font-size:12px; }
  .hero-summary { padding:18px 0 30px; }
  .hero-summary > p { font-size:clamp(17px,2.6vw,21px); }
  .band { padding-block:clamp(62px,8vw,88px); }
  .shell, .blog-page .blog-shell { width:calc(100% - 42px); }
  .split-row { gap:38px; }
}

@media (max-width:560px) {
  .site-header .header-inner, .blog-header > .blog-shell { width:calc(100% - 30px); }
  .hero-stage { --portrait-size:min(78vw,330px); width:calc(100% - 30px); min-height:calc(var(--portrait-size) + 158px); padding-top:22px; }
  .hero-mode-title, .hero-mode-lead .hero-mode-title { font-size:clamp(20px,7vw,30px); }
  .hero-mode-detail { max-width:122px; font-size:11px; }
  .hero-portrait .portrait-natural, .hero-portrait .portrait-editorial { transform:translate3d(var(--portrait-lean),0,0) scale(1.3); }
  .hero-summary { padding:16px 0 26px; }
  .hero-summary > p { font-size:17px; }
  .band { padding-block:58px; }
  .shell, .blog-page .blog-shell { width:calc(100% - 30px); }
  .footer-inner { align-items:flex-start; flex-direction:column; padding-block:30px; }
  .footer-inner > nav { margin-left:0; flex-wrap:wrap; gap:14px 18px; }
}