/* ══════════════════════════════════════════════════════════════
   Centre d'aide — accueil (`/faq`)
   ══════════════════════════════════════════════════════════════

   CETTE FEUILLE NE DECLARE PAS ENCORE LA GRAMMAIRE V2, et c'est mesuré : le
   marqueur vaut pour le FICHIER ENTIER, or les mille lignes de la page
   rubrique qui suivent portent encore leurs littéraux de couleur et deux
   pendants a décimale. Le poser ici ferait tomber `css-grammar` sur du code
   que ce lot ne touche pas. Il se posera quand la rubrique sera passée a son
   tour. (Ne pas écrire le marqueur dans ce commentaire : l'outil le cherche
   comme une sous-chaîne, il ne lit pas la phrase qui l'entoure.)

   Maquette « Centre d'aide ANCESU », vue `accueil`. Trois objets et rien de
   plus : la tuile de rubrique, la carte de guide, la carte des deux issues.

   CE QUI A ÉTÉ RETIRÉ AVEC LA BASCULE, et pourquoi ça compte : la tuile de
   rubrique portait une bande d'image 16/9, un pictogramme flottant et un corps
   séparé. La maquette la réduit à un filet de couleur, un titre, une phrase et
   ses compteurs. Le champ de recherche, lui, vivait ici en trois règles
   (`__search`, `__search-icon`, `__search-input`) qu'aucun gabarit n'émettait
   plus depuis qu'il est rendu par `_content_header` : elles décrivaient un
   champ que personne ne voyait.

   Les rangées de la page CATÉGORIE vivent plus bas et ne bougent pas ici.
   ══════════════════════════════════════════════════════════════ */

/* Rembourrage bas a ZERO : le bandeau d'abonnement qui suit porte deja sa
   respiration, et les deux s'ajoutaient en 112 px de blanc. Meme correction que
   sur `.article-single`, meme cause. */
.helpcenter {
    padding: var(--spacing-xl) 0 0;
}

/* Le gabarit porte `class="container helpcenter__container"` : la borne et la
   gouttiere viennent de `.container`, cette regle ne garde que le rythme
   vertical. Recopier les valeurs ici les faisait DERIVER — la page avait trois
   bords gauches, l'en-tete et le champ de recherche a 32 px, les sections a
   80, la grille a 96 (mesure a 1280 px). */
.helpcenter__container {
    /* Pas de padding en tete : l'en-tete editorial, juste au-dessus, porte
       deja l'espacement. Les deux se cumulaient en un trou de quatre-vingt-dix
       pixels avant la premiere section. */
    padding-top: 0;
}

/* ── Les recherches fréquentes, sous le champ ──
   Rendues dans la card par le slot `after` de `_content_header`. Une PHRASE et
   non une rangée de pastilles : ce sont des exemples de ce qu'on peut taper,
   pas des filtres qu'on active. Des pastilles auraient promis un état. */
/* ALIGNEES A GAUCHE, SOUS LE CHAMP. Le `center` etait herite de l'en-tete
   centre des premieres versions ; depuis que l'en-tete est en `bare`, tout le
   bloc est ferre a gauche et cette seule ligne restait au milieu.

   Marge nulle : l'ecart appartient au conteneur — la colonne de l'en-tete porte
   deja son `gap`, et une marge en plus l'y AJOUTAIT. C'est la meme regle que
   pour les etiquettes de la barre de liste, et le meme defaut que celui corrige
   entre deux sections de la fiche de glossaire. */
.helpcenter__frequent {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-2xs) var(--spacing-sm);
    font-size: var(--font-size-xsm);
    line-height: 1.4;
}

.helpcenter__frequent-label {
    color: var(--color-text-light);
}

.helpcenter__frequent-term {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.helpcenter__frequent-term:hover,
.helpcenter__frequent-term:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── L'en-tête de l'accueil est CENTRÉ ──
   Seule page du site dans ce cas, et la maquette a raison de l'y mettre : elle
   ne présente pas un contenu, elle pose une question et tend un champ. Le
   modificateur est déjà passé par le gabarit (`modifier: 'helpcenter'`).

   Posé ICI et non dans `content-header.css` : c'est une décision de CETTE
   page, et la feuille de zone est chargée après la grammaire, donc elle gagne
   à spécificité égale. */
.content-header--helpcenter .content-header__body {
    align-items: center;
    text-align: center;
}

.content-header--helpcenter .content-header__utility {
    justify-content: center;
}

/* ── La grille des rubriques ──
   `auto-fill` plutôt que des paliers : une seule règle, et quatre rubriques ne
   laissent pas deux colonnes vides à côté d'elles. */
.helpcenter__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: var(--spacing-md);
}

.helpcenter__grid > li { display: flex; }

/* La tuile : filet de rubrique, titre, phrase, compteurs en pied.
   Le filet vient de `ui.rule('md')` et sa couleur du terme Taxonomy — une
   donnée d'administration, qui ne peut donc pas vivre dans cette feuille. Sans
   couleur, `--ui-tint` retombe sur `--section-color`, posée par le layout. */
.helpcenter__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-lg);
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.helpcenter__card:hover,
.helpcenter__card:focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.helpcenter__card-title {
    font-family: var(--font-title);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary-dark);
}

/* Pas d'écrêtage : la description d'une rubrique tient en une phrase, et un
   écrêtage sans affordance cacherait sa fin sans le dire. `flex: 1` pousse les
   compteurs en pied, donc les aligne d'une tuile à l'autre. */
.helpcenter__card-desc {
    flex: 1;
    font-size: var(--font-size-xsm);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* En chasse fixe, comme tous les repères chiffrés de la charte : « 3 questions
   · 1 guide » se compare d'une tuile à l'autre quand les chiffres s'alignent. */
.helpcenter__card-counts {
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-light);
}

/* ── En-tête de section ──
   `_section_header` PARTAGE, plus de couple titre + filet maison. Les deux
   sections de cette page rendaient une TROISIEME forme d'en-tete de section,
   sur un site qui en a deja une, employee par l'accueil et par les cinq listes.
   Ne reste ici que le rythme vertical. */
/* L'ECART APPARTIENT A CE QUI SUIT. Une `margin-bottom` posee sur TOUTES les
   sections en met une sous la DERNIERE, qui n'a rien apres elle : elle
   s'ajoutait alors au rythme du bloc suivant — 96 px mesures avant le bandeau
   d'abonnement, contre 48 sur les cinq autres pages du site. C'est la regle
   ecrite avec les jetons de rythme, appliquee a elle-meme. */
.helpcenter__section + .helpcenter__section,
.helpcenter__section ~ * {
    margin-top: var(--rhythm-block);
}

/* ── La carte de guide de l'accueil ──
   Pastille de type, durée en chasse fixe, titre, phrase. Le pictogramme a été
   retiré : il était le même pour tous les guides d'une rubrique, donc il ne
   distinguait rien tout en prenant la moitié de la largeur de la carte. */
.helpcenter__guides-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
    gap: var(--spacing-md);
}

.helpcenter__guides-grid > li { display: flex; }

.helpcenter__guide {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-md);
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.helpcenter__guide:hover,
.helpcenter__guide:focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.helpcenter__guide-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xs);
}

.helpcenter__guide-duration {
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-light);
}

/* ── La carte des deux issues ──
   Texte à gauche, boutons à droite, et les deux passent l'un sous l'autre
   quand la place manque. Partagée avec la page rubrique, qui inclut le même
   partiel : c'est ce qui a résorbé deux titres divergents pour un seul objet. */
/* La surface vient de `ui-card--navy` : ne restent ici que la disposition et
   le rythme. Redeclarer un fond ou un rayon ecraserait la brique — c'est le
   defaut du raccourci `background` deja paye trois fois sur ce depot. */
.helpcenter__cta {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    row-gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--rhythm-block);
}

/* DANS LA COLONNE DE LECTURE, C'EST LA GOUTTIERE QUI ESPACE. Le bandeau est
   inclus a trois endroits, dont un seul est `article-single__main` ; sa marge
   reste donc necessaire aux deux autres. La neutraliser depuis le conteneur
   (`.article-single__main > *`) ne suffit PAS : meme specificite, et cette
   feuille est chargee apres `article.css`, donc la marge gagnait par l'ordre
   et s'ajoutait a la gouttiere — 96 px mesures. L'exception vit ou vit la
   regle qu'elle annule. */
.article-single__main > .helpcenter__cta {
    margin-top: 0;
}

.helpcenter__cta-text {
    flex: 1 1 18.75rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

/* Sur marine, l'encre du texte courant ne passe pas : le bleu pale de la charte
   (`--color-ink-on-navy-muted`) est le ton du corps sur cet aplat, et
   `ui-card--navy` le pose deja sur `.ui-kicker`. Le titre, lui, est rendu par
   `_section_header`, que la carte passe en blanc. */
.helpcenter__cta-lead {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xsm);
    line-height: 1.5;
    color: var(--color-ink-on-navy-muted);
}

/* `flex: none` et non `margin-left: auto` : avec un seul enfant, `auto` suffit,
   mais la rangée en porte deux et c'est l'enroulement qui doit décider. */
.helpcenter__cta-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* ── Page catégorie ── */
.helpcenter__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-decoration: none;
    margin-bottom: var(--spacing-md);
    transition: color 0.15s ease;
}
.helpcenter__back:hover { color: var(--color-text); }

.helpcenter__cat-header { margin-bottom: var(--spacing-xl); }
.helpcenter__cat-title { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--spacing-xs); }
.helpcenter__cat-desc { color: var(--color-text-light); font-size: var(--font-size-sm); }

/* ── Entrées Q&A (lecture directe) ── */
.helpcenter__entry {
    padding-bottom: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 9rem;
}
.helpcenter__entry:last-child { border-bottom: none; margin-bottom: 0; }

.helpcenter__entry-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.helpcenter__entry-anchor {
    color: inherit;
    text-decoration: none;
}
.helpcenter__entry-anchor:hover { color: var(--color-primary); }

.helpcenter__entry-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-light);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.helpcenter__entry:hover .helpcenter__entry-link-btn { opacity: 1; }
.helpcenter__entry-link-btn:hover { color: var(--color-primary); }

.helpcenter__entry .prose-content { font-size: var(--font-size-sm); }

.helpcenter__entry-footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* ── Layout 2 colonnes : sidebar + accordion ── */
.helpcenter__layout { display: flex; flex-direction: column; gap: var(--spacing-xl); }

@media (min-width: 64em) {
    .helpcenter__layout {
        display: grid;
        grid-template-columns: 16rem 1fr;
        gap: var(--spacing-xl);
        align-items: start;
    }
}

.helpcenter__main { min-width: 0; }

.helpcenter__cat-header { margin-bottom: var(--spacing-xl); }
.helpcenter__cat-title { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.helpcenter__cat-desc { margin-top: var(--spacing-sm); font-size: var(--font-size-base); color: var(--color-text-light); line-height: 1.5; max-width: 40rem; }

/* ── Sidebar sticky ── */
.helpcenter__sidebar { display: none; }

@media (min-width: 64em) {
    .helpcenter__sidebar {
        display: block;
        position: sticky;
        top: 5rem;
        align-self: start;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

.helpcenter__sidebar-section { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
.helpcenter__sidebar-section:last-child { border-bottom: none; padding-bottom: 0; }
.helpcenter__sidebar-section[aria-label="Guides"] + .helpcenter__sidebar-section[aria-label="Questions"] { border-top: none; }
.helpcenter__sidebar-section[aria-label="Guides"] { border-bottom: none; padding-bottom: 0; margin-bottom: var(--spacing-lg); }

.helpcenter__sidebar-title {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

/* TOC des questions */
.helpcenter__sidebar-toc { list-style: none; padding: 0; margin: 0; }

.helpcenter__sidebar-toc-link {
    display: block;
    padding: 0.25rem 0 0.25rem 0;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--color-text-light);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.helpcenter__sidebar-toc-link:hover { color: var(--color-text); }
.helpcenter__sidebar-toc-link--active { color: var(--color-primary); font-weight: 600; }

/* Sous-TOC guide (headings du guide actif) */
.helpcenter__sidebar-subtoc {
    list-style: none;
    padding: 0.25rem 0 0.25rem 0.75rem;
    margin: 0;
    border-left: 2px solid var(--color-border);
}

.helpcenter__sidebar-subtoc-item {
    list-style: none;
}

.helpcenter__sidebar-subtoc-item--sub .helpcenter__sidebar-subtoc-link {
    padding-left: 0.75rem;
}

.helpcenter__sidebar-subtoc-link {
    display: block;
    padding: 0.1875rem 0 0.1875rem 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.15s ease;
}

.helpcenter__sidebar-subtoc-link:hover {
    color: var(--color-primary);
}

/* Tags filter */
.helpcenter__sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.helpcenter__sidebar-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.helpcenter__sidebar-tag:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.helpcenter__sidebar-tag--active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.helpcenter__sidebar-tag-count { font-size: 0.5625rem; color: var(--color-text-light); }

/* Autres catégories sidebar */
.helpcenter__sidebar-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.helpcenter__sidebar-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    text-decoration: none;
    color: var(--color-text-light);
    transition: background 0.15s ease, color 0.15s ease;
}
.helpcenter__sidebar-cat-link:hover { background: var(--color-bg-light); color: var(--color-text); }

/* ── Métadonnées réponse : date + tags ── */
.helpcenter__answer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.helpcenter__answer-date { font-size: var(--font-size-xs); color: var(--color-text-light); }

.helpcenter__answer-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.helpcenter__answer-tag {
    display: inline-flex;
    padding: 0.0625rem 0.375rem;
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 500;
    text-decoration: none;
    background: var(--color-bg-light);
    color: var(--color-text-light);
    transition: background 0.15s ease;
}
.helpcenter__answer-tag:hover { background: var(--color-primary-light); color: var(--color-primary); }

/* ── Évaluation ── */
.helpcenter__rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.helpcenter__rating-label { font-size: var(--font-size-xs); color: var(--color-text-light); white-space: nowrap; }

.helpcenter__rating-buttons { display: flex; gap: var(--spacing-xs); }

.helpcenter__rating-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.helpcenter__rating-btn:hover:not(:disabled) { border-color: var(--color-text-light); }
.helpcenter__rating-btn:disabled { opacity: 0.5; cursor: default; }
.helpcenter__rating-btn--active-yes { border-color: #059669; background: #ecfdf5; color: #059669; opacity: 1 !important; }
.helpcenter__rating-btn--active-no { border-color: #dc2626; background: #fef2f2; color: #dc2626; opacity: 1 !important; }

.helpcenter__rating-thanks { font-size: var(--font-size-xs); color: #059669; font-weight: 500; }

/* Ligne footer : meta à gauche, rating + signaler à droite */
.helpcenter__entry-footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); width: 100%; }

.helpcenter__rating-group { display: flex; align-items: center; gap: var(--spacing-md); }

/* Partage sidebar */
.helpcenter__sidebar-share { display: flex; gap: var(--spacing-xs); }
.helpcenter__sidebar-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.helpcenter__sidebar-share-btn:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

.helpcenter__report-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.helpcenter__report-toggle:hover:not(:disabled) { color: #ca8a04; border-color: #fde68a; }
.helpcenter__report-toggle:disabled { opacity: 0.5; cursor: default; }

/* Formulaire signalement (sous le footer) */
.helpcenter__report {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
}

.helpcenter__report-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.helpcenter__report-form { position: relative; }

.helpcenter__report-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    resize: vertical;
    outline: none;
    background: #fff;
}
.helpcenter__report-input:focus { border-color: #ca8a04; }

.helpcenter__report-error {
    margin: 0.5rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-danger);
}

.helpcenter__report-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.helpcenter__report-cancel {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
}
.helpcenter__report-cancel:hover { background: var(--color-bg-light); }

.helpcenter__report-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: #ca8a04;
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.helpcenter__report-submit:hover { background: #a16207; }
.helpcenter__report-submit:disabled { opacity: 0.6; cursor: wait; }

.helpcenter__report-spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.helpcenter__report-thanks {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
    color: #059669;
    font-weight: 500;
    margin-top: var(--spacing-xs);
}

/* .btn-print vit desormais dans components/btn-print.css (brique globale). */

/* Print biblio — masqué à l'écran */
.helpcenter__print-biblio { display: none; }

@media (max-width: 47.9375em) {
    .helpcenter__entry-footer-row { flex-direction: column; align-items: flex-start; }
    .helpcenter__rating-group { width: 100%; justify-content: space-between; }
    .helpcenter__report { padding: var(--spacing-sm); }
    .helpcenter__report-actions { flex-direction: column; }
    .helpcenter__report-cancel, .helpcenter__report-submit { width: 100%; justify-content: center; }
}

/* Section layout : sidebar + contenu (legacy) */
.helpcenter-section {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.helpcenter-section__layout {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (min-width: 64em) {
    .helpcenter-section__layout {
        display: grid;
        grid-template-columns: 14rem 1fr;
        gap: var(--spacing-2xl);
    }
}

/* Sidebar navigation */
.helpcenter-section__sidebar {
    display: none;
}

@media (min-width: 64em) {
    .helpcenter-section__sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        padding-top: var(--spacing-xl);
    }
}

.helpcenter-section__nav-title {
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.helpcenter-section__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.helpcenter-section__nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    text-decoration: none;
    color: var(--color-text-light);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.helpcenter-section__nav-link:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.helpcenter-section__nav-link--active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

.helpcenter-section__contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.helpcenter-section__contact-link:hover {
    opacity: 0.75;
}

/* Section main */
.helpcenter-section__header {
    padding-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.helpcenter-section__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.helpcenter-section__subtitle {
    margin-top: var(--spacing-xs);
    color: var(--color-text-light);
}

.helpcenter-section__count {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.helpcenter-section__empty {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-light);
}

/* ══════════════════════════════════════════════════════════════
   Guide — badge, CTA contact, grille liés
   ══════════════════════════════════════════════════════════════ */

.guide-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-navy);
    background: var(--color-primary-light);
    padding: 0.125rem var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.guide-cta {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.guide-cta__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.guide-cta__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-navy);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.guide-cta__link:hover {
    color: var(--color-primary);
    transform: translateX(4px);
}

.guide-related {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
}

.guide-related__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
}

.guide-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 40em) {
    .guide-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64em) {
    .guide-related__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 35.9375em) {
    .guide-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Guides dans l'index helpcenter */
.helpcenter__guides {
    margin-top: var(--spacing-2xl);
}

.helpcenter__guides-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
}

/* LA CARTE DE GUIDE PROPRE A LA RUBRIQUE EST PARTIE. Elle doublait celle de
   l'accueil : deux structures (`__guide-card` avec pictogramme et « Lire le
   guide », `__guide` avec pastille et duree) pour un seul objet, dont les
   titres et resumes PARTAGEAIENT pourtant leurs classes. Toute correction de
   typographie s'appliquait donc aux deux pendant que la structure divergeait —
   le pire des deux mondes. Les deux pages rendent maintenant
   `.helpcenter__guide`, et `__guide-icon` / `__guide-link` sont parties avec
   la structure : plus aucun gabarit ne les emet. */

/* SEULE definition du titre et du resume d'un guide, pour la carte de
   l'accueil comme pour celle d'une rubrique. Il y en avait DEUX, a deux
   endroits de cette feuille : la seconde ecrasait la premiere en silence, donc
   toute correction portee sur la premiere n'avait aucun effet. */
.helpcenter__guide-title {
    font-family: var(--font-title);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-2xs);
}

.helpcenter__guide-desc {
    flex: 1;
    font-size: var(--font-size-xsm);
    line-height: 1.45;
    color: var(--color-text-light);
}

/* ══════════════════════════════════════════════════════════════
   Catégorie — nouveau layout pleine largeur
   ══════════════════════════════════════════════════════════════ */

/* REMBOURRAGE BAS A ZERO, comme `.article-single` et `.helpcenter`. Le bandeau
   d'abonnement suit toutes les pages publiques et porte deja son
   `--rhythm-block` : les deux s'ajoutaient en 96 px, contre 48 sur les cinq
   autres pages du site. Troisieme section a tomber dans le meme piege, et la
   raison est toujours la meme — l'ecart appartient a ce qui SUIT. */
.helpcenter-cat {
    padding: 0;
}

/* LA GRILLE DE LISTE N'EST PLUS RECOPIEE ICI. `__layout`, `__side`, `__rail` et
   `__main` doublaient `.content-list__*` en s'en ecartant sur les deux mesures
   qui comptent : rail de 320 px contre 280, gouttiere de 48 contre 24. La
   colonne de contenu perdait donc 64 px, et la rangee « compte + grouper +
   trier » qui tient sur une ligne a /ressources passait a trois ici.

   Recopier une grammaire, c'est s'engager a la suivre a chaque correction ;
   personne ne le fait, et l'ecart se lit en passant d'une page a l'autre. Le
   gabarit emploie desormais les classes partagees. */

/* ── LE REBOND DE RUBRIQUES, EN PIED ──
   Les rubriques soeurs vivaient dans un RAIL GAUCHE, la ou toutes les listes du
   site posent leurs filtres : on les lisait comme un filtrage de la rubrique
   ouverte alors que ce sont ses voisines. Elles descendent en pied, en
   pastilles de la charte (`ui-chip`), au moment ou l'on cherche ailleurs.

   Partent avec le rail : `__side`, `__toc`, `__toc-list`, `__toc-link`,
   `__toc-label`, `__toc-count`. Et `hc-chips`, `hc-chip`, `hc-chip--active`,
   `hc-chip__count` — une pastille maison sur un site qui en a une. */
.helpcenter__rebound {
    margin-top: var(--rhythm-block);
}

.helpcenter__rebound-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xs);
}

/* ── LES QUESTIONS VOISINES, DANS LE RAIL ──
   Elles vivaient EN PIED de la fiche, sous les mentions : on n'y arrivait
   qu'apres avoir defile toute la reponse, alors qu'une question qui n'est pas
   la bonne se quitte tout de suite. Une liste nue, pas des cartes : le rail en
   porte six, et six cartes y feraient une seconde page. */
.helpcenter__siblings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.helpcenter__sibling {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: var(--spacing-2xs) var(--spacing-xs);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.helpcenter__sibling:hover,
.helpcenter__sibling:focus-visible {
    background: var(--color-bg-light);
}

.helpcenter__sibling-kind {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.helpcenter__sibling-title {
    font-size: var(--font-size-xsm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary-dark);
}

/* ── SUR LE MEME SUJET, DANS LA CARTE ──
   Le bloc vivait en pied et en pleine largeur, sur le fond gris : il sortait de
   la colonne de lecture et se lisait comme une seconde page collee sous la
   premiere. Dans la carte, il prolonge la reponse, et le filet le separe du
   corps comme il separe deux sections d'une fiche de glossaire.

   Le meme ecart de part et d'autre du filet — il separe deux sections, il n'en
   pousse pas une. */
/* Meme regle que sur la fiche de glossaire : dans une carte, le rythme est
   celui de la carte. `.article-single__card` est une colonne flex a 24 px de
   gouttiere ; une marge en plus s'y ajoutait et decentrait le filet. */
.helpcenter__related {
    margin-top: 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.helpcenter__related .helpcenter__sheet {
    margin-top: var(--spacing-md);
}

.helpcenter__siblings-all {
    align-self: flex-start;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xsm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── LA FEUILLE DE QUESTIONS ──
   Une carte blanche, des rangees separees par un filet. Chaque rangee mene a
   la reponse : le corps n'est PAS deplie ici, et la raison est dans le
   gabarit — le chargeur de cette page n'applique ni les permissions ni les
   audiences.

   A FACTORISER : c'est le troisieme objet de ce type dans le depot, apres
   `.resource-sheet` / `.resource-row` de /ressources et la liste du glossaire.
   Le lot qui generalisera la ligne partagee dans la grammaire les prendra tous
   les trois — trois consommateurs disent mieux la bonne forme que deux. */
.helpcenter__sheet {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /* Les angles rognent les rangees, sinon la premiere et la derniere
       debordent du rayon de la carte. */
    overflow: hidden;
}

.helpcenter__question {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--transition-fast);
}

/* Pas de filet sur la premiere : sous la bordure de la carte, les deux
   dessinent deux traits a un pixel d'ecart. */
.helpcenter__sheet > li:first-child .helpcenter__question {
    border-top: 0;
}

.helpcenter__question:hover,
.helpcenter__question:focus-visible {
    background: var(--color-bg-light);
}

/* LE TITRE EST LE PREMIER ELEMENT, et il porte la taille de la ligne.
   Auparavant une rangee `__question-head` (pastille « Question » + duree) le
   precedait : deux informations secondaires avant la seule que le lecteur
   cherche, dans une liste ou « Question » ne distingue rien. */
.helpcenter__question-title {
    font-family: var(--font-title);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary-dark);
}

.helpcenter__question-excerpt {
    font-size: var(--font-size-xsm);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* Ligne de meta SOUS le titre : duree puis thematiques, separees par des
   points mediants poses en `::before` — un separateur qui n'est pas du texte
   ne se copie pas avec la selection et ne se lit pas a voix haute. */
.helpcenter__question-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-2xs) var(--spacing-xs);
    margin-top: var(--spacing-2xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.helpcenter__question-duration {
    font-family: var(--font-data);
    font-weight: 500;
}

.helpcenter__question-topic {
    position: relative;
    padding-left: var(--spacing-xs);
}

.helpcenter__question-topic::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--color-border-strong, var(--color-border));
}

/* La premiere thematique d'une carte SANS duree n'a pas de voisin a separer.
   Se produit dans « Sur le meme sujet », dont les entrees portent un type et
   pas de temps de lecture. */
.helpcenter__question-meta > .helpcenter__question-topic:first-child {
    padding-left: 0;
}

.helpcenter__question-meta > .helpcenter__question-topic:first-child::before {
    content: none;
}

/* ── Detail (contenu sélectionné) ── */
.helpcenter-cat__detail {
    min-width: 0;
}

.helpcenter-cat__detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-decoration: none;
    margin-bottom: var(--spacing-lg);
    transition: color 0.15s ease;
}

.helpcenter-cat__detail-back:hover {
    color: var(--color-primary);
}

/* Le titre, le chapo et la pastille de type de la fiche question vivaient ici.
   Ils sont portes par `_content_header` depuis le 2026-08-18 : le titre et le
   chapo par le composant, le type par son sur-titre. Les regles sont retirees
   plutot que gardees « au cas ou » — un style sans gabarit se relit comme une
   piste, et fait chercher un rendu qui n'existe plus. */

.helpcenter-cat__detail-footer {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
}

/* ══════════════════════════════════════════════════════════════
   Rebonds d'une fiche question — rubriques, autres questions,
   contenus sur le meme sujet.
   Ils vivaient dans un panneau lateral haut de sept cents pixels a cote
   d'une reponse de deux lignes : la page se lisait comme un sommaire
   flanque d'un detail. Ils passent SOUS la reponse, bornes sur la meme
   colonne de lecture, dans la grammaire des autres blocs de rebond du
   site (capitales, graisse legere, interlettrage).
   ══════════════════════════════════════════════════════════════ */

/* ── Rubriques en puces ── */

/* ── Autres questions de la rubrique ──
   Trois pistes au maximum : une question porte une phrase entiere, et a
   quatre colonnes le titre prenait quatre lignes. */
/* `hc-siblings`, `hc-sibling`, `hc-sibling__kind`, `__title`, `__excerpt`,
   `hc-rebound*` et `hc-related` sont partis avec les deux blocs de pied : les
   questions voisines et les autres rubriques vivent desormais dans le rail, en
   `_titled_card` et en pastilles de la charte. */





/* Les guides du rail passent par `_rail_card`, la brique de la charte, comme
   la carte d'acces adherent de /ressources. Le bloc maison qui vivait ici
   (`__guides-rail*`, `__guide-link*`) refaisait une carte que le design system
   fournit deja. */


/* ── L'ISSUE, DANS LE RAIL ──
   Les deux actions ne tiennent pas cote a cote dans une colonne de 280 px :
   « Rechercher dans le site » y arrive tronquee. Elles s'empilent, et prennent
   toute la largeur pour offrir une cible franche. */
.helpcenter__issue-lead {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-soft);
}

.helpcenter__issue-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.helpcenter__issue-actions .btn {
    width: 100%;
    justify-content: center;
}

/* ── LA PHOTOGRAPHIE DE RUBRIQUE, SEULE DANS SA COLONNE ──
   Elle partageait la grille des chiffres et n'en occupait qu'une cellule.
   Seule, elle prend toute la colonne de droite : c'est ce qui fait disparaitre
   la bande blanche entre le titre et elle.

   4/3 : la colonne fait environ 420 px, donc 315 de haut — la hauteur du bloc
   titre plus chapo, ce qui aligne les deux colonnes par le bas sans les forcer. */
.helpcenter__cat-photo {
    aspect-ratio: 4 / 3;
    height: auto;
    width: 100%;
}

/* Les chiffres passes sous le chapo prolongent le texte : ils s'y accrochent
   plutot que de s'aligner sur la colonne voisine. */
.content-header__after .list-figures {
    max-width: 34rem;
    margin-top: var(--spacing-md);
}

/* ══════════════════════════════════════════════════════════════
   TETE DU CENTRE D'AIDE — proposition « 3a » de Claude Design
   (« Cards decorees ANCESU », tour 3).

   Six defauts de composition y etaient releves ; quatre se corrigent ici, et
   ce sont ceux qui se voient :

     · LES COLONNES NE PARTAGEAIENT AUCUN AXE. Le titre commencait plus bas que
       les chiffres, et le vide en haut a gauche grandissait avec la longueur
       du chapo. Elles sont desormais centrees sur le meme axe.
     · LA PHOTO CHANGEAIT DE FORMAT d'une rubrique a l'autre et imposait sa
       hauteur a la card. Format unique 16/10 : la tete a la meme hauteur
       partout, quelle que soit l'image choisie en administration.
     · LES TUILES DE COMPTE CHANGEAIENT DE PLACE ET DE NOMBRE. Elles forment
       une rangee de preuves de largeur constante, une a trois, toujours au
       meme endroit.
     · LES FORMES DECORATIVES NE TOUCHAIENT RIEN. La tete devient une CARD, et
       `content-header__shapes` porte deja `overflow: hidden` : les deux
       disques y sont donc decoupes par le bord arrondi au lieu de flotter.

   NON REPRIS : le bouton « Voir les 11 questions ». Sur la maquette, 3a est
   une card de rubrique dans une liste ; ici, les onze questions sont juste en
   dessous. Un bouton qui mene a ce qu'on lit deja n'est pas une entree, c'est
   un doublon. */

.content-header--helpcenter-cat .content-header__body {
    position: relative;
    /* PAS D'`overflow: hidden` ICI, et c'est important : il decoupait le menu
       deroulant de partage, qui doit sortir de la carte (107 px rognes,
       mesures). Le decoupage des disques n'en a pas besoin :
       `content-header__shapes` porte deja `overflow: hidden` et
       `border-radius: inherit`, donc il herite du rayon pose ci-dessous et
       rogne ses deux disques lui-meme. */
    padding: var(--spacing-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-card);
}

@media (min-width: 64em) {
    /* L'AXE PARTAGE. La grammaire aligne les deux colonnes par le BAS
       (`flex-end`), ce qui convient quand les deux portent du texte. Ici la
       colonne droite est une image de hauteur fixe : alignees par le bas,
       elles laissaient au-dessus du titre un vide egal a leur difference. */
    .content-header--helpcenter-cat .content-header__body--split {
        align-items: center;
    }
}

/* LES TUILES REPRENNENT UN FOND OPAQUE. `--surface-3` vaut `#ffffffb8`, du
   blanc a 72 % : concu pour se poser sur le fond TEINTE d'une page, il devient
   invisible des que la tete est une carte blanche. Mesure au rendu :
   `rgba(255,255,255,.72)` sur `rgb(255,255,255)`. La maquette pose `#f6f7f4`,
   c'est-a-dire le jeton de fond clair du site. */
.content-header--helpcenter-cat .list-figures__item {
    background: var(--color-bg-light);
}

/* 16/10 ET NON 4/3 : le format unique de la maquette. */
.content-header--helpcenter-cat .helpcenter__cat-photo {
    aspect-ratio: 16 / 10;
}

/* ── LA RANGEE : COMPTEURS A GAUCHE, PARTAGE A DROITE ──
   Le partage occupait une rangee entiere de l'en-tete pour un seul bouton. Ici
   il tient dans la place que les compteurs laissaient vide, et la tete gagne
   une hauteur de rangee. */
.helpcenter__cat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

/* LARGEUR CONSTANTE, ET C'EST LE POINT DE LA MAQUETTE : « un, deux ou trois,
   toujours au meme endroit et de meme largeur ». Avec des colonnes en `1fr`,
   un compteur seul s'etirait sur toute la ligne et deux se partageaient la
   moitie chacun : la meme donnee changeait de taille selon le nombre de ses
   voisines. Bornees et calees a gauche, les tuiles ne bougent plus. */
.helpcenter__cat-meta .list-figures {
    flex: 0 1 auto;
    grid-template-columns: repeat(auto-fit, minmax(8.125rem, 11rem));
    justify-content: start;
    margin: 0;
}

.helpcenter__cat-share {
    flex: none;
}

/* LA PHOTO EST CENTREE DANS SA COLONNE. La colonne droite s'etire sur toute la
   hauteur de la carte ; sans cela, une image de hauteur fixe restait accrochee
   en haut et laissait tout l'ecart sous elle. */
.content-header--helpcenter-cat .content-header__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* `align-self` ET NON le seul `align-items` du parent : la colonne porte
       son propre alignement, mesure a `top 256` pour un corps centre sur 428.
       Sans cette ligne, la photo restait accrochee en haut. */
    align-self: center;
}

/* Les disques sont passes dans la GRAMMAIRE (`content-header.css`) : la
   surcharge locale valait pour toutes les pages a en-tete, pas pour le seul
   centre d'aide. */

/* La seconde issue de l'etat vide, sous le lien de reinitialisation. */
.helpcenter__empty-alt {
    margin: var(--spacing-sm) 0 0;
    text-align: center;
    font-size: var(--font-size-sm);
}