/**
 * submenu — menu d'ancres généré par submenu.js à partir des h2 des
 * sections de la page (voir submenu.js, non modifié ici : les classes
 * `section--submenu-scroll` et le conteneur `.inner` sont ses points
 * d'ancrage, à ne pas renommer).
 *
 * Layout posé ici en CSS classique (display:flex…), volontairement pas en
 * helpers Bulma `is-flex` : la media query qui masque tout le composant
 * sous 1024px (display:none !important) doit rester dans le même fichier
 * que la règle display:flex qu'elle neutralise. Si le flex était porté par
 * le helper `is-flex` (theme_violette/css/style.css, display:flex
 * !important lui aussi), les deux déclarations à spécificité égale (0,1,0)
 * vivraient dans des fichiers différents : l'ordre d'agrégation CSS
 * inter-fichiers de Drupal n'étant pas garanti, le composant pourrait
 * réapparaître sur mobile selon l'ordre de chargement des bibliothèques.
 */

/**
 * Le bandeau se lit comme le second étage de navigation du système : une
 * rangée d'entrées au fer à gauche, sur aplat clair, fermée par un filet.
 * C'est la même pièce que le menu de rubrique de l'en-tête, à un étage plus
 * bas — d'où le fer à gauche plutôt que le centrage.
 */
.section--submenu-scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--ffc-filet, rgba(0,0,0,.15));
  /* Aucun pas vertical propre : la hauteur du bandeau est celle des entrées,
     soit la cible de 44px, et rien de plus. */
  padding-block: 0;
  margin-bottom: var(--ffc-espace-section, 3rem);
  z-index: 2;
  background-color: var(--ffc-fond-doux, #fafaf8);
  gap: var(--ffc-gouttiere, 1.5rem);
}

/* sticky si desktop */
@media print, screen and (min-width: 1024px) {
  .section--submenu-scroll {
    position: sticky;
    top: 0;
  }
}

/* Titre du groupe masqué visuellement mais annoncé (accessibilité) */
.type-simple .section_scroll h2.section-scroll-heading.not_content {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* toolbar gin (admin) */
body.gin--vertical-toolbar .section--submenu-scroll {
  left: calc(var(--gin-toolbar-x-offset)) !important;
}
body.gin--vertical-toolbar .lp-builder .section--submenu-scroll {
  left: 0 !important;
}

/* Rangée d'entrées (nav.section-menu > ul, injecté par le JS). La liste est
   neutralisée ici : sans `list-style: none`, la puce du système — posée par le
   thème sur les listes de contenu — vient se coller devant chaque entrée. */
.section--submenu-scroll .section-menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ffc-gouttiere, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Les thèmes espacent les items d'une liste de contenu (`.content li + li`) :
   dans une rangée, cette marge haute décale toutes les entrées sauf la
   première. Le sous-menu n'est pas une liste à puces, il n'en veut pas. */
.section--submenu-scroll .inner .section-menu ul li {
  margin: 0;
  padding: 0;
}

/* Une entrée de menu, pas un lien de texte : caractère de titre, jamais
   soulignée au repos, dans une cible de 44px.
   Le chemin complet `.inner .section-menu ul li a` est volontaire : les thèmes
   soulignent les liens de contenu par des règles à trois classes
   (`.content a:not(.button):not(.comp--bouton)`), que deux classes ne battent
   pas. `.inner` — point d'ancrage du JS, déjà stable — fournit la troisième et
   la spécificité se gagne sans `!important`. */
.section--submenu-scroll .inner .section-menu ul li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ffc-font-titre, inherit);
  font-size: 1rem;
  font-weight: var(--ffc-graisse-moyenne, 500);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ffc-texte, #222);
  text-decoration: none;
  transition:
    text-decoration-color var(--ffc-duree, 150ms) var(--ffc-courbe, ease-out),
    color var(--ffc-duree, 150ms) var(--ffc-courbe, ease-out);
}

/* La section courante est marquée par un souligné, seul ornement du système. */
.section--submenu-scroll .inner .section-menu ul li a.is-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.section--submenu-scroll .inner .section-menu ul li a:hover {
  color: var(--ffc-lien, #0b57d0);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* on cache si mobile */
@media print, screen and (max-width: 1024px) {
  .section--submenu-scroll {
    display: none !important;
  }
}