/* Le formulaire est chargé séparément pour actualiser son style avec la page. */
/* Typographie locale : les trois familles gardent des responsabilités distinctes. */
@font-face{font-family:Manrope;src:url('./assets/fonts/manrope-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('./assets/fonts/instrument-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('./assets/fonts/instrument-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('./assets/fonts/instrument-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('./assets/fonts/instrument-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('./assets/fonts/instrument-serif-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('./assets/fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{--paper:#F2F0EA;--ink:#111111;--orange:#FF4F20;--rule:#d4d1c9;--muted:#55534e;--gutter:clamp(24px,4.45vw,80px);--header-h:104px;--anchor-clearance:32px;--anchor-admin:0px;--display:Manrope,Arial,sans-serif;--body:'Instrument Sans',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:calc(var(--anchor-clearance) + var(--anchor-admin));overflow-x:clip}
/* Les ancres partagent leur dégagement avec Lenis et le défilement natif.
   Sur mobile, on réserve la hauteur complète du header même quand il revient. */
html:has(body.admin-bar){--anchor-admin:32px}
@media(max-width:782px){html:has(body.admin-bar){--anchor-admin:46px}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.5 var(--body);overflow-x:clip}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit;border:0;border-radius:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}
::selection{background:var(--orange);color:var(--ink)}
img{display:block;width:100%;height:auto}
svg{display:block}
[hidden]{display:none!important}
h1,h2,h3,p,ul,ol,figure{margin:0}
h2{font-weight:500;font-size:clamp(48px,5.2vw,82px);line-height:1.04;letter-spacing:-.055em}
h3{font-weight:500;letter-spacing:-.04em}
.wrap{width:calc(100% - var(--gutter)*2);max-width:1600px;margin-inline:auto}
.section-space{padding-block:clamp(80px,8.9vw,142px)}
.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}
.skip-link{position:fixed;top:10px;left:10px;padding:12px 20px;background:var(--ink);color:var(--paper);z-index:100;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.small-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--orange)}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:48px;text-align:left;padding:0;line-height:1.2}
.text-link span[aria-hidden]{font-size:25px;display:inline-block;transition:transform .16s ease}
.text-link:hover span[aria-hidden],.text-link:focus-visible span[aria-hidden]{transform:translate(3px,-3px)}
.button{display:block;min-height:68px;min-width:250px;line-height:1.2;text-align:left;position:relative;padding:0}
.button-inner{display:flex;align-items:center;justify-content:space-between;gap:44px;padding:20px 24px;min-height:68px}
.button-dark{background:var(--ink);color:var(--paper)}
.button-orange{background:var(--orange);color:var(--ink)}
.button svg{width:32px;height:32px;stroke:currentColor;stroke-width:1.5;fill:none}
.button-inner>span[aria-hidden]{font-size:32px;line-height:.8}
.button::after{content:'';position:absolute;inset:0;border:1px solid currentColor;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity .16s,transform .16s}
.button:hover::after,.button:focus-visible::after{opacity:1;transform:scale(1.035)}

/* Le premier écran est une composition typographique, jamais une capture aplatie. */
.site-header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:32px;position:absolute;top:0;left:0;right:0;z-index:60;padding-inline:var(--gutter);color:var(--paper)}
.brand{display:inline-flex;align-items:center;flex-shrink:0;min-height:52px}
.brand-logo{width:180px;height:auto;overflow:visible}
.brand-dot{fill:var(--orange)}
.header-contact{font-size:15px;gap:15px}
.menu-button{display:none;align-items:center;gap:15px;min-height:48px}
.menu-icon{width:24px;height:12px;position:relative;border-top:1px solid;border-bottom:1px solid}
.hero{min-height:100svh;padding-top:calc(var(--header-h) + 32px);padding-bottom:28px;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:clip}
.hero-eyebrow{font-size:14px;line-height:1.2;margin-bottom:36px;text-transform:uppercase;letter-spacing:.005em;position:relative;z-index:2}
.hero-title{font-family:var(--display);font-weight:700;font-size:clamp(96px,12.9vw,210px);letter-spacing:-.065em;line-height:.975;position:relative;z-index:2;margin-bottom:64px}
.hero-line{display:block;width:max-content;max-width:100%;position:relative;padding-bottom:.09em;margin-bottom:-.09em}
.hero-line:nth-child(2){margin-left:14.8%}
.hero-line:nth-child(3){margin-left:39.8%;width:60.2%;padding-bottom:.15em;margin-bottom:0}
.hero-line-inner{display:block;white-space:nowrap;transform-origin:bottom left}
.hero-letter{display:inline-block;will-change:transform;position:relative}
.hero-letter.space{width:.25em}
.hero-underline{height:10px;background:var(--orange);position:absolute;bottom:0;left:0;right:0;transform-origin:left}
.hero-round{position:absolute;right:3%;top:65px;width:clamp(108px,10.6vw,176px);aspect-ratio:1;border-radius:50%;background:var(--orange);display:grid;place-items:center;z-index:3}
.hero-round-arrow{width:34%;stroke:var(--ink);stroke-width:1.4;fill:none;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.hero-round:hover .hero-round-arrow,.hero-round:focus-visible .hero-round-arrow{transform:rotate(45deg)}
.hero-orbit{position:absolute;width:clamp(330px,43vw,660px);top:0;right:0;z-index:0;pointer-events:none;opacity:.65}
.hero-orbit svg{width:100%;overflow:visible}
.orbit-path{stroke:var(--orange);stroke-width:1;stroke-dasharray:8 10}
.orbit-cross{stroke:var(--orange);stroke-width:1}
.orbit-node{fill:var(--orange)}
.orbit-drawing{transform-origin:50% 50%}
.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:auto;position:relative;z-index:2}
.hero-bottom>p{font-size:clamp(20px,1.8vw,28px);line-height:1.35;letter-spacing:-.035em}
.hero-bottom .button{width:345px}
.hero-footnote{font-size:13px;margin-top:38px;display:flex;justify-content:space-between;gap:24px}
.hero-footnote a{display:flex;gap:22px}

/* Les sections suivantes gardent du calme autour des deux scènes fortes. */

.lottie-mark{width:150px;height:150px;margin-top:24px;position:relative;color:var(--ink)}
.lottie-poster{width:100%;height:100%;position:absolute;inset:0}
.lottie-mark[data-loaded]>.lottie-poster{display:none}

.case-section{border-top:1px solid var(--rule)}
.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
.section-heading>p{font-size:15px;line-height:1.45;max-width:280px}
.section-heading .text-link{font-size:15px;min-width:175px}
.overline{font-size:13px;margin-bottom:20px;line-height:1.2;text-decoration:none}
.case-display{position:relative;aspect-ratio:2.05;background:#e4e1d9;overflow:hidden}
.case-browser{width:85%;position:absolute;top:12%;left:4.5%;overflow:hidden;background:white;box-shadow:0 10px 40px #11111110;transform-origin:center}
.browser-chrome{height:24px;display:flex;align-items:center;gap:4px;padding-inline:10px;background:#fbfaf7;color:#555;font-size:8px}
.browser-chrome i{width:4px;height:4px;border-radius:50%;background:#ddd}
.browser-chrome span{margin:auto}
.case-desktop{width:100%;height:auto;transform-origin:top center}
.case-phone{position:absolute;right:4%;bottom:4%;width:17%;background:var(--ink);border:5px solid var(--ink);border-radius:17px;overflow:hidden;box-shadow:0 8px 18px #11111130;transform-origin:bottom center}
.case-phone img{width:100%;display:block}
.case-annotation{position:absolute;left:4.5%;top:4%;font-size:10px;display:flex;align-items:center;gap:7px;z-index:4}
.case-annotation .small-dot{width:5px;height:5px}
.wireframe-overlay{position:absolute;inset:17% 12% 12% 8%;background:var(--paper);padding:4%;border:1px solid var(--orange);opacity:0;pointer-events:none}
.wireframe-top{height:14%;border-bottom:1px solid var(--rule);display:flex;gap:8%;align-items:start}
.wireframe-top span{display:block;height:6px;background:var(--rule);width:20%}
.wireframe-top span:first-child{width:9%;background:var(--orange);margin-right:auto}
.wireframe-body{display:grid;grid-template-columns:1fr 1fr;gap:8%;height:75%;padding-top:7%}
.wireframe-image{border:1px solid var(--orange);overflow:hidden;background:#FF4F2008}
.wireframe-image svg{width:100%;height:100%;stroke:var(--orange);stroke-width:.6}
.wireframe-title{font-family:var(--serif);font-size:clamp(28px,4vw,64px);line-height:.92}
.wireframe-copy{width:90%;height:5px;background:var(--rule);margin-top:16px}
.wireframe-action{width:45%;height:24px;border:1px solid var(--orange);margin-top:16px}
.wireframe-baseline{height:1px;background:var(--orange);margin-top:4%}
.code-overlay{position:absolute;right:8%;top:23%;width:46%;padding:24px;background:var(--ink);color:var(--paper);opacity:0;pointer-events:none;box-shadow:12px 12px 0 var(--orange)}
.code-caption{font-size:12px;color:#bfbcb6}
.code-overlay pre{font-family:monospace;font-size:clamp(12px,1.15vw,18px);line-height:1.8;margin:24px 0}
.code-overlay code>span{color:var(--orange)}
.code-bottom{display:flex;justify-content:space-between;padding-top:15px;border-top:1px solid #555;font-size:11px}
.case-stages{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 0 12px;border-bottom:1px solid var(--rule)}
.case-stages button{text-align:left;font-size:17px;padding:0;min-height:48px;position:relative;z-index:2}
.case-stages button>span{font-size:11px;display:block;color:var(--muted);margin-bottom:4px}
.case-stages button[aria-pressed=true]{font-weight:600}
.case-stages button[aria-pressed=true]::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);position:absolute;right:16px;top:24px}
.stage-line{height:2px;background:var(--orange);position:absolute;bottom:-1px;left:0;width:100%;transform-origin:left;transform:scaleX(1)}
.case-description{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-top:48px}
.case-meta{list-style:none;padding:0;font-size:13px;line-height:1.55}
.case-description>div{max-width:660px}
.case-description h3{font-family:var(--serif);font-size:clamp(40px,4.4vw,66px);line-height:1.03;font-weight:400;letter-spacing:-.035em}
.case-description p{margin-top:23px;font-size:18px;line-height:1.5;max-width:600px}

.dark-section{background:var(--ink);color:var(--paper)}
.lab-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:60px}
.lab-heading h2{font-family:var(--display);font-weight:700;font-size:clamp(50px,5.4vw,90px);letter-spacing:-.06em}
.lab-heading>p{font-size:16px;max-width:340px;padding-bottom:6px}
.lab-heading>p>span{display:block;margin-top:14px;font-size:12px;color:#b5b2aa}

.services .section-heading{margin-bottom:42px}
.service-list{border-top:1px solid var(--rule)}
.service summary::-webkit-details-marker{display:none}

.method{border-top:1px solid var(--rule);padding-top:68px}
.method-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:44px;padding:0}
.method-number{font-size:11px;display:block;margin-bottom:13px}
.method-grid h3{font-size:29px;line-height:1.1;margin-bottom:14px}
.method-grid p{font-size:15px;line-height:1.45;max-width:245px}

.footer{padding-bottom:30px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:40px;border-bottom:1px solid #55534e;padding-bottom:68px}
.footer-top h2{font-size:clamp(52px,6.1vw,97px);letter-spacing:-.06em}
.footer-bottom{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;font-size:12px;line-height:1.6;margin-top:42px}
.footer-bottom nav{display:flex;align-items:start;flex-direction:column;gap:4px}
.footer-bottom .text-link{font-size:12px;min-height:24px}


/* Dialogues natifs : le navigateur gère le focus, Escape et l’inertie du fond. */
dialog{background:var(--paper);color:var(--ink);padding:32px;border:0;margin:0 0 0 auto;width:min(100%,620px);max-width:none;height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
dialog::backdrop{background:#11111175}
.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;border-bottom:1px solid var(--rule);padding-bottom:25px}
.dialog-close{display:flex;align-items:center;gap:18px;font-size:14px;min-height:48px;padding:0}
.dialog-close>span{font-size:32px;font-weight:400;line-height:1}
.menu-dialog nav{display:flex;flex-direction:column;gap:16px;padding-block:48px}
.menu-dialog nav>a{font-size:clamp(40px,8vw,64px);line-height:1.05;letter-spacing:-.05em}
.menu-dialog .button{margin-top:20px;max-width:350px}

@media(min-width:1800px){.hero-title{font-size:220px}.hero-orbit{right:5%}}
@media(max-width:1100px){:root{--header-h:90px}.site-header{gap:20px}.hero{padding-top:calc(var(--header-h) + 30px)}.header-contact{display:none}.hero-title{font-size:12.9vw;margin-bottom:50px}.hero-round{top:58px;width:120px}.hero-bottom>p{font-size:21px}.hero-bottom .button{width:270px;min-width:250px}.hero-eyebrow{margin-bottom:38px}.hero-orbit{top:4%;right:-2%}.case-display{aspect-ratio:1.7}.case-browser{top:16%;width:87%}.case-phone{width:19%;bottom:10%;right:3%}.case-annotation{top:6%}.wireframe-overlay{inset:22% 9% 19% 8%}.code-overlay{top:30%;width:50%;padding:18px}.lab-heading{gap:35px}.lab-heading>p{max-width:240px;font-size:14px}.method-grid{gap:24px}.method-grid h3{font-size:25px}.method-grid p{font-size:14px}.footer-top .button{min-width:225px}.footer-bottom{gap:30px}}
@media(max-width:760px){
 :root{--gutter:24px;--header-h:76px;--anchor-clearance:calc(var(--header-h) + 16px)}body{font-size:16px}.site-header{gap:15px}.brand-logo{width:150px}.hero{padding-top:calc(var(--header-h) + 26px);padding-bottom:24px}h2{font-size:49px;letter-spacing:-.055em}.section-space{padding-block:75px}.menu-button{display:flex;font-size:14px}.hero-eyebrow{font-size:12px;margin-bottom:54px}.hero-title{font-size:17.15vw;letter-spacing:-.065em;line-height:1.05;margin-bottom:58px}.hero-line:nth-child(2){margin-left:10.8%}.hero-line:nth-child(3){margin-left:26.4%;width:73.6%;padding-bottom:.2em}.hero-underline{height:5px}.hero-round{width:66px;top:14px;right:0}.hero-round-arrow{width:42%}.hero-orbit{width:280px;top:8%;right:-22%;opacity:.45}.hero-bottom{flex-direction:column;align-items:start;gap:29px;margin-top:0}.hero-bottom>p{font-size:20px;line-height:1.35}.hero-bottom .button{width:100%;min-width:0;max-width:345px}.button,.button-inner{min-height:62px}.button-inner{padding:17px 20px;font-size:15px}.button svg{width:28px;height:28px}.hero-footnote{font-size:10px;margin-top:auto;padding-top:34px;gap:25px;line-height:1.35}.hero-footnote>span{max-width:150px}.hero-footnote a{gap:8px;max-width:150px;text-align:right}.lottie-mark{width:80px;height:80px;margin:0}.section-heading{align-items:start;gap:25px;flex-direction:column;margin-bottom:30px}.section-heading .text-link{font-size:13px;min-width:150px;min-height:35px}.overline{font-size:11px;margin-bottom:18px}.case-section{padding-top:54px}.case-section h2{font-size:48px}.case-display{aspect-ratio:.93}.case-browser{top:20%;left:4%;width:92%}.browser-chrome{height:15px;font-size:6px;padding-inline:6px;gap:3px}.browser-chrome i{width:3px;height:3px}.case-phone{width:34%;right:6%;bottom:6%;border-width:3px;border-radius:10px}.case-annotation{top:7%;left:6%;font-size:8px;max-width:90%}.wireframe-overlay{inset:23% 8% 38% 8%;padding:6%}.wireframe-title{font-size:31px}.wireframe-copy{margin-top:9px;height:3px}.wireframe-action{height:14px;margin-top:9px}.code-overlay{top:29%;right:8%;width:83%;padding:16px;box-shadow:7px 7px 0 var(--orange)}.code-overlay pre{font-size:11px;line-height:1.65;margin:16px 0}.code-caption{font-size:10px}.code-bottom{font-size:9px;padding-top:10px}.case-stages{padding-top:18px;gap:10px}.case-stages button{font-size:12px;line-height:1.2;min-height:52px}.case-stages button>span{font-size:9px}.case-stages button[aria-pressed=true]::before{right:0;top:5px;width:5px;height:5px}.case-description{grid-template-columns:1fr;gap:32px;margin-top:30px}.case-meta{font-size:11px}.case-description h3{font-size:47px}.case-description p{font-size:16px;margin-top:22px}.lab-heading{display:block;margin-bottom:36px}.lab-heading h2{font-size:50px}.lab-heading>p{margin-top:25px;max-width:310px;font-size:14px;line-height:1.45}.lab-heading>p>span{margin-top:12px;font-size:10px}.services .section-heading{gap:22px;margin-bottom:30px}.section-heading>p{font-size:13px}.method{padding-top:55px}.method h2{font-size:46px}.method-grid{grid-template-columns:1fr 1fr;gap:36px 25px;margin-top:36px}.method-number{font-size:10px;margin-bottom:11px}.method-grid h3{font-size:25px}.method-grid p{font-size:13px;line-height:1.5}.footer{padding-bottom:28px}.footer-top{display:block;padding-bottom:42px}.footer-top h2{font-size:48px;line-height:1.06;letter-spacing:-.06em}.footer-top .button{margin-top:36px;width:100%;max-width:345px}.footer-bottom{grid-template-columns:1fr 1fr;gap:30px 25px;font-size:11px;margin-top:33px}dialog{padding:24px}.dialog-header{font-size:12px;padding-bottom:15px}.dialog-close{font-size:12px;gap:12px}.menu-dialog nav{padding-block:42px}.menu-dialog nav>a{font-size:47px}.menu-dialog .button{width:100%}
}
@media(max-width:360px){:root{--gutter:20px}.hero-title{font-size:16.95vw}.hero-bottom>p{font-size:18px}.hero-round{width:56px}.footer-top h2{font-size:42px}}
@media(pointer:coarse){.cursor{display:none!important}.case-display{transform:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.cursor{display:none!important}}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-motion=reduce] .cursor{display:none!important}