/* ====================================================================
   Centre d'aide — /aide (site public, adaptatif)
   Utilise les jetons du site public (variables.css).
   Le tiroir contextuel (Lot B) réutilisera .aide-btn / .aide-lien / .aide-capture.
   ==================================================================== */

.page-header__subtitle {
  margin-top: var(--space-2, .5rem);
  color: var(--text-muted);
  font-size: var(--fs-sm, .95rem);
  max-width: 60ch;
}

/* ---- Recherche ---- */
.aide-search { margin: 0 0 var(--space-6, 2rem); }
.aide-search__label {
  display: block;
  font-size: var(--fs-sm, .9rem);
  font-weight: 600;
  margin-bottom: var(--space-2, .5rem);
}
.aide-search__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.aide-search__row input[type="search"] {
  flex: 1 1 320px;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-secondary);
  color: var(--text);
  font: inherit;
}
.aide-search__row input[type="search"]:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

/* ---- Résultats ---- */
.aide-resultats h2 { font-size: var(--fs-lg, 1.25rem); margin: 0 0 var(--space-3, .75rem); }
.aide-cat {
  display: inline-block;
  font-size: var(--fs-xs, .72rem);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: .5rem;
}
.aide-vide { color: var(--text-muted); }
.aide-sep { border: 0; border-top: 1px solid var(--border); margin: var(--space-6, 2rem) 0; }

/* ---- Groupes (accordéons <details>) ---- */
.aide-espace {
  font-size: var(--fs-md, 1.05rem);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: var(--space-6, 2rem) 0 var(--space-2, .5rem);
}
.aide-groupe {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-secondary);
  margin-bottom: .55rem;
  overflow: hidden;
}
.aide-groupe > summary {
  cursor: pointer;
  padding: .8rem 1rem;
  font-size: var(--fs-sm, .95rem);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.aide-groupe > summary::-webkit-details-marker { display: none; }
.aide-groupe > summary::before {
  content: "▸";
  color: var(--text-muted);
  transition: transform .15s;
}
.aide-groupe[open] > summary::before { transform: rotate(90deg); }
.aide-groupe > summary h2 {
  display: inline;
  font-size: inherit;
  margin: 0;
  font-weight: 600;
}
.aide-ecran-lien {
  margin-left: auto;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 1.1rem;
}
.aide-ecran-lien:hover { color: var(--accent); }

/* ---- Listes de tâches / notions ---- */
.aide-liste {
  list-style: none;
  margin: 0;
  padding: .2rem 1rem 1rem;
}
.aide-liste li {
  padding: .4rem 0;
  border-top: 1px solid var(--border);
  line-height: 1.45;
}
.aide-liste li:first-child { border-top: 0; }
.aide-liste a { text-decoration: none; }
.aide-liste a:hover { text-decoration: underline; }
.aide-liste p { margin: .15rem 0 0; font-size: var(--fs-sm, .88rem); color: var(--text-muted); }

.aide-avenir { color: var(--text-muted); }
.aide-avenir em { font-style: normal; font-size: var(--fs-xs, .78rem); opacity: .8; }

.aide-tag {
  display: inline-block;
  font-size: var(--fs-xs, .68rem);
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: .4rem;
  vertical-align: middle;
}
.aide-tag--att { background: rgba(180,120,20,.15); color: #b47814; }
.aide-tag--irr { background: rgba(185,28,28,.15); color: #b91c1c; }

.aide-fiche-vide p { color: var(--text-muted); }

/* ---- Éléments réutilisables dans le corps d'une fiche (Lot D+) ---- */
.aide-btn {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: .92em;
  font-weight: 600;
  white-space: nowrap;
}
.aide-btn--danger { border-color: rgba(185,28,28,.5); color: #b91c1c; }
.aide-lien { font-weight: 600; }
.aide-capture {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  margin: .5rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .aide-groupe > summary::before { transition: none; }
}

/* ====================================================================
   FICHE UNIQUE  — /aide.php?f=<slug>  (M3)
   3 niveaux visuellement distincts : Réponse rapide / Guide détaillé / À savoir
   ==================================================================== */
.aide-fiche { margin: 0 0 var(--space-8, 2rem); }
.aide-fiche__retour { margin: 0 0 var(--space-4, 1rem); font-size: var(--fs-sm, .9rem); }

.aide-fiche__tete { margin-bottom: var(--space-4, 1rem); }
.aide-fiche__titre {
  font-size: var(--fs-xl, 1.75rem);
  line-height: var(--lh-tight, 1.2);
  margin: 0 0 var(--space-2, .5rem);
}
.aide-fiche__titre .aide-tag { font-size: var(--fs-xs, .68rem); vertical-align: middle; }
.aide-fiche__meta {
  margin: 0;
  font-size: var(--fs-sm, .85rem);
  color: var(--text-muted);
}
.aide-fiche__meta a { color: inherit; }

/* petit intertitre de niveau (« Réponse rapide », « Voir aussi »…) */
.aide-fiche__niveau {
  font-size: var(--fs-xs, .72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0 0 var(--space-2, .4rem);
}

/* Niveau 1 — Réponse rapide : encadré accentué (idiome .policy-notice du site) */
.aide-fiche__rapide {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
}

/* Niveaux 2 & 3 */
.aide-fiche__section { margin: var(--space-6, 1.5rem) 0; }
.aide-fiche__section > h3 {
  font-size: var(--fs-md, 1.125rem);
  margin: 0 0 var(--space-3, .75rem);
}
.aide-fiche__section--savoir {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
}
.aide-fiche__section--savoir > h3 { color: var(--text-secondary); }

/* Corps rendu par aide_rendu_corps() — reset.css enlève les puces : on les rétablit,
   uniquement à l'intérieur d'une fiche. */
.aide-fiche p { line-height: var(--lh-normal, 1.6); margin: 0 0 var(--space-3, .75rem); }
.aide-fiche ul, .aide-fiche ol {
  padding-left: var(--space-6, 1.5rem);
  margin: 0 0 var(--space-3, .75rem);
  line-height: var(--lh-normal, 1.6);
}
.aide-fiche ul { list-style: disc; }
.aide-fiche ol { list-style: decimal; }
.aide-fiche li { margin: var(--space-1, .25rem) 0; }
.aide-fiche li > ul, .aide-fiche li > ol { margin: var(--space-1, .25rem) 0; }
.aide-fiche__rapide > :first-child,
.aide-callout > :first-child { margin-top: 0; }
.aide-fiche__rapide > :last-child,
.aide-fiche__section > :last-child,
.aide-callout > :last-child { margin-bottom: 0; }

/* Encadrés : attention / irréversible / différences */
.aide-callout {
  border-left: 3px solid var(--border-light, var(--border));
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  background: var(--bg-secondary);
  padding: var(--space-3, .75rem) var(--space-5, 1.25rem);
  margin: var(--space-4, 1rem) 0;
}
.aide-callout__titre {
  font-weight: 700;
  font-size: var(--fs-sm, .9rem);
  margin: 0 0 var(--space-2, .4rem);
}
.aide-callout--attention { border-left-color: #b47814; background: rgba(180, 120, 20, .10); }
.aide-callout--attention .aide-callout__titre { color: #b47814; }
.aide-callout--irreversible { border-left-color: #b91c1c; background: rgba(185, 28, 28, .10); }
.aide-callout--irreversible .aide-callout__titre { color: #b91c1c; }
.aide-callout--differences { border-left-color: var(--accent); }

/* Voir aussi + pieds de fiche */
.aide-fiche__liens { margin: var(--space-6, 1.5rem) 0 0; }
.aide-fiche__liens ul { list-style: none; margin: 0; padding: 0; }
.aide-fiche__liens li { padding: var(--space-1, .25rem) 0; }
.aide-fiche__statut {
  margin: var(--space-6, 1.5rem) 0 0;
  font-size: var(--fs-xs, .78rem);
  font-style: italic;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .aide-fiche__titre { font-size: var(--fs-lg, 1.375rem); }
  .aide-fiche__rapide,
  .aide-fiche__section--savoir,
  .aide-callout { padding-left: var(--space-4, 1rem); padding-right: var(--space-4, 1rem); }
}

/* ---- Navigation entre fiches (sous une fiche) : question précédente / suivante ---- */
.aide-nav {
  margin: var(--space-6, 1.5rem) 0 0;
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-secondary);
}
.aide-nav__pas {
  display: flex;
  gap: var(--space-3, .75rem);
  flex-wrap: wrap;
  margin: var(--space-3, .75rem) 0;
}
.aide-nav__pas a {
  flex: 1 1 14rem;
  padding: .6rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  font-size: var(--fs-sm, .9rem);
  text-decoration: none;
}
.aide-nav__pas a:hover,
.aide-nav__pas a:focus-visible { border-color: var(--accent); }
.aide-nav__suiv { text-align: right; margin-left: auto; }
.aide-nav__liste { list-style: none; margin: 0; padding: 0; }
.aide-nav__liste li { padding: var(--space-1, .25rem) 0; font-size: var(--fs-sm, .9rem); }
.aide-nav__courant { font-weight: 700; color: var(--text-primary); }
.aide-nav__courant::before { content: "\25B8  "; color: var(--accent); }
.aide-nav__retour { margin: var(--space-3, .75rem) 0 0; font-size: var(--fs-sm, .9rem); }