:root{ --ink:#0c1117; --ink-2:#39434f; --ink-3:#697687; --line:#e3e7ec; --bg:#ffffff; --bg-2:#f7f8fa; --bg-3:#0c1117; --accent:#1f4fd8; --accent-soft:#eef2fe; --max:1160px; --r:10px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--max); margin:0 auto; padding:0 24px} .eyebrow{font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 14px} h1,h2,h3,h4{letter-spacing:-0.022em; line-height:1.15; margin:0} h1{font-size:clamp(2.3rem,5.4vw,3.9rem); font-weight:680} h2{font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:660} h3{font-size:1.16rem; font-weight:640} p{margin:0 0 1em} .lead{font-size:clamp(1.02rem,1.6vw,1.24rem); color:var(--ink-2); max-width:62ch} .muted{color:var(--ink-3)} /* header */ header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)} .nav{display:flex; align-items:center; gap:32px; height:68px} .brand{font-weight:680; letter-spacing:-.02em; text-decoration:none; font-size:1.05rem} .brand span{color:var(--accent)} .nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0; margin-left:auto} .nav a{text-decoration:none; color:var(--ink-2); font-size:15px; font-weight:500} .nav a:hover{color:var(--ink)} .nav .btn{margin-left:8px} @media(max-width:880px){ .nav ul{display:none} .nav .btn{margin-left:auto} } .btn{display:inline-flex; align-items:center; gap:8px; border-radius:var(--r); font-weight:600; font-size:15px; padding:11px 20px; text-decoration:none; border:1px solid transparent; transition:.15s} .btn-primary{background:var(--accent); color:#fff} .btn-primary:hover{background:#1a44bd} .btn-ghost{border-color:var(--line); color:var(--ink)} .btn-ghost:hover{border-color:#c7cfd9; background:var(--bg-2)} .btn-lg{padding:14px 26px; font-size:16px} /* hero */ .hero{padding:88px 0 64px; border-bottom:1px solid var(--line)} .hero h1{max-width:17ch} .hero .lead{margin-top:22px} .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center} .hero-note{font-size:14px; color:var(--ink-3); margin-top:18px} /* proof bar */ .proof{border-bottom:1px solid var(--line); background:var(--bg-2)} .proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)} .proof-grid > div{background:var(--bg-2); padding:26px 22px} .proof-num{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:680; letter-spacing:-.03em} .proof-lab{font-size:13.5px; color:var(--ink-3); margin-top:4px; line-height:1.4} @media(max-width:820px){ .proof-grid{grid-template-columns:repeat(2,1fr)} } section{padding:82px 0} .sec-head{max-width:70ch; margin-bottom:44px} .sec-head p{margin-top:14px} /* cases */ .cases{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .case{border:1px solid var(--line); border-radius:14px; padding:28px; display:flex; flex-direction:column} .case .tag{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-weight:650; margin-bottom:16px} .case .kpi{font-size:2.05rem; font-weight:690; letter-spacing:-.03em; line-height:1.05} .case .kpi small{display:block; font-size:13.5px; font-weight:500; color:var(--ink-3); letter-spacing:0; margin-top:6px} .case p{margin-top:18px; font-size:15.5px; color:var(--ink-2)} .case .stack{margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3)} @media(max-width:920px){ .cases{grid-template-columns:1fr} } /* engagement */ .eng{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .eng-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .eng-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px; display:flex; flex-direction:column} .eng-card.featured{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .eng-card h3{font-size:1.28rem} .eng-meta{display:flex; gap:18px; margin:16px 0 20px; font-size:13.5px; color:var(--ink-3); flex-wrap:wrap} .eng-meta b{color:var(--ink); font-weight:620} .eng-card ul{margin:0 0 24px; padding-left:20px; font-size:15.5px; color:var(--ink-2)} .eng-card li{margin:7px 0} .eng-card .btn{margin-top:auto; justify-content:center} @media(max-width:920px){ .eng-grid{grid-template-columns:1fr} } /* services */ .srv{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden} .srv > div{background:#fff; padding:30px} .srv h3{margin-bottom:10px} .srv p{font-size:15.5px; color:var(--ink-2); margin:0} @media(max-width:920px){ .srv{grid-template-columns:1fr} } /* method */ .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:s} .step{border-top:2px solid var(--ink); padding-top:18px} .step:before{counter-increment:s; content:"0" counter(s); font-size:13px; font-weight:680; color:var(--accent); display:block; margin-bottom:8px} .step h3{font-size:1.05rem; margin-bottom:8px} .step p{font-size:15px; color:var(--ink-2); margin:0} @media(max-width:920px){ .steps{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .steps{grid-template-columns:1fr} } /* commitments */ .comm{display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px} .comm div{padding:20px 0; border-bottom:1px solid var(--line); display:flex; gap:16px; align-items:baseline} .comm dt{font-weight:620; min-width:190px; font-size:15.5px} .comm dd{margin:0; color:var(--ink-2); font-size:15.5px} @media(max-width:820px){ .comm{grid-template-columns:1fr} .comm div{flex-direction:column; gap:4px} } /* studio */ .studio{background:var(--bg-3); color:#e8ecf2} .studio h2{color:#fff} .studio .lead{color:#aeb9c7} .studio-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:start} .studio dl{margin:0; display:grid; gap:0} .studio dl > div{padding:16px 0; border-bottom:1px solid #1e2833; display:flex; justify-content:space-between; gap:24px} .studio dt{color:#8f9cad; font-size:14.5px} .studio dd{margin:0; font-size:14.5px; text-align:right; color:#e8ecf2} @media(max-width:920px){ .studio-grid{grid-template-columns:1fr; gap:36px} } /* faq */ .faq details{border-bottom:1px solid var(--line); padding:20px 0} .faq summary{cursor:pointer; font-weight:620; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:20px} .faq summary::-webkit-details-marker{display:none} .faq summary:after{content:"+"; color:var(--accent); font-weight:600} .faq details[open] summary:after{content:"−"} .faq p{margin:14px 0 0; color:var(--ink-2); max-width:78ch; font-size:15.5px} /* cta */ .cta{background:var(--accent-soft); border-top:1px solid #d9e1fb} .cta-inner{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap} .cta h2{max-width:20ch} footer{border-top:1px solid var(--line); padding:52px 0 40px; font-size:14.5px; color:var(--ink-3)} .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px} footer h4{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:14px} footer ul{list-style:none; margin:0; padding:0} footer li{margin:8px 0} footer a{text-decoration:none; color:var(--ink-2)} footer a:hover{color:var(--ink)} .legal{border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:13.5px} @media(max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} } /* pages legales */ .doc{max-width:820px;margin:0 auto;padding:72px 24px 96px} .doc h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:10px} .doc h2{font-size:1.32rem;font-weight:650;margin:44px 0 14px;letter-spacing:-.015em} .doc p{color:var(--ink-2);margin:0 0 1.05em} .doc ul{color:var(--ink-2);padding-left:22px;margin:0 0 1.2em} .doc li{margin:8px 0} .doc a{color:var(--accent)} .doc code{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:.9em} .doc-date{color:var(--ink-3);font-size:14px;margin-bottom:34px!important} .doc-intro{border-left:3px solid var(--accent);padding-left:18px;background:var(--bg-2);padding:16px 18px;border-radius:0 8px 8px 0} .doc-more{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);font-size:15px} .doc table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:14.5px;display:block;overflow-x:auto} .doc th,.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--ink-2)} .doc th{background:var(--bg-2);color:var(--ink);font-weight:620;white-space:nowrap} .doc-back{display:inline-block;margin-bottom:26px;font-size:14.5px;color:var(--ink-3);text-decoration:none} .doc-back:hover{color:var(--ink)} /* lien d'evitement : hors ecran, ramene au premier Tab */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff; padding:11px 18px;border-radius:0 0 8px 0;font-size:14.5px;text-decoration:none} .skip:focus{left:0} main:focus{outline:none} /* ------------------------------------------------------------------ Complements v2.1 : catalogue de services, demande de devis, menu mobile, barre d'action. Meme systeme de variables que la base. ------------------------------------------------------------------ */ /* menu mobile :
, aucune ligne de JS */ .menu{display:none; margin-left:auto; position:relative} .menu > summary{list-style:none; cursor:pointer; width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r); display:flex; align-items:center; justify-content:center; gap:4px; flex-direction:column} .menu > summary::-webkit-details-marker{display:none} .menu > summary span{display:block; width:17px; height:1.5px; background:var(--ink)} .menu[open] > summary span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .menu[open] > summary span:nth-child(2){opacity:0} .menu[open] > summary span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .menu > summary span{transition:.18s} .menu-panel{position:absolute; right:0; top:52px; width:min(80vw,290px); background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:0 18px 40px rgba(12,17,23,.12)} .menu-panel a{display:block; padding:11px 13px; border-radius:8px; text-decoration:none; color:var(--ink-2); font-size:15.5px} .menu-panel a:hover{background:var(--bg-2); color:var(--ink)} .menu-panel .btn{width:100%; justify-content:center; margin-top:6px} @media(max-width:880px){ .menu{display:block} .nav > .btn{display:none} } /* rappel de positionnement sous le hero */ .hero-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px} .hero-tags span{font-size:13px; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px} /* catalogue de services */ .cat{display:grid; grid-template-columns:repeat(2,1fr); gap:22px} .cat-card{border:1px solid var(--line); border-radius:14px; padding:30px 30px 26px; background:#fff; display:flex; flex-direction:column} .cat-card h3{font-size:1.24rem} .cat-card > p{margin:12px 0 20px; font-size:15.5px; color:var(--ink-2)} .cat-card ul{list-style:none; margin:0 0 22px; padding:0; columns:2; column-gap:26px} .cat-card li{font-size:14.8px; color:var(--ink-2); padding:5px 0 5px 18px; position:relative; break-inside:avoid} .cat-card li:before{content:""; position:absolute; left:0; top:13px; width:7px; height:7px; border-radius:2px; background:var(--accent); opacity:.55} .cat-foot{margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-3); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap} .cat-foot b{color:var(--ink); font-weight:620} @media(max-width:920px){ .cat{grid-template-columns:1fr} .cat-card ul{columns:1} } /* bandeau d'engagements courts */ .pledge{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:40px} .pledge > div{background:#fff; padding:22px 24px} .pledge b{display:block; font-size:15px; font-weight:640; margin-bottom:5px} .pledge span{font-size:14px; color:var(--ink-3); line-height:1.45; display:block} @media(max-width:920px){ .pledge{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .pledge{grid-template-columns:1fr} } /* demande de devis */ .quote{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .quote-grid{display:grid; grid-template-columns:1.35fr .9fr; gap:52px; align-items:start} .form{background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px} .f-row{display:grid; grid-template-columns:1fr 1fr; gap:16px} .f{margin-bottom:16px} .f label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--ink)} .f label .opt{font-weight:500; color:var(--ink-3)} .f input,.f select,.f textarea{width:100%; font:inherit; font-size:15.5px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:9px; padding:11px 13px; transition:.15s} .f textarea{min-height:132px; resize:vertical; line-height:1.55} .f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .f input:invalid:not(:placeholder-shown){border-color:#c8442f} .checks{display:grid; grid-template-columns:repeat(3,1fr); gap:8px} .checks label{display:flex; align-items:flex-start; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px; cursor:pointer; margin:0; transition:.15s} .checks label:hover{border-color:#c7cfd9; background:var(--bg-2)} .checks input{width:16px; height:16px; margin:2px 0 0; accent-color:var(--accent); flex:none} .checks input:checked + span{color:var(--ink); font-weight:600} .f-send{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px} .f-note{font-size:13.5px; color:var(--ink-3); margin:14px 0 0; line-height:1.5} .f-note a{color:var(--accent)} .f-status{font-size:14px; margin:14px 0 0; color:var(--accent); font-weight:600; display:none} .f-status.on{display:block} .aside h3{font-size:1.06rem; margin-bottom:10px} .aside p{font-size:15.2px; color:var(--ink-2)} .aside .box{border-left:3px solid var(--accent); padding:2px 0 2px 18px; margin-bottom:30px} .aside dl{margin:0; border-top:1px solid var(--line)} .aside dl > div{padding:14px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font-size:14.5px} .aside dt{color:var(--ink-3)} .aside dd{margin:0; text-align:right; font-weight:600} @media(max-width:980px){ .quote-grid{grid-template-columns:1fr; gap:38px} } @media(max-width:680px){ .f-row{grid-template-columns:1fr} .checks{grid-template-columns:1fr 1fr} .form{padding:24px 20px} } @media(max-width:430px){ .checks{grid-template-columns:1fr} } /* barre d'action mobile */ .dock{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:10px; padding:10px 14px; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line)} .dock .btn{flex:1; justify-content:center} @media(max-width:880px){ .dock{display:flex} body{padding-bottom:70px} } /* .btn pose sur un vrai