.chevron_ariane
{
	color:#0088EE ; 
}


.vnav{
  --w: 710px;
  --cats: 280px;
  --border:#e5e7eb;
  --bg:#fff;
  --text:#111827;
  --shadow:0 10px 30px rgba(0,0,0,.12);

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);

  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(92vw, var(--w));
  background: var(--bg);
  box-shadow: var(--shadow);
  transform: translateX(-105%);
  transition: transform .22s ease;
  z-index: 2000;
  overflow: hidden;
}
.vnav.is-open{ transform: translateX(0); }

.navToggle{
  /* à vous d’intégrer au bandeau si besoin */
  margin: 10px;
  padding: .6rem .9rem;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: .6rem;
  cursor: pointer;
}

.vnav__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1rem;
  border-bottom:1px solid var(--border);
  background:#FFEE00;
}
.vnav__title{ font-weight:650; }
.vnav__close{
  border: 1px solid var(--border);
  background:#0d6efd;
  border-radius: .6rem;
  padding: .4rem .6rem;
  cursor: pointer;
}


/**/
/* Accessibilité */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.vnav__search{
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 2; /* au-dessus des overlays éventuels */
}

.vnav__searchInput{
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #ff00bf;
  border-radius: .6rem;
  outline: none;
}

.vnav__searchInput:focus{
  border-color: #c7d2fe;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.vnav__searchResults{
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: calc(100% - .25rem);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: .75rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}

.vnav__searchResults.is-open{ display: block; }

.vnav__searchItem{
  display: block;
  padding: .6rem .75rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid #f3f4f6;
}

.vnav__searchItem:last-child{ border-bottom: 0; }

.vnav__searchItem:hover,
.vnav__searchItem:focus{
  background: #f3f4f6;
  outline: none;
}

.vnav__searchMeta{
  display: block;
  font-size: .85rem;
  color: #6b7280;
  margin-top: .15rem;
}
/**/



.vnav__layout{
  display:grid;
  grid-template-columns: var(--cats) minmax(0,1fr);
  height: calc(100vh - 64px);
  overflow:auto;
}

.vnav__cats{
  margin:0; padding:.5rem;
  list-style:none;
  border-right:1px solid var(--border);
}
.vnav__catBtn{
  width:100%;
  text-align:left;
  padding:.75rem .8rem;
  border:0; background:transparent;
  border-radius:.6rem;
  cursor:pointer;
  font-weight:550;
}
.vnav__catBtn:hover,.vnav__catBtn:focus-visible{ outline:none; background:#f3f4f6; }
.vnav__catBtn[aria-expanded="true"]{ background:#FF5bf8; }

.vnav__panel{ display:none; padding:1rem 1rem 1.2rem; }
.vnav__panel.is-active{ display:block; }
.vnav__panelHeader{ margin-bottom:.6rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); }
.vnav__panelTitle{ font-weight:700; text-decoration:none; color:var(--text); }

.vnav__links{ margin:0; padding:0; list-style:none; display:grid; gap:.25rem; }
.vnav__links a{
  display:block;
  padding:5px;
  border-radius:.55rem;
  text-decoration:none;
  color:var(--text);
}
.vnav__links a:hover,.vnav__links a:focus-visible{ outline:none; background:#f3f4f6; }
.vnav__empty{ margin:.5rem 0 0; color:#6b7280; }

/* Backdrop */
.vnav__backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  z-index:1990;
}
.vnav__backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

/* Mobile: accordéon */
@media (max-width: 992px){
  .vnav__layout{ grid-template-columns: 1fr; }
  .vnav__cats{ border-right:0; border-bottom:1px solid var(--border); }
  .vnav__panel{ padding:.5rem .5rem 0; }
}