/* ============================================================
   NAVIGATION « GLASS » — menu principal + menu droite
   Adapté du modèle glass navbar (indicateur glissant + néon bleu
   au survol), scellé sur les menus Joomla pour ne rien toucher
   d'autre sur le site. Chargé par index.php.
   ============================================================ */

:root {
  --gn-neon: #00b3ff;
  --gn-neon-strong: #4dd2ff;
  --gn-radius: 999px;
}

/* Trait néon : anneau de 2px + très léger halo statique (pas d'animation) */

/* ==========================================================
   1. MENU PRINCIPAL (header)
   ========================================================== */

/* ---- La barre ---- */
.container-header .container-nav ul.mod-menu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--gn-radius);
  background: linear-gradient(135deg, #e6e6e6, #bfbfbf);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow:
    inset -3px -3px 6px rgba(0, 0, 0, .25),
    inset 0 0 9px rgba(255, 255, 255, .3),
    inset 2px 4px 8px rgba(255, 255, 255, 1),
    inset -6px -12px 18px rgba(0, 0, 0, .25),
    0 6px 6px rgba(0, 0, 0, .4),
    0 2px 2px rgba(0, 0, 0, .7),
    8px 16px 8px rgba(0, 0, 0, .25);
}

/* ---- Les items (mêmes mesures que le menu droite : 44px / 26px / 15px) ---- */
.container-header .container-nav ul.mod-menu > li {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 26px;
  transition: color .35s;
}

.container-header .container-nav ul.mod-menu > li > a.nav-link,
.container-header .container-nav ul.mod-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  color: #777;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .35s, text-shadow .35s;
}

/* ---- NÉON BLEU au survol : trait de 2px tout autour du bouton ---- */
.container-header .container-nav ul.mod-menu > li:hover,
.container-header .container-nav ul.mod-menu > li:focus-within {
  outline: 2px solid var(--gn-neon);
  outline-offset: 0;
  box-shadow: 0 0 6px rgba(0, 179, 255, .45);
}

.container-header .container-nav ul.mod-menu > li > a:hover,
.container-header .container-nav ul.mod-menu > li > a:focus-visible,
.container-header .container-nav ul.mod-menu > li.active > a,
.container-header .container-nav ul.mod-menu > li.current > a {
  color: #000;
  text-shadow:
    0 0 4px #ffffff,
    0 0 8px var(--gn-neon),
    0 0 16px var(--gn-neon-strong),
    0 0 28px var(--gn-neon-strong),
    0 0 40px #0080ff;
}

/* ---- L'indicateur glissant (injecté par glass-menu.js) ---- */
.container-header .container-nav ul.mod-menu > .gn-indicator {
  position: absolute;
  z-index: 1;
  left: 18px;
  top: 14px;
  width: 0;
  height: 0;
  border-radius: 26px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(135deg, #f5f5f5, #bfbfbf);
  border: 1px solid rgba(255, 255, 255, .75);
  outline: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow:
    inset -3px -3px 6px rgba(0, 0, 0, .25),
    inset 0 0 9px rgba(255, 255, 255, .3),
    inset 2px 4px 8px rgba(255, 255, 255, 1),
    inset -6px -12px 18px rgba(0, 0, 0, .25),
    0 4px 4px rgba(0, 0, 0, .9),
    0 2px 2px rgba(0, 0, 0, .9),
    8px 8px 8px rgba(0, 0, 0, .25);
  transition:
    left .55s cubic-bezier(.34, 1.28, .74, 1),
    top .55s cubic-bezier(.34, 1.28, .74, 1),
    width .3s ease,
    height .3s ease;
}

/* Reflet de verre de l'indicateur */
.container-header .container-nav ul.mod-menu > .gn-indicator::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 10%;
  width: 80%;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .98), rgba(255, 255, 255, .55), transparent);
  filter: blur(3px);
}

/* Sous-menus éventuels : style discret au-dessus de la barre */
.container-header .container-nav ul.mod-menu ul {
  z-index: 1000;
  background: #f0f0f0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ==========================================================
   2. MENU DROITE (sidebar « Divers »)
   ========================================================== */

/* ---- La colonne ---- */
.sidebar-right .card-body ul.mod-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 26px;
  background: linear-gradient(135deg, #e6e6e6, #bfbfbf);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow:
    inset -3px -3px 6px rgba(0, 0, 0, .25),
    inset 0 0 9px rgba(255, 255, 255, .3),
    inset 2px 4px 8px rgba(255, 255, 255, 1),
    inset -6px -12px 18px rgba(0, 0, 0, .25),
    0 6px 6px rgba(0, 0, 0, .35),
    0 2px 2px rgba(0, 0, 0, .55),
    6px 10px 8px rgba(0, 0, 0, .2);
}

/* ---- Les items ---- */
.sidebar-right .card-body ul.mod-menu > li {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  min-height: 44px;
  border-radius: 26px;
}

.sidebar-right .card-body ul.mod-menu > li > a.nav-link,
.sidebar-right .card-body ul.mod-menu > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  color: #777;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .35s, text-shadow .35s;
}

/* ---- NÉON BLEU au survol : trait de 2px ---- */
.sidebar-right .card-body ul.mod-menu > li:hover,
.sidebar-right .card-body ul.mod-menu > li:focus-within {
  outline: 2px solid var(--gn-neon);
  outline-offset: 0;
  box-shadow: 0 0 6px rgba(0, 179, 255, .45);
}

.sidebar-right .card-body ul.mod-menu > li > a:hover,
.sidebar-right .card-body ul.mod-menu > li > a:focus-visible,
.sidebar-right .card-body ul.mod-menu > li.active > a,
.sidebar-right .card-body ul.mod-menu > li.current > a {
  color: #000;
  text-shadow:
    0 0 4px #ffffff,
    0 0 8px var(--gn-neon),
    0 0 16px var(--gn-neon-strong),
    0 0 28px var(--gn-neon-strong);
}

/* ---- L'indicateur glissant ---- */
.sidebar-right .card-body ul.mod-menu > .gn-indicator {
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 10px;
  width: 0;
  height: 0;
  border-radius: 26px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(135deg, #f5f5f5, #bfbfbf);
  border: 1px solid rgba(255, 255, 255, .75);
  outline: 1px solid rgba(255, 255, 255, .15);
  box-shadow:
    inset -3px -3px 6px rgba(0, 0, 0, .25),
    inset 0 0 9px rgba(255, 255, 255, .3),
    inset 2px 4px 8px rgba(255, 255, 255, 1),
    inset -6px -12px 18px rgba(0, 0, 0, .25),
    0 4px 4px rgba(0, 0, 0, .7),
    0 2px 2px rgba(0, 0, 0, .7);
  transition:
    left .55s cubic-bezier(.34, 1.28, .74, 1),
    top .55s cubic-bezier(.34, 1.28, .74, 1),
    width .3s ease,
    height .3s ease;
}

.sidebar-right .card-body ul.mod-menu > .gn-indicator::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 10%;
  width: 80%;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .98), rgba(255, 255, 255, .5), transparent);
  filter: blur(3px);
}

/* ==========================================================
   3. RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
  .container-header .container-nav ul.mod-menu {
    transform: scale(.85);
    transform-origin: center top;
  }
}

@media (max-width: 700px) {
  .container-header .container-nav ul.mod-menu {
    flex-direction: column;
    width: 260px;
    transform: none;
    margin-inline: auto;
  }

  .container-header .container-nav ul.mod-menu > li {
    width: 100%;
    min-height: 44px;
  }
}

/* Réduction des animations : le trait reste, statique */
@media (prefers-reduced-motion: reduce) {
  .container-header .container-nav ul.mod-menu > .gn-indicator,
  .sidebar-right .card-body ul.mod-menu > .gn-indicator {
    transition: none;
  }

  .container-header .container-nav ul.mod-menu > li:hover,
  .sidebar-right .card-body ul.mod-menu > li:hover {
    outline: 2px solid var(--gn-neon);
    outline-offset: 0;
    box-shadow: 0 0 6px rgba(0, 179, 255, .45);
  }
}

/* ==========================================================
   5. BARRE PRINCIPALE : s'arrete aux liens de menu (fit-content)
   La barre glass ne s'etire plus sur toute la largeur du header :
   elle epouse la longueur des liens (Accueil, A propos, ...).
   La recherche reste placee a droite du header, hors de la barre.
   ========================================================== */
@media (width >= 992px) {
  .container-header .container-nav {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }

  /* La barre glass epouse les liens */
  .container-header .container-nav nav,
  .container-header .container-nav ul.mod-menu {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  /* La recherche reste a droite, alignee avec la barre */
  .container-header .container-nav .container-search {
    margin-inline-start: auto;
    margin-top: 14px; /* aligne verticalement avec le centre de la barre */
  }
}

/* Petits ecrans : comportement conserve (empilement) */
@media (width < 992px) {
  .container-header .container-nav ul.mod-menu {
    width: 100%;
  }
}

/* L'UL herite d'un flex-grow:1 qui etire la barre : on le neutralise */
@media (width >= 992px) {
  .container-header .container-nav ul.mod-menu {
    flex: 0 0 auto;
  }
}

/* ===== Compteur de recettes (position search, au-dessus du champ) ===== */
.container-search .compteur-recettes {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35em;
  margin: 0 0 0.35em 0;
  padding: 0.15em 0.9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.8), 0 1px 4px rgba(31,41,55,.12);
  font-family: inherit;
  line-height: 1.2;
  width: fit-content;
  margin-left: auto;
}
.container-search .compteur-recettes__nombre {
  font-weight: 700;
  font-size: 1.02rem;
  color: #1f2937;
}
.container-search .compteur-recettes__libelle {
  font-size: 0.85rem;
  color: #4b5563;
}