/**
 * Atelier Sidebar - Styles du sommaire sticky
 * Fichier : templates/shaper_helixultimate/css/atelier-sidebar.css
 * Version : 2.1 (fix largeur sticky, prévention scrollbar)
 */

/* ═══════════════════════════════════════════════════════════════
   COMPENSATION SCROLLBAR GLOBALE
   Prévient le changement de largeur quand la scrollbar apparaît/disparaît
   ═══════════════════════════════════════════════════════════════ */

html {
  /* Réserve de l'espace pour la scrollbar même quand elle n'existe pas */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENEUR PARENT (protection de la largeur)
   ═══════════════════════════════════════════════════════════════ */

.col-12.col-lg-4 {
  /* FIX v2.1 : Assurez-vous que le parent ne change pas de largeur */
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SOMMAIRE STICKY
   ═══════════════════════════════════════════════════════════════ */

.atelier-toc-wrapper {
  margin-bottom: 2rem;
}

.atelier-toc-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 2px solid #f0f0f0;
  /* FIX v2.1 : Prévenir que la carte change de largeur lors du sticky */
  box-sizing: border-box;
}

/* Titre du sommaire - h2 sémantique au lieu de h4 */
.atelier-toc-card .toc-title {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.atelier-toc-card .toc-title span {
  font-size: 1.25rem;
}

/* Navigation sommaire - ol au lieu de ul */
.atelier-toc-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-counter;
}

.atelier-toc-nav li {
  margin: 0;
  position: relative;
}

/* Liens sommaire */
.toc-link {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.toc-link.toc-level-3 {
  padding-left: 1rem;
  font-size: 0.85rem;
}

.toc-link:hover {
  color: #667eea;
  border-left-color: #667eea;
}

/* État actif (appliqué par JavaScript) */
.toc-link.active,
.toc-link[aria-current="location"] {
  border-left-color: #667eea;
  color: #667eea;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITÉ CLAVIER
   ═══════════════════════════════════════════════════════════════ */

/* Focus visible pour navigation clavier */
.toc-link:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  border-left-color: #667eea;
  color: #667eea;
}

/* Focus-visible pour navigateurs modernes (pas de outline au clic souris) */
.toc-link:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

.toc-link:focus:not(:focus-visible) {
  outline: none;
}

/* Bouton retour haut */
.atelier-toc-back-to-top {
  margin-top: 1rem;
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.atelier-toc-back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.atelier-toc-back-to-top:active {
  transform: translateY(0);
}

/* Focus bouton pour accessibilité */
.atelier-toc-back-to-top:focus {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.atelier-toc-back-to-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.atelier-toc-back-to-top:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   SKIP LINK (pour lecteurs d'écran)
   ═══════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #667eea;
  color: #fff;
  z-index: 9999;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Mobile : pas de sticky, affichage normal */
@media (max-width: 991px) {
  html {
    /* Sur mobile, pas besoin de réserver la scrollbar si elle n'est pas sticky */
    scrollbar-gutter: auto;
    overflow-y: auto;
  }
  
  .atelier-toc-wrapper {
    margin-bottom: 1.5rem;
  }
  
  .atelier-toc-card {
    padding: 1rem;
  }
  
  .toc-link {
    font-size: 0.85rem;
  }
  
  .toc-link.toc-level-3 {
    font-size: 0.8rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT (impression)
   ═══════════════════════════════════════════════════════════════ */

@media print {
  html {
    scrollbar-gutter: auto;
  }
  
  .atelier-toc-wrapper {
    page-break-inside: avoid;
  }
  
  .atelier-toc-back-to-top {
    display: none;
  }
}