:root {
  --paper:   #F2F6FC;
  --paper-2: #E9F0F9;
  --panel:   #FFFFFF;
  --ink:     #0D1524;
  --ink-2:   #46536B;
  --ink-3:   #5B6880;
  --deep:    #101A2E;
  --rule:    #D5E0EF;
  --rule-2:  #BDCCE2;
  --rule-3:  #E6EDF7;
  --acc:     #1B4FD1;
  --acc-2:   #12379B;
  --acc-bg:  #E2E9FB;
  --ok:  #00714E;  --ok-bg:  #DCF0E6;  --x-ok:  #0E8F63;
  --net: #0A6884;  --net-bg: #DAEDF4;  --x-net: #12839F;
  --est: #8A5307;  --est-bg: #F8EEDD;  --x-est: #C07C10;
  --bad: #A81E14;  --bad-bg: #FBE4E2;  --x-bad: #C6362B;
  --absent:  #5B6880;
  --gold:    #C9A227;
  --gold-dk: #8A6410;
  --gold-bg: #F8F1DE;
  --gold-grad: linear-gradient(90deg, transparent 0%, #B8901C 14%, #E4C063 42%, #F0D28A 50%, #E4C063 58%, #B8901C 86%, transparent 100%);
  --r-0: 0; --r-1: 3px;
  --glass: rgb(255 255 255 / .74);
  --dur: .15s;
}

 

 
body {
  background:
    radial-gradient(760px 460px at 84% 2%, rgb(27 79 209 / .16), transparent 64%),
    radial-gradient(680px 420px at 6% 18%, rgb(18 131 159 / .14), transparent 66%),
    radial-gradient(620px 380px at 62% 78%, rgb(14 143 99 / .12), transparent 68%),
    linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 42%, var(--paper) 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--ink);
  text-wrap: pretty;
}
#bgfx { display: none !important; }   

h1, h2, h3, .shtitle, .ptitle, .hn-title, .cname, .xp-title, .calctitle, .spacecard h3, .seo h2 {
  font-family: var(--font-sans, system-ui, sans-serif);
  letter-spacing: -.022em;
  text-wrap: balance;
}

 
.price, .per, .hbn, .spec .v, .ctable td, .pb-tab td, .xp-prog-top b, .count b,
.num, .real, .mwp .mwbig, .resilres .spec .v, .keybox b, .calcbox b, .tag.tl {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;
}

 
.sec, .hbl, .lbl, .filters label, .adbanner .lab, .xp-svc {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acc-2); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
::selection { background: var(--acc-bg); }

 

.bar {
  background: rgb(16 26 46 / .82) !important;    
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 0;
  box-shadow: none;
  position: relative;
  padding: 8px 24px;
}
 
.bar::after {
  content: ""; position: absolute; inset: auto 0 0; height: 2px;
  background: var(--gold-grad);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar { background: var(--deep) !important; }
}

.topnav a { color: rgb(238 243 251 / .72); font-weight: 500; font-size: 13px; }
.topnav a:hover { color: #fff; }
.bar .login, .langbtn {
  background: transparent;
  border: 1px solid rgb(238 243 251 / .24);
  border-radius: var(--r-1);
  color: #EEF3FB;
  font-weight: 600;
}
.bar .login:hover, .langbtn:hover { border-color: #fff; background: rgb(255 255 255 / .08); color: #fff; }
.bar .partner {
  background: var(--acc);
  border-radius: var(--r-1);
  font-weight: 600;
  box-shadow: none;
}
.bar .partner:hover { background: var(--acc-2); transform: none; box-shadow: none; }

 
.promo {
  background: var(--deep) !important;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 12.5px;
  padding: 7px 8px;
  border-bottom: 1px solid rgb(238 243 251 / .1);
}

 
#adminbar, #partnerbar, #buyerbar, #connbar, #techbar {
  background: #16223A !important;
  border-bottom: 1px solid rgb(238 243 251 / .1);
}
#adminbar .voir, #partnerbar .voir, #buyerbar .voir, #connbar .voir, #techbar .voir {
  background: transparent;
  border: 1px solid rgb(238 243 251 / .22);
  border-radius: var(--r-1);
  color: #EEF3FB;
}

 

.heronavy {
  background: transparent !important;    
  border-bottom: 1px solid var(--rule);
  padding: 28px clamp(20px, 4vw, 48px) 24px;
}
.hn-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; font-weight: 500; letter-spacing: .16em;
  color: var(--ink-3);
}
.hn-title { color: var(--ink); font-size: 31px; font-weight: 700; }
.hn-sub { color: var(--ink-2); font-size: 14px; max-width: 62ch; }
.hn-trust b, .truststrip b { color: var(--ink); }

 
.searchwrap input {
  height: 54px;
  font-size: 16px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-1);
  padding-left: 48px;
  box-shadow: none;
  background: var(--panel);
}
.searchwrap input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgb(27 79 209 / .15);
}
.searchwrap .mg { top: 16px; color: var(--acc); }
.shbtn {
  background: var(--acc);
  border-radius: var(--r-1);
  height: 42px;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: none;
}
.shbtn:hover { background: var(--acc-2); transform: none; box-shadow: none; }

 
.heronavy .hb {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: var(--r-1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--rule);
}
.heronavy .hbn { color: var(--ink); font-size: 27px; font-weight: 600; }
.heronavy .hbl { color: var(--ink-3); }
.brandstrip .bslabel { color: var(--ink-3); }

 

.filters, .pills {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border-color: var(--rule);
  border-radius: var(--r-1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9);
}
.filters select, .sortwrap select, .form input, .form select, .form textarea {
  height: auto;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-1);
  font-size: 13.5px;
  padding: 8px 11px;
  background: var(--panel);
  color: var(--ink);
}
.filters select:focus, .sortwrap select:focus,
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgb(27 79 209 / .15);
}

 
.pill, .tab, .xp-chip {
   
  border: 1px solid var(--rule-2);
   
  color: var(--ink);
   
  white-space: nowrap;
  flex: 0 0 auto;
   
  background: #FFFFFF;
}
.pill:hover:not(.on), .tab:hover:not(.on), .xp-chip:hover { border-color: var(--acc); color: var(--acc); }
.pill.on, .tab.on {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
  box-shadow: none;    
}
 
.count { color: var(--ink-2); }
.count b { color: var(--ink); }

 

.card, .offercard, .spacecard, .xp-card, .resilbox, .panel, .spec, .dsec, .keybox {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: var(--r-1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--rule);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .offercard, .spacecard, .xp-card, .resilbox, .panel, .spec, .dsec, .keybox,
  .filters, .pills, .heronavy .hb {
    background: var(--panel); border-color: var(--rule); box-shadow: none;
  }
}

 
.card:hover, .offercard:hover, .spacecard:hover {
  border-color: var(--acc);
  background: rgb(255 255 255 / .9);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--acc);
  transform: none;
}
.card.inview { transform: none; border-color: var(--acc); }
.card.best { border-color: var(--acc); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--acc); }

 
.logo {
  border-radius: var(--r-1);
  border: 1px solid var(--rule-2);
  background: var(--panel);
  box-shadow: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2);
}
.cname { color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: -.012em; }
.cop, .cloc, .cmp { color: var(--ink-2); font-size: 12.5px; }
.price { font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.per { color: var(--ink-2); }

.voir, .more, .btn, .footlinks button {
  border: 1px solid var(--rule-2);
  border-radius: var(--r-1);
  font-weight: 600;
  background: var(--panel);
  color: var(--ink);
}
.voir:hover, .more:hover, .btn:hover, .footlinks button:hover { border-color: var(--acc); color: var(--acc); background: var(--panel); }
.card .voir, .offercard .voir, .btn.p {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  font-weight: 600;
}
.card .voir:hover, .offercard .voir:hover, .btn.p:hover {
  background: var(--acc-2); border-color: var(--acc-2); color: #fff;
  transform: none; box-shadow: none; filter: none;
}

 

.badge, .tag, .real {
  border-radius: var(--r-0);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 2px 7px;
  border: 1px solid transparent;
}
.badge.b, .tag.tl { background: var(--acc-bg); color: var(--acc); }
.badge.s, .tag    { background: var(--paper-2); color: var(--ink-2); }
.badge.p          { background: var(--est-bg); color: var(--est); border-color: #E5D2AE; }
.tag.tg, .real    { background: var(--ok-bg); color: var(--ok); }

 
.mwp .mwb { background: var(--deep); border-radius: var(--r-1); box-shadow: 0 18px 44px -22px rgb(13 21 36 / .4); }
.mwp.mwt { background: var(--acc-bg); border-color: rgb(27 79 209 / .2); }
.mwp.mwt .mwbig { color: var(--acc); font-weight: 600; }

 

.ov { background: rgb(13 21 36 / .5); }
.panel { border-radius: var(--r-1); padding: 24px; }
.ptitle { color: var(--ink); font-weight: 700; font-size: 21px; }
.x { background: var(--paper-2); border-radius: var(--r-1); color: var(--ink-2); }
.x:hover { background: var(--rule); color: var(--ink); }

.spec .l { color: var(--ink-3); font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.spec .v { color: var(--ink); font-size: 17px; font-weight: 600; }

.dsec > summary { color: var(--ink); font-size: 13.5px; font-weight: 600; padding: 10px 0; }

 
.calcbox {
  border: 1px solid var(--acc);
  background: rgb(255 255 255 / .82);
  border-radius: var(--r-1);
  box-shadow: none;
}
.calctitle { color: var(--ink); font-weight: 700; font-size: 17px; }

 

.ctable { font-size: 13px; }
.ctable th {
  background: var(--paper-2);
  color: var(--ink-3);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}
.ctable td { border-color: var(--rule-3); }

 

.adbanner {
  background: transparent;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-1);
  backdrop-filter: none;
  box-shadow: none;
}
.adbanner .lab {
  color: var(--ink-3);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-0);
  padding: 2px 6px;
}

 

.foot, .legal, .seo { color: var(--ink-2); }
.seo { border-top-color: var(--rule); }
.seo h2 { color: var(--ink); font-weight: 700; }
.step { background: var(--glass); border: 1px solid var(--rule); border-radius: var(--r-1); color: var(--ink); }
.step span { background: var(--acc); }
.chatbtn { background: var(--acc); box-shadow: 0 18px 44px -22px rgb(27 79 209 / .5); }
.chathead { background: var(--deep); }
.cmsg.me { background: var(--acc); }
.cmsg.bot { border-color: var(--rule); }
.req { color: var(--bad); }
.xp-progbar > div { background: var(--x-acc, var(--acc)); }
.xp-prog-top b { color: var(--acc); }

 

 
.list { gap: 6px; }
.list .card { margin-bottom: 0; }

 
.sub, .shsub, .hn-sub, .seo p, .pb-explain-b, .xp-explain, details.intro p, .legaldoc p {
  max-width: 74ch;
}

 

@media (prefers-reduced-motion: reduce) {
  .card:hover, .spacecard:hover, .offercard:hover { transform: none; }
  * { transition: none !important; animation: none !important; }
}

 
@media print {
  .bar, .promo, #adminbar, #partnerbar, #buyerbar, #connbar, #techbar,
  .chatbtn, .chatpanel, #cookiebar, .adbanner, .footlinks, .tray,
  .filters, .pills, .tabs, .more, #bgfx { display: none !important; }
  body { background: #fff !important; }
  .ov { position: static; background: none; display: block; padding: 0; }
  .panel { max-width: none; box-shadow: none; border: 0; padding: 0; max-height: none; overflow: visible; }
  .card, .spec, .dsec, .calcbox {
    box-shadow: none; backdrop-filter: none; background: #fff; break-inside: avoid;
  }
  details { display: block !important; }
  details > *:not(summary) { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

 

 
:root {
  --dc-r-1:      var(--r-1);
  --dc-r-2:      var(--r-1);
  --dc-r-3:      var(--r-1);
  --dc-r-4:      var(--r-1);
  --dc-r-pill:   var(--r-1);
  --dc-radius:   var(--r-1);
  --dc-radius-lg:var(--r-1);
}

 
.door, .fam, .card, .offercard, .spacecard, .xp-card, .resilbox, .panel,
.spec, .dsec, .keybox, .calcbox, .filters, .pills, .adbanner, .step,
.heronavy .hb, .searchwrap input, .field, .btn, .voir, .more, .pill, .tab,
.xp-chip, .footlinks button, .bar .login, .bar .partner, .langbtn,
.form input, .form select, .form textarea, .filters select, .sortwrap select,
 
.adm-item, .bes-fam, .besoins .bes-fam, .chatbtn {
  border-radius: var(--r-1);
}

 
.badge, .tag, .real, .fam-badge, .ctable th, .ctable td, .pb-tab td,
 
.bes-fam-tag, .hcm-tag {
  border-radius: var(--r-0);
}

 
.logo, .fam-ico, .door-ico, .ico-box, .step span,
 
.bes-fam-ico, .bes-ico, .howstep .n {
  border-radius: var(--r-1);
}

 
.besoins .bes-fam-ico, .besoins .bes-ico {
  border-radius: var(--r-1);
}
.besoins .bes-fam-tag, #howBlock .hcm-tag {
  border-radius: var(--r-0);
}

 

 
.deep, .promo, .inkblock, .partnerblock, .seo, .chatpanel, .chathead {
  border-radius: var(--r-1);
}

 

 
:where([id], .card, .offercard, .spacecard, .xp-card, .dc-sp-card, .panel,
       .cname, h1, h2, h3, summary, [data-anchor]) {
  scroll-margin-top: calc(var(--dc-bar-h, 49px) + 14px);
}