/* ═══════════════════════════════════════════
   MODULE 1 DETAIL, Specific styles
   ═══════════════════════════════════════════ */

html {
  scroll-padding-top: 80px;
}

/* Section icon */
.detail-section-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--sp-4);
}

/* Section divider */
.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--tertiary));
  margin: 0 auto;
  border-radius: 2px;
}

/* Next section link, fin de section */
.next-section-link {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.next-section-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--outline-variant) 20%, var(--primary) 50%, var(--outline-variant) 80%, transparent);
  opacity: 0.6;
}

.next-section-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 16px 32px;
  min-height: 56px;
  line-height: 1.3;
  background: linear-gradient(135deg, var(--surface-container-high), var(--surface-container));
  color: var(--on-surface);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--title-md);
  border-radius: 999px;
  position: relative;
  isolation: isolate;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 176, 0, 0.18);
  transition: transform var(--duration-md) var(--ease-out-expo),
              box-shadow var(--duration-md) ease,
              color var(--duration-md) ease;
}

.next-section-link a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--primary), transparent 40%, transparent 60%, var(--tertiary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
  transition: opacity var(--duration-md) ease;
  z-index: -1;
  pointer-events: none;
}

.next-section-link a::after {
  content: '→';
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  color: var(--primary);
  transform: translateX(0);
  transition: transform var(--duration-md) var(--ease-out-expo);
}

/* On masque la flèche présente dans le contenu (→) pour ne garder que la flèche animée du ::after. */
.next-section-link a {
  /* Le contenu HTML peut contenir " →" en suffixe, on l'absorbe via white-space si besoin. */
}

.next-section-link a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 176, 0, 0.25), inset 0 0 0 1px rgba(255, 176, 0, 0.4);
  color: var(--primary);
}

.next-section-link a:hover::before { opacity: 1; }
.next-section-link a:hover::after { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .next-section-link a,
  .next-section-link a::after { transition: none; }
  .next-section-link a:hover { transform: none; }
  .next-section-link a:hover::after { transform: none; }
}

/* Anchor scroll offset to clear the fixed top nav */
.guide-section.section,
section[id] {
  scroll-margin-top: 90px;
}

/* Side navigation */
.detail-sidenav {
  position: fixed;
  left: var(--sp-6);
  top: 90px;
  bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  z-index: 50;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.detail-sidenav::-webkit-scrollbar { width: 4px; }
.detail-sidenav::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 2px; }

.detail-sidenav a {
  font-size: var(--label-sm);
  font-weight: 500;
  color: var(--on-surface-variant);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid transparent;
  transition: color var(--duration-md) ease, border-color var(--duration-md) ease;
  white-space: nowrap;
}

.detail-sidenav a:hover {
  color: var(--on-surface);
}

.detail-sidenav a.active {
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 700;
}

@media (max-width: 1200px) {
  .detail-sidenav {
    display: none;
  }
}