/* =====================================================================
   CENTRE D'AIDE (/aide, /aide/{guide}) — Components/Pages/Aide/.

   Préfixe .aid-* : un seul objet l'emploie, le guide — le centre d'aide (deux
   pages, coquille du lanceur .lnc) et son corps partagé CorpsGuideAide, que
   le guide d'un module monte aussi dans la coquille de ce module
   (/app/projets/guide, 2026-10-08). Cette feuille n'écrit AUCUNE couleur, elle
   ne lit que des jetons, et suit le thème sans bloc sombre à elle — dans
   l'une ou l'autre coquille.

   .aid-article met en forme du HTML PRODUIT PAR MARKDIG à partir des
   guides de docs/ : on n'y pose pas de classes, on stylise les balises
   (h2, table, blockquote, code…), bornées sous .aid-article pour ne rien
   toucher d'autre.
   ===================================================================== */

.aid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 32px 48px;
    color: var(--et-ink);
    font-family: var(--et-font);
}

/* ------------------------------------------------------------ tête */

.aid-tete { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.aid-fil { font-size: 13px; color: var(--et-muted); display: flex; flex-wrap: wrap; gap: 6px; }
.aid-fil a { color: var(--et-lien); text-decoration: none; }
.aid-fil a:hover { text-decoration: underline; }
.aid-fil .courant { color: var(--et-ink); }
.aid-tete h1 { margin: 0; font-size: 24px; line-height: var(--et-titre-lh); font-weight: 700; color: var(--et-ink); }

.aid-recherche {
    display: flex; align-items: center; gap: 8px;
    max-width: 560px; min-height: 44px; padding: 0 12px;
    background: var(--et-surface); border: 1px solid var(--et-hairline);
}
.aid-recherche:focus-within { border-color: var(--et-form-blue); }
.aid-recherche i { color: var(--et-muted); }
.aid-recherche input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font-size: 14px; color: var(--et-ink);
}

/* ------------------------------------------------- liste des guides */

.aid-section { margin-bottom: 28px; }
.aid-section h2 { margin: 0 0 calc(var(--et-sous-titre-mb) + 2px);   /* 12 px jusqu'au 2026-10-26 */
    font-size: 18px; font-weight: 600; color: var(--et-ink); }
.aid-section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aid-retour { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--et-lien); text-decoration: none; }
.aid-retour:hover { text-decoration: underline; }

.aid-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

.aid-carte, .aid-resultat {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 16px;
    background: var(--et-surface); border: 1px solid var(--et-hairline);
    color: var(--et-ink); text-decoration: none;
}
.aid-carte:hover, .aid-resultat:hover { border-color: var(--et-form-blue); background: var(--et-tint); }
.aid-carte-titre, .aid-resultat-titre { font-size: 14px; font-weight: 600; color: var(--et-lien); }
.aid-carte-resume, .aid-resultat-extrait { font-size: 13px; line-height: 1.5; color: var(--et-muted); }
.aid-resultat { margin-bottom: 8px; }
.aid-resultat-compte { font-size: 12px; color: var(--et-muted); }

.aid-vide { padding: 24px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.aid-vide p { margin: 0 0 var(--et-para-mb); }   /* 12 px jusqu'au 2026-10-26 */
.aid-vide a { display: inline-flex; align-items: center; gap: 6px; color: var(--et-lien); text-decoration: none; }

/* -------------------------------------------------------- lecture */

.aid-lecture { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }

.aid-sommaire {
    position: sticky; top: 16px;
    max-height: calc(100vh - 32px); overflow-y: auto;
    padding: 12px 14px;
    background: var(--et-surface); border: 1px solid var(--et-hairline);
    font-size: 13px;
}
.aid-sommaire summary { font-weight: 600; cursor: pointer; margin-bottom: 8px; color: var(--et-ink); }
.aid-sommaire ol { list-style: none; margin: 0; padding: 0; }
.aid-sommaire li { margin: 0; }
.aid-sommaire li.est-niveau-3 { padding-left: 14px; }
.aid-sommaire a { display: block; padding: 4px 0; line-height: 1.4; color: var(--et-lien); text-decoration: none; }
.aid-sommaire a:hover { text-decoration: underline; }

.aid-article {
    min-width: 0;
    padding: 24px 32px;
    background: var(--et-surface); border: 1px solid var(--et-hairline);
    font-size: 14px; line-height: 1.65; color: var(--et-ink);
}
.aid-article > :first-child { margin-top: 0; }
.aid-article h2, .aid-article h3, .aid-article h4 { scroll-margin-top: 16px; color: var(--et-ink); line-height: 1.3; }
/* 32 / 12 / 6 et 24 / 8 px jusqu'au 2026-10-26 : un guide reste un texte de lecture,
   ses titres gardent plus d'air que ceux d'un formulaire. */
.aid-article h2 { margin: calc(var(--et-sect-ecart) + 6px) 0 calc(var(--et-form-sect-b) + 2px); padding-bottom: var(--et-form-sect-p); font-size: 20px; font-weight: 700; border-bottom: 1px solid var(--et-hairline); }
.aid-article h3 { margin: var(--et-sect-ecart) 0 var(--et-form-sect-b); font-size: 18px; font-weight: 600; }
.aid-article h4 { margin: calc(var(--et-form-sect-t) + 4px) 0 var(--et-sous-titre-mb);   /* 20 / 8 px jusqu'au 2026-10-26 */
    font-size: 14px; font-weight: 700; }
/* Un guide reste un texte de lecture : 2 px de plus qu'ailleurs (12 px jusqu'au 2026-10-26). */
.aid-article p { margin: 0 0 calc(var(--et-para-mb) + 2px); }
/* Listes resserrées le 2026-10-26 (12 px dessous et 4 px entre puces auparavant) : jetons des listes à puces. */
.aid-article ul, .aid-article ol { margin: 0 0 var(--et-puce-mb); padding-left: var(--et-puce-retrait); }
.aid-article li { margin-bottom: var(--et-puce-li-ecart); }
.aid-article a { color: var(--et-lien); }
.aid-article hr { border: 0; border-top: 1px solid var(--et-hairline); margin: 24px 0; }

.aid-article code {
    font-family: var(--et-font-mono); font-size: 13px;
    padding: 1px 4px; background: var(--et-surface-3); color: var(--et-ink);
}
.aid-article pre { margin: 0 0 12px; padding: 12px; overflow-x: auto; background: var(--et-surface-3); }
.aid-article pre code { padding: 0; background: transparent; }
/* Un chemin ou un nom en ligne se coupe où il faut plutôt que d'élargir sa cellule : à 390 px,
   « /app/projets/fiche/{affaire}/commissions » poussait un tableau du guide de 254 px hors de
   l'écran (banc projets-guide, 2026-10-20). Le bloc de code, lui, garde son défilement. */
.aid-article :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }

.aid-article blockquote {
    margin: 0 0 12px; padding: 8px 14px;
    border-left: 4px solid var(--et-form-blue); background: var(--et-surface-2);
}
.aid-article blockquote > :last-child { margin-bottom: 0; }

/* Les tableaux défilent dans leur propre boîte : la page, elle, ne déborde jamais. */
.aid-article table {
    display: block; max-width: 100%; overflow-x: auto;
    margin: 0 0 16px; border-collapse: collapse; font-size: 13px;
}
.aid-article th, .aid-article td { border: 1px solid var(--et-hairline); text-align: left; vertical-align: top; }
.aid-article td { padding: var(--et-cellule-y) 10px; }
.aid-article th { padding: var(--et-cellule-tete-y) 10px; background: var(--et-surface-3); font-weight: 600; font-size: 14px; }

/* ------------------------------------------------------ paliers */

@media (max-width: 1024px) {
    .aid { padding: 16px 16px 32px; }
    .aid-lecture { grid-template-columns: minmax(0, 1fr); }
    .aid-sommaire { position: static; max-height: none; }
    .aid-sommaire a { min-height: 44px; display: flex; align-items: center; }
    .aid-carte, .aid-resultat { min-height: 44px; }
}

@media (max-width: 640px) {
    .aid-article { padding: 16px; }
    .aid-cartes { grid-template-columns: minmax(0, 1fr); }
}