/* ═══════════════════════════════════════════════════════════ RESPONSIVE WEB SYSTEMS — Design system v2 · dark / minimal Direction : "atelier technique". Vernaculaire emprunté aux métiers du portefeuille (géomatique, GPAO, ERP) : grille de coordonnées, cotes en monospace, filets d'un pixel. ═══════════════════════════════════════════════════════════ */ :root{ /* Palette — encre profonde + olive de marque, rien d'autre */ --ink-900:#0B0C0A; --ink-800:#111310; --ink-700:#171A15; --ink-600:#1F231C; --line:#2A2F26; --line-soft:#20241D; --fog-400:#8A8F84; --fog-200:#C3C7BC; --paper:#F2F3EE; --olive:#BCC444; /* aplats de marque : boutons, puces, barres */ --olive-dim:#8E9535; --olive-ink:#BCC444; /* olive en TEXTE / icône (assombri en clair) */ --on-olive:#0B0C0A; /* texte posé SUR un aplat olive — toujours sombre */ --olive-glow:rgba(188,196,68,.14); --scrim:11,12,10; /* voile des photos et du header */ --shadow-lg:0 28px 70px rgba(0,0,0,.7); --step-0:17.5px; --step-1:21px; --step-2:26px; --step-3:clamp(28px,3.4vw,42px); --step-4:clamp(36px,5.6vw,68px); --r:4px; /* rayon quasi nul, assumé */ --gut:clamp(20px,4vw,32px); --maxw:1560px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{ background:var(--ink-900);color:var(--fog-200); font-family:'Inter',system-ui,sans-serif;font-size:var(--step-0);line-height:1.7; -webkit-font-smoothing:antialiased; /* grille de coordonnées, très discrète */ background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px); background-size:64px 64px;background-position:-1px -1px; } h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;color:var(--paper);font-weight:500;line-height:1.1;letter-spacing:-.02em} h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-1)} p{max-width:68ch} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} svg{display:block} ::selection{background:var(--olive);color:var(--on-olive)} :focus-visible{outline:2px solid var(--olive);outline-offset:3px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fog-400)} .rule{height:1px;background:var(--line);border:0} .accent{color:var(--olive-ink)} /* ── Icônes monochromes : trait 1.5, currentColor, jamais de fond ── */ .i{width:22px;height:22px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;color:var(--olive-ink)} .i-lg{width:30px;height:30px} /* ── Barre de langue + header ── */ .topbar{border-bottom:1px solid var(--line-soft);background:var(--ink-900)} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px} .lang{display:flex;gap:2px;align-items:center} .lang button{background:none;border:0;color:var(--fog-400);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;padding:3px 7px;cursor:pointer;border-radius:var(--r)} .lang button[aria-pressed="true"]{color:var(--on-olive);background:var(--olive)} .lang span{color:var(--line);font-size:11px} header{position:sticky;top:0;z-index:60;background:rgba(var(--scrim),.82);backdrop-filter:blur(14px) saturate(120%);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px} .brand{display:flex;align-items:center;flex:none} .brand img{height:38px;width:auto;transition:opacity .2s} .brand:hover img{opacity:.82} footer .brand img{height:38px;margin-bottom:16px} nav ul{display:flex;gap:2px;list-style:none;align-items:center} nav ul>li>a{position:relative;display:block;padding:10px 17px;font-size:15.5px;color:var(--fog-400);letter-spacing:.005em;transition:color .2s} nav ul>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:1px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)} nav ul>li>a:hover{color:var(--paper)} nav ul>li>a:hover::after{transform:scaleX(1)} nav ul>li>a.on{color:var(--paper)} nav ul>li>a.on::after{transform:scaleX(1)} .sub-p{position:relative} .sub-p>a::after{display:none} .sub-p>a>.caret{display:inline-block;width:5px;height:5px;margin-left:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:.2s} .sub-p:hover>a>.caret{opacity:1;transform:translateY(0) rotate(45deg)} .sub{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;background:var(--ink-800);border:1px solid var(--line);border-radius:6px;padding:8px;display:none;box-shadow:var(--shadow-lg)} .sub-p:hover .sub,.sub-p:focus-within .sub{display:block} .sub::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .sub a{display:flex;gap:12px;align-items:center;padding:12px 13px;font-size:15px;border-radius:4px;color:var(--fog-200);transition:.16s} .sub a:hover{background:var(--ink-600);color:var(--paper)} .sub a .i{width:17px;height:17px;flex:none} .burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);width:40px;height:40px;color:var(--paper);cursor:pointer} .burger span,.burger span::before,.burger span::after{display:block;width:16px;height:1.5px;background:currentColor;margin:0 auto;position:relative} .burger span::before,.burger span::after{content:"";position:absolute} .burger span::before{top:-5px}.burger span::after{top:5px} /* ── Boutons ── */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500;padding:13px 24px;border-radius:var(--r);border:1px solid var(--olive);background:var(--olive);color:var(--on-olive);cursor:pointer;transition:.18s;white-space:nowrap} .btn:hover{background:var(--olive-dim);border-color:var(--olive-dim);color:var(--on-olive)} .btn .i{color:currentColor;width:16px;height:16px;stroke-width:1.8} .btn.line{background:transparent;color:var(--paper);border-color:var(--line)} .btn.line:hover{border-color:var(--olive);color:var(--olive);background:transparent} .btn.sm{padding:10px 17px;font-size:14px} .btn[disabled]{opacity:.35;cursor:not-allowed} /* ── Sections ── */ section{padding:clamp(56px,8vw,104px) 0;position:relative} .sec-head{margin-bottom:44px;max-width:760px} .sec-head .mono{display:block;margin-bottom:14px} .sec-head p{color:var(--fog-400);margin-top:14px} .center{margin-left:auto;margin-right:auto;text-align:center} .center p{margin-left:auto;margin-right:auto} /* ── HERO ── */ .hero{padding:clamp(60px,9vw,116px) 0 clamp(50px,7vw,90px);overflow:hidden;position:relative} .hero::after{content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;background:radial-gradient(circle,var(--olive-glow),transparent 62%);pointer-events:none} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center;position:relative;z-index:1} .hero h1{margin:18px 0 22px} .hero h1 i{font-style:normal;color:var(--olive-ink)} .hero .lede{color:var(--fog-400);font-size:var(--step-1);max-width:52ch} .hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .hero .meta{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:26px;flex-wrap:wrap} .hero .meta div b{display:block;font-family:'Space Grotesk';font-size:22px;color:var(--paper);font-weight:500} .hero .meta div span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-400)} /* Plaque photo duotone — signature visuelle */ .plate{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-800)} .plate img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.72);mix-blend-mode:luminosity} .plate::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,var(--olive) 0%,#3A5A6B 100%);opacity:.9;z-index:1} .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--scrim),.92),rgba(var(--scrim),.15) 55%);z-index:3} .plate img{position:relative;z-index:2} .plate .cap{position:absolute;left:16px;bottom:14px;z-index:4} .plate .cap b{display:block;font-family:'Space Grotesk';color:var(--paper);font-weight:500;font-size:15px} .plate .corner{position:absolute;z-index:4;width:12px;height:12px;border:1px solid rgba(242,243,238,.35)} .plate .corner.tl{top:10px;left:10px;border-right:0;border-bottom:0} .plate .corner.br{bottom:10px;right:10px;border-left:0;border-top:0} .devices{position:relative;padding:8px;display:flex;align-items:center;justify-content:flex-end} .devices img{display:block;width:100%;height:auto;max-width:660px;margin-left:auto; aspect-ratio:1327/980;object-fit:contain;align-self:center; filter:drop-shadow(0 30px 70px rgba(0,0,0,.55));animation:float 7s ease-in-out infinite} .devices::before{content:"";position:absolute;inset:6% 4%;background:radial-gradient(circle,var(--olive-glow),transparent 65%);filter:blur(30px);z-index:-1} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media(prefers-reduced-motion:reduce){.devices img{animation:none}} .hero .plate{aspect-ratio:4/5} .plate-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .plate-row .plate{aspect-ratio:1/1} /* ── Cartes ── */ .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.2s;position:relative;display:flex;flex-direction:column;gap:12px} .card:hover{border-color:var(--olive-dim);background:var(--ink-700)} .card h3{font-size:17.5px} .card p,.card li{color:var(--fog-400);font-size:15.5px} .card ul{list-style:none;display:grid;gap:2px} .card li{padding-left:16px;position:relative} .card li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--olive)} .card .idx{position:absolute;top:22px;right:24px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--line);letter-spacing:.1em} a.card:hover h3{color:var(--olive-ink)} .card .more{margin-top:auto;padding-top:6px;font-family:'Space Grotesk';font-size:14px;color:var(--olive-ink);display:flex;align-items:center;gap:6px} /* Étapes numérotées (la séquence porte une information : c'est un processus) */ .steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)} .stp{counter-increment:s;display:grid;grid-template-columns:82px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start} .stp::before{content:"0" counter(s);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--olive-ink);letter-spacing:.1em;padding-top:4px} .stp h3{margin-bottom:6px} .stp p{color:var(--fog-400);font-size:16px} /* ── Portfolio ── */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px} .chip{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:9px 15px;border-radius:var(--r);border:1px solid var(--line);background:transparent;color:var(--fog-400);cursor:pointer;transition:.18s} .chip:hover{color:var(--paper);border-color:var(--fog-400)} .chip[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--on-olive)} .proj{padding:0;overflow:hidden} .proj .ph{aspect-ratio:16/10;position:relative} .proj .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.6) contrast(1.1);transition:.4s} .proj:hover .ph img{filter:grayscale(.2) brightness(.78) contrast(1.05);transform:scale(1.03)} .proj .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink-800),rgba(var(--scrim),.25));} .proj .ph .flag{position:absolute;top:12px;left:12px;z-index:2;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:rgba(var(--scrim),.7);border:1px solid var(--line);padding:4px 8px;border-radius:var(--r)} .proj .bd{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1} .proj .bd h3{font-size:18.5px} .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:8px} .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--fog-400);border:1px solid var(--line);border-radius:var(--r);padding:3px 7px} .live{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--olive-ink);letter-spacing:.1em} /* ── Chiffres ── */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-800)} .kpi{padding:32px 26px;border-right:1px solid var(--line)} .kpi:last-child{border-right:0} .kpi b{display:block;font-family:'Space Grotesk';font-size:clamp(30px,4vw,46px);color:var(--olive-ink);font-weight:500;line-height:1} .kpi span{display:block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-400)} /* ── Page hero (pages internes) ── */ .phero{padding:clamp(46px,6vw,80px) 0 clamp(34px,4vw,52px);border-bottom:1px solid var(--line);position:relative;overflow:hidden} .phero::after{content:"";position:absolute;top:-60%;right:-5%;width:46vw;height:46vw;background:radial-gradient(circle,var(--olive-glow),transparent 60%);pointer-events:none} .crumb{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog-400);margin-bottom:18px} .crumb a:hover{color:var(--olive-ink)} .phero p{color:var(--fog-400);margin-top:16px;font-size:var(--step-1)} /* ── Split ── */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .ticks{list-style:none;display:grid;gap:2px;margin-top:8px} .ticks li{padding:9px 0 9px 30px;position:relative;color:var(--fog-400);border-bottom:1px solid var(--line-soft)} .ticks li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:6px;border-left:1.5px solid var(--olive);border-bottom:1.5px solid var(--olive);transform:rotate(-45deg)} /* ── Formulaires ── */ .panel{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px)} label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-400);margin:16px 0 7px} input,select,textarea{width:100%;padding:13px 15px;background:var(--ink-900);border:1px solid var(--line);border-radius:var(--r);color:var(--paper);font:inherit;font-size:16px} input:focus,select:focus,textarea:focus{border-color:var(--olive);outline:none} input::placeholder,textarea::placeholder{color:#5C6156} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* ── Assistant de devis ── */ .wiz{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start} .wiz-main{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .wiz-bar{padding:18px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .track{flex:1;min-width:140px;height:2px;background:var(--line);border-radius:2px;overflow:hidden} .track i{display:block;height:100%;width:0;background:var(--olive);transition:width .35s ease} .wiz-body{padding:clamp(24px,3vw,36px)} .wiz-body h2{font-size:var(--step-2);margin-bottom:8px} .wiz-body .hint{color:var(--fog-400);font-size:15.5px;margin-bottom:26px} .stepx{display:none;animation:fade .35s ease} .stepx.on{display:block} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .opts{display:grid;gap:10px} .opts.two{grid-template-columns:1fr 1fr} .opt{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;background:var(--ink-900);transition:.16s;position:relative} .opt:hover{border-color:var(--fog-400)} .opt input{position:absolute;opacity:0;width:0;height:0} .opt .bx{width:16px;height:16px;border:1px solid var(--line);border-radius:2px;flex:none;margin-top:3px;position:relative;transition:.16s} .opt input[type=radio]+.bx{border-radius:50%} .opt:has(input:checked){border-color:var(--olive);background:var(--olive-glow)} .opt:has(input:checked) .bx{border-color:var(--olive);background:var(--olive)} .opt:has(input:checked) .bx::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border-right:1.6px solid var(--on-olive);border-bottom:1.6px solid var(--on-olive);transform:rotate(42deg)} .opt:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:2px} .opt .tx b{display:block;font-family:'Space Grotesk';font-weight:500;color:var(--paper);font-size:16px;margin-bottom:3px} .opt .tx span{color:var(--fog-400);font-size:14px;line-height:1.55;display:block} .opt .px{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--olive-dim);white-space:nowrap;padding-left:8px} .wiz-foot{padding:18px 26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px} .wiz-side{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:sticky;top:96px} .wiz-side h3{font-size:15px;margin-bottom:4px} .est{font-family:'Space Grotesk';font-size:30px;color:var(--olive-ink);font-weight:500;margin:14px 0 2px;letter-spacing:-.02em} .est-n{color:var(--fog-400);font-size:12px;line-height:1.5;display:block;margin-bottom:16px} #recap{list-style:none;display:grid;gap:0;font-size:14.5px} #recap li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft);color:var(--fog-200)} #recap li span{color:var(--fog-400);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;flex:none;max-width:44%} #recap li.none{color:var(--fog-400);border:0;justify-content:flex-start} .hidden{display:none!important} /* ── Bande CTA ── */ .band{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-800);padding:clamp(28px,4vw,46px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden} .band::before{content:"";position:absolute;left:-10%;bottom:-120%;width:50%;height:240%;background:radial-gradient(circle,var(--olive-glow),transparent 60%)} .band>*{position:relative} .band p{color:var(--fog-400);margin-top:6px} /* ── Table ── */ .tbl{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .tbl th{background:var(--ink-700);color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;text-align:left;font-weight:400} .tbl td{padding:12px 14px;border-top:1px solid var(--line);color:var(--fog-400);vertical-align:top} .tbl tr:nth-child(even) td{background:var(--ink-800)} /* ── Footer ── */ footer{border-top:1px solid var(--line);background:var(--ink-800);margin-top:clamp(50px,7vw,90px)} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px;padding:clamp(38px,5vw,60px) 0 40px} .fgrid h4{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-400);font-weight:400;margin-bottom:14px} .fgrid a{display:block;padding:6px 0;font-size:15px;color:var(--fog-200)} .fgrid a:hover{color:var(--olive-ink)} .fgrid p{font-size:15px;color:var(--fog-400)} .fbot{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} /* ── Responsive ── */ @media(max-width:1024px){ .wiz{grid-template-columns:1fr} .wiz-side{position:static} .g4{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .hero-grid,.split{grid-template-columns:1fr} .g3{grid-template-columns:repeat(2,1fr)} .kpis{grid-template-columns:repeat(2,1fr)} .kpi:nth-child(2){border-right:0} .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)} .fgrid{grid-template-columns:1fr 1fr} /* Le