@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-latin-400.woff2') format('woff2'); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-latin-500.woff2') format('woff2'); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-latin-600.woff2') format('woff2'); }
:root { color-scheme: light; --paper: #fafbf7; --ink: #202a2d; --muted: #536066; --accent: #285a85; --line: #cdd5d5; font-family: Barlow, Arial, sans-serif; background: var(--paper); color: var(--ink); }
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.4; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img { display: block; width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: fixed; top: -90px; left: 15px; padding: 10px; background: #fff; z-index: 10; }
.skip:focus { top: 12px; }
.header { display: flex; justify-content: space-between; align-items: center; min-height: 73px; gap: 24px; }
.wordmark { font-size: 27px; font-weight: 600; letter-spacing: -1px; text-decoration: none; }
.wordmark span { font-weight: 400; }
.navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; }
.navigation a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; text-decoration: none; }
.navigation a:hover { text-decoration: underline; }
.navigation .contact-link { color: var(--accent); font-weight: 600; }
.contact-link span { margin-left: 10px; font-size: 22px; }
h1 { font-size: 37px; line-height: 1.12; font-weight: 500; letter-spacing: -.9px; }
.label { font-size: 12px; color: var(--muted); font-weight: 500; }
.section-label { font-size: 14px; font-weight: 600; margin-bottom: 13px; }
.intro p { margin-top: 13px; max-width: 660px; }
.intro .product-mention { font-size: 14px; color: var(--muted); }
.cta { display: inline-flex; align-items: center; min-height: 44px; gap: 24px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cta:hover { text-decoration: underline; }
.cta span[aria-hidden] { font-size: 21px; }
.intro .cta { margin-top: 8px; }
.product-entry h3 { font-size: 25px; font-weight: 500; line-height: 1.1; letter-spacing: -.5px; }
.product-entry p { margin-top: 8px; font-size: 15px; line-height: 1.4; }
.product-entry .cta { margin-top: 2px; }
.service { position: relative; padding-block: 10px; }
.service + .service { border-top: 1px solid var(--line); }
.service h3, .service-title { display: block; font-size: 17px; font-weight: 500; line-height: 1.2; }
.service p, .service-description { display: block; margin-top: 5px; font-size: 14px; color: var(--muted); line-height: 1.4; }
.service summary { list-style: none; cursor: pointer; padding-right: 24px; min-height: 44px; }
.service summary::-webkit-details-marker { display: none; }
.service summary::after { content: '+'; position: absolute; top: 9px; right: 1px; font-size: 22px; color: var(--accent); }
.service[open] summary::after { content: '−'; }
.service[open] > p { padding-right: 24px; color: var(--ink); margin-top: 10px; }
.project h2 { font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.5px; }
.project-image { display: block; }
.project p { font-size: 14px; line-height: 1.4; margin-top: 9px; }
.project .label { display: block; margin-top: 6px; }
.footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px 25px; padding-block: 11px; font-size: 12px; }
.footer a { display: inline-flex; align-items: center; min-height: 35px; }
.footer .footer-contact { font-size: 17px; font-weight: 500; color: var(--accent); }
.open-layout { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-areas: 'intro products' 'project services'; align-items: start; gap: 22px 60px; padding-block: 20px; border-top: 1px solid var(--line); }
.open-layout .intro { grid-area: intro; }
.open-layout .intro h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 38px; font-weight: 400; letter-spacing: -1.1px; }
.open-layout .products { grid-area: products; padding-left: 20px; border-left: 3px solid var(--accent); }
.open-layout .products .section-label { color: var(--accent); }
.open-layout .products .section-label { margin-bottom: 10px; }
.open-layout .product-entry p { margin-top: 6px; }
.open-layout .product-entry .cta { min-height: 36px; }
.open-layout .product-entry + .product-entry { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.open-layout .services { grid-area: services; }
.open-layout .project { grid-area: project; display: grid; grid-template-columns: 1.1fr 1fr; gap: 21px; align-items: start; }
.open-layout .project-image { padding: 9px; background: #e5e9ee; transform: rotate(-2deg); }
.open-layout .project-image img { aspect-ratio: 16 / 11; object-fit: cover; object-position: center; }
.open-layout .project-copy { padding-top: 3px; }
.open-layout .project .cta { font-size: 13px; }
.open-layout .service { padding-block: 9px; }
.work-page { --paper: #f8f6ef; --ink: #1f3129; --muted: #52645a; --accent: #245b43; --line: #ccd2c5; }
.work-page .wordmark { font-family: Georgia, 'Times New Roman', serif; font-size: 29px; font-weight: 400; letter-spacing: -1.3px; }
.work-page .wordmark span { font-style: italic; }
.work-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 58px; padding-block: 23px 19px; border-top: 1px solid var(--line); align-items: end; }
.work-intro h1 { font-size: 36px; max-width: 550px; }
.work-intro .intro-copy p { font-size: 15px; }
.work-intro .intro-copy .product-mention { margin-top: 9px; font-size: 13px; color: var(--muted); }
.work-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 34px; padding-bottom: 22px; }
.work-grid .project { position: relative; }
.work-grid .project-image { background: #24343e; padding: 11px; }
.work-grid .project-image img { height: 184px; object-fit: cover; object-position: center; }
.work-grid .project-caption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 15px; margin-top: 11px; }
.work-grid .project h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 27px; font-weight: 400; }
.work-grid .project .cta { min-height: 31px; font-size: 13px; }
.work-grid .project .label { margin-top: 2px; }
.work-grid .project-detail { margin-top: 6px; }
.project-detail summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.project-detail p { max-width: 580px; }
.work-products { padding: 17px 21px 10px; background: #e7ecdf; }
.work-products .product-entry:first-of-type { display: grid; grid-template-columns: 1fr 132px; gap: 0 14px; }
.work-products .product-entry:first-of-type .product-copy { grid-column: 1; }
.work-products .product-entry:first-of-type .backup-drawing { grid-column: 2; grid-row: 1; align-self: center; }
.backup-drawing img { width: 132px; }
.work-products .product-entry p { font-size: 14px; }
.work-products .product-entry + .product-entry { border-top: 1px solid #b8c7b0; padding-top: 12px; margin-top: 7px; }
.work-products .section-label { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.work-products .product-entry h3 { font-size: 27px; }
.work-products .cta { font-size: 13px; min-height: 35px; }
.service-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-bottom: 20px; }
.service-strip .service { padding-top: 12px; border-top: 1px solid var(--line); }
.service-strip .service + .service { border-top: 1px solid var(--line); }
.selection { padding-block: 28px; }
.selection > h1 { max-width: 740px; font-size: 31px; margin-bottom: 12px; }
.selection > p { max-width: 780px; }
.selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-block: 30px; }
.selection-grid article { border-top: 2px solid var(--accent); padding-top: 15px; }
.selection-grid h2 { font-size: 23px; margin-bottom: 9px; }
.selection-grid p { margin-block: 8px; }
.selection-grid figure { margin-top: 15px; }
.selection-grid figure img { border: 1px solid var(--line); }
.selection .recommendation { max-width: 850px; padding: 18px 21px; border-left: 3px solid var(--accent); background: #eaf0f2; }
.selection .recommendation p + p { margin-top: 9px; }
.selection .caption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.contact-foot { border-top: 1px solid var(--line); padding-block: 10px; display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 8px 25px; }
.contact-foot > a { min-height: 38px; display: inline-flex; align-items: center; font-size: 18px; color: var(--accent); font-weight: 500; }
.contact-note { max-width: 510px; font-size: 13px; }
.contact-note summary { min-height: 38px; display: list-item; padding-top: 10px; cursor: pointer; color: var(--muted); }
.contact-note p { padding-block: 9px; font-size: 14px; }
.combined-footer { padding-block: 8px; }
.combined-footer .contact-note { max-width: 380px; }
.combined-footer .contact-note summary { min-height: 35px; padding-top: 8px; }
@media (max-width: 1050px) {
  .open-layout { gap: 26px 32px; grid-template-columns: 1.25fr 1fr; }
  .open-layout .intro h1 { font-size: 34px; }
  .open-layout .project { grid-template-columns: 1fr; gap: 12px; }
  .open-layout .project-image { max-width: 350px; transform: none; }
  .open-layout .project-image img { aspect-ratio: 16 / 8; }
  .open-layout .project-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
  .open-layout .project-copy p { grid-column: 1 / -1; }
  .open-layout .project-copy .cta { grid-column: 1 / -1; }
  .work-intro { gap: 30px; }
  .work-grid { gap: 25px; grid-template-columns: 1fr 1.2fr; }
  .work-products .product-entry:first-of-type { display: block; }
  .backup-drawing { display: none; }
  .service-strip { gap: 20px; }
}
@media (max-width: 720px) {
  .shell { width: calc(100% - 36px); }
  .header { min-height: 92px; flex-wrap: wrap; padding-block: 15px 8px; gap: 5px 15px; }
  .wordmark, .work-page .wordmark { font-size: 25px; }
  .navigation { width: 100%; gap: 13px; justify-content: space-between; }
  .navigation a { min-height: 35px; font-size: 12px; }
  .navigation .contact-link span { font-size: 17px; margin-left: 5px; }
  .open-layout { grid-template-columns: 1fr; grid-template-areas: 'intro' 'products' 'project' 'services'; gap: 24px; padding-top: 20px; }
  .open-layout .intro h1 { font-size: 31px; max-width: 450px; }
  .intro p { margin-top: 11px; }
  .intro .product-mention { font-size: 13px; }
  .open-layout .products { padding-left: 15px; border-left-width: 2px; }
  .product-entry p { font-size: 15px; }
  .open-layout .project { grid-template-columns: 1fr; gap: 13px; }
  .open-layout .project-image { max-width: none; padding: 8px; }
  .open-layout .project-image img { aspect-ratio: 16 / 8; }
  .open-layout .project-copy { display: block; }
  .open-layout .project-copy p { margin-top: 8px; }
  .open-layout .service { padding-block: 11px; }
  .footer { gap: 4px 15px; padding-top: 12px; }
  .footer .footer-contact { width: 100%; font-size: 17px; }
  .work-intro { grid-template-columns: 1fr; gap: 12px; padding-top: 20px; }
  .work-intro h1 { font-size: 31px; max-width: 450px; }
  .work-intro .intro-copy p { font-size: 16px; }
  .work-grid { display: flex; flex-direction: column; gap: 25px; padding-bottom: 25px; }
  .work-products { padding: 16px 17px 8px; }
  .work-products .product-entry:first-of-type { display: grid; grid-template-columns: 1fr 104px; gap: 10px; }
  .backup-drawing { display: block; }
  .backup-drawing img { width: 104px; }
  .work-products .product-entry p { font-size: 15px; }
  .work-grid .project-image img { height: auto; aspect-ratio: 16 / 8; }
  .work-grid .project-caption { align-items: center; }
  .service-strip { grid-template-columns: 1fr; gap: 0; }
  .service-strip .service { padding-block: 12px; }
  .selection > h1 { font-size: 27px; }
  .selection-grid { grid-template-columns: 1fr; }
}
@media (max-width: 370px) {
  .work-products .product-entry:first-of-type { display: block; }
  .backup-drawing { display: none; }
  .navigation { gap: 8px; }
  .navigation a { font-size: 11px; }
  .open-layout .intro h1, .work-intro h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Ajustements de la composition retenue. Nunito : licence SIL OFL 1.1. */
:root { background: #ffffff; }
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-latin-variable.woff2') format('woff2');
}
.selected-open {
  --paper: #ffffff;
  --ink: #202824;
  --muted: #53625b;
  --accent: #176b45;
  --line: #d3ddd6;
  --panel: #e5f1e8;
  font-family: Nunito, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
.selected-open ::selection { background: #176b45; color: #ffffff; }
.selected-open .open-layout .products {
  --accent: #176b45;
  --line: #b4cbbd;
  position: relative;
  isolation: isolate;
  border-left-color: #176b45;
  color: var(--ink);
}
.selected-open .open-layout .products::before {
  content: '';
  position: absolute;
  inset: -12px -14px -9px -1px;
  z-index: -1;
  background: var(--panel);
}
.selected-open .open-layout .products .section-label { color: #355c47; }
.selected-open .open-layout .project-image { background: var(--panel); box-shadow: 4px 4px 0 #dce1dd; }
.selected-open .wordmark { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; flex: none; font-weight: 750; letter-spacing: -1.2px; }
.selected-open .wordmark .brand-symbol { display: block; width: 44px; height: 44px; flex: none; }
.selected-open .wordmark .brand-name { font-weight: 750; white-space: nowrap; }
.selected-open .wordmark .brand-name > span { font-weight: 500; }
.selected-open .open-layout .intro h1 {
  font-family: Nunito, Arial, sans-serif;
  font-size: 35px;
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.9px;
}
.selected-open .product-entry h3,
.selected-open .project h2 { font-weight: 700; }
.selected-open .product-brand { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 12px; min-height: 44px; }
.selected-open .product-logo { justify-self: center; width: 44px; height: 44px; object-fit: contain; }
.selected-open .product-logo-bumpx { width: 66px; }
.selected-open .section-label,
.selected-open .service-title,
.selected-open .service h3 { font-weight: 650; }
.selected-open .navigation { gap: 23px; }
.selected-open .project { scroll-margin-top: 30px; }
.frame-scene { position: relative; isolation: isolate; min-width: 0; }
.frame-scene .project-image { position: relative; z-index: 1; }
@media (max-width: 1050px) {
  .selected-open .open-layout .intro h1 { font-size: 32px; }
  .frame-scene { max-width: 350px; }
  .frame-scene .project-image { max-width: none; }
}
@media (max-width: 720px) {
  .selected-open .wordmark .brand-symbol { width: 36px; height: 36px; }
  .selected-open .open-layout .intro h1 { font-size: 29px; letter-spacing: -.6px; }
  .selected-open .navigation { gap: 10px; }
  .selected-open .navigation a { font-size: 12px; }
  .frame-scene { max-width: none; }
}
@media (max-width: 370px) {
  .selected-open .navigation { gap: 8px; }
  .selected-open .open-layout .intro h1 { font-size: 27px; }
}