@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root{ --ink:#15331f; --green:#315c36; --sage:#799468; --sage-d:#5d7a4e; --cream:#F4F1E9; --cream-2:#FAF8F3; --white:#fff; --line:#DFE5DC; --line-2:#C8D3C4; --text:#1B2B21; --text-2:#465449; --muted:#66756A; --shadow:0 18px 60px rgba(20,52,31,.13); --shadow-s:0 6px 24px rgba(20,52,31,.08); --radius:22px; --radius-s:14px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--cream);color:var(--text); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0} ul,ol{list-style:none} img{max-width:100%;display:block} a{color:var(--green)} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .narrow{max-width:760px} .hidden{display:none!important} :focus-visible{outline:3px solid var(--sage);outline-offset:2px} /* ---------- apparition au défilement ---------- */ /* Le contenu est visible par défaut. L'animation ne s'applique que si le JavaScript a pu poser la classe « js » sur — sans lui, rien ne disparaît. */ .reveal{opacity:1;transform:none} html.js .reveal{opacity:0;transform:translateY(20px)} html.js .reveal.visible{opacity:1;transform:none; transition:opacity .7s ease,transform .7s ease} @media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transform:none} } /* ---------- en-tête ---------- */ .site-header{position:sticky;top:0;z-index:60;background:rgba(244,241,233,.92); backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s} .site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-s)} .site-header>.wrap{display:flex;align-items:center;justify-content:space-between;gap:20px; padding:14px 24px} .logo{height:44px;width:auto} .menu{display:flex;align-items:center;gap:2px} .menu a{font-size:15.5px;font-weight:500;color:var(--text-2);text-decoration:none; padding:10px 13px;border-radius:99px} .menu a:hover{color:var(--ink);background:rgba(49,92,54,.07)} .menu a[aria-current="page"]{color:var(--green);font-weight:600} .menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:99px; padding:10px 15px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer} @media (max-width:980px){ .menu{position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;background:var(--cream); border-bottom:1px solid var(--line);padding:10px 24px 22px;display:none;box-shadow:var(--shadow)} .menu.open{display:flex} .menu a{width:100%;padding:14px 4px;font-size:17px;border-radius:0; border-bottom:1px solid var(--line)} .menu-btn{display:block} } /* ---------- boutons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:16.5px; font-weight:600;padding:16px 28px;border-radius:99px;border:2px solid var(--green); background:var(--green);color:#fff;text-decoration:none;cursor:pointer; transition:transform .2s,box-shadow .2s,background .2s} .btn:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px); box-shadow:var(--shadow-s);color:#fff} .btn:disabled{opacity:.35;cursor:default;transform:none} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{background:transparent;color:var(--green);border-color:var(--green)} .btn-white{background:#fff;color:var(--ink);border-color:#fff} .btn-white:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)} .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)} .btn-outline:hover{background:#fff;border-color:#fff;color:var(--ink)} .btn-small{font-size:15px;padding:12px 20px} /* ---------- bandeau ---------- */ .hero{min-height:min(100svh,860px);position:relative;display:grid;align-items:end; overflow:hidden;color:#fff;background:var(--ink) center/cover no-repeat} .hero-shade{position:absolute;inset:0; background:linear-gradient(180deg,rgba(12,32,20,.62) 0%,rgba(12,32,20,.22) 34%,rgba(12,32,20,.88) 100%)} .hero-content{position:relative;z-index:2;padding:0 24px 68px;max-width:1120px; margin:0 auto;width:100%} .hero h1{font-size:clamp(42px,8.4vw,84px);line-height:1.02;letter-spacing:-.035em; font-weight:800;max-width:16em} .lead{font-size:clamp(19px,2.4vw,25px);color:#E6EEE4;margin-top:22px;max-width:26em;font-weight:400} .actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap} /* ---------- bandeau de confiance ---------- */ .trustbar{background:var(--ink);color:#fff} .trustbar>.wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:30px 24px} @media (max-width:900px){.trustbar>.wrap{grid-template-columns:1fr 1fr;gap:22px}} .trustbar .item{display:flex;gap:13px;align-items:flex-start} .trustbar svg{flex:none;width:26px;height:26px;stroke:var(--sage);fill:none;stroke-width:1.8} .trustbar b{display:block;color:#fff;font-weight:600;font-size:16px} .trustbar span{font-size:15px;color:#C9D8C6;line-height:1.42} /* ---------- sections ---------- */ .section{padding:96px 0} @media (max-width:760px){.section{padding:64px 0}} .section.cream{background:var(--cream-2)} .section.white{background:var(--white)} .section.dark{background:var(--ink);color:#fff} .section.dark .lead,.section.dark p{color:#C9D8C6} .section.dark h2,.section.dark h3,.section.dark strong{color:#fff} .eyebrow{font-size:13.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--sage-d)} .section.dark .eyebrow{color:var(--sage)} h2{font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.028em;font-weight:800; margin-top:16px} h3{font-size:clamp(21px,2.4vw,26px);line-height:1.24;letter-spacing:-.02em;font-weight:700} .section-head{max-width:34em} .p{font-size:18px;line-height:1.7;color:var(--text-2);margin-top:20px;max-width:34em} .p strong{color:var(--text);font-weight:600} .list{margin-top:22px;max-width:34em} .list li{position:relative;padding-left:26px;margin-top:15px;font-size:17px;line-height:1.6; color:var(--text-2)} .list li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px; border-radius:99px;background:var(--sage)} .list li b{color:var(--text);font-weight:600} .section.dark .list li{color:#C9D8C6} .section.dark .list li b{color:#fff} /* ---------- texte + image ---------- */ .split{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;margin-top:44px} .split.rev .split-media{order:-1} @media (max-width:900px){.split{grid-template-columns:1fr;gap:34px}.split.rev .split-media{order:0}} .split-media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)} .split-media figcaption{font-size:15px;color:var(--muted);margin-top:14px;line-height:1.5} .section.dark .split-media figcaption{color:#9FB59C} /* ---------- services ---------- */ .services{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px} @media (max-width:900px){.services{grid-template-columns:1fr 1fr;gap:26px}} @media (max-width:520px){.services{grid-template-columns:1fr}} .services .icon{width:52px;height:52px;border-radius:99px;background:rgba(121,148,104,.16); display:grid;place-items:center;margin-bottom:18px} .services .icon svg{width:26px;height:26px;stroke:var(--green);fill:none;stroke-width:1.7} .services h3{font-size:19.5px} .services p{font-size:16px;color:var(--text-2);margin-top:10px;line-height:1.55} /* ---------- galerie ---------- */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px} @media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}} @media (max-width:560px){.gallery{grid-template-columns:1fr}} .tile{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s); text-decoration:none;color:inherit;display:flex;flex-direction:column; transition:transform .25s,box-shadow .25s} .tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .tile img{width:100%;height:210px;object-fit:cover} .tile .body{padding:22px 22px 26px} .tile h3{font-size:20px} .tile p{font-size:16px;color:var(--text-2);margin-top:10px;line-height:1.55} /* ---------- comparateur ---------- */ .compare{margin-top:44px;max-width:900px} .after-wrap{position:relative;border-radius:var(--radius);overflow:hidden; box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--line)} .after-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .after-wrap .after{clip-path:inset(0 0 0 var(--x,50%))} .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:#fff; z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.2)} .handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px; transform:translate(-50%,-50%);border-radius:99px;background:#fff;box-shadow:var(--shadow-s)} .before-label,.after-label{position:absolute;bottom:16px;z-index:4;font-size:14.5px; font-weight:600;color:#fff;background:rgba(12,32,20,.8);padding:8px 15px;border-radius:99px} .before-label{left:16px}.after-label{right:16px} .compare input[type=range]{width:100%;margin-top:20px;accent-color:var(--green)} .compare .cap{font-size:16px;color:var(--text-2);margin-top:16px;line-height:1.6} /* ---------- valeurs ---------- */ .values{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px} @media (max-width:820px){.values{grid-template-columns:1fr;gap:26px}} .values .item{display:flex;gap:16px;align-items:flex-start} .values svg{flex:none;width:30px;height:30px;stroke:var(--sage);fill:none;stroke-width:1.7} .values b{display:block;font-size:17.5px;font-weight:700} .values p{font-size:16px;color:#C9D8C6;margin-top:7px;line-height:1.5} /* ---------- citation ---------- */ /* réservé aux avis clients réels, une fois l'autorisation obtenue */ .quote{background:#fff;border-radius:var(--radius);padding:38px 40px;margin-top:44px; box-shadow:var(--shadow-s);max-width:760px} .quote p{font-size:22px;line-height:1.5;font-weight:500;color:var(--ink)} .quote cite{display:block;font-size:16px;color:var(--muted);margin-top:20px;font-style:normal; font-weight:600} /* ---------- formulaire ---------- */ .quote-form{background:var(--ink);color:#fff} .quote-form .card{background:#fff;color:var(--text);border-radius:var(--radius); padding:38px 34px;margin-top:38px;box-shadow:var(--shadow);max-width:760px} @media (max-width:600px){.quote-form .card{padding:28px 22px}} .gauge{height:4px;background:var(--line);border-radius:99px;overflow:hidden} .gauge-f{display:block;height:4px;width:16%;background:var(--sage-d);border-radius:99px} @media (prefers-reduced-motion:no-preference){.gauge-f{transition:width .4s cubic-bezier(.4,0,.2,1)}} .gauge-l{display:flex;justify-content:space-between;margin-top:12px;font-size:13.5px; font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .q{font-size:26px;line-height:1.22;letter-spacing:-.022em;font-weight:700;margin-top:26px} .q-sub{font-size:16.5px;color:var(--text-2);margin-top:12px;line-height:1.55} .opts{display:grid;gap:10px;margin-top:24px} .opts.two{grid-template-columns:1fr 1fr} @media (max-width:520px){.opts.two{grid-template-columns:1fr}} .opt{text-align:left;font:inherit;font-size:17px;font-weight:600;padding:18px 20px; background:var(--cream-2);border:2px solid var(--line);border-radius:var(--radius-s); color:var(--text);cursor:pointer;line-height:1.4;transition:border-color .2s,background .2s} .opt:hover{border-color:var(--sage)} .opt[data-on="1"]{border-color:var(--green);background:rgba(121,148,104,.14)} .opt small{display:block;font-size:15.5px;color:var(--text-2);margin-top:7px;font-weight:400} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px} .chip{font:inherit;font-size:15.5px;font-weight:600;padding:11px 18px;border-radius:99px; border:2px solid var(--line);background:#fff;color:var(--text-2);cursor:pointer} .chip:hover{border-color:var(--sage);color:var(--text)} .chip[data-on="1"]{border-color:var(--green);background:rgba(121,148,104,.14);color:var(--ink)} .form-row{margin-top:22px} .label{display:block;font-size:15.5px;font-weight:600;margin-bottom:9px;color:var(--text)} .inp{width:100%;font:inherit;font-size:17px;padding:16px 18px;border:2px solid var(--line); border-radius:var(--radius-s);background:#fff;color:var(--text)} .inp:focus{border-color:var(--sage);outline:none} .consent{display:flex;gap:14px;align-items:flex-start;margin-top:24px;font-size:15.5px; color:var(--text-2);line-height:1.55} .consent input{margin-top:3px;flex:none;width:22px;height:22px;accent-color:var(--green)} .actions-form{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap} /* ---------- agenda ---------- */ .agenda{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)} .ag-nav{display:flex;justify-content:space-between;align-items:center;gap:14px} .ag-sem{font-size:17px;font-weight:700} .ag-b{font:inherit;font-size:16px;font-weight:700;padding:10px 16px;border-radius:99px; border:2px solid var(--line);background:#fff;color:var(--text-2);cursor:pointer} .ag-b:hover:not(:disabled){border-color:var(--green);color:var(--green)} .ag-b:disabled{opacity:.35;cursor:default} .ag-jours{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:20px} @media (max-width:600px){.ag-jours{grid-template-columns:repeat(3,1fr)}} .ag-j{background:#fff;border:2px solid var(--line);border-radius:var(--radius-s);padding:14px 4px; text-align:center;cursor:pointer;font:inherit} .ag-j:hover:not(:disabled){border-color:var(--sage)} .ag-j:disabled{opacity:.4;cursor:default} .ag-j[data-on="1"]{border-color:var(--green);background:rgba(121,148,104,.14)} .ag-jn{font-size:13.5px;font-weight:700;text-transform:uppercase;color:var(--muted); letter-spacing:.06em} .ag-jd{font-size:25px;font-weight:800;margin-top:5px;letter-spacing:-.03em} .ag-jm{font-size:13.5px;color:var(--muted);margin-top:2px} .ag-dispo{font-size:13px;color:var(--sage-d);margin-top:7px;font-weight:700} .ag-creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:9px; margin-top:20px} .ag-c{background:#fff;border:2px solid var(--line);border-radius:99px;padding:14px 6px; font:inherit;font-size:17px;font-weight:600;cursor:pointer;text-align:center;color:var(--text)} .ag-c:hover{border-color:var(--sage)} .ag-c[data-on="1"]{border-color:var(--green);background:rgba(121,148,104,.14);color:var(--ink)} .ag-vide{font-size:16.5px;color:var(--text-2);margin-top:20px} .ag-choisi{background:rgba(121,148,104,.13);border-radius:var(--radius-s);padding:18px 20px; margin-top:22px;font-size:16px;color:var(--text-2);line-height:1.55} .ag-choisi b{display:block;font-size:19px;font-weight:700;color:var(--ink);margin-bottom:5px} /* ---------- résultat ---------- */ .res-k{font-size:13.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-top:28px} .res-p{font-size:clamp(36px,7vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.04; margin-top:12px;color:var(--green)} .res-sys{font-size:17.5px;margin-top:15px;color:var(--text-2);line-height:1.55} .res-sys strong{color:var(--text);font-weight:700} .res-note{font-size:16px;color:var(--text-2);line-height:1.62;margin-top:24px;padding-top:24px; border-top:1px solid var(--line)} .ref{font-size:36px;font-weight:800;letter-spacing:.04em;color:var(--green);margin-top:10px} .recap{margin-top:26px;background:var(--cream-2);border-radius:var(--radius-s);padding:26px} .recap-t{font-size:13.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-bottom:20px} .line{display:flex;justify-content:space-between;gap:18px;font-size:16px;padding:11px 0; border-bottom:1px solid var(--line)} .line:last-child{border-bottom:0} .line span:first-child{color:var(--text-2)} .line span:last-child{text-align:right;font-weight:600} .score{display:inline-block;font-size:14px;font-weight:700;padding:9px 17px;border-radius:99px} .s-a{background:#D6E7D4;color:#1F5128} .s-b{background:#F4EBD1;color:#6B4E17} .s-c{background:#F5DDD8;color:#7D2F22} /* ---------- tableaux et onglets ---------- */ .tab-t{width:100%;border-collapse:collapse;margin-top:26px;font-size:16.5px} .tab-t th{text-align:left;font-size:13.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);padding:0 16px 14px 0; border-bottom:2px solid var(--line-2)} .tab-t td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);vertical-align:top; line-height:1.58;color:var(--text-2)} .tab-t td strong{color:var(--text);font-weight:600} .tab-t td:last-child{text-align:right;white-space:nowrap;color:var(--green);font-weight:700} .tabs{margin-top:36px} .tablist{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px} .tablist::-webkit-scrollbar{display:none} .tab-b{font:inherit;font-size:16px;font-weight:600;padding:13px 22px;border-radius:99px; border:2px solid var(--line);background:#fff;color:var(--text-2);cursor:pointer;white-space:nowrap} .tab-b:hover{border-color:var(--sage)} .tab-b[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#fff} .tabpanel{padding-top:30px} .tabpanel[hidden]{display:none} .tag{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--sage-d);margin-bottom:16px} /* ---------- barème ---------- */ .bl{padding:20px 0;border-bottom:1px solid var(--line)} .bl:last-child{border-bottom:0} .bl-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px} .bl-n{font-weight:700;font-size:18px} .bl-p{font-size:20px;font-weight:800;color:var(--green);white-space:nowrap;letter-spacing:-.02em} .bl-s{font-size:16px;color:var(--text-2);margin-top:6px} .bl-g{height:4px;background:var(--line);border-radius:99px;margin-top:14px;overflow:hidden} .bl-gf{height:100%;background:var(--sage);border-radius:99px} /* ---------- divers ---------- */ .alert{background:rgba(121,148,104,.13);border-left:5px solid var(--sage); border-radius:0 var(--radius-s) var(--radius-s) 0;padding:20px 24px;margin-top:30px; font-size:16.5px;line-height:1.62;color:var(--text-2)} .alert b{color:var(--text);font-weight:700} .alert.gold{background:rgba(160,131,73,.12);border-left-color:#A08349} .zone{margin-top:24px;font-size:17px;color:var(--text-2);line-height:2.1} .zc::after{content:"·";color:var(--line-2);padding:0 11px} .zc:last-child::after{content:""} .fq{border-bottom:1px solid var(--line);padding:24px 0} .fq:last-child{border-bottom:0} .fq-q{font-weight:700;font-size:19px} .fq-a{font-size:17px;color:var(--text-2);line-height:1.68;margin-top:11px} .steps{margin-top:30px;padding-left:30px;border-left:2px solid var(--line-2)} .st{position:relative;padding:0 0 30px 6px} .st:last-child{padding-bottom:0} .st::before{content:"";position:absolute;left:-38px;top:5px;width:14px;height:14px; border-radius:99px;background:var(--line-2);border:3px solid var(--cream-2)} .st.done::before{background:var(--sage)} .st.now::before{background:#fff;border-color:var(--green);box-shadow:0 0 0 5px rgba(121,148,104,.22)} .st-t{font-weight:700;font-size:18px} .st.todo .st-t{color:var(--muted);font-weight:500} .st-d{font-size:16px;color:var(--text-2);margin-top:7px;line-height:1.55} .devis{margin-top:28px;border-radius:var(--radius-s);overflow:hidden;box-shadow:var(--shadow-s)} .devis-h{background:var(--ink);color:#fff;padding:18px 22px;font-size:17px;font-weight:600; display:flex;justify-content:space-between;gap:14px} .devis-b{padding:24px;background:#fff} .msg{background:var(--cream-2);border-radius:var(--radius-s);padding:18px 22px;margin-top:14px} .msg-w{font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--muted)} .msg-c{font-size:17px;line-height:1.6;margin-top:9px;color:var(--text-2)} .fig{margin-top:38px} .fig svg{width:100%;height:auto} .fig figcaption{font-size:16px;color:var(--muted);margin-top:15px;line-height:1.55} /* ---------- contact et pied ---------- */ .contact{background:var(--green);color:#fff;text-align:center} .contact h2{color:#fff;max-width:22em;margin:0 auto} .contact p{color:#DCE8DA;font-size:19px;margin:20px auto 0;max-width:32em} .contact .actions{justify-content:center} .footer{background:var(--ink);color:#B4C7B2;padding:56px 0 40px;font-size:16px;line-height:1.7} .footer a{color:#CBDBC8;text-decoration:none} .footer a:hover{color:#fff} .footer .brand{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:16px} .footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-top:38px; padding-top:34px;border-top:1px solid rgba(255,255,255,.16)} @media (max-width:820px){.footer-cols{grid-template-columns:1fr;gap:26px}} .footer h4{font-size:13.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:#8DA48B;margin-bottom:15px} .footer li{margin-bottom:10px} .disclaimer{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16); color:#8DA48B;font-size:15px;line-height:1.6} /* ---------- barre fixe mobile ---------- */ .dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:12px 16px; background:rgba(21,51,31,.96);backdrop-filter:blur(8px)} .dock a{display:block;text-align:center;background:var(--sage);color:var(--ink); font-weight:700;font-size:17px;padding:15px;border-radius:99px;text-decoration:none} @media (max-width:760px){.dock{display:block}body{padding-bottom:76px}} @media print{ .site-header,.menu,.dock,.hero,.trustbar,.contact,.footer,.section{display:none!important} .quote-form{background:#fff;color:#000;padding:0} .quote-form .card,.recap{box-shadow:none;border:1px solid #999} body{background:#fff} } /* ---------- alias : le script conserve ses anciens noms de classes ---------- */ .field{margin-top:22px} .lab{display:block;font-size:15.5px;font-weight:600;margin-bottom:9px;color:var(--text)} .nav{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap} .btn-g{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn-g:hover{background:transparent;color:var(--green);border-color:var(--green)} .hide{display:none!important} .sub{font-size:18px;line-height:1.7;color:var(--text-2);margin-top:20px;max-width:34em} .section.dark .sub{color:#C9D8C6} .txt{font-size:18px;line-height:1.7;color:var(--text-2);margin-top:20px;max-width:34em} .txt strong{color:var(--text);font-weight:600} .section.dark .txt{color:#C9D8C6} .section.dark .txt strong{color:#fff} .puces{margin-top:22px;max-width:34em} .puces li{position:relative;padding-left:26px;margin-top:15px;font-size:17px;line-height:1.6; color:var(--text-2)} .puces li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px; border-radius:99px;background:var(--sage)} .puces li b{color:var(--text);font-weight:600} .h1{font-size:clamp(34px,6vw,54px);line-height:1.06;letter-spacing:-.032em;font-weight:800; margin-top:18px} .h2{font-size:clamp(28px,4.4vw,42px);line-height:1.12;letter-spacing:-.028em;font-weight:800; margin-top:16px} .h3{font-size:clamp(20px,2.2vw,24px);font-weight:700;margin-top:34px;letter-spacing:-.018em} .lede{font-size:clamp(19px,2.2vw,23px);line-height:1.55;color:var(--text-2);margin-top:22px; max-width:30em} .sect{padding:80px 0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px} @media (max-width:760px){.grid2{grid-template-columns:1fr;gap:30px}} .box-t{font-size:21px;font-weight:700;letter-spacing:-.018em;padding-bottom:14px; border-bottom:2px solid var(--line)} .box-p{font-size:16.5px;color:var(--text-2);line-height:1.62;margin-top:16px} .stat{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:40px} @media (max-width:700px){.stat{grid-template-columns:1fr;gap:26px}} .stat-n{font-size:46px;font-weight:800;letter-spacing:-.04em;color:var(--green);line-height:1} .stat-l{font-size:16px;color:var(--text-2);margin-top:14px;line-height:1.5;padding-top:14px; border-top:1px solid var(--line)} .fil{font-size:14.5px;color:var(--muted);padding-top:26px} .fil a{color:var(--muted);text-decoration:none} .cta{background:#fff;border-radius:var(--radius);padding:38px 36px;margin-top:52px; box-shadow:var(--shadow-s)} .cta-t{font-size:27px;font-weight:800;letter-spacing:-.024em;line-height:1.18} .cta-p{font-size:17px;color:var(--text-2);line-height:1.62;margin-top:14px;max-width:32em} .split-i img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)} .split-i figcaption{font-size:15px;color:var(--muted);margin-top:14px;line-height:1.5} /* ---------- unification : styles hérités alignés sur la charte ---------- */ .lead-dark{font-size:clamp(19px,2.2vw,23px);line-height:1.55;color:var(--text-2); margin-top:22px;max-width:30em} .section.dark .lead-dark{color:#C9D8C6} .box-title{font-size:21px;font-weight:700;letter-spacing:-.018em;padding-bottom:14px; border-bottom:2px solid var(--line)} .section.dark .box-title{border-bottom-color:rgba(255,255,255,.2);color:#fff} .values-light{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:40px} @media (max-width:700px){.values-light{grid-template-columns:1fr;gap:26px}} .values-light>div>div:first-child{font-size:46px;font-weight:800;letter-spacing:-.04em; color:var(--green);line-height:1} .section.dark .values-light>div>div:first-child{color:var(--sage)} .logo{height:48px;width:auto;display:block} @media (max-width:520px){.logo{height:40px}} .section .p:first-child,.section .list:first-child{margin-top:0} h1+.lead-dark,h1+.p{margin-top:22px} /* ---------- bandeau des pages intérieures : plus court que l'accueil ---------- */ .hero-page{min-height:min(58svh,480px)} .hero-page h1{font-size:clamp(32px,5.6vw,54px);max-width:20em} .hero-page .lead{font-size:clamp(18px,2vw,21px);max-width:30em;margin-top:18px} /* ========================================================================== Corrections ========================================================================== */ /* le bouton de l'en-tête : .menu a écrasait la couleur du .btn */ .menu a.btn,.menu a.btn:hover,.menu a.btn-small{color:#fff!important;background:var(--green)} .menu a.btn:hover{background:var(--ink)} /* l'en-tête collant masquait le haut des sections ciblées par une ancre */ [id]{scroll-margin-top:96px} @media (max-width:980px){[id]{scroll-margin-top:80px}} /* le bandeau ne passe jamais sous l'en-tête */ .hero{margin-top:0} .site-header{background:var(--cream);backdrop-filter:none} .site-header.scrolled{background:rgba(244,241,233,.97);backdrop-filter:blur(10px)} /* garde-fou : un seul bandeau par page, au cas où deux fichiers seraient fusionnés */ .hero ~ .hero{display:none} /* ---------- bandeau de consentement ---------- */ .cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff; border-top:3px solid var(--green);box-shadow:0 -14px 44px rgba(20,52,31,.18)} .cookie-in{max-width:1120px;margin:0 auto;padding:22px 24px;display:flex;gap:28px; align-items:center;justify-content:space-between;flex-wrap:wrap} .cookie-t{font-size:16px;line-height:1.6;color:var(--text-2);max-width:62em} .cookie-t b{color:var(--text);font-weight:700} .cookie-b{display:flex;gap:12px;flex-wrap:wrap} .cookie-b .btn{font-size:16px;padding:14px 26px} @media (max-width:760px){ .cookie-in{flex-direction:column;align-items:stretch;gap:18px;padding:20px} .cookie-b{display:grid;grid-template-columns:1fr 1fr} .cookie-b .btn{justify-content:center} body:has(.cookie){padding-bottom:0} .cookie ~ .dock{display:none} }