:root{ --ink:#12151a; --ink-2:#1c2129; --ink-3:#2a313c; --accent:#ff7a1a; --accent-d:#e8650a; --accent-soft:#fff1e6; --bg:#f5f6f8; --card:#ffffff; --text:#1b1f27; --muted:#5b6472; --line:#e3e6ea; --ok:#1f9d55; --radius:14px; --shadow:0 1px 2px rgba(18,21,26,.06),0 6px 20px rgba(18,21,26,.06); --w:1160px; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.65;color:var(--text);background:var(--bg)} img{max-width:100%;height:auto;display:block} picture{display:block} .hero-art img{border-radius:12px} a{color:#c2520a} a:hover{color:var(--accent-d)} h1,h2,h3{line-height:1.2;color:var(--ink);margin:0 0 .6em} h1{font-size:clamp(1.9rem,4.2vw,3rem);letter-spacing:-.02em} h2{font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.01em} h3{font-size:1.15rem} p{margin:0 0 1em} ul,ol{margin:0 0 1.1em;padding-left:1.3em} li{margin:.3em 0} .wrap{max-width:var(--w);margin:0 auto;padding-inline:20px} .skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99} /* header */ .top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--ink-3)} .top .wrap{display:flex;align-items:center;gap:16px;min-height:66px} .logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.15rem;white-space:nowrap} .logo small{display:block;font-weight:500;font-size:.72rem;color:#aab2bf;letter-spacing:.02em} .logo:hover{color:#fff} .nav{margin-left:auto;display:flex;align-items:center;gap:4px} .nav a{color:#dfe3e9;text-decoration:none;font-size:.93rem;padding:8px 10px;border-radius:8px} .nav a:hover,.nav a[aria-current=page]{background:var(--ink-3);color:#fff} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--ink)!important;font-weight:800;text-decoration:none;padding:12px 18px;border-radius:10px;border:0;cursor:pointer;font-size:1rem;line-height:1.2;white-space:nowrap} .btn:hover{background:#ff8c38} .btn svg{width:18px;height:18px;flex:none} .btn-ghost{background:transparent;color:#fff!important;border:1.5px solid #4a5361} .btn-ghost:hover{background:var(--ink-3)} .btn-lg{padding:15px 22px;font-size:1.1rem} .top .btn{padding:10px 14px;font-size:.95rem;margin-left:8px} .burger{display:none;margin-left:auto;background:none;border:1.5px solid #4a5361;color:#fff;border-radius:8px;padding:8px 10px;font-size:.95rem;cursor:pointer} @media (max-width:1020px){ .burger{display:inline-block} .nav{display:none;position:absolute;left:0;right:0;top:66px;background:var(--ink);flex-direction:column;align-items:stretch;padding:10px 20px 18px;border-bottom:1px solid var(--ink-3)} .nav.open{display:flex} .nav a{padding:12px 10px;font-size:1rem} .top .btn.hide-m{display:none} } /* hero */ .hero{background:radial-gradient(1200px 500px at 85% -10%,#2a3240 0,transparent 60%),var(--ink);color:#e7eaef;padding-block:48px 56px} .hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center} .hero h1{color:#fff} .hero .lead{font-size:1.15rem;color:#c9cfd8;max-width:640px} .hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 18px} .badges{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:0;list-style:none;font-size:.93rem;color:#c9cfd8} .badges li{display:flex;align-items:center;gap:6px;margin:0} .badges svg{width:18px;height:18px;color:var(--accent)} .hero-art{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:20px;padding:18px} .crumbs{font-size:.85rem;color:#9aa3b0;margin-bottom:14px} .crumbs a{color:#c9cfd8;text-decoration:none}.crumbs a:hover{text-decoration:underline} .crumbs span{margin:0 6px} @media (max-width:520px){.alt-line{display:none!important}.hero h1{font-size:1.75rem}.hero .lead{font-size:1.02rem}} @media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero-art{display:none}.hero{padding-block:32px 40px}} /* sections */ section.s{padding-block:52px} section.s.alt{background:#fff;border-block:1px solid var(--line)} .s-head{max-width:760px;margin-bottom:26px} .s-head p{color:var(--muted)} .prose{max-width:820px} .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)} @media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)} .card h3{margin-bottom:.35em} .card p{color:var(--muted);margin:0;font-size:.97rem} a.card{text-decoration:none;color:inherit;display:block;transition:border-color .15s,transform .15s} a.card:hover{border-color:var(--accent);transform:translateY(-2px)} a.card .more{display:inline-block;margin-top:10px;color:#c2520a;font-weight:700;font-size:.93rem} .metier-card img{border-radius:10px;margin-bottom:14px;background:var(--accent-soft);aspect-ratio:16/10;width:100%;object-fit:cover} .ico{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;margin-bottom:12px} .ico svg{width:24px;height:24px} .steps{counter-reset:st;list-style:none;padding:0} .steps li{counter-increment:st;position:relative;padding-left:0} .steps .card::before{content:counter(st);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;margin-bottom:10px} .check{list-style:none;padding:0} .check li{position:relative;padding-left:30px} .check li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8650a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat} .warn{background:#fff8e6;border:1px solid #f3dca5;border-radius:var(--radius);padding:18px 20px} .warn h3{color:#7a5300} .split{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start} @media (max-width:860px){.split{grid-template-columns:1fr}} /* tarifs */ .tarifs{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)} .tarifs th,.tarifs td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)} .tarifs tr:last-child td{border-bottom:0} .tarifs td:last-child{font-weight:800;color:var(--ink);white-space:nowrap} .note{font-size:.9rem;color:var(--muted);margin-top:10px} /* cta band */ .band{background:var(--ink);color:#e7eaef;border-radius:20px;padding:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px} .band h2{color:#fff;margin:0 0 .2em;font-size:clamp(1.3rem,2.4vw,1.7rem)} .band p{margin:0;color:#c9cfd8} .band .cta{display:flex;flex-wrap:wrap;gap:10px} /* faq */ .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px} .faq summary{cursor:pointer;padding:16px 48px 16px 18px;font-weight:700;list-style:none;position:relative;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:1.5rem;color:var(--accent-d);font-weight:400} .faq details[open] summary::after{content:"–"} .faq details>div{padding:0 18px 16px;color:#3a4250} /* links lists */ .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0} .chips li{margin:0} .chips a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;color:var(--ink);font-size:.93rem} .chips a:hover{border-color:var(--accent);color:var(--accent-d)} .cols{columns:3 220px;column-gap:24px;padding-left:1.1em} .cols li{break-inside:avoid} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .zt{border-collapse:collapse;width:100%;min-width:720px;font-size:.93rem} .zt th,.zt td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left} .zt th{background:#fafbfc;color:var(--ink)} .zt td a{text-decoration:none} /* footer */ footer{background:var(--ink);color:#aab2bf;padding-block:44px 90px;margin-top:0;font-size:.93rem} footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr} @media (max-width:860px){footer .grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){footer .grid{grid-template-columns:1fr}} footer h3{color:#fff;font-size:1rem} footer a{color:#dfe3e9;text-decoration:none} footer a:hover{color:var(--accent)} footer ul{list-style:none;padding:0;margin:0} footer li{margin:.35em 0} .legal{border-top:1px solid var(--ink-3);margin-top:30px;padding-top:18px;font-size:.85rem} /* mobile call bar */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(18,21,26,.97);border-top:1px solid var(--ink-3)} .callbar .btn{flex:1} @media (max-width:860px){.callbar{display:flex}} /* cookie banner */ .cookie{position:fixed;left:12px;right:12px;bottom:84px;z-index:70;max-width:560px;margin:0 auto;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.2);padding:16px 18px;font-size:.92rem} .cookie p{margin:0 0 10px} .cookie .row{display:flex;gap:8px;flex-wrap:wrap} .cookie button{font:inherit;font-weight:700;padding:9px 14px;border-radius:9px;border:1.5px solid var(--line);background:#fff;cursor:pointer} .cookie button.ok{background:var(--accent);border-color:var(--accent);color:var(--ink)} @media (min-width:861px){.cookie{bottom:16px}}