/* Menu « Explorer » de la barre du haut : rend TOUTES les rubriques de la
   plateforme accessibles en un clic depuis n'importe quelle page, sans que
   les liens débordent sur ordinateur. Sur téléphone, la liste complète reste
   dans le menu hamburger. */
.nav-more { position: relative; display: flex; align-items: center; }

/* La classe .bar du projet sert AUSSI de barre de progression et impose
   « overflow: hidden ». Ce réglage coupait le panneau déroulant : il
   s'ouvrait dans le vide, sous l'en-tête. On le rétablit ici. */
.app-header .bar { overflow: visible; }

.nav-more-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: .87rem; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.nav-more-btn:hover { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand-soft); }
.nav-more-btn svg { width: 15px; height: 15px; transition: transform .18s ease; }
.nav-more.open .nav-more-btn { background: var(--brand-soft); color: var(--brand-dark); }
.nav-more.open .nav-more-btn svg { transform: rotate(180deg); }

.nav-more-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  display: none; grid-template-columns: 1fr;
  min-width: 250px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 14px 40px rgba(15,15,26,.16);
}
.nav-more.open .nav-more-panel { display: grid; }
.nav-more-panel a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: .9rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.nav-more-panel a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.nav-more-panel a.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.nav-more-panel a .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); opacity: .55; flex: 0 0 auto;
}

@media (max-width: 743px) {
  /* Sur téléphone, le menu hamburger porte déjà la liste complète. */
  .nav-more { display: none; }
}

/* Le menu déroulant du téléphone était coupé : sa hauteur était figée à
   520 px, donc les dernières rubriques (Professionnels, Corps de métiers,
   Comment ça marche, Devenir partenaire) restaient invisibles. Il prend
   maintenant la hauteur de l'écran et défile si besoin. */
.mobile-menu.open {
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Les entrées sont plus faciles à toucher : une ligne par rubrique, avec
   assez de hauteur pour le doigt. */
.mobile-menu nav a { padding: 13px 12px; font-size: .95rem; }