@font-face {
  font-family: Inter;
  src: url('/assets/accueil/inter.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #24282b;
  --muted: #535b61;
  --line: #cfd4d8;
  --olive: #465e73;
  --wash: #d5deea;
}
body, h1 em, h2 em {font-family: Inter, sans-serif;}
body {font-weight: 350;}
h1, h2 {font-weight: 330;}
h2 em, h1 em {font-weight: 290;}
.eyebrow {font-weight: 650;}
.studio-mark {display: inline-flex; align-items: center; padding: 4px 0;}
.studio-mark img {height: 75px; width: auto;}
.site-header nav a:hover, .footer-top a:hover {text-decoration: underline; text-underline-offset: .3em;}
.header-cta, .text-link {
  font-style: italic; font-size: 14px; font-weight: 450; color: var(--olive);
  display: inline-block; padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor;
}
.header-cta:hover,.text-link:hover {color: var(--ink);background: transparent;}
.hero .eyebrow {line-height: 1.55; letter-spacing: .15em; font-size: 11px; color: var(--olive); font-weight: 650;}
.hero-heading {grid-template-columns: minmax(0,2fr) minmax(220px,.85fr);align-items: center;}
.hero blockquote {font-size: clamp(35px,4.35vw,73px);line-height: 1.09;letter-spacing: -.05em;font-weight: 320;margin: 0;text-wrap: pretty;}
.hero cite {display: block;margin-top: 18px;font-size: 12px;font-style: normal;color: var(--muted);}
.hero cite a:hover {text-decoration: underline;}
.mission-section {background: #ffffff;}
.mission-layout {row-gap: 65px;}
.mission-list details,.mission-list details:last-child {border-color: #acb9c6;}
.selected .project-card img, .selected .project-card:nth-child(2) img, .selected .project-card:nth-child(3) img {aspect-ratio: 1.62;}
.project-card h3 {font-weight: 500;}
.comparison {grid-column: 1/-1; width: min(100%,980px); margin: 0 auto;}
.compare-stage {--split: 50%;position: relative;aspect-ratio: 780/508;background: #f5f1e9;isolation: isolate;overflow: hidden;}
.compare-stage svg {display: block;position: absolute;inset: 0;width: 100%;height: 100%;}
.compare-stage.is-active .compare-drawing {clip-path: inset(0 0 0 var(--split));}
.divider,.compare-range {display: none;}
.is-active .divider {
  position: absolute;display: block;left: var(--split);top: 0;bottom: 0;
  width: 2px;background: white;box-shadow: 0 0 3px #24384999;transform: translateX(-50%);pointer-events: none;
}
.divider i {position: absolute;top: 50%;left: 50%;width: 36px;height: 48px;transform: translate(-50%,-50%);border: 1px solid white;border-radius: 18px;background: #465e73;}
.divider i::before {content: '';position: absolute;inset: 15px 13px;border-inline: 1px solid white;}
.is-active .compare-range {display: block;position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;padding: 0;opacity: 0;cursor: ew-resize;appearance: none;touch-action: pan-y;}
.compare-range::-webkit-slider-thumb {appearance: none;width: 1px;height: 44px;}
.compare-range::-moz-range-thumb {width: 1px;height: 44px;border: 0;}
.compare-stage:focus-within {outline: 3px solid var(--olive);outline-offset: 3px;}
.compare-labels {display: flex;justify-content: space-between;gap: 15px;font-size: 12px;font-weight: 600;color: var(--olive);margin: 10px 0 0;}
.comparison figcaption {padding-top: 12px;margin-top: 12px;border-top: 1px solid #b6c3d1;color: var(--muted);font-size: 13px;}
.comparison figcaption strong {font-weight: 600;color: var(--ink);}
#compare-help {display: block;}
.about-teaser>div>.eyebrow {font-size: 10px;}
.contact-band {background: var(--wash);color: var(--ink);}
.contact-band .eyebrow,.contact-band p {color: var(--olive);}
.contact-band .text-link {white-space: nowrap;}
.signature img {width: 180px;height: auto;}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
}
.footer-top .signature {justify-self: center;}
.footer-top .social-links {justify-self: end;}
.hero-project {margin: 0;}
.hero-project .hero-caption {display: flex; align-items: baseline; font-size: 13px;}
.hero-caption strong {font-weight: 600; color: var(--ink);}
.hero-caption a:hover {text-decoration: underline; text-underline-offset: .2em;}
.hero-project .hero-caption>span {font-size: 12px; text-align: right;}
@media (max-width: 700px) {
  .footer-top {grid-template-columns: minmax(0,1fr) auto; row-gap: 28px;}
  .footer-top .signature {grid-column: 1/-1; grid-row: 1;}
  .hero-project .hero-caption {display: grid; gap: 5px; font-size: 12px;}
  .hero-project .hero-caption>span {justify-self: end; font-size: 11px;}
}
.contact-rows, .social-links {display: grid;gap: 8px;font-size: 14px;font-style: normal;}
.contact-rows span {display: inline-block;min-width: 65px;color: var(--muted);font-size: 12px;}
.article-card {margin-top: 55px;display: grid;grid-template-columns: 1fr 1fr;align-items: center;gap: 6%;}
.article-card h2 {margin-bottom: 20px;}
.article-body {max-width: 880px;}
.article-body h1 {font-size: clamp(38px,4.5vw,66px);margin-bottom: 30px;}
.article-body h2 {font-size: clamp(28px,3vw,39px);margin: 45px 0 15px;}
@media (max-width: 1050px) {.header-cta {display:none;}.studio-mark img {height: 65px;}}
@media (max-width: 700px) {
  .studio-mark img {height: 61px;}
  .hero .eyebrow {font-size: 10px;}
  .hero blockquote {font-size: clamp(30px,6.9vw,45px);}
  .hero blockquote br {display: none;}
  .hero-heading {display: block;}
  .hero cite {margin-top: 12px;}
  .comparison {margin-top: 36px;}
  .contact-band>div {display: block;}
  .contact-band .text-link {margin: 24px 0 0;}
  .article-card {display: block;}
  .article-card>div {margin-top: 24px;}
  .signature img {width: 155px;}
}

/* The masthead carries the two original marks on separate axes. */
.masthead {display: block; height: auto; padding: 0 5%; background: white;}
.masthead-top {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 144px;}
.masthead .studio-mark {justify-self: start; padding: 0;}
.masthead .studio-mark img {height: 108px; width: auto;}
.masthead-signature img {width: clamp(180px, 19vw, 280px); height: auto;}
.masthead .header-cta {display: inline-block; justify-self: end;}
.masthead nav {justify-content: center; padding: 12px 0 18px; gap: clamp(26px, 3vw, 52px);}
.social-links {display: flex; align-items: center; gap: 5px;}
.social-links a {display: grid; place-items: center; width: 42px; height: 42px;}
.social-links svg {width: 21px; height: 21px; fill: currentColor;}
.social-links a:hover {color: var(--olive);}
body:has(.home-chapter) {background: white;}
.home-chapter {background: white; padding-top: clamp(60px,7vw,106px); padding-bottom: 0;}
.home-chapter:last-of-type, .home-chapter:has(.about-teaser) {padding-bottom: clamp(65px,8vw,120px);}
.section-bar {display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 16px; border-top: 3px solid #7d94aa; margin-bottom: clamp(32px,4vw,58px);}
.section-bar .eyebrow {margin: 0; color: var(--olive); text-transform: uppercase; line-height: 1.7;}
.section-bar .text-link {margin: 0; flex-shrink: 0;}
.home-chapter .selected {margin-top: 36px;}
.home-chapter .mission-layout h2 strong {font-weight: 600; color: var(--ink);}
.home-chapter .comparison {width: min(100%,980px);}
.compare-stage {aspect-ratio: 1460 / 1024;}
.compare-stage img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;}
.study-date {display: block; margin-top: 2px;}
@media (min-width: 701px) {
  /* Each cover is 1.62:1, so 15.43% of its column width is one quarter of its height. */
  .selected .project-card:nth-child(even) {padding-top: 15.43%;}
}
@media (max-width: 700px) {
  .masthead {padding: 0 6%;}
  .masthead-top {min-height: 95px;}
  .masthead .studio-mark img {height: 72px;}
  .masthead-signature img {width: clamp(138px,36vw,180px);}
  .masthead .header-cta {display: none;}
  .masthead .menu-toggle {justify-self: end;}
  .masthead nav {top: 100%; padding: 24px 6%; gap: 19px;}
  .section-bar {align-items: flex-start; gap: 10px;}
  .section-bar .text-link {font-size: 12px;}
  .home-chapter .selected {margin-top: 24px;}
}
.opening {display: none;}
@media (prefers-reduced-motion: no-preference) {
  .show-opening .opening {position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #fff; pointer-events: none; animation: open-page .32s ease-out 1.55s forwards;}
  .opening svg {height: clamp(160px,37vh,370px); width: auto; max-width: 65vw;}
  .draw-line {stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-monogram 1.4s cubic-bezier(.36,.04,.52,.98) .04s forwards;}
}
@keyframes draw-monogram {to {stroke-dashoffset: 0;}}
@keyframes open-page {to {opacity: 0;visibility: hidden;}}

/* One typographic scale and chapter marker for the homepage and the inner pages. */
.chapter-heading {padding-top: 65px; padding-bottom: 48px;}
.chapter-title {font-size: clamp(35px,3.3vw,53px); font-weight: 330; line-height: 1.08; letter-spacing: -.045em;}
.chapter-heading .lead, .contact-heading .lead {max-width: 740px; margin-top: 26px; font-size: 16px;}
.mission-statement strong {font-weight: 600;}
.project-heading h1 {margin-bottom: 35px;}
.project-story aside h2.eyebrow {font-size: 10px; letter-spacing: .17em; font-weight: 650; line-height: 1.65; margin-bottom: 28px;}
.filters {border-bottom: 1px solid var(--line); gap: 0 28px; margin-top: 45px;}
.filters button {border: 0; border-bottom: 3px solid transparent; color: var(--muted); padding: 12px 0 10px;}
.filters button[aria-pressed="true"] {background: transparent; color: var(--olive); border-color: #7d94aa; font-weight: 600;}
.filters button:hover {color: var(--olive);}
.mission-item {border-top: 1px solid #acb9c6; padding: 26px 0;}
.mission-item:last-child {border-bottom: 1px solid #acb9c6;}
.mission-item-heading {display: flex; gap: 22px; align-items: flex-start;}
.mission-item h3 {font-size: 22px; font-weight: 450; line-height: 1.3; letter-spacing: -.025em;}
.mission-item .mission-subtitle {font-size: 11px; margin-top: 6px;}
.mission-item .mission-description {font-size: 14px; padding-left: 38px; margin-top: 15px;}
.portrait img {width: 100%; max-width: 420px; height: auto; max-height: 800px; object-fit: contain; object-position: left top;}
.contact-heading {padding-top: 65px; padding-bottom: 65px;}
.contact-heading h1 {font-size: clamp(42px,4.7vw,70px);}
.service-areas {max-width: 350px;}
.contact-band {padding: 30px 4%; margin: 0 5% 55px; background: #edf1f6;}
.contact-band .eyebrow {font-size: 9px; margin-bottom: 12px;}
.contact-band h2 {font-size: clamp(25px,2.6vw,38px); line-height: 1.15;}
.contact-band>div {margin-bottom: 12px; gap: 25px;}
.contact-band .text-link {margin-top: 0; font-size: 13px;}
.contact-band>p:last-child {font-size: 12px; line-height: 1.6;}
@media (max-width: 700px) {
  .chapter-heading {padding-top: 40px; padding-bottom: 35px;}
  .chapter-heading .chapter-title, .home-chapter .chapter-title {font-size: 37px;}
  .chapter-heading .lead, .contact-heading .lead {font-size: 14px;}
  .filters {gap: 0 20px; margin-top: 28px;}
  .filters button {font-size: 12px;}
  .mission-item-heading {gap: 15px;}
  .mission-item h3 {font-size: 20px;}
  .mission-item .mission-description {padding-left: 29px; font-size: 13px;}
  .mission-item {padding: 23px 0;}
  .portrait img {max-height: 650px;}
  .contact-heading {padding-top: 40px; padding-bottom: 40px;}
  .contact-band {padding: 25px 6%; margin: 0 6% 40px;}
  .contact-band h2 {font-size: 28px; max-width: 320px;}
  .contact-band>div {display: flex; flex-wrap: wrap; gap: 16px;}
  .contact-band .text-link {margin: 0;}
  .masthead nav {font-size: 16px;}
}

.masthead {border-bottom: 3px solid #7d94aa;}
.footer-top .contact-rows {gap: 3px; line-height: 1.45;}
.gallery figure:not(:nth-child(3n+1)) img {aspect-ratio: 3 / 2; object-fit: contain; object-position: center; background: white;}
@media (max-width: 700px) {
  .gallery figure:not(:nth-child(3n+1)) img {aspect-ratio: auto;}
}
@media (prefers-reduced-motion: no-preference) {
  .draw-line.draw-l {animation-duration: .7s; animation-delay: .04s;}
  .draw-line.draw-right {animation-duration: .22s; animation-delay: .74s;}
  .draw-line.draw-left {animation-duration: .48s; animation-delay: .96s;}
}

/* Keep all five inner-page titles on the same baseline under the masthead. */
.chapter-heading {
  --chapter-top: 36px;
  --chapter-label-space: 38px;
  padding-top: var(--chapter-top);
}
.chapter-heading .section-bar {
  min-height: 18px;
  border-top: 0;
  padding-top: 0;
  margin-bottom: 20px;
}
.chapter-heading--plain {
  padding-top: calc(var(--chapter-top) + var(--chapter-label-space));
}
.chapter-heading .chapter-title {
  font-size: clamp(35px,3.3vw,53px);
  font-weight: 330;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.article-body .comparison {margin: 32px 0 42px;}
.article-body .comparison figcaption {font-size: 12px;}
@media (max-width: 700px) {
  .chapter-heading {--chapter-top: 28px;}
  .chapter-heading .chapter-title {font-size: 37px;}
}