@font-face{font-family:'Saira';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/saira-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Saira';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/saira-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/mono-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* Fonts loaded via in for faster, non-blocking delivery */ /* ============================================================ MKS US Consulting — "Blueprint Cobalt" design system Technical drawing aesthetic: grid paper, ink, cobalt accent. ============================================================ */ :root{ --paper:oklch(0.966 0.004 250); --paper-2:oklch(0.945 0.007 250); --ink:oklch(0.245 0.022 258); --ink-2:oklch(0.44 0.02 258); --grid:oklch(0.865 0.012 250); --grid-2:oklch(0.905 0.009 250); --accent:oklch(0.5 0.17 262); --accent-2:oklch(0.6 0.11 258); --disp:"Saira",system-ui,sans-serif; --body:"Saira",system-ui,sans-serif; --mono:"Spline Sans Mono",ui-monospace,monospace; --z-nav:100;--z-modal:300; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--body);color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6;overflow-x:hidden; background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px); background-size:34px 34px; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,44px)} h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-0.02em;line-height:1.0;text-transform:uppercase} .eyebrow,.mono{font-family:var(--mono)} .eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:500} .eyebrow::before{content:"// "} /* ---------- HEADER ---------- */ header{position:sticky;top:0;z-index:var(--z-nav);background:oklch(0.966 0.004 250 / .9);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--ink)} .nav{display:flex;align-items:center;justify-content:space-between;height:96px;gap:20px} .nav .logo{flex-shrink:0} .nav .logo img{height:60px;display:block} .nav-links{display:flex;align-items:center;gap:clamp(12px,1.7vw,24px)} .nav-links a{font-family:var(--mono);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);opacity:.82;transition:color .2s,opacity .2s} .nav-links a:hover{opacity:1;color:var(--accent)} .nav-links a[aria-current="page"]{opacity:1;color:var(--accent);font-weight:600} .nav-links a.lang{opacity:.55;border-left:1.5px solid var(--grid);padding-left:14px} .nav-links a.lang.on{opacity:1;color:var(--ink);font-weight:600} .nav-cta{font-family:var(--mono);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);border:1.5px solid var(--ink);padding:10px 16px;white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s} .nav-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)} /* ---------- BUTTONS ---------- */ .btn,.btn-primary,.btn-ghost,.cta-band .b,.contact-col a.cta-btn,.related-grid a,.seoblock .ln a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em} .btn{font-weight:600;font-size:13px;padding:14px 24px;border:1.5px solid transparent;display:inline-block;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s} .btn-primary{background:var(--accent);color:var(--paper)} .btn-primary:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)} .btn-ghost{border-color:var(--ink);color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--paper)} /* ---------- HERO (home) ---------- */ .hero{padding:clamp(46px,7vw,88px) 0 clamp(50px,7vw,84px)} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,56px);align-items:center} .hero h1{font-size:clamp(3rem,8.4vw,5.6rem);font-weight:800;letter-spacing:-.03em;margin:18px 0 0} .hero h1 .it{color:transparent;-webkit-text-stroke:2px var(--ink);font-style:normal} .hero .sub{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--ink-2);max-width:42ch;margin:24px 0 32px;text-transform:none} .hero .actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap} /* chart -> technical plot */ .chart-card{background:var(--paper);border:1.5px solid var(--ink);border-radius:0;padding:20px 20px 14px;box-shadow:6px 6px 0 var(--grid)} .chart-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .chart-top .t{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} .legend{display:flex;gap:16px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em} .legend span{display:flex;align-items:center;gap:6px} .dot{width:9px;height:9px;border-radius:50%} .dot.g{background:var(--accent)} .dot.p{background:var(--ink-2)} .chart-card svg g line{stroke:var(--grid)!important} .chart-card svg path[fill^="url"]{fill:none} .chart-card svg .draw{stroke:var(--accent)!important;stroke-width:3.4} .chart-card svg .draw.p2{stroke:var(--ink-2)!important;opacity:.55} .chart-card svg circle{fill:var(--accent)!important} .chart-card svg text{fill:var(--ink-2);font-family:var(--mono)} .chart-cap{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:8px;letter-spacing:.02em} svg .draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.2s cubic-bezier(.16,1,.3,1) .3s forwards} svg .draw.p2{animation-duration:1.6s;animation-delay:.5s} @keyframes draw{to{stroke-dashoffset:0}} /* ---------- STRIP ---------- */ .strip{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--paper-2)} .strip .wrap{display:flex;flex-wrap:wrap;gap:12px 34px;padding:16px 0;align-items:center;justify-content:space-between} .strip span{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);text-transform:uppercase} .strip b{color:var(--accent)} /* ---------- PAGE HERO ---------- */ .breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);padding:26px 0 0} .breadcrumb a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .page-hero{padding:34px 0 46px;border-bottom:1.5px solid var(--ink)} .page-hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-.03em;margin-top:16px} .page-hero h1 .it{color:transparent;-webkit-text-stroke:2px var(--ink);font-style:normal} .page-hero p{color:var(--ink-2);font-size:1.12rem;margin-top:20px;max-width:60ch;text-transform:none} /* ---------- SECTION SHELL ---------- */ section.block{padding:clamp(58px,8vw,104px) 0} .head-row{max-width:820px;margin-bottom:44px;border-bottom:1.5px solid var(--ink);padding-bottom:22px} .head-row h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin:12px 0 0} .head-row p{color:var(--ink-2);font-size:1.1rem;margin-top:16px;text-transform:none} .head-row p a{color:var(--accent);font-weight:600;font-family:var(--mono);text-transform:uppercase;font-size:.85em;border-bottom:0} /* ---------- THESIS ---------- */ .thesis{background:var(--ink);color:var(--paper);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)} .thesis .eyebrow{color:var(--accent-2)} .thesis h2{color:var(--paper);font-size:clamp(2rem,3.8vw,3rem);margin-top:12px} .thesis .lede{font-family:var(--disp);font-weight:500;font-size:clamp(1.4rem,2.3vw,1.9rem);line-height:1.28;max-width:24ch;text-transform:none} .thesis .lede em{font-style:normal;color:var(--accent-2)} .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:48px;border-top:1.5px solid oklch(0.4 0.03 258);padding-top:0} .pillar{padding:30px 26px 8px 0;border-right:1px solid oklch(0.36 0.03 258)} .pillar:last-child{border-right:0} .pillar .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);margin-bottom:12px} .pillar h3{font-size:1.3rem;color:var(--paper);margin-bottom:8px} .pillar p{color:oklch(0.78 0.02 250);font-size:.98rem;text-transform:none} .thesis-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,5vw,60px);align-items:start} /* ---------- HUB CARDS ---------- */ .hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)} .hub-card{display:block;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:26px 24px 30px;background:var(--paper);transition:background .2s} .hub-card:hover{background:var(--paper-2)} .hub-card .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)} .hub-card h3{font-size:1.2rem;margin:12px 0 8px;color:var(--ink)} .hub-card p{color:var(--ink-2);font-size:.96rem;text-transform:none} /* ---------- SERVICES (legacy .svc grid, if present) ---------- */ .svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)} .svc-item{border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:30px 26px;background:var(--paper)} .svc-item:hover{background:var(--paper-2)} .svc-item .ic{width:34px;height:34px;color:var(--accent);margin-bottom:16px} .svc-item h3{font-size:1.14rem;margin-bottom:8px} .svc-item p{color:var(--ink-2);font-size:.96rem;text-transform:none} /* ---------- PROSE ---------- */ .prose{max-width:760px} .prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:40px 0 16px;color:var(--ink);border-bottom:1.5px solid var(--grid);padding-bottom:10px} .prose h2:first-child{margin-top:0} .prose p{color:var(--ink-2);margin-bottom:14px;text-transform:none;max-width:70ch} .prose ul.checks{list-style:none;margin:14px 0 6px} .prose ul.checks li{position:relative;padding-left:30px;margin:10px 0;color:var(--ink-2);text-transform:none} .prose ul.checks li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border:1.5px solid var(--accent)} .prose ul.checks li::after{content:"×";position:absolute;left:3px;top:-1px;color:var(--accent);font-family:var(--mono);font-size:13px} /* ---------- FAQ ---------- */ .faq{background:var(--paper-2);border-top:1.5px solid var(--ink)} .faq .wrap{padding-top:clamp(58px,8vw,90px);padding-bottom:clamp(58px,8vw,90px);max-width:900px} .faq h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:26px} .faq details{border-bottom:1.5px solid var(--grid);padding:18px 2px} .faq details:first-of-type{border-top:1.5px solid var(--ink)} .faq summary{font-family:var(--disp);font-weight:600;font-size:1.05rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-family:var(--mono);font-size:1.3rem;line-height:1;flex-shrink:0} .faq details[open] summary::after{content:"\2013"} .faq details p{color:var(--ink-2);margin-top:13px;font-size:1rem;max-width:760px;text-transform:none} /* ---------- RELATED ---------- */ .related{border-top:1.5px solid var(--ink);margin-top:8px;padding-top:28px} .related .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px} .related-grid{display:flex;flex-wrap:wrap;gap:10px} .related-grid a{font-size:12px;font-weight:500;color:var(--ink);border:1.5px solid var(--ink);padding:8px 14px;transition:background .2s,color .2s} .related-grid a:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)} /* ---------- SEO BLOCK ---------- */ .seoblock{background:var(--paper);border-top:1.5px solid var(--ink)} .seoblock .wrap{padding-top:clamp(52px,7vw,72px);padding-bottom:clamp(52px,7vw,72px)} .seoblock h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:16px;color:var(--ink)} .seoblock p{color:var(--ink-2);font-size:.98rem;max-width:920px;margin-bottom:12px;text-transform:none} .seoblock a.inl{color:var(--accent);font-weight:600;border-bottom:1.5px solid var(--accent)} .seoblock .ln{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px} .seoblock .ln a{font-size:12px;font-weight:500;color:var(--ink);border:1.5px solid var(--ink);padding:7px 14px} .seoblock .ln a:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)} /* ---------- FLORIDA BAND (home) ---------- */ .fla{background:var(--paper);border-top:1.5px solid var(--ink)} .fla .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center;padding-top:clamp(70px,9vw,110px);padding-bottom:clamp(70px,9vw,110px)} .fla h2{font-size:clamp(1.9rem,3.4vw,2.8rem)} .fla p{color:var(--ink-2);font-size:1.04rem;margin-top:16px;text-transform:none} .fla .stat{display:flex;gap:38px;margin-top:28px} .fla .stat .v{font-family:var(--disp);font-weight:700;font-size:2rem;color:var(--accent);line-height:1} .fla .stat .l{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;color:var(--ink-2);margin-top:8px;letter-spacing:.04em} .fla .media{position:relative;overflow:hidden;border:1.5px solid var(--ink);min-height:330px;box-shadow:8px 8px 0 var(--grid)} .fla .media img{width:100%;height:100%;object-fit:cover;min-height:330px;filter:grayscale(1) contrast(1.15) brightness(1.02)} .fla .media::after{content:"";position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;opacity:.5;pointer-events:none} /* ---------- IMAGE BANDS ---------- */ .imgwide,.imgband{position:relative;overflow:hidden;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)} .imgwide{height:430px}.imgband{height:300px} .imgwide img,.imgband img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(1.02)} .imgwide::after,.imgband::after{content:"";position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;opacity:.5;pointer-events:none} /* ---------- CTA BAND ---------- */ .cta-band{background:var(--ink);color:var(--paper);border-top:1.5px solid var(--ink)} .cta-band .wrap{padding:clamp(58px,8vw,90px) 0;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap} .cta-band h2{font-size:clamp(1.8rem,3.2vw,2.7rem);max-width:20ch;color:var(--paper)} .cta-band h2 .it{font-style:normal;color:var(--accent-2)} .cta-band .b{display:inline-block;background:var(--accent);color:var(--paper);font-weight:600;font-size:13px;padding:15px 28px;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s} .cta-band .b:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--paper)} /* ---------- CONTACT PAGE ---------- */ .cta{background:var(--ink);color:var(--paper)} .cta .wrap{padding:clamp(70px,10vw,130px) 0} .cta-logo{height:56px;margin-bottom:28px;filter:brightness(0) invert(1)} .cta h1{font-size:clamp(2.3rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;max-width:18ch;color:var(--paper)} .cta h1 .it{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--accent-2)} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;border-top:1.5px solid oklch(0.4 0.03 258);padding-top:38px} .contact-col .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.74 0.11 258);margin-bottom:10px} .contact-col a,.contact-col p{font-size:1.14rem;color:var(--paper);font-weight:500} .contact-col a.lnk{border-bottom:1.5px solid oklch(0.5 0.05 258)} .contact-col a.lnk:hover{border-color:var(--accent-2)} .contact-col a.cta-btn{display:inline-block;margin-top:34px;background:var(--accent);color:var(--paper);font-weight:600;font-size:13px;padding:15px 28px;border:0;transition:transform .2s} .contact-col a.cta-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--paper)} /* ---------- FOOTER ---------- */ footer{background:var(--ink);color:oklch(0.72 0.02 250)} footer .wrap{padding:34px 0 42px;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap} footer .flogo{height:52px;filter:brightness(0) invert(1);opacity:.95} footer .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;text-align:right;line-height:1.8;text-transform:uppercase} footer a{color:var(--paper)} footer .meta a{text-decoration:underline;text-underline-offset:3px} /* ---------- LANG PICKER (root, unused now) ---------- */ .lang-pick{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px} .lang-pick .opts{display:flex;gap:16px} /* ---------- MODAL ---------- */ .modal-ov{position:fixed;inset:0;background:oklch(0.245 0.03 258 / .6);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:var(--z-modal);padding:22px} .modal-ov.open{display:flex} .modal{background:var(--paper);border:1.5px solid var(--ink);border-radius:0;max-width:580px;width:100%;max-height:92vh;overflow:auto;padding:32px 34px;box-shadow:10px 10px 0 var(--ink)} .modal .x{float:right;cursor:pointer;color:var(--ink-2);font-size:24px;line-height:1;border:none;background:none} .modal h3{font-size:1.7rem;margin-bottom:6px} .modal .ms{color:var(--ink-2);font-size:.95rem;margin-bottom:22px;max-width:44ch;text-transform:none} .modal label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin:15px 0 6px;color:var(--ink)} .modal input,.modal select,.modal textarea{width:100%;border:1.5px solid var(--ink);border-radius:0;padding:12px 14px;font-family:var(--body);font-size:14px;background:var(--paper);color:var(--ink)} .modal input:focus,.modal select:focus,.modal textarea:focus{outline:none;border-color:var(--accent);box-shadow:3px 3px 0 var(--accent)} .modal textarea{min-height:120px;resize:vertical} .modal .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .modal .submit{margin-top:22px;width:100%;background:var(--accent);color:var(--paper);border:none;padding:15px;font-family:var(--mono);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:transform .2s,box-shadow .2s} .modal .submit:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)} .modal .ok{display:none;text-align:center;padding:30px 10px} .modal .ok h3{margin-bottom:10px} .modal.sent form{display:none}.modal.sent .ok{display:block} /* ---------- REVEAL ---------- */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} /* ---------- RESPONSIVE ---------- */ @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:34px} .thesis-grid{grid-template-columns:1fr;gap:26px} .fla .wrap{grid-template-columns:1fr;gap:24px} .contact-grid{grid-template-columns:1fr;gap:26px} } @media (max-width:620px){ .wrap{padding:0 20px} .nav{height:74px} .nav .logo img{height:44px} .nav-links a:not(.lang):not(.nav-cta){display:none} .modal .row{grid-template-columns:1fr} footer .wrap{flex-direction:column;align-items:flex-start} footer .meta{text-align:left} } @media (prefers-reduced-motion:reduce){ svg .draw{animation:none;stroke-dashoffset:0} .reveal{transition:none;opacity:1;transform:none} html{scroll-behavior:auto} } /* --- HEADER : style bp-4-cobalt (logo à gauche, nav groupée à droite) --- */ .nav{justify-content:flex-start;height:auto;padding:9px 0;gap:clamp(12px,2vw,26px);flex-wrap:wrap} .nav .logo{margin-right:auto} .nav .logo img{height:56px} .nav-links{gap:clamp(12px,1.9vw,24px)} /* --- Feuille blanche (comme l'accueil) : contenu sur fond blanc, grille visible seulement en marge --- */ header{position:static;background:var(--paper)} .sheet{position:relative;margin:14px;border:1.5px solid var(--ink);background:var(--paper)} .sheet::before,.sheet::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--ink);z-index:2;pointer-events:none} .sheet::before{top:-1px;left:-1px;border-right:0;border-bottom:0} .sheet::after{bottom:-1px;right:-1px;border-left:0;border-top:0} .page-hero .wrap{position:relative} /* header identique à l'accueil : nav sur toute la largeur de la feuille */ header .wrap{max-width:none;padding:9px clamp(18px,3vw,32px)} /* header : valeurs identiques à l'accueil (écarts, padding CTA, langue) */ .nav{gap:clamp(11px,1.6vw,22px)} .nav-links{gap:clamp(11px,1.6vw,22px)} .nav-cta{padding:9px 16px} .nav-links a.lang{padding-left:12px;opacity:.5} /* logos: width auto so intrinsic width/height attrs (anti-CLS) don't stretch them */ .nav .logo img,footer .flogo,.cta-logo{width:auto} /* --- Mobile navigation (hamburger) --- */ .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:11px;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;flex-shrink:0;border-radius:0} .nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);transition:transform .2s ease,opacity .2s ease} .menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-open .nav-toggle span:nth-child(2){opacity:0} .menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (max-width:900px){ header{position:sticky;top:0;z-index:200} .nav{position:relative} .nav-toggle{display:flex} .nav-links{position:absolute;top:calc(100% + 1.5px);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:4px clamp(18px,3vw,32px) 14px;gap:0;display:none;z-index:200;box-shadow:0 14px 26px rgba(20,26,40,.10)} .menu-open .nav-links{display:flex} .menu-open .nav-links a:not(.lang):not(.nav-cta){display:block;padding:14px 2px;border-bottom:1px solid var(--grid);font-size:14px;opacity:1} .menu-open .nav-links a.lang{display:inline-block;width:auto;border-left:0;padding:14px 20px 14px 2px;opacity:1} .menu-open .nav-links a:last-child{border-bottom:0} } /* Privacy notice under the enquiry form */ .form-privacy{font-family:var(--body);font-size:12px;color:var(--ink-2);margin:16px 0 2px;line-height:1.5;text-transform:none} .form-privacy a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} /* Cookie-consent banner (Consent Mode v2) — injected by nav.js */ .mks-consent{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--ink);color:var(--paper);border-top:2px solid var(--accent);padding:16px clamp(16px,4vw,40px);animation:mksrise .3s ease} @keyframes mksrise{from{transform:translateY(100%)}to{transform:none}} @media (prefers-reduced-motion:reduce){.mks-consent{animation:none}} .mks-consent-in{max-width:1180px;margin:0 auto;display:flex;gap:16px 26px;align-items:center;justify-content:space-between;flex-wrap:wrap} .mks-consent-txt{font-size:13px;line-height:1.5;max-width:74ch;margin:0;color:var(--paper);text-transform:none} .mks-consent-txt a{color:#fff;text-decoration:underline;text-underline-offset:2px} .mks-consent-btns{display:flex;gap:10px;flex-shrink:0} .mks-consent button{font-family:var(--mono);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:11px 18px;cursor:pointer;border:1.5px solid var(--paper);background:transparent;color:var(--paper);transition:background .2s,color .2s,filter .2s} .mks-consent-refuse:hover{background:var(--paper);color:var(--ink)} .mks-consent-accept{background:var(--accent);border-color:var(--accent);color:#fff} .mks-consent-accept:hover{filter:brightness(1.14)} .mks-consent button:focus-visible{outline:2px solid #fff;outline-offset:2px} @media (max-width:600px){.mks-consent-btns{width:100%}.mks-consent button{flex:1}}