/* ══════════════════════════════════════════════════════════════
   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 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-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;
    }
}


/* 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. */


/* ══════════════════════════════════════════════════════════════
   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);
}

/* ══════════════════════════════════════════════════════════════
   La carte unique de la liste — maquette « Centre d'aide ANCESU v2 »
   ══════════════════════════════════════════════════════════════

   La page empilait un en-tete pleine largeur, une grille de guides, une barre
   de comptage, une feuille de questions et un bandeau : cinq surfaces qui se
   lisaient comme cinq blocs etrangers. Tout vit desormais dans une carte, et
   les sections s'y separent par un filet. */

/* LA CARTE NE TOUCHE PAS LE FIL D'ARIANE. Sans rembourrage, le bord haut de la
   carte tombait EXACTEMENT sur le bas du fil (mesure : 0 px), et deux surfaces
   qui se touchent se lisent comme une seule. Les pages a en-tete `bare` n'ont
   pas ce probleme : `_content_header` porte ses 16 px de rembourrage haut, et
   son titre flotte sans bord. Une carte, elle, a une arete. */
.helpcenter__container {
    padding-top: var(--spacing-lg);
}

.helpcenter__panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* L'ECART APPARTIENT A CE QUI SUIT. La barre de liste et le sur-titre des
   guides touchaient leur grille a UN pixel : le compte, les filtres actifs et
   le bouton « Effacer » se lisaient comme la premiere ligne de la premiere
   reponse. Pose sur la grille, l'ecart vaut pour les deux sections sans que
   l'une ait a le redire. */
.helpcenter__panel .media-cards {
    margin-top: var(--spacing-md);
}

/* L'ISSUE N'EST PAS UNE SECTION DE PLUS : pas de filet au-dessus d'elle.
   Un filet separe deux blocs de meme nature ; l'aplat marine est deja une
   rupture, et le trait ajoutait une ligne la ou rien n'a besoin d'etre
   separe. */
.helpcenter__panel-cta {
    margin-top: var(--spacing-lg);
}

/* L'ECART APPARTIENT A CE QUI SUIT, jamais a ce qui precede : deux marges
   opposees s'additionnent sans que rien ne le signale. Et il est EGAL de part
   et d'autre du filet — un filet separe deux sections, il n'en pousse pas une. */
.helpcenter__panel-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* ── LES REPONSES SE POSENT SUR UN APLAT PALE ──

   Une carte BLANCHE dans une carte blanche ne se voit qu'a son filet : les
   vingt-quatre reponses se lisaient comme un seul pave raye. La maquette les
   pose sur `#f1f5fa`, et c'est ce qui les detache les unes des autres sans
   ajouter un trait.

   `--color-bg-light` est le jeton du depot pour cet aplat, deja employe par le
   survol des rangees de cette page. Le filet tombe avec lui : sur un fond
   teinte il redit ce que l'aplat dit deja.

   PORTEE : les cartes de la colonne de lecture, jamais celles du rail — sa
   carte de filtres, elle, est blanche sur le fond gris de la page. */
.helpcenter__panel .media-cards .media-card {
    background: var(--color-bg-light);
    border-color: transparent;
}

.helpcenter__panel .media-cards .media-card:hover {
    border-color: var(--color-border);
}

/* LA PASTILLE D'INTENTION SE DETACHE DE LA RANGEE. Mesure du 2026-09-19 :
   fond de la pastille et fond de la carte rendaient la MEME valeur,
   `rgb(243, 245, 246)` — elle n'existait que par son texte. Meme defaut qu'une
   carte blanche dans une carte blanche, un cran plus bas, et il ne se voit ni
   au code (les deux jetons sont ecrits a deux endroits) ni a l'oeil, puisque
   le texte, lui, s'affiche. Blanche, comme la maquette. */
.helpcenter__panel .media-card__tag {
    background: var(--surface-2);
}

/* ── SOUS LE PALIER, LA CARTE UTILITAIRE PASSE APRES LE CONTENU ──

   La colonne d'appui et son rail passent tous deux en `display: contents` sous
   64 em : leurs enfants deviennent alors des elements de la grille de page, et
   ils y tombent AVANT la colonne principale, puisque c'est leur ordre dans le
   balisage. Le panneau de filtres ne s'en apercoit pas — il est masque la, et
   c'est sa feuille qui prend le relais. La carte utilitaire, elle, restait
   visible : sur telephone, « Cette page » se posait donc AU-DESSUS des
   vingt-quatre reponses, avant meme qu'on ait lu quoi que ce soit.

   C'est le contresens exact de ce que pose le composant 81 : « toujours en bas
   de colonne, sous les cartes de contenu, parce qu'on ne partage pas une page
   avant de l'avoir lue. »

   `order` plutot qu'un second rendu : la carte reste ECRITE une seule fois, et
   elle n'existe donc qu'une fois dans l'arbre d'accessibilite. La masquer comme
   `.rail-card--rail` serait l'autre extreme — un rendez-vous a venir se
   retrouve dans l'agenda, mais l'adresse d'une page qu'on veut transmettre n'a
   pas d'autre porte. */
@media (width < 64em) {
    .helpcenter-cat .content-list__rail .share-card {
        order: 1;
    }
}

/* ── LE RAIL D'INTENTIONS, EN LIGNES ──

   `_filter_panel` en `variant: 'rows'` rend une entree par ligne, coche a
   gauche et compte a droite. Trois corrections de zone, et chacune ferme un
   defaut mesure a l'ecran :

   1. L'APLAT DE L'ENTREE ACTIVE DEBORDE, IL NE RENTRE PAS. La brique pose
      `padding: 2px 0` sur ses entrees pour que leurs libelles s'alignent sur
      le titre du groupe. L'aplat epousait donc la colonne de texte : le compte
      touchait le bord droit, le libelle le bord gauche, et l'arrondi n'avait
      pas la place de se voir. Le rembourrage lateral est COMPENSE par une
      marge negative de meme valeur — le texte ne bouge pas d'un pixel.

   2. LE `color` DU LIEN NE TRAVERSE PAS SES ENFANTS quand ils declarent le
      leur. `.filter-panel__label` porte `--color-primary-dark` : pose sur
      l'aplat marine, il rendait NAVY SUR NAVY, donc rien. Le lien paraissait
      vide, avec sa seule coche. Mesure au rendu — ni le lint ni la relecture
      du CSS ne le voient, les deux moities vivant dans deux fichiers.

   3. Le compte suit, un cran en dessous. */
/* L'APLAT PREND TOUTE LA LARGEUR, LE TEXTE RESPIRE DEDANS.

   Premiere version : rembourrage lateral COMPENSE par une marge negative, pour
   que l'aplat deborde la colonne de texte. Elle tenait dans la carte du rail,
   qui a 16 px de rembourrage a manger — et elle DEBORDAIT dans la feuille du
   telephone, ou le panneau n'en a aucun : option large de 355 px dans un
   conteneur de 339, et les comptes coupes a droite. Mesure a 375 px.

   Sans la marge, l'option fait exactement la largeur de son conteneur : l'aplat
   court d'un bord a l'autre et le rembourrage ecarte le texte de ses bords. Le
   meme dessin, sans deborder de rien. Le titre du groupe prend le meme
   rembourrage pour rester aligne sur les libelles. */
.helpcenter-cat .filter-panel--rows .filter-panel__option,
.helpcenter-cat .filter-panel--rows .filter-panel__group-title {
    padding-inline: var(--spacing-sm);
}

.helpcenter-cat .filter-panel--rows .filter-panel__option {
    border-radius: var(--radius-sm);
}

/* LA COCHE PART : C'EST L'APLAT QUI PORTE L'ETAT.

   La brique l'argumente elle-meme pour sa variante en pastilles — « pas de
   coche : c'est le remplissage qui porte l'etat, et une coche EN PLUS dirait
   deux fois la meme chose ». Le raisonnement vaut des qu'un aplat existe, et
   ce rail en a un. Avec les deux, cinq cercles vides s'alignaient a gauche et
   la liste se lisait comme un formulaire a boutons radio plutot que comme un
   aiguillage. */
.helpcenter-cat .filter-panel--rows .filter-panel__box {
    display: none;
}

.helpcenter-cat .filter-panel--rows .filter-panel__option--on {
    background: var(--color-primary-dark);
    color: var(--color-on-primary);
}

.helpcenter-cat .filter-panel--rows .filter-panel__option--on .filter-panel__label {
    color: var(--color-on-primary);
}

.helpcenter-cat .filter-panel--rows .filter-panel__option--on .filter-panel__n {
    color: var(--color-on-primary);
    opacity: 0.72;
}

/* AUCUNE RANGEE DE CETTE LISTE NE PORTE DE VIGNETTE.

   Le plancher de `--row` vaut la hauteur d'une rangee illustree — vignette de
   2,875 rem plus le rembourrage — pour qu'une entree a image et une entree nue
   se lisent a la meme hauteur dans une meme liste. Ici aucune n'a d'image :
   il n'aligne donc rien, et il gonflait chaque reponse de deux lignes a 92 px.
   Mesure du 2026-09-19.

   Le retirer se scope A CETTE CARTE et jamais a la brique : une liste mixte,
   ailleurs sur le site, a besoin du plancher. */
.helpcenter__panel .media-card--row {
    min-height: 0;
}



/* ── LE RAIL EST UNE NAVIGATION, pas un panneau de facettes ──

   « Que cherchez-vous a faire ? » : on y choisit une intention et la carte
   repond. L'entree active se remplit en marine, comme la maquette — la coche
   seule ne se voit pas d'un regard dans une colonne de cinq lignes. */