@font-face{font-family:Manrope;src:url('assets/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{--bg:#f7f7f2;--text:#101b27;--muted:#626b72;--line:#101b2724;--line-strong:#101b2755;--surface:#fff;--blue:#2454ff;--blue-soft:#2454ff;--ink:#101b27;--mint:#c9eddd;--display:Manrope,Arial,sans-serif;--pad-x:max(24px,calc((100vw - 1320px)/2),5vw)}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:110px;overflow-anchor:none}body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--display);-webkit-font-smoothing:antialiased}body.dialog-open{overflow:hidden}button,input,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{font-weight:650;line-height:1.12;letter-spacing:-.05em}h1{font-size:clamp(45px,5.5vw,84px)}h2{font-size:clamp(35px,4vw,60px)}h3{font-size:25px}p{line-height:1.75}em{font-style:normal;color:var(--blue)}[hidden]{display:none!important}::selection{color:white;background:var(--blue)}:is(a,button,input,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.skip-link{position:fixed;left:20px;top:-100px;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:8px}.skip-link:focus{top:15px}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.5;letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:var(--muted)}.eyebrow:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
.pill,.button{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:52px;padding:15px 24px;border:1px solid transparent;border-radius:100px;background:var(--blue);color:#fff;font-size:13px;font-weight:650;line-height:1.4;letter-spacing:-.01em;transition:background .18s,color .18s,border-color .18s}.pill.light{background:var(--blue);color:#fff}.pill.light:after{content:'↗';font-size:18px;font-weight:400}.pill:hover,.button:hover{background:#143bce;color:#fff}.pill.outline{background:transparent;color:var(--text);border-color:var(--line-strong)}.pill.outline:hover{background:var(--ink);border-color:var(--ink);color:white}.quiet-link,.text-link{display:inline-flex;align-items:center;gap:14px;font-size:13px;font-weight:600;line-height:1.6;padding-bottom:3px;border-bottom:1px solid currentColor}.quiet-link:hover,.text-link:hover{color:var(--blue)}
.nav-shell,.nav-shell.is-scrolled{position:sticky;z-index:60;top:0;left:auto;right:auto;height:84px;display:flex;align-items:center;gap:35px;padding:0 var(--pad-x);border-bottom:1px solid var(--line);background:var(--bg)}.brand{display:block;flex-shrink:0;width:138px}.brand img{width:100%;height:auto;filter:none}.desktop-nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:12px;font-weight:550}.desktop-nav a{padding:12px 0}.desktop-nav a:hover{color:var(--blue)}.header-project{display:inline-flex;align-items:center;gap:18px;padding:12px 21px;border-radius:100px;background:var(--ink);color:#fff;min-height:46px;font-size:12px;font-weight:600;white-space:nowrap}.header-project:hover{background:var(--blue)}.header-project span{font-size:17px}.slp-tag{display:none}.menu-toggle,.mobile-nav{display:none}
.site-footer{padding:55px var(--pad-x) 0;background:var(--ink);color:#f7f7f2;overflow:hidden}.footer-top{display:flex;align-items:flex-start;gap:55px;padding-bottom:38px}.footer-top .brand{width:137px}.footer-top .brand img{filter:brightness(0) invert(1)}.footer-top p{color:#bac4cc;font-size:13px}.footer-top .quiet-link{margin-left:auto;font-size:11px}.footer-bottom{display:flex;justify-content:space-between;gap:25px;padding:25px 0;border-top:1px solid #ffffff2b;font-size:10px;color:#b6c0c8}.footer-bottom>div{display:flex;flex-wrap:wrap;gap:15px 24px;justify-content:flex-end;max-width:700px}.footer-bottom a:hover{color:#fff}.footer-mark{width:100%;height:auto;margin:20px 0 -4%;filter:brightness(0) invert(1);opacity:.16}.footer-bottom button{font-size:10px;border:0;padding:0;background:none;color:inherit}
dialog{width:min(980px,calc(100vw - 40px));max-height:88dvh;margin:auto;padding:40px;border:1px solid var(--line);border-radius:18px;background:var(--bg);color:var(--text);overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#101b27bd;backdrop-filter:blur(7px)}.dialog-close{float:right;position:sticky;z-index:3;top:0;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:white;color:var(--ink);font-size:27px;line-height:1}.dialog-close:hover{background:var(--ink);color:white}dialog h2{font-size:clamp(35px,4vw,58px);margin:24px 0}dialog h3{font-size:23px;margin:26px 0 12px}dialog p{font-size:15px;color:var(--muted)}dialog .eyebrow{padding-top:15px;padding-right:50px}.case-screenshot,.case-video{width:100%;height:auto;border-radius:10px;margin-top:28px;border:1px solid var(--line);background:#eee}.case-video{max-height:55vh}.modal-facts{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:30px;padding-top:25px;border-top:1px solid var(--line)}.modal-facts strong{display:block;font-size:10px;letter-spacing:.1em;color:var(--blue);text-transform:uppercase;margin-bottom:10px}.case-note{margin-top:25px!important;font-size:13px!important}.case-links{display:flex;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
@media(max-width:1000px){.nav-shell{gap:22px}.desktop-nav{gap:20px}.brand{width:120px}.header-project{padding:12px 17px}.footer-bottom{flex-direction:column}.footer-bottom>div{justify-content:flex-start}}
@media(max-width:800px){.nav-shell,.nav-shell.is-scrolled{height:74px;gap:15px}.desktop-nav{display:none}.header-project{margin-left:auto;font-size:11px;min-height:42px;padding:11px 16px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:9px;width:40px;height:40px;border:0;background:none}.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink)}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.mobile-nav:not([hidden]){position:absolute;left:0;right:0;top:73px;display:flex;flex-direction:column;gap:0;background:var(--bg);padding:20px var(--pad-x) 25px;border-bottom:1px solid var(--line)}.mobile-nav a{display:block;padding:13px 0;font-size:21px;font-weight:600}.footer-top{gap:25px;flex-wrap:wrap}.footer-top .quiet-link{margin-left:0}.footer-bottom{font-size:10px;gap:20px}.footer-mark{margin-bottom:-2%}}
@media(max-width:600px){html{scroll-padding-top:95px}.brand{width:110px}.header-project{font-size:10px;gap:10px;min-height:40px;padding:10px 14px}.nav-shell{gap:10px}.pill,.button{font-size:12px;min-height:48px;padding:14px 20px}.eyebrow{font-size:9px}h2{font-size:36px}.site-footer{padding-top:35px}.footer-top{gap:22px;padding-bottom:27px}.footer-top p{font-size:12px}.footer-top .brand{width:120px}.footer-bottom>div{gap:14px 20px}.footer-mark{margin:10px 0 -2%}dialog{width:calc(100vw - 24px);padding:24px;max-height:90dvh;border-radius:12px}dialog p{font-size:14px}.modal-facts{grid-template-columns:1fr;gap:24px}.case-links{gap:20px}.dialog-close{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* Univers cartoon Kaisei : lettres rondes, aplats lumineux, contours et relief papier. */
@font-face{font-family:Fredoka;src:url('assets/fonts/fredoka-variable.ttf') format('truetype');font-weight:300 700;font-stretch:75% 125%;font-display:swap}
:root{--bg:#fff9ed;--text:#17263c;--ink:#17263c;--muted:#5b6673;--line:#17263c40;--line-strong:#17263c90;--mint:#bde9d5;--heading:Fredoka,Manrope,sans-serif;--comic-shadow:4px 4px 0 #17263c}
body{background:var(--bg)}h1,h2,h3,h4{font-family:var(--heading);font-weight:600;letter-spacing:-.025em}h1{line-height:1.05}h2{line-height:1.1}
.eyebrow{font-size:10px;letter-spacing:.08em;font-weight:750}.eyebrow:before{border:1px solid var(--ink);background:#ffe28a;width:8px;height:8px}
.nav-shell,.nav-shell.is-scrolled{background:var(--bg);border-bottom:2px solid var(--ink)}.desktop-nav{font-size:13px;font-weight:650}.desktop-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}.header-project{background:var(--blue);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:13px;min-height:46px;transition:transform .12s,box-shadow .12s,background .12s}.header-project:hover{background:#416aff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.header-project:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pill,.button{font-size:14px;font-weight:750;border:2px solid var(--ink);border-radius:13px;box-shadow:var(--comic-shadow);transition:transform .12s,box-shadow .12s,background .12s}.pill.light{background:#ffe28a;border-color:var(--ink);color:var(--ink)}.pill.light:hover{background:#ffebaf;color:var(--ink)}.pill.outline{background:#fff;border:2px solid var(--ink);color:var(--ink)}.pill.outline:hover{background:var(--mint);color:var(--ink)}.pill:hover,.button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.pill:active,.button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.quiet-link,.text-link{font-weight:700}
.site-footer{background:#17263c;border-top:2px solid #17263c;position:relative}.footer-top p{font-family:var(--heading);font-size:18px;line-height:1.45;color:#fff9ed}.footer-top .quiet-link{color:#ffe28a}.footer-bottom{border-top:2px dashed #ffffff40;color:#d3dce6;font-size:11px}.footer-bottom a{font-size:11px}.footer-mark{opacity:.3}
dialog{border:2px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 #17263c80;background:#fff9ed}.dialog-close{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#ffe28a}.case-screenshot,.case-video{border:2px solid var(--ink);border-radius:13px}.modal-facts{border-top:2px dashed var(--line)}.case-note{border:2px solid var(--ink);border-radius:12px;background:#fff0bd;padding:15px!important}
@media(max-width:800px){.mobile-nav:not([hidden]){background:var(--bg);border-bottom:2px solid var(--ink)}.mobile-nav a{font-family:var(--heading);font-size:23px}.header-project{min-height:43px}}
@media(max-width:600px){.pill,.button{font-size:12px;border-radius:12px}.header-project{font-size:10px;border-radius:11px;box-shadow:2px 2px 0 var(--ink);min-height:41px}.footer-top p{font-size:16px}.footer-bottom,.footer-bottom a{font-size:10px}dialog{border-radius:16px}}