/* =============================================================================
   GrowLED Academy : barre de navigation d'étape (2026-08-12).

   Retour utilisateur à l'origine de ce fichier : sur une page d'étape, on ne
   savait plus où l'on se trouvait dans le parcours ni comment en sortir. La
   barre porte quatre repères : le retour au parcours, la position chiffrée,
   l'accès direct à n'importe quelle étape, et le saut d'une étape à l'autre.
   Une barre de progression fine ferme le bloc.

   Fichier strictement ADDITIF : aucun fichier existant n'est modifié. Charge
   après les précédents sur les 3 pages du module.

   ── Unités : PAS de rem ──────────────────────────────────────────────────
   La racine du thème est en `html{font-size:62.5%}` (1 rem = 10 px). Tout en px.

   ── Pièges du thème traités ici ──────────────────────────────────────────
   1. `#center_column a` colore et souligne tout lien : neutralisé sur les
      éléments de la barre, qui sont des contrôles et non du texte lié.
   2. `svg{fill:currentcolor}` (ybc_blog) rendrait les chevrons pleins :
      `fill: none` explicite en CSS.
   3. `* { outline: none !important }` (ybc_blog) supprime l'anneau de focus du
      site entier. Contré ici pour les seuls éléments focalisables de la barre,
      par la seule déclaration `!important` du fichier.
   4. `.not-index #columns .content-inner #center_column * {border-color:
      #ececec}` écrase toute couleur de bordure : la barre n'utilise donc AUCUNE
      bordure colorée, sa séparation passe par un fond et une ombre.

   ── Position collée ──────────────────────────────────────────────────────
   `position: sticky` sur un conteneur hors du flux de `.container` : la barre
   suit le défilement sans recouvrir le contenu, et `z-index` la place au-dessus
   des dispositifs éditoriaux sans passer devant les menus du thème.
   ============================================================================= */

/* `position: sticky` est neutralisé par tout ancêtre en `overflow: hidden`.
   Le thème en pose un sur `.columns-container`, mesuré en runtime. On le rend
   visible UNIQUEMENT sur les trois pages du module, jamais globalement : cette
   règle protège probablement le reste du site d'un débordement horizontal.
   Vérifié après application : aucun débordement sur les pages Academy, en 1440
   comme en 390. */
body.module-gwps_academy-step .columns-container,
body.module-gwps_academy-academy .columns-container,
body.module-gwps_academy-academypro .columns-container,
body.module-gwps_academy-parcours .columns-container {
  overflow: visible;
}

.ga-navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(59, 17, 85, .08), 0 6px 18px rgba(59, 17, 85, .06);
  margin-bottom: 14px;
}

.ga-navbar-in {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 9px 16px;
}

/* Retour au parcours : le contrôleur pointe vers l'accueil DU PARCOURS courant. */
.ga-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 12px 7px 9px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ga-violet, #3b1155);
  background: var(--ga-ed-violet-soft, #f1eaf9);
  text-decoration: none;
  transition: background .14s ease;
}

.ga-nav-back:hover,
.ga-nav-back:focus {
  text-decoration: none;
  color: var(--ga-violet, #3b1155);
  background: #e6dbf5;
}

.ga-nav-back svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
}

.ga-nav-mid {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.ga-nav-pos {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--ga-ed-faint, #6d6480);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Saut direct vers une étape. Un <select> natif plutôt qu'un menu maison :
   il fonctionne au clavier, au tactile et avec un lecteur d'écran sans code. */
.ga-nav-jump {
  flex: 1 1 auto;
  min-width: 0;
}

.ga-nav-jump select {
  width: 100%;
  max-width: 460px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ga-text, #221c2b);
  background: var(--ga-bg-light, #f7f5fa);
  border: 1px solid var(--ga-line, #e7e1f0);
  border-radius: 8px;
  cursor: pointer;
}

.ga-nav-jump select:focus-visible {
  outline: 2px solid var(--ga-violet, #3b1155) !important;
  outline-offset: 2px;
}

.ga-nav-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.ga-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--ga-violet, #3b1155);
  background: var(--ga-bg-light, #f7f5fa);
  text-decoration: none;
  transition: background .14s ease;
}

.ga-nav-arrow:hover,
.ga-nav-arrow:focus {
  text-decoration: none;
  color: var(--ga-violet, #3b1155);
  background: var(--ga-ed-violet-soft, #f1eaf9);
}

.ga-nav-arrow:focus-visible {
  outline: 2px solid var(--ga-violet, #3b1155) !important;
  outline-offset: 2px;
}

.ga-nav-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

/* Extrémités du parcours : le repère reste visible, mais inactif. */
.ga-nav-arrow-off {
  opacity: .32;
  cursor: default;
}

.ga-nav-progress {
  height: 3px;
  background: var(--ga-line, #e7e1f0);
}

.ga-nav-progress span {
  display: block;
  height: 100%;
  background: var(--ga-green, #7ac143);
  transition: width .3s ease;
}

/* Mobile : la position chiffrée et le sélecteur suffisent, le libellé du
   retour cède la place. Les cibles tactiles restent à 34px minimum. */
@media (max-width: 620px) {
  .ga-navbar-in {
    padding: 8px 12px;
    gap: 8px;
  }

  .ga-nav-back span {
    display: none;
  }

  .ga-nav-back {
    padding: 7px 9px;
  }

  .ga-nav-jump select {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ga-nav-back,
  .ga-nav-arrow,
  .ga-nav-progress span {
    transition: none;
  }
}