/* Charte graphique Permeatrix — reprise de la plaquette Permeatrix-Meca */
:root { --navy:#1b2636; --navy2:#26354a; --orange:#e8731a; --orange2:#f28c28; --grey:#f2f3f5; --line:#d9dde3; --txt:#1b2636; --muted:#4a5566; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:"DejaVu Sans", Verdana, "Noto Sans", system-ui, sans-serif; color:var(--txt); background:#fff; line-height:1.5; }
img { max-width:100%; display:block; }
a { color:var(--orange); }
.wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
.hdr { background:var(--navy); color:#fff; border-bottom:6px solid var(--orange); }
.hdr .wrap { padding-top:28px; padding-bottom:22px; }
.hdr-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.brand { font-size:clamp(34px,7vw,72px); font-weight:900; letter-spacing:1px; line-height:1; margin:0; }
.brand span { color:var(--orange); }
.tagline { font-size:clamp(16px,2.4vw,24px); color:#e6eaf0; margin:12px 0 0; font-weight:400; }
.spec { color:#c9d1dc; font-size:clamp(14px,2vw,20px); text-align:right; margin-top:6px; }
.back { color:#fff; text-decoration:none; font-size:14px; font-weight:bold; border:1.5px solid rgba(255,255,255,0.35); border-radius:8px; padding:6px 12px; display:inline-block; margin-bottom:14px; }
.back:hover { border-color:var(--orange); color:var(--orange2); }
.contact { font-size:14px; color:#c9d1dc; text-align:right; line-height:1.6; }
.contact a { color:#fff; font-weight:bold; text-decoration:none; }
h2.sec { font-size:clamp(20px,3vw,30px); font-weight:900; text-transform:uppercase; margin:0 0 18px; padding-top:22px; border-top:3px solid var(--navy); }
h2.sec small { text-transform:none; font-size:0.85em; }
section { margin:34px 0; }
.dot { list-style:none; padding:0; margin:0; }
.dot li { position:relative; padding-left:28px; margin-bottom:14px; }
.dot li::before { content:""; position:absolute; left:0; top:0.35em; width:15px; height:15px; border-radius:50%; background:var(--orange); }
.dot b { display:block; font-size:clamp(16px,2vw,21px); font-weight:900; }
.dot span { color:var(--muted); font-size:15px; }
.btn { display:inline-block; background:var(--orange); color:#fff; font-weight:900; text-decoration:none; border-radius:10px; padding:12px 20px; font-size:16px; border:0; }
.btn:hover { background:var(--orange2); }
.btn.ghost { background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn.ghost:hover { background:var(--navy); color:#fff; }
.foot { background:var(--navy); color:#c9d1dc; font-size:13px; margin-top:40px; border-top:6px solid var(--orange); }
.foot .wrap { padding-top:18px; padding-bottom:18px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.foot a { color:#fff; text-decoration:none; font-weight:bold; }