/* ============ Carminati Architecture — Shared styles ============ */ :root{--accent:hsla(240.54,68.94%,68.43%,1);--accent-deep:hsla(240.54,60%,55%,1);--accent-soft:hsla(240.54,68.94%,68.43%,0.18);--bg:#f7f3ec;--bg-2:#efe9de;--ink:#1a1714;--ink-2:#3a342d;--muted:#7a7268;--line:#d8cfc1;--paper:#fbf7f0;--shadow:0 30px 80px -40px rgba(40,28,14,.35);--radius:14px;--header-h:76px;}*{box-sizing:border-box;}html,body{margin:0;padding:0;}/* iOS/mobile :suppression du flash bleu au tap,scroll fluide,safe-area iPhone */ html{-webkit-text-size-adjust:100%;}*{-webkit-tap-highlight-color:transparent;}a,button,.btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}body{-webkit-overflow-scrolling:touch;overscroll-behavior-y:none;}@supports (padding:env(safe-area-inset-bottom)){body{padding-bottom:env(safe-area-inset-bottom);}header.nav{padding-top:env(safe-area-inset-top);}}/* Highlight selection — vivid road-sign yellow */ ::selection{background:#ffff00 !important;color:#1a1714 !important;text-shadow:none !important;-webkit-text-fill-color:#1a1714 !important;}::-moz-selection{background:#ffff00 !important;color:#1a1714 !important;text-shadow:none !important;}html{scroll-behavior:smooth;}body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}a{color:inherit;text-decoration:none;}img{max-width:100%;display:block;}h1,h2,h3,h4{font-weight:700;letter-spacing:-0.02em;margin:0;line-height:1.08;}h1{font-size:clamp(44px,6.8vw,96px);font-weight:700;letter-spacing:-0.035em;}/* Force all headings bold across pages (overrides page-specific styles) */ h1,h2,h3,h4,h5,h1 em,h2 em,h3 em,h4 em,h5 em,.hero-title em,.step h3,.service h3,.svc-row h2,.pcard h4,.faq-side h2,.form-step h2,.contact-side h2,.intro h2,.intro-card h3,.manifesto blockquote,.story-grid h2,.milestone h4,.loc h4,.address-card h4,.ref h3,.count-cell .v,.count-cell .v em,.stat .val{font-weight:700;}h2{font-size:clamp(32px,4vw,56px);letter-spacing:-0.03em;}h3{font-size:clamp(20px,1.6vw,26px);}p{margin:0;}.wrap{max-width:1440px;margin:0 auto;padding:0 48px;}@media (min-width:1600px){.wrap{max-width:1520px;padding:0 60px;}}@media (max-width:1100px){.wrap{padding:0 32px;}}.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);}.eyebrow.light{color:rgba(251,247,240,.55);}/* ============ Header ============ */ header.nav{position:fixed;top:0;left:0;right:0;height:var(--header-h);display:flex;align-items:center;z-index:100;transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease;border-bottom:1px solid transparent;}header.nav.scrolled,header.nav.solid{background:rgba(247,243,236,.88);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--line);}.nav-inner{width:100%;display:flex;align-items:center;justify-content:space-between;}.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-0.01em;font-size:17px;}.brand img.logo{height:26px;width:auto;display:block;transition:filter .3s ease;}body.dark .brand img.logo{filter:invert(1) hue-rotate(180deg);}.brand-mark{width:34px;height:34px;border-radius:8px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:600;font-size:15px;}.brand small{display:block;font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.04em;margin-top:1px;}nav.links{display:flex;align-items:center;gap:36px;}nav.links a{font-size:14px;font-weight:500;color:var(--ink-2);position:relative;padding:6px 0;}nav.links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);}nav.links a:hover::after,nav.links a.active::after{transform:scaleX(1);}nav.links a.active{color:var(--ink);}.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:0;cursor:pointer;border:1px solid transparent;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s,color .25s,box-shadow .25s,border-color .25s;background:var(--ink);color:var(--paper);will-change:transform;}.btn:hover{transform:translateY(-2px);background:var(--accent);}.btn .arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1);}.btn:hover .arrow{transform:translateX(4px);}.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}.btn.accent{background:var(--accent);}.btn.accent:hover{background:var(--accent-deep);}.btn.lg{padding:16px 28px;font-size:15px;}/* ============ Page hero (small,used by sub-pages) ============ */ .page-hero{padding-top:calc(var(--header-h) + 100px);padding-bottom:80px;position:relative;border-bottom:1px solid var(--line);overflow:hidden;}.page-hero .ambient{position:absolute;pointer-events:none;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 60%);top:-160px;right:-160px;filter:blur(20px);z-index:0;}.page-hero .wrap{position:relative;z-index:1;}.page-hero h1{margin-top:22px;font-size:clamp(40px,6vw,84px);max-width:18ch;}.page-hero h1 em{font-style:normal;color:var(--accent);font-weight:500;}.page-hero .lede{margin-top:26px;font-size:17px;color:var(--ink-2);max-width:580px;}.page-hero .crumbs{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;}.page-hero .crumbs a:hover{color:var(--accent);}.page-hero .crumbs span.sep{opacity:.5;}/* ============ Section base ============ */ section.section{padding:130px 0;position:relative;}section.section.tight{padding:90px 0;}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:80px;}.section-head p.lede{font-size:17px;color:var(--ink-2);max-width:480px;}/* ============ Side CTA ============ */ .side-cta{position:fixed;right:-2px;top:50%;transform:translateY(-50%) translateX(calc(100% - 50px));background:var(--accent);color:var(--paper);padding:16px 22px 16px 18px;border-radius:8px 0 0 8px;display:flex;align-items:center;gap:12px;cursor:pointer;z-index:90;transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s;font-weight:500;font-size:14px;letter-spacing:.02em;box-shadow:-10px 20px 40px -20px rgba(0,0,0,.25);}.side-cta:hover{transform:translateY(-50%) translateX(0);background:var(--ink);}.side-cta .icn{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:13px;}/* ============ Final / footer CTA ============ */ .final{padding:140px 0 100px;position:relative;overflow:hidden;}.final::before{content:"";position:absolute;inset:60px 0;background:var(--ink);border-radius:24px;z-index:0;}.final-inner{position:relative;z-index:1;color:var(--paper);padding:80px 60px;}.final h2{color:var(--paper);max-width:14ch;}.final h2 em{font-style:normal;color:var(--accent);font-weight:500;}.final-lede{margin-top:22px;color:rgba(251,247,240,.7);max-width:480px;font-size:17px;}.final-cta-row{margin-top:50px;display:flex;flex-wrap:wrap;gap:14px;}.final .btn{background:var(--paper);color:var(--ink);}.final .btn:hover{background:var(--accent);color:var(--paper);}.final .btn.ghost{background:transparent;color:var(--paper);border-color:rgba(251,247,240,.3);}.final .btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}.channels{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}.channel{display:flex;flex-direction:column;gap:6px;padding:22px;background:rgba(251,247,240,.05);border:1px solid rgba(251,247,240,.1);border-radius:12px;transition:background .3s,border-color .3s,transform .3s;}.channel:hover{background:rgba(251,247,240,.1);border-color:var(--accent);transform:translateY(-3px);}.channel small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,247,240,.5);}.channel span{font-size:17px;font-weight:500;}.final-blob{position:absolute;right:-120px;bottom:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.25;filter:blur(10px);z-index:0;}/* ============ Footer ============ */ footer.site{padding:60px 0 36px;border-top:1px solid var(--line);background:var(--bg);color:var(--ink-2);font-size:13px;}.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;align-items:start;}.foot-grid h5{margin:0 0 14px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:500;}.foot-grid a{display:block;padding:4px 0;}.foot-grid a:hover{color:var(--accent);}.foot-bottom{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);}/* ============ Header dark toggle button ============ */ .theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0;font-family:inherit;transition:background .25s,border-color .25s,color .25s,transform .25s;margin-right:4px;}.theme-toggle:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(-15deg);}.theme-toggle svg{width:16px;height:16px;}.theme-toggle .moon{display:block;}.theme-toggle .sun{display:none;}body.dark .theme-toggle .moon{display:none;}body.dark .theme-toggle .sun{display:block;}.nav-actions{display:flex;align-items:center;gap:12px;}@media (max-width:960px){.theme-toggle{width:36px;height:36px;}}/* ============ Hamburger / mobile menu ============ */ .nav-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:transparent;padding:0;cursor:pointer;font-family:inherit;align-items:center;justify-content:center;transition:background .25s,border-color .25s,transform .25s;}.nav-toggle:hover{background:var(--ink);border-color:var(--ink);}.nav-toggle:hover .bars span{background:var(--paper);}.nav-toggle .bars{position:relative;width:18px;height:12px;display:inline-block;}.nav-toggle .bars span{position:absolute;left:0;right:0;height:1.5px;background:var(--ink);border-radius:1px;transition:transform .35s cubic-bezier(.2,.7,.2,1),top .35s cubic-bezier(.2,.7,.2,1),opacity .25s;}.nav-toggle .bars span:nth-child(1){top:0;}.nav-toggle .bars span:nth-child(2){top:5px;}.nav-toggle .bars span:nth-child(3){top:10px;}body.menu-open .nav-toggle .bars span:nth-child(1){top:5px;transform:rotate(45deg);}body.menu-open .nav-toggle .bars span:nth-child(2){opacity:0;}body.menu-open .nav-toggle .bars span:nth-child(3){top:5px;transform:rotate(-45deg);}body.menu-open .nav-toggle:hover .bars span{background:var(--paper);}/* Mobile menu panel */ .mobile-menu{position:fixed;inset:var(--header-h) 0 0 0;background:var(--bg);z-index:95;display:flex;flex-direction:column;gap:4px;padding:30px 26px 40px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1);overflow-y:auto;border-top:1px solid var(--line);}body.menu-open .mobile-menu{opacity:1;transform:translateY(0);pointer-events:auto;}.mobile-menu a{font-size:28px;font-weight:600;letter-spacing:-0.02em;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:space-between;transition:color .2s,padding .25s;}.mobile-menu a::after{content:"→";font-size:20px;color:var(--muted);transition:transform .3s,color .2s;}.mobile-menu a:hover{color:var(--accent);padding-left:6px;}.mobile-menu a:hover::after{color:var(--accent);transform:translateX(4px);}.mobile-menu a.active{color:var(--accent);}.mobile-menu .menu-cta{margin-top:28px;align-self:flex-start;font-size:15px;font-weight:500;padding:14px 24px;border-bottom:0;border-radius:999px;background:var(--accent);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:10px;}.mobile-menu .menu-cta::after{content:none;}.mobile-menu .menu-cta:hover{padding-left:24px;background:var(--ink);}.mobile-menu .menu-cta .arrow{transition:transform .3s;}.mobile-menu .menu-cta:hover .arrow{transform:translateX(4px);}body.menu-open header.nav{background:rgba(247,243,236,.96);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--line);}body.dark.menu-open header.nav{background:rgba(20,17,15,.96);}.mobile-menu .menu-foot{margin-top:auto;padding-top:30px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px;}.mobile-menu .menu-foot a{font-size:14px;font-weight:500;padding:4px 0;border:0;color:var(--ink-2);}.mobile-menu .menu-foot a::after{content:none;}body.menu-open{overflow:hidden;}/* ============ Architecture cursor ============ */ @media (pointer:fine){html,body{cursor:none;}a,button,.btn,.ref,.service,.qa summary,.filter,.faq-cat,.opt,.ch,.channel,input,textarea,label,.theme-toggle,.side-cta,summary,.step{cursor:none;}}.archi-cursor{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);color:var(--ink);mix-blend-mode:difference;transition:color .2s ease;opacity:0;will-change:transform;}.archi-cursor.ready{opacity:1;}.archi-cursor svg{display:block;filter:drop-shadow(0 0 1px rgba(0,0,0,.3));}.archi-cursor svg line{transition:stroke .2s,opacity .2s;}.archi-cursor .coords{position:absolute;left:100%;top:100%;margin-left:10px;margin-top:4px;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.08em;white-space:nowrap;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:3px;transition:background .2s,color .2s,opacity .25s;mix-blend-mode:normal;}/* Mix-blend on the cursor means we use plain white/black always */ .archi-cursor{color:#f5f1ea;}.archi-cursor .coords{background:#f5f1ea;color:#000;mix-blend-mode:difference;}.archi-cursor.click svg{transform:scale(.85);transition:transform .12s;}@media (max-width:960px),(pointer:coarse){.archi-cursor{display:none;}html,body,a,button,.btn{cursor:auto;}}/* ============ Reveal helpers ============ */ .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);}.reveal.in{opacity:1;transform:translateY(0);}.reveal.d1{transition-delay:.1s;}.reveal.d2{transition-delay:.2s;}.reveal.d3{transition-delay:.3s;}.reveal.d4{transition-delay:.4s;}.reveal.d5{transition-delay:.5s;}/* ============ Dark mode ============ */ body.dark{--bg:#14110f;--bg-2:#1f1b17;--ink:#f3ede4;--ink-2:#c8bfb1;--muted:#8c8479;--line:#2c2722;--paper:#1a1714;--shadow:0 30px 80px -40px rgba(0,0,0,.7);}body.dark header.nav.scrolled,body.dark header.nav.solid{background:rgba(20,17,15,.88);border-bottom-color:var(--line);}body.dark .btn{background:var(--ink);color:var(--paper);}body.dark .btn:hover{background:var(--accent);color:var(--ink);}body.dark .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}body.dark .btn.ghost:hover{background:var(--ink);color:var(--paper);}body.dark .final::before{background:var(--bg-2);}body.dark .stats,body.dark .process,body.dark .manifesto{background:var(--bg-2);}body.dark .ambient{background:radial-gradient(circle,hsla(240,60%,60%,.25),transparent 60%);}body.dark .hero-meta{background:var(--paper);}body.dark .hero-visual .badge{background:rgba(26,23,20,.85);color:var(--ink);}body.dark .ref .tag,body.dark .svc-visual .tag{background:rgba(26,23,20,.85);color:var(--ink);}body.dark .nav-toggle{border-color:var(--line);}body.dark .nav-toggle .bars span{background:var(--ink);}body.dark .nav-toggle:hover{background:var(--ink);}body.dark .nav-toggle:hover .bars span{background:var(--paper);}body.dark .mobile-menu{background:var(--bg);border-top-color:var(--line);}/* ============ Dark mode — inverted sections (final / stats / manifesto / process / journey-cta) ============ These sections use `background:var(--ink);color:var(--paper)` so they read as "always-dark blocks with cream text" in light mode. The CSS variables swap in dark mode which flips the colors. We force them to remain dark-with-cream-text in dark mode too. */ body.dark .final::before,body.dark .stats,body.dark .process,body.dark .manifesto,body.dark .address-card{background:#1f1b17;}body.dark .final-inner,body.dark .final h2,body.dark .final-lede,body.dark .stats,body.dark .stats h2,body.dark .stats .lede,body.dark .stat .val,body.dark .stat .lbl,body.dark .process,body.dark .process h2,body.dark .process .lede,body.dark .pcard h4,body.dark .pcard p,body.dark .manifesto,body.dark .manifesto blockquote,body.dark .manifesto cite,body.dark .journey-cta,body.dark .journey-cta strong,body.dark .journey-cta .label,body.dark .address-card,body.dark .address-card h4,body.dark .address-card p,body.dark .address-card small,body.dark .hours .row,body.dark .hours .row strong{color:#f3ede4;}body.dark .final-lede,body.dark .stat .lbl,body.dark .process .lede,body.dark .manifesto cite,body.dark .pcard p{color:rgba(243,237,228,.65);}body.dark .stat .bar{background:rgba(243,237,228,.15);}/* Journey CTA card (sticky on home) — keep dark with cream text in dark mode */ body.dark .journey-cta{background:#0e0c0a;}body.dark .journey-cta .btn{background:#f3ede4;color:#1a1714;}body.dark .journey-cta .btn:hover{background:var(--accent);color:#f3ede4;}/* Process cards inside the dark band */ body.dark .pcard{border-color:rgba(243,237,228,.12);}/* Hours card on contact — dark band */ body.dark .hours{background:#0e0c0a;}/* Active filter / faq-cat buttons — pill becomes ink which is cream in dark;fix */ body.dark .filter.active,body.dark .faq-cat.active{background:#f3ede4;color:#1a1714;border-color:#f3ede4;}/* References cards that have NO image still use the beige placeholder pattern via their dynamic inline background. We darken only those (selector based on attribute). */ /* Hero meta floating card — force ink-on-cream contrast inside the dark hero visual */ body.dark .hero-meta{background:#f3ede4;color:#1a1714;}body.dark .hero-meta strong{color:#1a1714;}body.dark .hero-visual .badge{background:rgba(243,237,228,.94);color:#1a1714;}/* Step pills on timeline (Home) — make readable on dark */ body.dark .step ul li{background:#1f1b17;color:#c8bfb1;border-color:#2c2722;}/* Testimonial cards — give them a touch more contrast on the bg-2 testimonials strip */ body.dark .quote{background:#1f1b17;border-color:#2c2722;}body.dark .quote .who .av{background:#2c2722;color:#f3ede4;}/* Service cards on home — lift them a tiny bit off the dark bg */ body.dark .service,body.dark .intro-card,body.dark .loc,body.dark .pcard{background:#1c1815;}body.dark .value{background:#1c1815;}body.dark .value:hover{background:#232019;}/* FAQ accordion summary contrast */ body.dark .qa{border-color:#2c2722;}body.dark .qa summary .plus{border-color:#2c2722;color:#f3ede4;}/* Form inputs (contact page) — visible borders + readable placeholders */ body.dark .field input,body.dark .field textarea,body.dark .field select{background:#1c1815;color:#f3ede4;border-color:#3a342d;}body.dark .field input::placeholder,body.dark .field textarea::placeholder{color:#8c8479;}body.dark .field input:focus,body.dark .field textarea:focus{background:#232019;border-color:var(--accent);}body.dark .field label{color:#c8bfb1;}/* Option pills (radio-like buttons) — texte forcé en cream lumineux en sombre */ body.dark .opt{background:#1c1815;border-color:#3a342d;color:#ffffff !important;}body.dark .opt strong{color:#ffffff !important;}body.dark .opt small{color:#d6cebf !important;}body.dark .opt:hover{border-color:var(--accent);background:#232019;}body.dark .opt.selected{background:rgba(124,123,230,.18);border-color:var(--accent);}body.dark .opt.selected strong{color:#ffffff !important;}body.dark .opt.selected small{color:#ffffff !important;opacity:.9;}body.dark .nav-row .back{color:#d6cebf !important;}body.dark .nav-row .back:hover{color:#ffffff !important;}/* Form card / progress / labels */ body.dark .form-card{background:#1c1815;border-color:#3a342d;}body.dark .progress .pip{background:#3a342d;}body.dark .step-label{color:#b5ac9d;}body.dark .form-step h2{color:#f3ede4;}body.dark .form-done p{color:#c8bfb1;}body.dark .nav-row .back{color:#b5ac9d;}body.dark .nav-row .back:hover{color:#f3ede4;}/* Right column (channels + address) — déjà OK mais on s'assure */ body.dark .ch .info small{color:#b5ac9d;}body.dark .ch .info span{color:#f3ede4;}body.dark .ch .arrow{color:#b5ac9d;}body.dark .contact-side h2{color:#f3ede4;}body.dark .contact-side .lede{color:#c8bfb1;}/* Channel cards on contact — already styled but ensure cream text */ body.dark .ch{background:#1c1815;border-color:#2c2722;}body.dark .ch h4{color:#f3ede4;}/* Sub-page hero ambient blob a touch more visible on dark */ body.dark .page-hero{border-bottom-color:#2c2722;}/* ============ Dark mode — keep photos bright ============ Lighten the overlay gradients above all photographic backgrounds so the actual images stay readable in dark mode. */ body.dark .hero-visual{background-image:linear-gradient(160deg,rgba(0,0,0,.0),rgba(0,0,0,.15) 80%),url('assets/hero.jpg') !important;}body.dark .svc-visual{filter:none;}body.dark .ref.has-img::before{background:linear-gradient(180deg,rgba(0,0,0,.0) 0%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.55) 100%);}/* For project cover,no overlay on top of the user image */ body.dark .proj-cover .img-frame img{filter:none;}/* References cards — their text is "color:var(--paper)" which flips dark in dark mode. Force everything inside back to cream so the card stays readable on the dark stripes. */ body.dark .ref,body.dark .ref h3,body.dark .ref .arrow,body.dark .ref .meta{color:#f3ede4 !important;}/* Project page hero — covers the same issue if any inverted contrast remains */ body.dark .proj-cover .img-frame::before{color:rgba(243,237,228,.75);}/* Page-hero / hero section "VISUEL" overlay labels — keep readable on the dark stripes */ body.dark .hero-visual::before,body.dark .ref::after,body.dark .svc-visual{color:rgba(243,237,228,.55);}/* ============ Responsive ============ */ @media (max-width:960px){:root{--header-h:64px;}nav.links{display:none;}.nav-toggle{display:inline-flex;}.section-head{grid-template-columns:1fr;gap:20px;margin-bottom:50px;}.channels{grid-template-columns:1fr;}.foot-grid{grid-template-columns:1fr 1fr;}.final-inner{padding:50px 26px;}.final{padding:90px 0 70px;}.final::before{inset:40px 0;border-radius:18px;}section.section{padding:80px 0;}.wrap{padding:0 20px;}.side-cta{display:none;}.page-hero{padding-top:calc(var(--header-h) + 50px);padding-bottom:50px;}.page-hero .ambient{width:360px;height:360px;top:-120px;right:-120px;}/* CTA buttons grow naturally;stack final CTAs */ .final-cta-row{flex-direction:column;align-items:stretch;}.final-cta-row .btn{justify-content:center;}/* Hide the desktop CTA in header — handled by JS,but fallback hide */ header.nav .btn.accent .arrow{display:none;}header.nav .btn.accent{padding:10px 14px;font-size:13px;}.brand img.logo{height:22px;}}@media (max-width:600px){h1{font-size:clamp(36px,9.5vw,56px);}h2{font-size:clamp(28px,7.5vw,40px);}.foot-grid{grid-template-columns:1fr;gap:30px;}.foot-bottom{flex-direction:column;gap:8px;font-size:11px;}section.section{padding:64px 0;}.final-inner{padding:40px 22px;}.wrap{padding:0 18px;}.mobile-menu a{font-size:24px;padding:12px 0;}.mobile-menu{padding:24px 20px 36px;}/* Hide the desktop "Devis gratuit" CTA in mobile header — it's available in the menu instead */ header.nav .btn.accent{display:none;}/* Make theme toggle button a bit smaller */ .theme-toggle{width:34px;height:34px;}.nav-toggle{width:38px;height:38px;}/* Page-hero h1 — needs explicit override since `.page-hero h1` has higher specificity than bare h1 */ .page-hero h1{font-size:clamp(32px,9vw,48px);}.page-hero{padding-top:calc(var(--header-h) + 36px);padding-bottom:40px;}.page-hero .lede{font-size:15px;margin-top:18px;}.page-hero .crumbs{font-size:11px;}}/* ============ Mobile fine-tuning — shared element rules (≤960px) ============ */ @media (max-width:960px){/* HOME — Hero */ .hero{min-height:auto !important;padding-top:calc(var(--header-h) + 30px) !important;padding-bottom:50px !important;}.hero-title{margin-top:12px !important;}.hero-sub{font-size:15px !important;margin-top:20px !important;}.hero-cta{gap:10px !important;margin-top:26px !important;}.hero-cta .btn{flex:1 1 auto;justify-content:center;}.scroll-cue{display:none !important;}.hero-visual .badge{font-size:11px;padding:6px 10px;top:12px;left:12px;}.hero-meta{padding:10px 12px;font-size:11px;max-width:180px;bottom:12px;right:12px;}.hero-meta strong{font-size:12px;}.ambient{width:320px !important;height:320px !important;top:-100px !important;right:-100px !important;}/* HOME — Marquee strip */ .strip{padding:14px 0;}.strip-track{gap:36px;}.strip-track span{font-size:11px;gap:10px;}/* HOME — Journey timeline */ .timeline{padding-left:36px !important;}.timeline::before,.timeline-fill{left:14px !important;}.step{padding-bottom:56px !important;}.step .dot{left:-29px !important;width:14px !important;height:14px !important;}.step .num{font-size:11px;}.step h3{font-size:22px !important;margin-top:6px !important;}.step p{font-size:14.5px;margin-top:10px !important;}.step ul{gap:6px !important;margin-top:14px !important;}.step ul li{font-size:11.5px !important;padding:5px 10px !important;}.step .duration{margin-top:14px !important;font-size:12px;}.journey-side .lede{font-size:15px;margin-top:14px;}.journey-cta{padding:18px !important;margin-top:24px !important;}.journey-cta strong{font-size:18px !important;}/* HOME — Services preview cards */ .services-grid{gap:16px;}.service{min-height:auto !important;padding:26px 22px !important;}.service h3{font-size:22px !important;}.service ul{margin-top:16px !important;}.service .more{padding-top:20px !important;}/* HOME — Stats band */ .stats{padding:70px 0 !important;}.stats-grid{gap:30px !important;}.stat .val{font-size:clamp(38px,11vw,64px) !important;}.stat .lbl{font-size:13px;margin-top:10px !important;}.stat .bar{margin-top:16px !important;}/* HOME — Values grid */ .values-grid{grid-template-columns:1fr 1fr !important;}.value{padding:26px 22px !important;min-height:auto !important;}/* HOME — Testimonials */ .testimonials{padding:70px 0 30px;}.quote{flex:0 0 280px !important;padding:22px !important;}.quote p{font-size:14px;}/* SUB-PAGES — Page hero blob */ .page-hero .ambient{width:360px;height:360px;top:-120px;right:-120px;}/* SERVICES — Process band */ .process{padding:70px 0 !important;}.pcard{padding:22px !important;min-height:auto !important;}.svc-meta{gap:18px !important;}.feat-list li{padding:12px 14px !important;font-size:14px;}.svc-row{gap:30px !important;padding:60px 0 !important;}.svc-visual{aspect-ratio:4/3;}/* ENTREPRISE — Manifesto */ .manifesto{padding:90px 0 !important;}.manifesto blockquote{font-size:clamp(22px,6vw,32px) !important;}.manifesto cite{margin-top:22px !important;font-size:13px;}/* ENTREPRISE — Timeline (milestones) */ .milestone{grid-template-columns:64px 1fr !important;gap:14px !important;padding:22px 0 !important;}.milestone .yr{font-size:12px !important;}.milestone h4{font-size:16px !important;}.milestone p{font-size:13.5px !important;margin-top:6px !important;}/* ENTREPRISE — Intro card */ .intro{padding:50px 0 !important;gap:30px !important;}.intro-card{padding:24px !important;}.intro-card h3{font-size:20px;}.vals{padding:70px 0 !important;}.vals-grid{gap:18px !important;}/* CONTACT — Form */ .form-card{padding:26px 22px !important;}.form-step h2{font-size:clamp(22px,6vw,28px) !important;margin-bottom:22px !important;}.opt{padding:16px !important;}.field input,.field textarea{font-size:16px !important;/* prevents iOS zoom on focus */ padding:12px 14px !important;}.progress{gap:6px !important;margin-bottom:26px !important;}.progress .pip{height:3px !important;}.step-label{font-size:11px !important;}.channels-stack{margin-top:24px !important;}.ch{grid-template-columns:40px 1fr auto !important;gap:14px !important;padding:14px 16px !important;}.ch .icon{width:40px !important;height:40px !important;font-size:16px;}.ch .info span{font-size:14px !important;}.address-card{padding:18px !important;margin-top:22px !important;}/* FAQ */ .faq-side{position:static !important;}.faq-side h2{font-size:clamp(28px,7vw,40px);}.qa summary{padding:18px 14px !important;font-size:15px;gap:14px !important;}.qa .body{padding:0 14px 18px !important;font-size:14px;}.faq-cats{gap:8px !important;flex-wrap:wrap;}.faq-cat{font-size:12.5px !important;padding:6px 12px !important;}/* REFERENCES — Filters + grid + count strip */ .filters{gap:8px !important;flex-wrap:wrap;}.filter{font-size:12.5px !important;padding:8px 14px !important;}.count-strip{margin-top:50px !important;}.count-cell{padding:26px 20px !important;}.count-cell .v{font-size:clamp(32px,10vw,48px) !important;}.count-cell small{font-size:11px !important;}.ref{padding:18px !important;}.ref h3{font-size:18px !important;}.ref .arrow{width:34px !important;height:34px !important;right:16px !important;bottom:16px !important;}/* Generic eyebrow */ .eyebrow{font-size:11px;}}/* ============ Mobile animation performance (≤960px) ============ Mobile GPUs are weaker — shorten transitions,drop backdrop-filter blurs,simplify expensive effects,and rely strictly on transform/opacity. */ @media (max-width:960px){/* Drop expensive blur/backdrop filters on mobile */ header.nav.scrolled,header.nav.solid,body.menu-open header.nav,.hero-visual .badge,.ref .arrow,.lightbox,#tweaksPanel{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}/* Shorter,GPU-only transitions */ .reveal{transition:opacity .55s ease,transform .55s ease !important;}.step{transition:opacity .5s ease,transform .5s ease !important;}.service,.value,.ref,.quote,.ch,.opt,.loc,.pcard,.intro-card{transition:transform .3s ease,border-color .25s,background .25s !important;}.btn,.filter,.faq-cat,.cat-btn,.icon-btn{transition:transform .2s ease,background .2s,color .2s !important;}.step .dot,.step ul li{transition:background .25s,border-color .25s !important;}.timeline-fill{transition:height .08s linear !important;}/* Disable hover-lift on touch devices (no hover state,avoids stuck transforms) */ .service:hover,.value:hover,.ref:hover,.ch:hover,.opt:hover,.loc:hover,.pcard:hover{transform:none !important;}.quote:hover,.channel:hover,.filter:hover,.cat-btn:hover{transform:none !important;}/* Slow down endless marquees on mobile — looks less frantic,lower CPU */ .strip-track{animation-duration:50s !important;}.quotes-track{animation-duration:80s !important;}/* Avoid layout-thrashing — let the browser optimize compositing */ .step,.reveal,.ref,.service,.quote,.quotes-track,.strip-track{will-change:transform,opacity;}}/* Honour reduced-motion preference */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.15s !important;scroll-behavior:auto !important;}.strip-track,.quotes-track{animation:none !important;}.reveal,.step{opacity:1 !important;transform:none !important;}}/* ============ Mobile fine-tuning — tight phones (≤480px) ============ */ @media (max-width:480px){.hero-visual{aspect-ratio:5/4;}.hero-meta{display:none;}.stats-grid{grid-template-columns:1fr 1fr;gap:24px !important;}.values-grid{grid-template-columns:1fr !important;}.vals-grid{grid-template-columns:1fr 1fr !important;}.count-strip{grid-template-columns:1fr !important;}.count-cell{border-right:0 !important;border-bottom:1px solid var(--line);}.count-cell:last-child{border-bottom:0;}.channels{grid-template-columns:1fr;}.strip-track span{font-size:10px;gap:8px;}.strip-track{gap:24px !important;}.quote{flex:0 0 260px !important;}/* Final CTA looks better edge-to-edge on tight screens */ .final::before{inset:0 !important;border-radius:0 !important;}.final{padding:0 !important;}.final-inner{padding:60px 22px !important;}/* Process grid stacks fully */ .process-grid{grid-template-columns:1fr !important;}/* Hero CTAs full width */ .hero-cta{flex-direction:column;}.hero-cta .btn{width:100%;}}/* ============ Mobile polish — fluidité & cohérence (≤960px) ============ */ @media (max-width:960px){/* Header plus aéré et plus discret au scroll */ header.nav{transition:background .25s ease,border-color .25s ease;}header.nav .nav-inner{padding:0 4px;}header.nav .btn.accent{box-shadow:none;}/* Menu burger :transition plus douce + safe-area iPhone */ .mobile-menu{transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1);padding-bottom:max(40px,env(safe-area-inset-bottom));}.mobile-menu a{border-bottom:1px solid var(--line);transform:translateY(8px);opacity:0;transition:opacity .35s ease,transform .35s ease,color .2s,padding .25s;}body.menu-open .mobile-menu a{transform:translateY(0);opacity:1;}body.menu-open .mobile-menu a:nth-child(1){transition-delay:.05s;}body.menu-open .mobile-menu a:nth-child(2){transition-delay:.09s;}body.menu-open .mobile-menu a:nth-child(3){transition-delay:.13s;}body.menu-open .mobile-menu a:nth-child(4){transition-delay:.17s;}body.menu-open .mobile-menu a:nth-child(5){transition-delay:.21s;}body.menu-open .mobile-menu a:nth-child(6){transition-delay:.25s;}body.menu-open .mobile-menu a:nth-child(7){transition-delay:.29s;}body.menu-open .mobile-menu .menu-cta{transition-delay:.35s;}/* Boutons :surface tactile garantie 44px (recommandation Apple) */ .btn,.filter,.cat-btn,.faq-cat{min-height:44px;}/* Inputs tactiles :pas de zoom iOS sur focus,padding confortable */ input,textarea,select{font-size:16px !important;}/* Espacements verticaux unifiés entre sections */ .page-hero{padding-top:calc(var(--header-h) + 40px) !important;padding-bottom:36px !important;}.page-hero .crumbs{font-size:11px;}.page-hero h1{margin-top:12px;}.page-hero .lede{margin-top:18px;font-size:15.5px;line-height:1.55;}/* Final CTA mobile — toujours lisible */ .final-inner{padding:50px 24px !important;}.final h2{max-width:100% !important;}.final-lede{max-width:100% !important;font-size:15.5px;}.final .btn{padding:14px 22px;font-size:14px;}/* Footer plus aéré sur mobile */ footer.site{padding:50px 0 30px;}.foot-grid h5{margin-bottom:10px;font-size:11px;}.foot-grid a{padding:3px 0;font-size:13.5px;}/* Partner cards :retrait du glyph qui dépasse mal sur mobile */ .partner .glyph{font-size:70px !important;right:-8px;top:-8px;}.partner .name{font-size:18px !important;}/* Reveal :amplitude réduite sur mobile (plus discret) */ .reveal{transform:translateY(20px);}/* Désactive le hover-cursor sur tactile (déjà fait mais on insiste) */ @media (hover:none){.ref:hover,.service:hover,.value:hover,.quote:hover{transform:none !important;box-shadow:none !important;}.ref:hover .arrow{background:rgba(251,247,240,.15);transform:none;}.partner:hover{transform:none !important;}.partner:hover .glyph{transform:none !important;}}/* Lien actif dans la nav mobile */ .mobile-menu a.active::after{color:var(--accent);transform:translateX(4px);}}/* Tight phones — derniers ajustements */ @media (max-width:600px){/* Logo header un peu plus petit */ header.nav .brand img.logo{height:20px;}/* Hero indice scroll moins envahissant (déjà caché ≤960,mais belt+suspenders) */ .scroll-cue{display:none;}/* Page-hero ambient blob discret */ .page-hero .ambient{width:260px;height:260px;top:-90px;right:-90px;opacity:.7;}/* Espace au-dessus des CTAs hero */ .hero-cta{margin-top:22px;gap:8px;}.hero-cta .btn{padding:14px 18px;font-size:14px;}}