/* Navigation des tutoriels : menu « routeur » + hub avec barre latérale + bloc « même catégorie ».
   Chargé sur toutes les pages après site-search.css. */

/* ---------- Méga-menu Tutoriels (desktop) ---------- */
@media (min-width: 992px) {
  .navbar-nav .nav-item.tm-item { position: static; }
  /* Centré dans la barre ; left en calc() et marge forcée à 0 car le thème met margin-left:-1rem au survol */
  .tuto-mega { width: 840px; max-width: calc(100vw - 2rem); left: calc(50% - 420px) !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  .tuto-mega .tm-wrap { display: flex; }
  .tuto-mega .tm-start {
    width: 250px; flex: 0 0 250px; padding: 1.25rem 1.25rem 1rem;
    background: rgba(var(--si-primary-rgb), .04); border-right: 1px solid var(--si-border-color, rgba(0,0,0,.08));
    display: flex; flex-direction: column;
  }
  .tuto-mega .tm-grid { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: .125rem .5rem; padding: 1rem 1rem; align-content: start; }
}
.tuto-mega .tm-label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--si-gray-600); margin-bottom: .5rem; }
.tuto-mega .tm-start .dropdown-item { padding-left: 0; padding-right: 0; white-space: normal; font-size: .9375rem; }
.tuto-mega .tm-start .tm-all { margin-top: auto; padding-top: .75rem; font-weight: 600; font-size: .9375rem; }
.tm-card {
  display: flex; align-items: flex-start; gap: .75rem; padding: .625rem .75rem; border-radius: .5rem;
  color: inherit; text-decoration: none; transition: background-color .15s ease;
}
.tm-card:hover, .tm-card:focus { background: rgba(var(--si-primary-rgb), .07); color: inherit; }
.tm-card i { font-size: 1.375rem; line-height: 1.3; color: var(--si-primary); flex: 0 0 auto; }
.tm-card .tm-title { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.tm-card .tm-desc { display: block; font-size: .8125rem; line-height: 1.35; color: var(--si-gray-600); }
.tm-card .tm-count { margin-left: auto; flex: 0 0 auto; font-size: .75rem; font-weight: 600; color: var(--si-gray-600);
  background: rgba(var(--si-primary-rgb), .08); border-radius: 999px; padding: .1rem .5rem; }
.tm-card.tm-all-card i { color: var(--si-gray-600); }

/* Mobile : liste simple dans l'offcanvas */
@media (max-width: 991.98px) {
  .tuto-mega .tm-start { padding: .5rem 1rem .25rem; }
  .tuto-mega .tm-grid { padding: .25rem .5rem .75rem; }
  .tm-card { padding: .5rem .5rem; }
  .tm-card .tm-desc { display: none; }
  .tuto-mega .tm-all { display: none; } /* doublon avec la carte « Tous les tutoriels » */
}

/* ---------- Hub : barre latérale des catégories ---------- */
.tuto-sidenav { display: flex; flex-direction: column; gap: .125rem; }
.tuto-sidenav-link {
  display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: .5rem;
  color: var(--si-body-color); text-decoration: none; font-size: .9375rem; transition: background-color .15s ease, color .15s ease;
}
.tuto-sidenav-link i { font-size: 1.25rem; color: var(--si-gray-600); transition: color .15s ease; }
.tuto-sidenav-link .count { margin-left: auto; font-size: .75rem; color: var(--si-gray-600); }
.tuto-sidenav-link:hover { background: rgba(var(--si-primary-rgb), .06); color: var(--si-body-color); }
.tuto-sidenav-link.active { background: rgba(var(--si-primary-rgb), .1); color: var(--si-primary); font-weight: 600; }
.tuto-sidenav-link.active i, .tuto-sidenav-link.active .count { color: var(--si-primary); }
.tuto-cat { scroll-margin-top: 110px; }
.tuto-cat-icon { font-size: 1.5rem; color: var(--si-primary); margin-right: .625rem; }
.tuto-chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
.tuto-chips a { flex: 0 0 auto; font-size: .8125rem; padding: .35rem .75rem; border: 1px solid var(--si-border-color, rgba(0,0,0,.1)); border-radius: 999px; color: var(--si-body-color); text-decoration: none; white-space: nowrap; }
.tuto-chips a:hover { border-color: var(--si-primary); color: var(--si-primary); }

/* ---------- Page tutoriel : bloc « Dans la même catégorie » ---------- */
.tuto-related { margin: 1.5rem 0 0 1em; text-align: left; }
.tuto-related .tr-label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--si-gray-600); margin-bottom: .5rem; }
.tuto-related .tr-cat { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--si-primary); text-decoration: none; margin-bottom: .5rem; }
.tuto-related ul { list-style: none; padding: 0; margin: 0 0 .75rem; }
.tuto-related li { font-size: .875rem; line-height: 1.35; padding: .3rem 0; border-top: 1px solid var(--si-border-color, rgba(0,0,0,.08)); }
.tuto-related li a { color: var(--si-body-color); text-decoration: none; }
.tuto-related li a:hover { color: var(--si-primary); }
.tuto-related .tr-next { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; font-weight: 600; color: var(--si-primary); text-decoration: none; }
.tuto-related .tr-next:hover { text-decoration: underline; }

/* La barre latérale sticky des tutos devient défilable si elle dépasse l'écran */
@media (min-width: 768px) {
  aside:has(.tuto-related) > .position-sticky { max-height: 100vh; overflow-y: auto; scrollbar-width: thin; padding-bottom: 1rem; }
}