body{margin:0}
:root{--navy-d:#0f1e3d;--navy:#142850;--navy-m:#1a3a6b;--accent:#dc5b5b;--accent-s:rgba(220,91,91,.12);
--text:#1a1a2e;--text2:#555;--border:#e8eaed;--bg:#f7f8fa;--card:#fff;--chip-bg:#f0f4ff;--chip-br:#c7d4f0;--radius:14px}
.ves *,.ves *::before,.ves *::after{box-sizing:border-box;margin:0;padding:0}
.ves{font-family:'Roboto','Segoe UI',system-ui,-apple-system,sans-serif;color:var(--text);line-height:1.6;background:var(--bg)}
.ves a{text-decoration:none}
.ves-wrap{max-width:1266px;margin:0 auto;padding:0 32px}
/* hero */
.ves-hero{position:relative;background:#fff;overflow:hidden;border-bottom:1px solid var(--border)}
.ves-hero::before{content:'';position:absolute;top:-30%;right:-8%;width:52%;height:150%;background:radial-gradient(closest-side,rgba(26,58,107,.09),rgba(26,58,107,0) 70%);pointer-events:none}
.ves-hero-in{position:relative;z-index:2;padding:56px 32px 44px}
.ves-overline{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.ves-hero h1{font-size:clamp(30px,4.4vw,52px);font-weight:700;color:var(--navy-d);line-height:1.08;letter-spacing:-1px;margin-bottom:16px}
.ves-hero p{font-size:17px;color:#4a5568;max-width:620px;margin-bottom:24px}
.ves-pills{display:flex;gap:8px;flex-wrap:wrap}
.ves-pills span{background:var(--chip-bg);border:1px solid var(--chip-br);color:var(--navy-m);font-size:12px;font-weight:600;padding:5px 13px;border-radius:19px}
/* controls */
/* top: à ajuster à la hauteur réelle du header principal du site (sticky) */
.ves-controls{position:sticky;top:70px;z-index:15;background:var(--bg);border-bottom:1px solid var(--border);padding:14px 0}
.ves-controls-in{max-width:1266px;margin:0 auto;padding:0 32px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ves-search{position:relative;flex:1;min-width:240px}
.ves-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9aa2b1}
.ves-search input{width:100%;padding:11px 14px 11px 42px;border:1px solid var(--border);border-radius:9px;font-size:14px;font-family:inherit;background:#fff;color:var(--text)}
.ves-search input:focus{outline:none;border-color:var(--navy-m);box-shadow:0 0 0 3px rgba(26,58,107,.12)}
.ves-btn{background:#fff;border:1px solid var(--border);color:var(--navy-m);font-size:13px;font-weight:600;padding:10px 14px;border-radius:9px;cursor:pointer;font-family:inherit}
.ves-btn:hover{border-color:var(--navy-m);background:#f0f4ff}
.ves-count{font-size:13px;color:var(--text2);font-weight:600;white-space:nowrap}
/* body */
.ves-body{padding:34px 32px 10px;max-width:1266px;margin:0 auto}
.ves-cat{display:flex;align-items:center;gap:14px;margin:30px 0 16px}
.ves-cat:first-child{margin-top:4px}
.ves-cat span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.ves-cat hr{flex:1;border:none;border-top:1px solid var(--border)}
details.sec{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;box-shadow:0 8px 30px rgba(15,30,61,.05);overflow:hidden}
details.sec[open]{box-shadow:0 14px 44px rgba(15,30,61,.09)}
.sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px}
.sec>summary::-webkit-details-marker{display:none}
.sec .ic{width:40px;height:40px;flex:0 0 auto;border-radius:10px;background:var(--accent-s);color:var(--accent);display:flex;align-items:center;justify-content:center}
.sec .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sec .tt{flex:1;font-size:16px;font-weight:600;color:var(--navy-d)}
.sec .ct{font-size:12px;font-weight:700;color:var(--navy-m);background:var(--chip-bg);border:1px solid var(--chip-br);padding:3px 11px;border-radius:20px}
.sec .chev{color:#b6bcc6;transition:transform .2s;flex:0 0 auto}
.sec[open] .chev{transform:rotate(90deg)}
.sec .grid{padding:4px 22px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 26px}
.sec .grid a{display:block;padding:8px 10px;font-size:14px;color:var(--navy);border-radius:7px;border-left:2px solid transparent}
.sec .grid a:hover{color:var(--accent);background:#fafbfd;border-left-color:var(--accent)}
.ves-none{display:none;text-align:center;color:var(--text2);padding:40px;font-size:15px}
@media(max-width:640px){.ves-hero-in{padding:40px 20px 32px}.ves-body,.ves-controls-in{padding-left:20px;padding-right:20px}}