/* ════════════════════════════════════════════════════════════════════
   CENTRE D'AIDE — PLACEMENT UNIQUEMENT (aucun composant inventé).
   Utilisé par /help (les blocs + la recherche) ET par les pages thème
   /help/<slug> (pages/help-topic).
   Composants du design system réutilisés tels quels :
     .ex-search       champ de recherche (atelier « Champs de formulaire »)
     .ex-card         carte générique    (atelier « Cartes »)
     .accord--carte   accordéon, variante carte (atelier « Accordéon / FAQ »)
     .bdg .chip .cbtn .lnk   pastille, puce, boutons
   Ici on ne fait que les poser : largeur, grille, marges.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fond uni ──────────────────────────────────────────────────────
   Toute la page est sur le fond de page du DS (Greyblue), les cartes
   sont les seules surfaces blanches : plus de bande blanche en haut. */
body.aide .vt-hero { background: transparent; padding: 72px 0 32px; }
body.aide .vt-section { padding: 0 0 64px; }
body.aide .vt-cta { padding: 8px 0 88px; }
body.aide .hm-lead { margin-top: 16px; }

/* ── En-tête : pastille de marque + mot accentué ──────────────────── */
.aide-eyebrow { display: flex; justify-content: center; margin-bottom: 20px; }
/* Pastille = badge du DS en couleur de marque, forme arrondie. */
.aide-pill { --s: var(--md-sys-color-primary); --f: 255, 54, 118; --t: var(--md-sys-color-on-primary); --pastel: var(--md-sys-color-primary);
  height: 28px; padding: 0 14px; border-radius: 999px; font: var(--md-sys-typescale-body-small); font-weight: 600; border-color: transparent; }
.aide-accent { color: var(--md-sys-color-primary); }

/* ── Recherche du hero (champ DS, fond Greyblue2, hauteur 44) ─────── */
.aide-searchbar { margin: 28px auto 0; max-width: 520px; }
.aide-search { display: flex; width: 100%; }   /* placement uniquement ; visuel = barre de recherche du DS */

/* ── Blocs de thèmes : cartes du DS posées en grille ──────────────── */
.aide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Pendant une recherche, la grille laisse la place aux résultats. */
.aide-grid[hidden], .aide-results[hidden] { display: none; }
/* La carte du DS est démontrée en 280px décalée : ici elle remplit sa case. */
.aide-card { margin-left: 0; width: auto; display: block; text-decoration: none; color: inherit; }
.aide-card:hover { border-color: var(--md-sys-color-primary); }
.aide-card .ex-card-body { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; }
.aide-card h4 { font: var(--md-sys-typescale-headline-small); }
.aide-card p { margin: 0; }
/* Tuile d'icône ronde en couleur de marque (jetons DS). */
.aide-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px;
  border-radius: 50%; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

/* ── Résultats de recherche (cartes du DS, une par question) ──────── */
.aide-res-count { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
.aide-res-list { margin-top: 16px; display: grid; gap: 12px; }
.aide-res { display: grid; gap: 4px; margin-left: 0; width: auto; padding: 18px 20px; text-decoration: none; }
.aide-res:hover { border-color: var(--md-sys-color-primary); }
.aide-res-path { font: var(--md-sys-typescale-label-small); text-transform: uppercase; font-weight: 700; color: var(--md-sys-color-primary); }
.aide-res-q { font: var(--md-sys-typescale-title-large); color: var(--md-sys-color-on-surface); }
.aide-res-a { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
/* Aucune question trouvée : l'état vide du DS (shared/states.js), rien à ajouter ici. */

/* ── Pages thème : titre de section à gauche, questions à droite ──── */
.aide-sec { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }
.aide-sec + .aide-sec { margin-top: 64px; }
.aide-sec-head { position: sticky; top: 104px; }
.aide-sec h2 { font: var(--md-sys-typescale-display-small); color: var(--md-sys-color-on-surface); }
/* L'accordéon du DS est démontré décalé de 52px et large de 520px. */
.aide-sec .accord-list { margin: 0; max-width: none; }
.aide-sec .accord-sum { font: var(--md-sys-typescale-title-medium); }
.aide-sec .accord-body { font: var(--md-sys-typescale-body-medium); }
.aide-sec .accord-body a { color: var(--md-sys-color-primary); }
.aide-sec .accord-body ul { margin: 6px 0 0; padding-left: 20px; }
.aide-sec .accord-body li { margin-top: 4px; }
.aide-sec .accord-body code { padding: 2px 8px; border-radius: 6px; background: var(--md-sys-color-surface); font-family: Menlo, monospace; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface); }

/* ── Autres thèmes, en bas de page ────────────────────────────────── */
.aide-more { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.aide-more h2 { font: var(--md-sys-typescale-title-large); font-weight: 600; }
.aide-more-list { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.aide-more-list .chip { text-decoration: none; }

@media (max-width: 1000px) {
  .aide-grid { grid-template-columns: repeat(2, 1fr); }
  .aide-sec { grid-template-columns: 1fr; gap: 20px; }
  .aide-sec-head { position: static; }
  .aide-sec h2 { font: var(--md-sys-typescale-headline-medium); }
}
@media (max-width: 760px) {
  .aide-grid { grid-template-columns: 1fr; }
}