/* Espace documentaire MC Pilot. Tous les sélecteurs sont ancrés à sa racine
   afin que cette feuille, chargée par le document commun, reste sans effet sur
   le shell métier et les parcours Auth. */
#v2App[data-space="help"] {
  min-height: 100vh;
  background: var(--ui-page-background);
}

#v2App[data-space="help"] .help-shell {
  --help-header-height: 4.75rem;
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  grid-template-rows: var(--help-header-height) minmax(0, 1fr);
  min-height: 100vh;
}

#v2App[data-space="help"] .help-header {
  position: sticky;
  z-index: 30;
  top: 0;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: .75rem clamp(1rem, 3vw, 2rem);
  background: var(--ui-topbar-background);
  border-bottom: 1px solid var(--ui-border);
  backdrop-filter: blur(10px);
}

#v2App[data-space="help"] .help-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .85rem;
  color: var(--ui-text-primary);
  text-decoration: none;
}

#v2App[data-space="help"] .help-brand img { width: 9rem; }
#v2App[data-space="help"] .help-brand-title { font-weight: 800; white-space: nowrap; }
#v2App[data-space="help"] .help-brand-context {
  padding-left: .85rem;
  color: var(--ui-text-secondary);
  border-left: 1px solid var(--ui-border);
  font-size: .82rem;
}

#v2App[data-space="help"] .help-header-actions { display: flex; align-items: center; gap: .9rem; }
#v2App[data-space="help"] .help-return { color: var(--brand-ink); font-weight: 700; text-underline-offset: .2em; }
#v2App[data-space="help"] .help-menu-button { display: none; }

#v2App[data-space="help"] .help-sidebar {
  position: sticky;
  top: var(--help-header-height);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--help-header-height));
  min-width: 0;
  padding: 1.35rem 1rem 1rem;
  overflow-y: auto;
  background: var(--ui-surface-muted);
  border-right: 1px solid var(--ui-border);
}

#v2App[data-space="help"] .help-groups,
#v2App[data-space="help"] .help-chapters {
  display: grid;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#v2App[data-space="help"] .help-group { border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 68%, transparent); }
#v2App[data-space="help"] .help-group-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
#v2App[data-space="help"] .help-group-link {
  min-width: 0;
  padding: .75rem .7rem;
  overflow-wrap: anywhere;
  color: var(--ui-text-primary);
  font-size: .94rem;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
}
#v2App[data-space="help"] .help-group-link[aria-current="page"] { font-weight: 750; }

/* Les grands chapitres reprennent le comportement de .nav-link (menu
   applicatif) : survol et entrée active partagent le même dégradé blanc, et
   seule l'entrée active ajoute la graisse et le liseré --brand-ink de 4px.
   Le dégradé porte sur la ligne entière, chevron compris, parce qu'une entrée
   du menu applicatif est un bloc d'un seul tenant ; ici le lien et son bouton
   sont deux éléments, et teinter le seul lien couperait le fond avant la
   flèche. Pas de variante de thème : le bandeau de l'aide reste crème
   (--ui-surface-muted) en Paper comme en Ink, là où le menu applicatif
   s'inverse en sombre — le traitement « paper » est donc le bon dans les deux
   cas. Les sous-chapitres gardent leur propre style, inchangé. */
#v2App[data-space="help"] .help-group-row:hover,
#v2App[data-space="help"] .help-group-row:has(.help-group-link[aria-current="page"]) {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .75) 0%,
    rgba(255, 255, 255, 0) 90%
  );
}
#v2App[data-space="help"] .help-group-row:has(.help-group-link[aria-current="page"]) {
  box-shadow: inset 4px 0 0 var(--brand-ink);
}
#v2App[data-space="help"] .help-group-toggle {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  place-items: center;
  color: var(--ui-text-primary);
  background: transparent;
  border: 0;
  border-radius: .45rem;
  cursor: pointer;
}
#v2App[data-space="help"] .help-group-toggle span {
  display: grid;
  place-items: center;
  transition: transform .5s ease;
}
#v2App[data-space="help"] .help-group-toggle span svg { display: block; width: 1.05rem; height: 1.05rem; }
#v2App[data-space="help"] .help-group-toggle[aria-expanded="true"] span { transform: scaleY(-1); }
#v2App[data-space="help"] .help-chapters { gap: 0; padding: 0 .55rem .65rem 3px; }
#v2App[data-space="help"] .help-chapters[hidden] { display: none; }
#v2App[data-space="help"] .help-chapters a {
  display: block;
  padding: .38rem .65rem;
  color: var(--ui-text-secondary);
  border-left: 1px solid var(--ui-border);
  font-size: .84rem;
  line-height: 1.35;
  text-decoration: none;
}
#v2App[data-space="help"] .help-chapters a:hover { color: var(--brand-ink); border-left-color: var(--brand-accent-deep); }
#v2App[data-space="help"] .help-sidebar-footer { margin-top: auto; padding-top: 1rem; }
#v2App[data-space="help"] .help-sidebar-footer .button { width: 100%; background: transparent; }

#v2App[data-space="help"] .help-main {
  min-width: 0;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 6vw, 5.5rem);
  scroll-margin-top: calc(var(--help-header-height) + 1rem);
}
/* Changer de chapitre ne vide plus la page : le contenu sortant s'estompe le
   temps du chargement, en-tête et sommaire restant en place. Discret par
   construction — une page déjà en cache ne clignote pas. */
#v2App[data-space="help"] .help-main[aria-busy="true"] { opacity: .55; transition: opacity .18s ease; }
#v2App[data-space="help"] .help-article { width: min(100%, 48rem); margin: 0 auto; }
#v2App[data-space="help"] .help-eyebrow {
  margin: 0 0 .65rem;
  color: var(--brand-accent-deep);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#v2App[data-space="help"] .help-article > h1 {
  margin: 0 0 2rem;
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
#v2App[data-space="help"] .help-article h2,
#v2App[data-space="help"] .help-article h3 { scroll-margin-top: calc(var(--help-header-height) + 1.25rem); }
#v2App[data-space="help"] .help-article h2 { margin: 2.25rem 0 .65rem; font-size: clamp(1.35rem, 3vw, 1.75rem); }
#v2App[data-space="help"] .help-article h3 { margin: 1.75rem 0 .55rem; font-size: 1.15rem; }
#v2App[data-space="help"] .help-article p,
#v2App[data-space="help"] .help-article li { font-size: 1.02rem; line-height: 1.72; }
#v2App[data-space="help"] .help-article p { margin: 0 0 1.15rem; }
#v2App[data-space="help"] .help-article a { color: var(--brand-accent-deep); text-underline-offset: .18em; }
#v2App[data-space="help"] .help-article code,
#v2App[data-space="help"] .help-article kbd { padding: .12em .35em; background: var(--ui-surface-muted); border-radius: .3rem; }
#v2App[data-space="help"] .help-article table { width: 100%; border-collapse: collapse; }
#v2App[data-space="help"] .help-article th,
#v2App[data-space="help"] .help-article td { padding: .7rem; border: 1px solid var(--ui-border); text-align: left; }
#v2App[data-space="help"] .help-article aside { margin: 1.5rem 0; padding: 1rem 1.15rem; border-left: 4px solid var(--brand-accent); background: var(--ui-surface-muted); }
#v2App[data-space="help"] .help-article aside.attention { border-left-color: var(--brand-alert); }
/* Une figure porte la marge horizontale par defaut du navigateur (40px de
   chaque cote) : sans cette remise a zero, chaque capture serait rentree par
   rapport au texte qu'elle illustre. */
#v2App[data-space="help"] .help-article figure { margin: 1.75rem 0; }
#v2App[data-space="help"] .help-article figcaption {
  margin-top: .6rem;
  color: var(--ui-text-secondary);
  font-size: .94rem;
  line-height: 1.55;
}
#v2App[data-space="help"] .help-article img[data-capture] {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ui-border);
  border-radius: .75rem;
  box-shadow: var(--shadow);
}
#v2App[data-space="help"] .help-capture-fallback {
  display: grid;
  gap: .25rem;
  min-height: 7rem;
  padding: 1.25rem;
  place-content: center;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-muted);
  border: 1px dashed var(--ui-border);
  border-radius: .75rem;
  text-align: center;
}
#v2App[data-space="help"] .help-capture-alt { color: var(--ui-text-primary); font-weight: 700; }
#v2App[data-space="help"] .help-capture-status { font-size: .84rem; }
#v2App[data-space="help"] .help-state { padding: 1.25rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-muted); }
#v2App[data-space="help"] .help-state .button { display: inline-flex; align-items: center; margin-top: .5rem; text-decoration: none; }
#v2App[data-space="help"] .help-backdrop { display: none; }

@media (max-width: 820px) {
  #v2App[data-space="help"] .help-shell { display: block; padding-top: var(--help-header-height); }
  #v2App[data-space="help"] .help-header { position: fixed; right: 0; left: 0; height: var(--help-header-height); }
  #v2App[data-space="help"] .help-brand-context { display: none; }
  #v2App[data-space="help"] .help-brand-title { font-size: .9rem; }
  #v2App[data-space="help"] .help-brand img { width: 7.5rem; }
  #v2App[data-space="help"] .help-return { display: none; }
  #v2App[data-space="help"] .help-menu-button { display: inline-grid; place-items: center; }
  #v2App[data-space="help"] .help-sidebar {
    position: fixed;
    z-index: 50;
    inset: var(--help-header-height) auto 0 0;
    width: min(20rem, 88vw);
    height: calc(100dvh - var(--help-header-height));
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: var(--shadow);
  }
  #v2App[data-space="help"] .help-shell[data-menu-open="true"] .help-sidebar { transform: translateX(0); }
  #v2App[data-space="help"] .help-backdrop {
    position: fixed;
    z-index: 40;
    inset: var(--help-header-height) 0 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    border: 0;
    background: var(--ui-nav-overlay);
    transition: opacity 180ms ease, visibility 180ms ease;
  }
  #v2App[data-space="help"] .help-shell[data-menu-open="true"] .help-backdrop { visibility: visible; opacity: 1; }
  #v2App[data-space="help"] .help-main { padding-top: 2.25rem; }
  /* Lot 8 — un tableau de documentation à trois colonnes de texte a une
     largeur minimale que 390 px ne peut pas contenir : sans cette règle, c'est
     la PAGE entière qui déborde, et le texte comme le bandeau se décalent avec
     elle. Le tableau devient donc sa propre zone défilante, exactement comme
     les tableaux de l'application (.platform-table-wrap). Le rendu desktop
     n'est pas touché : la règle vit sous le point de rupture mobile. */
  #v2App[data-space="help"] .help-article table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 480px) {
  #v2App[data-space="help"] .help-brand-title { display: none; }
  #v2App[data-space="help"] .help-header { padding-inline: .8rem; }
}