/* ==========================================================================
   Centre d'aide (public) — /aide
   D'apres la planche « Site public / Centre d'aide ».
   Ecrit contre public/css/tokens.css. Aucune valeur brute hors geometrie.
   ========================================================================== */

body {
    background: var(--canvas) !important;
    min-height: 100vh;
    display: flex !important;
    flex-direction: column !important;
}

.help-page {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-10) var(--gutter-page) var(--space-16);
}

.help-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.help-label {
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0;
}

.help-h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-title);
    color: var(--ink);
    margin: 0;
}

.help-h3 {
    font-family: var(--font-display);
    font-size: var(--text-title-2);
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-title);
    color: var(--ink);
    margin: 0;
}

/* ---------- 1. La recherche, avant le sommaire ----------------------------- */
.help-search {
    background: var(--ink);
    border-radius: 20px;
    padding: var(--space-12) var(--space-8);
    text-align: center;
}

.help-search-title {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-title);
    line-height: var(--lh-snug);
    color: var(--ink-on-dark);
    margin: 0;
}

.help-search-sub {
    font-size: 14.5px;
    color: var(--ink-faint);
    margin: var(--space-2) 0 0;
}

.help-search-field {
    max-width: 640px;
    margin: var(--space-6) auto 0;
    min-height: 54px;
    border-radius: 13px;
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
}

.help-search-field:focus-within {
    box-shadow: 0 0 0 3px rgba(251, 250, 248, 0.25);
}

.help-search-icon {
    color: var(--ink-faint);
    font-size: 15px;
    display: flex;
    flex: 0 0 auto;
}

.help-search-input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-ui);
    font-size: var(--text-body);
    color: var(--ink);
}

.help-search-input::placeholder { color: var(--ink-faint); }
.help-search-input::-webkit-search-cancel-button { display: none; }

.help-search-clear {
    flex: 0 0 auto;
    border: none;
    background: var(--surface-sunken);
    color: var(--ink-secondary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 6px var(--space-3);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.help-search-clear:hover { background: var(--border); color: var(--ink); }

/* Pastilles de theme. Le nombre affiche est celui des questions reellement
   presentes dans le theme : il est calcule par le gabarit. */
.help-chips {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

.help-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: var(--weight-medium);
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--ink-secondary);
    background: none;
    color: var(--ink-on-dark);
    cursor: pointer;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.help-chip:hover { border-color: var(--ink-faint); }

.help-chip.is-active {
    background: var(--ink-on-dark);
    border-color: var(--ink-on-dark);
    color: var(--ink);
}

.help-chip-n {
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
    color: var(--ink-faint);
}

.help-chip.is-active .help-chip-n { color: var(--ink-secondary); }

/* ---------- 2. Par outil --------------------------------------------------- */
.help-tools { margin-top: var(--space-8); }

.help-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.help-section-note {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin: 0;
}

.help-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.help-tool {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-5) var(--space-6) var(--space-4);
    border: 1px solid var(--border);
    border-top: 3px solid var(--tool-tint, var(--accent));
    border-radius: var(--radius-card-lg);
    background: var(--surface);
    text-decoration: none;
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.help-tool:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

.help-tool:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tool-tint, var(--accent));
}

.help-tool--documents { --tool-tint: var(--mod-documents); }
.help-tool--stock     { --tool-tint: var(--mod-stock); }
.help-tool--crm       { --tool-tint: var(--mod-crm); }
.help-tool--planning  { --tool-tint: var(--mod-planning); }
.help-tool--finance   { --tool-tint: var(--mod-finance); }
.help-tool--expenses  { --tool-tint: var(--mod-expenses); }
.help-tool--assistant { --tool-tint: var(--mod-assistant); }

.help-tool-name {
    font-size: 15.5px;
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.help-tool-blurb {
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
}

.help-tool-meta {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.help-tools-empty {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* ---------- 3. Questions + sortie vers l'humain ----------------------------- */
.help-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-8);
}

.help-faq {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card-lg);
    padding: var(--space-8);
}

.help-faq-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.help-faq-count {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    margin: 0;
    white-space: nowrap;
}

.help-faq-list { margin-top: var(--space-4); }

.help-q { border-bottom: 1px solid var(--border-subtle); }
.help-q:last-child { border-bottom: none; }

.help-q-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) 0;
    cursor: pointer;
    list-style: none;
}

.help-q-summary::-webkit-details-marker { display: none; }

.help-q-summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-field);
}

.help-q-text {
    font-size: 14.5px;
    font-weight: var(--weight-medium);
    color: var(--ink);
    line-height: var(--lh-snug);
}

.help-q-summary:hover .help-q-text { color: var(--accent-ink); }

/* Le signe + / − de la planche, dessine en CSS : deux barres, l'une pivote. */
.help-q-sign {
    position: relative;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 3px;
}

.help-q-sign::before,
.help-q-sign::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 1.5px;
    background: var(--ink-faint);
    transform: translateY(-50%);
    transition: transform var(--duration) var(--ease);
}

.help-q-sign::after { transform: translateY(-50%) rotate(90deg); }
.help-q[open] .help-q-sign::after { transform: translateY(-50%) rotate(0deg); }

.help-q-answer {
    margin: 0;
    padding: 0 var(--space-8) var(--space-4) 0;
    font-size: 13.5px;
    line-height: var(--lh-loose);
    color: var(--ink-secondary);
    max-width: 68ch;
}

.help-faq-empty {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-6);
    margin-top: var(--space-2);
}

.help-faq-empty-title {
    font-size: var(--text-title-3);
    font-weight: var(--weight-semibold);
    color: var(--ink);
    margin: 0;
}

.help-faq-empty-text {
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
    margin: var(--space-2) 0 var(--space-4);
    max-width: 56ch;
}

/* ---------- Colonne de droite ---------------------------------------------- */
.help-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.help-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card-lg);
    padding: var(--space-6);
}

.help-card--accent {
    background: var(--accent-tint-2);
    border-color: var(--accent-tint);
}

.help-card--quiet { background: var(--surface-muted); }

.help-card-text {
    font-size: 13.5px;
    line-height: var(--lh-loose);
    color: var(--ink-secondary);
    margin: var(--space-2) 0 0;
}

.help-card--accent .help-card-text { margin-top: 9px; }

.help-link {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: 13.5px;
    font-weight: var(--weight-semibold);
    color: var(--accent-ink);
    text-decoration: none;
}

.help-link:hover { text-decoration: underline; }

.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--control-lg);
    margin-top: var(--space-4);
    padding: 0 var(--space-5);
    border-radius: 11px;
    font-family: var(--font-ui);
    font-size: 14.5px;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    text-align: center;
    transition: filter var(--duration) var(--ease), background var(--duration) var(--ease);
}

.help-btn--primary { background: var(--accent); color: var(--ink-on-dark); }
.help-btn--primary:hover { filter: brightness(0.93); color: var(--ink-on-dark); }

.help-btn--dark { width: auto; background: var(--ink); color: var(--ink-on-dark); margin-top: 0; }
.help-btn--dark:hover { background: var(--ink-secondary); color: var(--ink-on-dark); }

.help-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
    .help-main { grid-template-columns: minmax(0, 1fr); }
    .help-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .help-page { padding: var(--space-6) var(--space-5) var(--space-12); }
    .help-search { padding: var(--space-8) var(--space-5); border-radius: var(--radius-card-lg); }
    .help-search-title { font-size: var(--text-title-1); }
    .help-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help-faq { padding: var(--space-6) var(--space-5); }
    .help-q-answer { padding-right: 0; }
}

@media (max-width: 480px) {
    .help-page { padding: var(--space-5) var(--space-4) var(--space-10); }
    .help-search-title { font-size: var(--text-title-2); }
    .help-tool-grid { grid-template-columns: minmax(0, 1fr); }
    .help-section-head { flex-direction: column; gap: var(--space-1); }
    .help-faq-head { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    .help-chips { justify-content: flex-start; }
    .help-btn--dark { width: 100%; }
}