/* =============================================================
   barre de navigation — feuille autonome pour les pages écrites
   à la main (accueil, tarifs, blog…), qui ont chacune leur CSS.
   Tout est enfermé dans .bpnav : rien ne fuit, rien n'entre.
   Les pages de chapitre n'ont pas besoin de ce fichier : les mêmes
   règles vivent dans ch.css.
   ============================================================= */
.bpnav{
  --ink:#181B24; --ink-soft:#181B24; --ink-faint:#5A5E68;
  --paper:#FFFFFF; --paper-2:#F5F4F0; --line:#E4E2DB; --line-strong:#C7C4B8;
  --indigo:#2B3A8F; --indigo-soft:#E7EAF4; --indigo-line:#B9C1E1;
  --teal:#0B6E63; --amber:#A65200;
  --shadow:0 1px 2px rgba(24,27,36,.04), 0 4px 14px -8px rgba(24,27,36,.16);
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);
  display:block;
}
.bpnav *{box-sizing:border-box}
.bpnav sup{font-size:.7em;vertical-align:super;line-height:0}

/* Les pages hôtes stylent nav{}, ul{}, a{}… globalement : sans cette remise à
   zéro, leur mise en forme repeint la barre (fond, ombre, position, largeur).
   Placée avant les vraies règles, elle perd contre elles à spécificité égale. */
.bpnav header,.bpnav nav,.bpnav div,.bpnav p,.bpnav h4,.bpnav ul,.bpnav li,.bpnav span{
  background:none;border:0;box-shadow:none;margin:0;padding:0;position:static;
  max-width:none;min-width:0;width:auto;height:auto;inset:auto;float:none;transform:none;
  text-align:left;font:inherit;color:inherit;letter-spacing:normal;text-transform:none;
  list-style:none;opacity:1;visibility:visible;text-shadow:none}
.bpnav a{background:none;border:0;box-shadow:none;margin:0;padding:0;position:static;
  color:inherit;text-decoration:none;font:inherit;letter-spacing:normal;text-transform:none;
  display:inline;opacity:1}
.bpnav button{background:none;border:0;margin:0;padding:0;color:inherit;font:inherit;
  position:static;box-shadow:none;opacity:1}
.bpnav b,.bpnav small{font:inherit;color:inherit;background:none}
.bpnav b{font-weight:700}


.bpnav .callbar{display:none;background:var(--indigo);color:#fff;text-align:center;font-size:.82rem;padding:8px 20px}

.bpnav .callbar b{font-weight:700}

.bpnav .callbar a{color:#fff;text-decoration:underline;text-underline-offset:2px}

.bpnav .callbar .sep{opacity:.5;margin:0 10px}


.bpnav header.top{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);padding:12px 32px;display:flex;align-items:center;gap:22px}

.bpnav header.top .logo{font-weight:700;font-size:1rem;flex:0 0 auto;text-decoration:none;color:var(--ink)}

.bpnav header.top .logo b{color:var(--indigo)}

.bpnav .skip{position:absolute;left:-9999px}

.bpnav .skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:8px 14px;border-radius:6px;
  border:1px solid var(--indigo)}

.bpnav header.top{gap:4px}

.bpnav .mainnav{display:flex;align-items:center;gap:2px;flex:1}

.bpnav .nv-item{position:relative}

.bpnav .nv-item > a, .bpnav .nv-link{display:flex;align-items:center;gap:5px;font-size:.92rem;color:var(--ink);
  text-decoration:none;padding:8px 12px;border-radius:6px;white-space:nowrap}

.bpnav .nv-item > a:hover, .bpnav .nv-link:hover{background:var(--paper-2)}

.bpnav .nv-item > a.on, .bpnav .nv-link.on{color:var(--indigo);font-weight:600}

.bpnav .car{font-size:.6rem;opacity:.5;transform:translateY(1px)}

.bpnav .nv-menu{position:absolute;top:calc(100% + 9px);left:-10px;z-index:60;display:none;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:18px 20px;gap:26px}

.bpnav .nv-menu.wide{grid-template-columns:minmax(230px,auto) minmax(190px,auto) 250px}

.bpnav .nv-item:hover > .nv-menu, .bpnav .nv-item:focus-within > .nv-menu, .bpnav .nv-item.open > .nv-menu{display:grid}


.bpnav .nv-item.has-menu::after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:12px}

.bpnav .nv-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}

.bpnav .nv-menu h4{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-faint);margin:0 0 10px;font-weight:500}

.bpnav .nv-menu a{display:block;text-decoration:none;color:var(--ink);font-size:.9rem;padding:5px 0}

.bpnav .nv-menu a:hover{color:var(--indigo)}

.bpnav .nv-menu a small{display:block;color:var(--ink-faint);font-size:.77rem;margin-top:1px}

.bpnav .nv-lvl{display:flex;flex-wrap:wrap;gap:7px}

.bpnav .nv-lvl a{border:1px solid var(--line);border-radius:7px;padding:7px 13px;font-weight:600;font-size:.88rem}

.bpnav .nv-lvl a:hover{border-color:var(--indigo)}

.bpnav .nv-lvl a small{display:inline;color:var(--ink-faint);font-weight:400;margin-left:5px;font-size:.76rem}

.bpnav .nv-mat{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

.bpnav .nv-hl{background:var(--indigo-soft);border:1px solid var(--indigo-line);border-radius:8px;padding:13px 15px}

.bpnav .nv-hl a{font-weight:600;color:var(--indigo);padding:0}

.bpnav .nv-hl p{margin:5px 0 0;font-size:.8rem;color:var(--ink-soft);line-height:1.45}


.bpnav .mainnav.flat{gap:4px;margin-left:14px}

.bpnav .mainnav.flat .nv-link{font-size:.88rem;padding:8px 12px}



.bpnav .nv-tel{font-size:.86rem;color:var(--ink-faint);text-decoration:none;white-space:nowrap;margin-right:8px}

.bpnav .nv-tel:hover{color:var(--indigo)}

.bpnav .nv-cta{background:var(--indigo);color:#fff;font-weight:600;font-size:.9rem;padding:9px 16px;
  border-radius:7px;text-decoration:none;white-space:nowrap}

.bpnav .nv-cta:hover{background:#222F73}

.bpnav .burger{display:none;-webkit-appearance:none;appearance:none;padding:0;flex-direction:column;justify-content:center;gap:4px;width:38px;height:34px;
  margin-left:auto;background:none;border:1px solid var(--line);border-radius:7px;cursor:pointer}

.bpnav .burger span{display:block;width:20px;height:2px;flex:0 0 2px;background:var(--ink);margin:0 auto;border-radius:2px}

@media(max-width:1280px){
.bpnav .mainnav.flat{gap:2px;margin-left:8px}
.bpnav .mainnav.flat .nv-link{font-size:.84rem;padding:8px 9px}
}

@media(max-width:1120px){
.bpnav .mainnav.flat .nv-link{font-size:.8rem;padding:8px 7px}
}

@media(max-width:1080px){

  .bpnav .nv-tel{display:none}
}

@media(max-width:900px){

  .bpnav header.top{flex-wrap:wrap;padding:10px 18px}

  .bpnav .burger{display:flex}

  .bpnav .nv-cta{order:2;margin-left:10px;font-size:.85rem;padding:8px 13px}

  .bpnav .mainnav{order:5;flex-basis:100%;display:none;flex-direction:column;align-items:stretch;
    gap:0;padding:10px 0 4px;border-top:1px solid var(--line);margin-top:10px}

  .nav-open .bpnav .mainnav{display:flex}

  .bpnav .nv-item > a, .bpnav .nv-link{padding:11px 4px;font-size:.98rem}

  .bpnav .nv-menu{position:static;display:grid!important;grid-template-columns:1fr!important;
    border:0;box-shadow:none;padding:2px 0 14px 12px;gap:14px;background:none}

  .bpnav .nv-mat{grid-template-columns:1fr 1fr}
}