@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/space-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/space-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/space-grotesk-600.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/space-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500.woff2) format("woff2")}
:root{--token-6201696a-d8bb-4f32-9432-0dad57393ba0:rgb(240, 234, 217);--token-e7cdab6a-2090-4e0f-a32f-fd50b8989be7:rgb(31, 28, 22);--token-1bafcfa5-b6ed-4dea-85d3-5a041113407d:rgb(75, 70, 58);--token-b0c27ab0-e75b-46fa-b60c-fd4b067b04de:rgb(107, 100, 89);--token-603e2b68-5a7b-476c-a016-79a65a2f473c:rgb(222, 211, 186);--token-fd7b2ca9-4c8c-4911-979a-8d434ee958e3:rgb(232, 220, 196);--token-054f87b3-b666-44ec-925a-eb0c881df6c0:rgb(210, 64, 30);--token-6b9d78c2-6f64-4d1b-aee6-2e7e9f6f11e0:rgb(165, 47, 20);--token-751eb5c9-312f-48fd-9085-9edde84ad09b:rgb(160, 54, 18);--token-3b6dd05e-a01c-4e63-b34e-9d118613cba7:rgb(232, 144, 26);--token-c7819877-2b0c-41aa-a077-f184d8cc140b:rgb(181, 107, 12);--token-59b47edd-f641-44f6-9f36-935dd262f139:rgb(42, 26, 5);--token-d91b7d2d-44b9-4239-bd57-cdcefd52a8a5:rgb(232, 180, 25);--token-7db8a219-f580-478c-8045-e37c861b04dd:rgb(185, 140, 13);--token-26156808-dfc8-46fe-8e09-8d5f366813ca:rgb(42, 32, 8);--token-a30628c9-b16e-4c6e-9a4d-ce206fe876f3:rgb(47, 111, 184);--token-8563dc24-f94f-4565-9cf6-365e275da40a:rgb(33, 80, 138);--token-1909d2f0-0a24-46cc-a97f-13e796dd34b5:rgb(61, 134, 168);--token-bd6bcf86-8040-4416-864e-6c9a21efee44:rgb(43, 97, 120);--token-2e098266-a0c3-4ba1-a446-c6c641a879bf:rgb(44, 106, 99);--token-b1f48b56-59e6-48ed-95e6-a7b31356c975:rgb(30, 75, 70);--token-7340e145-11c7-423c-9497-38f77cc3bfaa:rgb(255, 255, 255);--token-d4d6bdc4-b855-4c90-a287-42b61d179993:rgb(216, 204, 174);--token-1edca4a1-49c7-4705-8f28-5bea110f53d7:rgb(230, 220, 196);--token-6c2571ed-298a-41ae-a59d-5ab2bf1edd50:rgb(138, 130, 117);--token-14e0368a-77fb-4d42-9215-ee9a63dbfeb6:rgb(205, 182, 146)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--token-6201696a-d8bb-4f32-9432-0dad57393ba0);color:var(--token-e7cdab6a-2090-4e0f-a32f-fd50b8989be7);font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p{margin:0;font:inherit;letter-spacing:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
.txt{overflow-wrap:break-word}
.txt>a{display:block}
.ico{line-height:0}
.ico svg{display:block}
.yt{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#1f1c16;border:1px solid #d8ccae}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lk-nav-link,.lk-ink-link,.lk-body-link,.lk-muted-link{transition:color .2s ease}
.lk-nav-link:hover,.lk-ink-link:hover,.lk-body-link:hover{color:var(--token-054f87b3-b666-44ec-925a-eb0c881df6c0)}
.lk-muted-link{color:var(--token-b0c27ab0-e75b-46fa-b60c-fd4b067b04de)}
.lk-muted-link:hover{color:var(--token-e7cdab6a-2090-4e0f-a32f-fd50b8989be7)}
.cv-button{transition:background-color .2s ease,transform .2s ease}
.cv-button:hover{background:#bd3918}
.lang-switch{display:flex;gap:12px;align-items:center;font-size:12px;font-weight:500;letter-spacing:1.2px;line-height:1.6}
.lang-switch a{color:var(--token-b0c27ab0-e75b-46fa-b60c-fd4b067b04de);transition:color .2s ease}
.lang-switch a:hover{color:var(--token-054f87b3-b666-44ec-925a-eb0c881df6c0)}
.lang-switch a.on{color:var(--token-e7cdab6a-2090-4e0f-a32f-fd50b8989be7);box-shadow:0 1.5px 0 var(--token-054f87b3-b666-44ec-925a-eb0c881df6c0)}
.js:not(.seen) [data-appear]{opacity:0}
@media (prefers-reduced-motion:reduce){.js [data-appear]{opacity:1!important;transform:none!important}}
.ts-home-headline{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:700;font-size:66px;letter-spacing:-1.98px;line-height:1.18em;color:rgb(31, 28, 22);text-transform:none}
.ts-page-title{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:700;font-size:72px;letter-spacing:-2.88px;line-height:0.9em;color:rgb(31, 28, 22);text-transform:uppercase}@media (min-width:810px) and (max-width:1199.98px){.ts-page-title{font-size:56px;letter-spacing:-2.24px;line-height:0.9em}}@media (max-width:809.98px){.ts-page-title{font-size:44px;letter-spacing:-1.76px;line-height:0.9em}}
.ts-project-title{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:700;font-size:82px;letter-spacing:-3.69px;line-height:0.92em;color:rgb(31, 28, 22);text-transform:none}@media (min-width:810px) and (max-width:1199.98px){.ts-project-title{font-size:64px;letter-spacing:-2.88px;line-height:0.92em}}@media (max-width:809.98px){.ts-project-title{font-size:48px;letter-spacing:-2.16px;line-height:0.92em}}
.ts-lede{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:500;font-size:22px;letter-spacing:-0.22px;line-height:1.55em;color:rgb(31, 28, 22);text-transform:none}@media (min-width:810px) and (max-width:1199.98px){.ts-lede{font-size:20px;letter-spacing:-0.2px;line-height:1.55em}}@media (max-width:809.98px){.ts-lede{font-size:18px;letter-spacing:-0.18px;line-height:1.55em}}
.ts-lede-large{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:500;font-size:26px;letter-spacing:-0.26px;line-height:1.35em;color:rgb(31, 28, 22);text-transform:none}@media (min-width:810px) and (max-width:1199.98px){.ts-lede-large{font-size:22px;letter-spacing:-0.22px;line-height:1.35em}}@media (max-width:809.98px){.ts-lede-large{font-size:20px;letter-spacing:-0.2px;line-height:1.35em}}
.ts-heading-2{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:700;font-size:34px;letter-spacing:-0.68px;line-height:1.2em;color:rgb(31, 28, 22);text-transform:none}@media (min-width:810px) and (max-width:1199.98px){.ts-heading-2{font-size:30px;letter-spacing:-0.6px;line-height:1.2em}}@media (max-width:809.98px){.ts-heading-2{font-size:26px;letter-spacing:-0.52px;line-height:1.2em}}
.ts-heading-3{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:600;font-size:22px;letter-spacing:-0.33px;line-height:1.35em;color:rgb(31, 28, 22);text-transform:none}@media (min-width:810px) and (max-width:1199.98px){.ts-heading-3{font-size:20px;letter-spacing:-0.3px;line-height:1.35em}}@media (max-width:809.98px){.ts-heading-3{font-size:19px;letter-spacing:-0.285px;line-height:1.35em}}
.ts-card-title{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:600;font-size:20px;letter-spacing:-0.2px;line-height:1.35em;color:rgb(31, 28, 22);text-transform:none}
.ts-card-title-large{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:600;font-size:21px;letter-spacing:-0.21px;line-height:1.3em;color:rgb(31, 28, 22);text-transform:none}
.ts-body{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:400;font-size:16px;letter-spacing:-0.02em;line-height:1.8em;color:rgb(75, 70, 58);text-transform:none}
.ts-body-small{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:400;font-size:15px;letter-spacing:-0.02em;line-height:1.8em;color:rgb(75, 70, 58);text-transform:none}
.ts-nav{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:500;font-size:12px;letter-spacing:1.2px;line-height:1.6em;color:rgb(31, 28, 22);text-transform:uppercase}
.ts-mono-label{font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Hiragino Sans", "Noto Sans JP", "Meiryo", monospace;font-weight:400;font-size:11px;letter-spacing:1.76px;line-height:1.6em;color:rgb(107, 100, 89);text-transform:uppercase}
.ts-mono-caption{font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Hiragino Sans", "Noto Sans JP", "Meiryo", monospace;font-weight:400;font-size:11px;letter-spacing:1.1px;line-height:1.6em;color:rgb(107, 100, 89);text-transform:uppercase}
.ts-mono-meta{font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Hiragino Sans", "Noto Sans JP", "Meiryo", monospace;font-weight:400;font-size:12px;letter-spacing:1.2px;line-height:1.6em;color:rgb(107, 100, 89);text-transform:none}
.ts-footer{font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Hiragino Sans", "Noto Sans JP", "Meiryo", monospace;font-weight:400;font-size:11px;letter-spacing:1.32px;line-height:1.6em;color:rgb(75, 70, 58);text-transform:uppercase}
.ts-pill{font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Hiragino Sans", "Noto Sans JP", "Meiryo", monospace;font-weight:400;font-size:12px;letter-spacing:0.96px;line-height:1.6em;color:rgb(255, 255, 255);text-transform:uppercase}
.ts-section-number{font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Hiragino Sans", "Noto Sans JP", "Meiryo", monospace;font-weight:500;font-size:34px;letter-spacing:-0.34px;line-height:1.6em;color:rgb(107, 100, 89);text-transform:none}@media (min-width:810px) and (max-width:1199.98px){.ts-section-number{font-size:30px;letter-spacing:-0.3px;line-height:1.6em}}@media (max-width:809.98px){.ts-section-number{font-size:26px;letter-spacing:-0.26px;line-height:1.6em}}
.ts-nav-bold{font-family:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;font-weight:700;font-size:12px;letter-spacing:1.2px;line-height:1.6em;color:rgb(31, 28, 22);text-transform:uppercase}
/* Hand-written rules added on top of the generated CSS. Selectors start with `body` so they
   win over the generated per-page rules, which load later. */

/* Phone header: the menu is set a little smaller and tighter so the longest version
   (French: ACCUEIL · À PROPOS · PROJETS · LOISIRS · CONTACT) stays on one line. */
@media (max-width: 809.98px) {
    body .n-lYoApUpN5 {
        gap: 4px 13px;
        flex-wrap: wrap;
    }
    body .n-lYoApUpN5 .ts-nav {
        font-size: 11px;
        letter-spacing: 0.7px;
    }
}
@media (max-width: 374.98px) {
    body .n-lYoApUpN5 {
        gap: 4px 10px;
    }
    body .n-lYoApUpN5 .ts-nav {
        font-size: 10px;
        letter-spacing: 0.4px;
    }
}

/* Page-to-page navigation cross-fades instead of flashing (browsers without support just
   navigate as usual). The header keeps its place during the fade. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
}
body nav {
    view-transition-name: site-nav;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* Home hero: text and icons are positioned by script. They stay hidden until that is done
   (`hero-ready` is set by the icons component, or by a timeout in the page head as a fallback),
   then fade in together — instead of appearing in a provisional spot and jumping. When the text
   position is already known from an earlier view (`hero-text-ready`), the text shows at once. */
body .n-RgUHy4Qa0 {
    translate: var(--hero-shift, 0px) 0;
}
.js .n-RgUHy4Qa0,
.js [data-island="FloatingWorks"] {
    opacity: 0;
}
.js.hero-ready .n-RgUHy4Qa0,
.js.hero-ready [data-island="FloatingWorks"] {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.js.hero-text-ready .n-RgUHy4Qa0 {
    opacity: 1;
}

/* Home, tool list: logos instead of names. Ink-coloured at rest, the tool's own colours on
   hover / focus, with its name in a tooltip. */
body .n-ca3FMR0pW {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 809.98px) {
    body .n-ca3FMR0pW {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.tool-logo {
    aspect-ratio: 1;
    padding: 0 !important;
    color: var(--token-1bafcfa5-b6ed-4dea-85d3-5a041113407d);
    cursor: default;
    outline: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.tool-logo > span {
    position: absolute;
    inset: 24%;
    transition: opacity 0.2s ease;
}
.tool-logo .tool-color {
    opacity: 0;
}
.tool-logo:hover,
.tool-logo:focus-visible {
    transform: translateY(-2px);
    border-color: var(--token-b0c27ab0-e75b-46fa-b60c-fd4b067b04de) !important;
}
.tool-logo:hover .tool-mono,
.tool-logo:focus-visible .tool-mono {
    opacity: 0;
}
.tool-logo:hover .tool-color,
.tool-logo:focus-visible .tool-color {
    opacity: 1;
}
.tool-logo::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    translate: -50% 4px;
    padding: 5px 9px;
    border-radius: 4px;
    background: var(--token-e7cdab6a-2090-4e0f-a32f-fd50b8989be7);
    color: var(--token-6201696a-d8bb-4f32-9432-0dad57393ba0);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.15s ease, translate 0.15s ease;
}
.tool-logo:hover::after,
.tool-logo:focus::after {
    opacity: 1;
    translate: -50% 0;
}

/* Brand marks inside the coloured link tiles (Contact). */
.ico-logo svg {
    display: block;
}

/* Home, desktop: no text below 16px (see "minFontSize" in overrides.json for the generated
   rules). These cover the pieces the generator doesn't size: language switch, tool tooltips,
   the clock in the footer. */
@media (min-width: 1200px) {
    body[data-page="home"] .lang-switch,
    body[data-page="home"] .tool-logo::after {
        font-size: 16px;
    }
    body[data-page="home"] [data-island="LiveClock"] time {
        font-size: 16px !important;
    }
}

/* Hobby, phone: the three product sketches stack in one column, each shown whole at its own
   proportions (they were cropped to thin slices side by side). */
@media (max-width: 809.98px) {
    body .n-I062k4Kur {
        grid-template-columns: minmax(0, 1fr);
    }
    body .n-I062k4Kur > div {
        height: auto;
        aspect-ratio: 1400 / 1140;
    }
}

/* Compris!, phone: the hero image is wide; keep its logo side in view. */
@media (max-width: 809.98px) {
    body[data-page="works-compris"] .n-sd6nuz4oa > .fill {
        object-position: 4% 50%;
    }
}

/* Desktop header: same size on every page. Home has a 16px floor for its text (see
   "minFontSize"); the header follows it everywhere so it doesn't change size between pages. */
@media (min-width: 1200px) {
    body nav .ts-nav,
    body nav .ts-nav-bold,
    body nav .lang-switch {
        font-size: 16px;
    }
}

/* Compris!: the website in the project details reads as a link. */
body[data-page="works-compris"] .n-u20gpdmei a {
    text-decoration: underline;
    text-underline-offset: 3px;
}