/* =====================================================================
   CENTRE D'AIDE — SYSTEME VISUEL
   Refonte du 2026-08-03. Feuille unique et autonome.
   ---------------------------------------------------------------------
   POURQUOI AUTONOME
   L'ancienne version importait css/knowledge-ui.css (le systeme du Wiki)
   et complétait avec des styles en ligne page par page. Resultat : des
   composants d'administration (`widget-box`, `.button primary`) reutilises
   cote public, et des `style="..."` dans presque tous les gabarits.
   Ici, tout composant du centre d'aide est defini UNE fois, sous le
   prefixe `hc-`. Aucun gabarit ne doit contenir de style en ligne.

   THEME SOMBRE UNIQUE
   Le centre d'aide reprend directement les surfaces sombres du site. Il ne
   maintient ni preference ni systeme de theme parallele.

   CONTRASTE
   Toutes les paires texte/fond de ce fichier sont verifiees par
   tests/support_center_ui_test.php, qui mesure le ratio WCAG sur le rendu
   reel avec compositing alpha. Le bleu d'action a ete assombri : l'ancien
   #3b82f6 donnait 3.68 avec du blanc, sous le seuil de 4.5.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONS
   ------------------------------------------------------------------ */

.help-page {
  /* Surfaces : 4 niveaux suffisent. Au-dela, on empile des bordures. */
  --hc-bg: #0a0e1c;
  --hc-surface: #131a2e;
  --hc-surface-2: #1a2238;
  --hc-surface-3: #232d49;
  --hc-surface-sunken: #080b16;

  --hc-line: rgba(140, 165, 255, .15);
  --hc-line-strong: rgba(140, 165, 255, .3);

  --hc-text: #eef2fc;
  --hc-text-2: #c2cbe6;
  --hc-text-3: #99a4c4;

  /* Marque : violet dominant, cyan en accent. Deux teintes, pas dix. */
  --hc-brand: #8b6cf6;
  --hc-brand-soft: rgba(139, 108, 246, .16);
  --hc-brand-line: rgba(139, 108, 246, .4);
  --hc-accent: #4cc9f0;
  --hc-accent-soft: rgba(76, 201, 240, .14);

  /* Action principale : assombri pour tenir 4.5:1 avec du texte blanc. */
  --hc-action: #4c40c4;
  --hc-action-hover: #4034ad;
  --hc-action-text: #ffffff;

  /* Semantique. Le vert ne sert QU'aux resolutions, le rouge QU'aux
     urgences : c'est ce qui leur garde du sens. */
  --hc-ok: #3ddc97;
  --hc-ok-text: #8ff0c4;
  --hc-ok-soft: rgba(61, 220, 151, .13);
  --hc-ok-line: rgba(61, 220, 151, .35);

  --hc-warn: #f5a524;
  --hc-warn-text: #ffc76b;
  --hc-warn-soft: rgba(245, 165, 36, .13);
  --hc-warn-line: rgba(245, 165, 36, .38);

  --hc-bad: #ff5c7a;
  --hc-bad-text: #ff97ab;
  --hc-bad-soft: rgba(255, 92, 122, .13);
  --hc-bad-line: rgba(255, 92, 122, .4);

  --hc-info-text: #8fd4f5;
  --hc-info-soft: rgba(76, 201, 240, .12);
  --hc-info-line: rgba(76, 201, 240, .34);

  /* Rayons, ombres, rythme */
  --hc-r-sm: 10px;
  --hc-r: 14px;
  --hc-r-lg: 20px;
  --hc-r-pill: 999px;
  --hc-shadow: 0 14px 34px rgba(4, 7, 18, .38);
  --hc-shadow-lg: 0 26px 60px rgba(4, 7, 18, .5);
  --hc-ring: 0 0 0 3px rgba(76, 201, 240, .45);

  --hc-gap: 20px;
  --hc-shell: 1160px;
  --hc-read: 74ch;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   2. SOCLE
   ------------------------------------------------------------------ */

body.help-page {
  margin: 0;
  background: var(--hc-bg);
  color: var(--hc-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.help-page :is(h1, h2, h3, h4) { color: var(--hc-text); font-weight: 800; letter-spacing: -.012em; }
.help-page a { color: var(--hc-accent); }
.help-page ::selection { background: var(--hc-brand-soft); }

/*
 * Neutralisation de l'heritage impose par la feuille du site.
 *
 * DEFAUT REEL CORRIGE ICI : css/styles.min.css (socle Vikinger) colore les
 * balises nues, notamment `p`, en blanc. En theme sombre cela passait
 * inapercu ; en theme clair, le titre d'un etat vide devenait blanc sur
 * blanc — ratio de contraste 1.0, texte litteralement invisible.
 *
 * Les ancetres sont places dans :where() pour que cette regle ne pese que
 * la specificite d'un selecteur de type (0,0,1) : elle bat `p {}` du socle
 * parce qu'elle est chargee apres, mais elle ne bat AUCUNE regle de
 * composant de ce fichier, qui gardent donc la main sur leurs couleurs.
 */
:where(.help-page .hc-shell) :is(p, li, dd, dt, span, small, time, strong, em, td, th, label, figcaption) {
  color: inherit;
}

.hc-shell {
  max-width: var(--hc-shell);
  margin: 0 auto;
  padding: 14px 20px 88px;
  display: grid;
  gap: 30px;
}

/* Entre le breakpoint mobile du header (680 px) et le retour d'une marge
   naturelle suffisante (1365 px), la navigation compacte du site occupe
   80 px fixes a gauche. Sans cet offset, le centre d'aide restait centre
   sur toute la fenetre et passait sous la navigation a 768/1280 px. */
@media (min-width: 681px) and (max-width: 1365px) {
  .hc-shell {
    width: calc(100% - 80px);
    margin-left: 80px;
    margin-right: 0;
  }
}

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

/* Un focus visible unique, jamais desactive. */
.help-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--hc-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   3. BARRE HAUTE : fil d'Ariane + langues
   ------------------------------------------------------------------ */

.hc-topbar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding-top: 6px;
}

.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; margin: 0; padding: 0; list-style: none; }
.hc-crumbs li { display: flex; align-items: center; gap: 6px; color: var(--hc-text-3); }
.hc-crumbs a { color: var(--hc-text-2); text-decoration: none; padding: 4px 2px; }
.hc-crumbs a:hover { color: var(--hc-text); text-decoration: underline; }
.hc-crumbs [aria-current] { color: var(--hc-text); font-weight: 600; }
.hc-crumbs__sep { color: var(--hc-text-3); opacity: .6; }

.hc-lang-switch { display: inline-flex; align-items: center; gap: 6px; }
.hc-lang-switch__button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; min-width: 42px; height: 40px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-pill);
  background: var(--hc-surface); color: var(--hc-text-2); text-decoration: none;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.hc-lang-switch__button:hover { background: var(--hc-surface-3); border-color: var(--hc-line-strong); transform: translateY(-1px); }
.hc-lang-switch__button.is-active,
.hc-lang-switch__button[aria-current="true"] { background: var(--hc-brand-soft); border-color: var(--hc-brand); box-shadow: inset 0 0 0 1px var(--hc-brand-line); }
.hc-lang-switch__flag { display: block; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }

/* ---------------------------------------------------------------------
   4. HERO + RECHERCHE
   ------------------------------------------------------------------ */

.hc-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 18px;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 4vw, 44px);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  background:
    radial-gradient(880px 420px at 88% -10%, var(--hc-brand-soft), transparent 70%),
    radial-gradient(680px 360px at 4% 110%, var(--hc-accent-soft), transparent 70%),
    var(--hc-surface);
  box-shadow: var(--hc-shadow);
}
.hc-hero--compact { padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 34px); gap: 14px; }
/* Une grille dont un enfant refuse de retrecir elargit toute la colonne :
   on autorise explicitement la compression. */
.hc-hero > * { min-width: 0; }

/*
 * Accueil : deux colonnes. La colonne de gauche porte tout le parcours
 * (titre, recherche, actions) ; celle de droite ne porte que des reperes.
 * L'ordre du DOM suit deja cette priorite, la grille ne le reordonne pas.
 */
.hc-hero--home {
  grid-template-columns: minmax(0, 1fr) minmax(258px, 320px);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  border-color: var(--hc-line-strong);
  background:
    radial-gradient(760px 380px at 92% -20%, rgba(139, 108, 246, .26), transparent 72%),
    radial-gradient(620px 340px at -6% 118%, rgba(76, 201, 240, .18), transparent 70%),
    linear-gradient(168deg, var(--hc-surface-2), var(--hc-surface) 62%);
}
.hc-hero__main { display: grid; gap: 18px; min-width: 0; }

/* Halo decoratif. `pointer-events: none` : il ne doit jamais intercepter
   un clic destine a la recherche placee juste dessous. */
.hc-hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  top: -40%; right: -14%; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 108, 246, .3), transparent 66%);
  filter: blur(6px);
}
/* Trame fine : donne de la matiere au fond sans image bitmap. */
.hc-hero--home::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0;
  background-image:
    linear-gradient(var(--hc-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hc-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(620px 300px at 78% 0%, #000, transparent 72%);
  mask-image: radial-gradient(620px 300px at 78% 0%, #000, transparent 72%);
  opacity: .5;
}

/* Reperes sous les actions : trois faits, pas trois slogans. */
.hc-hero__badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 0; padding: 0; list-style: none;
}
.hc-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-pill);
  background: rgba(19, 26, 46, .72);
  color: var(--hc-text-2); font-size: .8rem; font-weight: 600;
}
.hc-hero__badge .icon { flex: 0 0 auto; width: 15px; height: 15px; fill: var(--hc-accent); }

/* Panneau lateral */
.hc-hero__side {
  display: grid; gap: 14px; align-content: start;
  padding: 18px;
  border: 1px solid var(--hc-line-strong); border-radius: var(--hc-r);
  background: rgba(8, 11, 22, .58);
  box-shadow: var(--hc-shadow);
}
.hc-hero__side-title {
  display: flex; align-items: center; gap: 9px; margin: 0;
  color: var(--hc-text); font-size: .88rem; font-weight: 800;
}
.hc-hero__side-title .icon { flex: 0 0 auto; width: 17px; height: 17px; fill: var(--hc-brand); }
.hc-hero__stats { display: grid; gap: 8px; margin: 0; }
.hc-hero__stat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm);
  background: var(--hc-surface-2);
}
.hc-hero__stat dt { margin: 0; color: var(--hc-text-2); font-size: .82rem; font-weight: 600; }
.hc-hero__stat dd { margin: 0; color: var(--hc-text); font-size: 1.28rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* L'etat des services porte un badge, pas un nombre : il s'empile sous son
   libelle, sinon les deux se disputent la largeur et le libelle se casse
   en trois lignes (mesure a 1440). */
.hc-hero__stat--status { flex-direction: column; align-items: flex-start; gap: 6px; }
.hc-hero__stat--status dd { font-size: .82rem; font-weight: 700; }
.hc-hero__side .hc-section__link { min-height: 0; }

.hc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--hc-accent); font-size: .76rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.hc-hero__eyebrow .icon { fill: currentColor; width: 16px; height: 16px; }

/* La police du site a de longues jambages : a `line-height: 1.1` le bas des
   caracteres etait rogne sur la derniere ligne (mesure a 375 px). */
.hc-hero__title { margin: 0; max-width: 19ch; font-size: clamp(1.85rem, 3.6vw, 2.7rem); line-height: 1.2; padding-bottom: 2px; }
.hc-hero--compact .hc-hero__title { font-size: clamp(1.45rem, 2.6vw, 1.95rem); max-width: 28ch; }
.hc-hero__lead { margin: 0; max-width: 60ch; color: var(--hc-text-2); font-size: 1.02rem; line-height: 1.6; }

.hc-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------------
   RECHERCHE
   ---------------------------------------------------------------------
   DEFAUT CORRIGE : le bouton d'envoi etait pose DANS le cadre du champ.
   Il rognait la zone de saisie, deplacait le curseur texte et donnait
   l'impression d'un composant bricole. Champ et bouton sont desormais
   deux enfants d'une meme rangee `.hc-search__row` : ils partagent la
   hauteur et l'alignement, sans jamais se superposer.
   ------------------------------------------------------------------ */

.hc-search { position: relative; display: grid; gap: 12px; max-width: 760px; }
.hc-search__row {
  display: flex; align-items: stretch; gap: 10px; min-width: 0;
}

.hc-search__field {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--hc-line-strong);
  border-radius: var(--hc-r);
  background: var(--hc-surface-sunken);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hc-search__field:focus-within { border-color: var(--hc-accent); box-shadow: var(--hc-ring); }
.hc-search__icon { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--hc-text-3); transition: fill .15s ease; }
.hc-search__field:focus-within .hc-search__icon { fill: var(--hc-accent); }
.hc-search__input {
  flex: 1 1 auto; min-width: 0; height: 48px;
  border: 0; background: transparent; color: var(--hc-text);
  font: inherit; font-size: 1rem; outline: none;
}
.hc-search__input::placeholder { color: var(--hc-text-3); }
.hc-search__input::-webkit-search-cancel-button { filter: invert(.6); }

/* Temoin d'activite : une pastille discrete a droite du champ pendant
   l'appel AJAX. Aucun deplacement de mise en page quand il apparait, la
   place lui est reservee en permanence. */
.hc-search__activity {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid transparent; opacity: 0;
  transition: opacity .15s ease;
}
.hc-search.is-loading .hc-search__activity {
  opacity: 1;
  border-color: var(--hc-line-strong);
  border-top-color: var(--hc-accent);
  animation: hc-spin .7s linear infinite;
}
@keyframes hc-spin { to { transform: rotate(360deg); } }

/*
 * DEFAUT MESURE : la feuille du site donne `width: 100%` aux boutons de
 * formulaire. Le bouton de recherche occupait donc TOUTE la rangee (670 px
 * mesures a 1440), et le champ, reduit a sa largeur de contenu (34 px),
 * disparaissait derriere lui. C'est l'origine reelle du « bouton qui
 * empiete sur le champ ». On rend sa largeur au contenu, avec assez de
 * specificite pour battre la regle du socle.
 */
.help-page .hc-search__submit {
  flex: 0 0 auto; width: auto; white-space: nowrap;
}

.hc-search--lg .hc-search__input { height: 54px; font-size: 1.06rem; }
.hc-search--lg .hc-search__field { padding-left: 18px; }
.hc-search--lg .hc-search__submit { padding: 0 22px; }

/* --- Suggestions live --------------------------------------------- */
.hc-suggest {
  position: absolute; z-index: 40; top: calc(100% - 4px); left: 0; right: 0;
  max-height: min(56vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--hc-line-strong); border-radius: var(--hc-r);
  background: var(--hc-surface-2); box-shadow: var(--hc-shadow-lg);
}
.hc-suggest[hidden] { display: none; }
.hc-suggest a {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 12px; border-radius: var(--hc-r-sm);
  color: var(--hc-text); text-decoration: none;
}
.hc-suggest__body { display: grid; gap: 3px; min-width: 0; }
.hc-suggest strong { font-size: .94rem; font-weight: 700; }
.hc-suggest small { color: var(--hc-text-3); font-size: .81rem; line-height: 1.45; }
.hc-suggest mark { background: var(--hc-brand-soft); color: var(--hc-text); border-radius: 3px; padding: 0 2px; }
.hc-suggest__meta { color: var(--hc-text-3); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Pastille de type : la couleur distingue une FAQ d'un article sans
   ajouter une ligne de texte de plus. */
.hc-suggest__kind {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%;
}
.hc-suggest__kind--article { background: var(--hc-accent); }
.hc-suggest__kind--faq { background: var(--hc-brand); }

.hc-suggest li.is-active > a, .hc-suggest a:hover { background: var(--hc-brand-soft); }
.hc-suggest li.is-active > a { outline: 1px solid var(--hc-brand-line); outline-offset: -1px; }
.hc-suggest__empty { padding: 14px 12px; color: var(--hc-text-3); font-size: .9rem; line-height: 1.5; }
.hc-suggest__all { margin-top: 4px; border-top: 1px solid var(--hc-line); padding-top: 4px; }
.hc-suggest__all a { color: var(--hc-accent); font-size: .85rem; font-weight: 700; }

/* Recherches frequentes */
.hc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .85rem; color: var(--hc-text-3); }
.hc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-pill);
  background: var(--hc-surface-2); color: var(--hc-text-2);
  font-size: .84rem; font-weight: 600; text-decoration: none;
}
.hc-chip:hover { border-color: var(--hc-line-strong); color: var(--hc-text); background: var(--hc-surface-3); }

/* ---------------------------------------------------------------------
   5. SECTIONS
   ------------------------------------------------------------------ */

.hc-section { display: grid; gap: 16px; }
.hc-section__head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: space-between; }
.hc-section__title { margin: 0; font-size: 1.24rem; }
.hc-section__sub { margin: 4px 0 0; color: var(--hc-text-2); font-size: .93rem; line-height: 1.55; max-width: 68ch; }
/* Lien d'action : traite comme une commande, donc dimensionne comme telle
   (40 px de haut minimum) et pas comme un lien inline de 21 px. */
.hc-section__link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--hc-accent); font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 6px 2px; }
.hc-section__link:hover { text-decoration: underline; }
.hc-section__link .icon { fill: currentColor; width: 15px; height: 15px; }

/* ---------------------------------------------------------------------
   6. CARTES DE CATEGORIE
   ------------------------------------------------------------------ */

.hc-cats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hc-cats--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.hc-cat {
  display: grid; gap: 12px; align-content: start;
  padding: 20px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r);
  background: var(--hc-surface);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.hc-cat { overflow: hidden; }
.hc-cat:hover { border-color: var(--hc-brand-line); transform: translateY(-2px); box-shadow: var(--hc-shadow); }

/* ---------------------------------------------------------------------
   VIGNETTE DE RUBRIQUE
   ---------------------------------------------------------------------
   Illustration VECTORIELLE, pas une image bitmap : elle ne pixellise a
   aucune densite d'ecran, ne coute aucune requete et se recolore par
   `currentColor`. Six teintes tournent selon le slug, ce qui differencie
   les sujets sans avoir a produire douze fichiers.
   ------------------------------------------------------------------ */

.hc-cat__visual {
  /* `overflow: visible` volontairement : la pastille deborde vers le bas.
     Le rognage aux angles arrondis est assure par la carte elle-meme. */
  position: relative; overflow: visible;
  margin: -20px -20px 14px;
  height: 118px;
  border-bottom: 1px solid var(--hc-line);
  background: linear-gradient(150deg, var(--hc-cat-tint, var(--hc-brand-soft)), transparent 78%), var(--hc-surface-2);
  color: var(--hc-cat-ink, var(--hc-brand));
}
.hc-cat__art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Pastille en chevauchement : elle ancre l'identite du sujet a la
   jonction de la vignette et du texte. */
.hc-cat__visual-icon {
  position: absolute; left: 18px; bottom: -18px; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--hc-line-strong); border-radius: 13px;
  background: var(--hc-surface); color: var(--hc-cat-ink, var(--hc-brand));
  box-shadow: var(--hc-shadow);
}
.hc-cat__visual-icon .icon { width: 21px; height: 21px; fill: currentColor; }

.hc-cat__visual--1 { --hc-cat-tint: rgba(139, 108, 246, .3); --hc-cat-ink: #b39bff; }
.hc-cat__visual--2 { --hc-cat-tint: rgba(76, 201, 240, .26); --hc-cat-ink: #6fd8f5; }
.hc-cat__visual--3 { --hc-cat-tint: rgba(61, 220, 151, .24); --hc-cat-ink: #6fe3b4; }
.hc-cat__visual--4 { --hc-cat-tint: rgba(245, 165, 36, .24); --hc-cat-ink: #ffc76b; }
.hc-cat__visual--5 { --hc-cat-tint: rgba(255, 92, 122, .24); --hc-cat-ink: #ff9db0; }
.hc-cat__visual--6 { --hc-cat-tint: rgba(120, 150, 255, .28); --hc-cat-ink: #9db4ff; }

.hc-cat--visual-1:hover { border-color: rgba(139, 108, 246, .5); }
.hc-cat--visual-2:hover { border-color: rgba(76, 201, 240, .5); }
.hc-cat--visual-3:hover { border-color: rgba(61, 220, 151, .5); }
.hc-cat--visual-4:hover { border-color: rgba(245, 165, 36, .5); }
.hc-cat--visual-5:hover { border-color: rgba(255, 92, 122, .5); }
.hc-cat--visual-6:hover { border-color: rgba(120, 150, 255, .5); }

.hc-cat__head { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
.hc-cat__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--hc-brand-soft); color: var(--hc-brand);
}
.hc-cat__icon .icon { width: 21px; height: 21px; fill: currentColor; }
.hc-cat__title { margin: 0; font-size: 1.02rem; }
.hc-cat__title a { color: var(--hc-text); text-decoration: none; }
.hc-cat__title a:hover { color: var(--hc-accent); }
.hc-cat__title a::after { content: ""; position: absolute; inset: 0; }
.hc-cat { position: relative; }
.hc-cat__count { color: var(--hc-text-3); font-size: .79rem; font-weight: 700; }
.hc-cat__desc { margin: 0; color: var(--hc-text-2); font-size: .9rem; line-height: 1.55; }

.hc-cat__links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; position: relative; z-index: 1; }
.hc-cat__links a {
  display: flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 7px 8px; margin-left: -8px; border-radius: var(--hc-r-sm);
  color: var(--hc-text-2); font-size: .875rem; text-decoration: none;
}
.hc-cat__links a:hover { background: var(--hc-surface-3); color: var(--hc-text); }
.hc-cat__links .icon { flex: 0 0 auto; width: 14px; height: 14px; fill: var(--hc-text-3); }
.hc-cat__more { position: relative; z-index: 1; justify-self: start; margin-top: 2px; }

/* ---------------------------------------------------------------------
   7. LISTE EDITORIALE (articles, resultats, FAQ liee)
   ------------------------------------------------------------------ */

.hc-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.hc-item {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 16px 18px;
  border: 1px solid transparent; border-bottom-color: var(--hc-line);
  border-radius: var(--hc-r-sm);
  transition: background .14s ease, border-color .14s ease;
}
.hc-item:last-child { border-bottom-color: transparent; }
.hc-item:hover { background: var(--hc-surface); border-color: var(--hc-line); }

.hc-item__title { grid-column: 1; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.hc-item__title a { color: var(--hc-text); text-decoration: none; }
.hc-item__title a::after { content: ""; position: absolute; inset: 0; }
.hc-item:hover .hc-item__title a { color: var(--hc-accent); }
.hc-item__excerpt { grid-column: 1; margin: 0; color: var(--hc-text-2); font-size: .9rem; line-height: 1.55; }
.hc-item__excerpt mark { background: var(--hc-brand-soft); color: var(--hc-text); border-radius: 3px; padding: 0 2px; }
.hc-item__meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--hc-text-3); font-size: .79rem; }
.hc-item__meta span { display: inline-flex; align-items: center; gap: 5px; }
.hc-item__meta .icon { width: 13px; height: 13px; fill: currentColor; }
.hc-item__chevron { grid-column: 2; grid-row: 1 / -1; width: 18px; height: 18px; fill: var(--hc-text-3); flex: 0 0 auto; }
.hc-item:hover .hc-item__chevron { fill: var(--hc-accent); }

/* ---------------------------------------------------------------------
   8. BOUTONS
   ------------------------------------------------------------------ */

/* La couleur est portee par `.help-page .hc-btn--*` et non `.hc-btn--*`
   seul : la regle generique `.help-page a` (specificite 0,1,1) gagnait
   sinon sur un bouton-lien, qui heritait alors du cyan des liens. Mesure a
   l'appui : le texte des <a class="hc-btn--primary"> tombait a 3.85:1 sur
   le violet d'action, sous le seuil AA, alors que les <button> identiques
   etaient a 7.4:1. */
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--hc-r-sm);
  font: inherit; font-size: .93rem; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.hc-btn .icon { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

.help-page .hc-btn--primary { background: var(--hc-action); color: var(--hc-action-text); }
.help-page .hc-btn--primary:hover { background: var(--hc-action-hover); color: var(--hc-action-text); }

.help-page .hc-btn--ghost { border-color: var(--hc-line-strong); background: transparent; color: var(--hc-text); }
.help-page .hc-btn--ghost:hover { background: var(--hc-surface-3); color: var(--hc-text); }

.help-page .hc-btn--subtle { background: var(--hc-surface-2); color: var(--hc-text-2); }
.help-page .hc-btn--subtle:hover { background: var(--hc-surface-3); color: var(--hc-text); }

.help-page .hc-btn--danger { background: var(--hc-bad); color: #1a0308; }
.help-page .hc-btn--danger:hover { filter: brightness(1.08); color: #1a0308; }

.hc-btn--sm { min-height: 36px; padding: 0 14px; font-size: .85rem; }
.hc-btn--lg { min-height: 50px; padding: 0 26px; font-size: 1rem; }
.hc-btn--block { width: 100%; }
.hc-btn[disabled], .hc-btn.is-busy { opacity: .6; cursor: progress; pointer-events: none; }

.hc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hc-actions--end { justify-content: flex-end; }
.hc-actions--between { justify-content: space-between; }

/* ---------------------------------------------------------------------
   9. BADGES ET PASTILLES D'ETAT
   ------------------------------------------------------------------ */

.hc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border: 1px solid transparent; border-radius: var(--hc-r-pill);
  font-size: .76rem; font-weight: 800; white-space: nowrap;
}
.hc-badge .icon { width: 13px; height: 13px; fill: currentColor; }
.hc-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.hc-badge--nodot::before { display: none; }

.hc-badge--ok { background: var(--hc-ok-soft); color: var(--hc-ok-text); border-color: var(--hc-ok-line); }
.hc-badge--info { background: var(--hc-info-soft); color: var(--hc-info-text); border-color: var(--hc-info-line); }
.hc-badge--warn { background: var(--hc-warn-soft); color: var(--hc-warn-text); border-color: var(--hc-warn-line); }
.hc-badge--bad { background: var(--hc-bad-soft); color: var(--hc-bad-text); border-color: var(--hc-bad-line); }
.hc-badge--neutral { background: var(--hc-surface-3); color: var(--hc-text-2); border-color: var(--hc-line); }

/* ---------------------------------------------------------------------
   10. ALERTES / ENCARTS
   ------------------------------------------------------------------ */

.hc-alert {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  padding: 16px 18px;
  border: 1px solid var(--hc-line); border-left-width: 3px;
  border-radius: var(--hc-r-sm);
  background: var(--hc-surface);
  color: var(--hc-text-2); line-height: 1.6;
}
.hc-alert__icon { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 2px; fill: currentColor; }
.hc-alert__title { grid-column: 2; margin: 0; color: var(--hc-text); font-size: .98rem; font-weight: 800; }
.hc-alert__body { grid-column: 2; margin: 0; }
.hc-alert__body > * + * { margin-top: 8px; }
.hc-alert ul { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.hc-alert--info { border-left-color: var(--hc-accent); color: var(--hc-text-2); }
.hc-alert--info .hc-alert__icon { fill: var(--hc-accent); }
.hc-alert--ok { border-left-color: var(--hc-ok); background: var(--hc-ok-soft); }
.hc-alert--ok .hc-alert__icon { fill: var(--hc-ok); }
.hc-alert--warn { border-left-color: var(--hc-warn); background: var(--hc-warn-soft); }
.hc-alert--warn .hc-alert__icon { fill: var(--hc-warn); }
.hc-alert--bad { border-left-color: var(--hc-bad); background: var(--hc-bad-soft); }
.hc-alert--bad .hc-alert__icon { fill: var(--hc-bad); }

/* ---------------------------------------------------------------------
   11. PANNEAUX
   ------------------------------------------------------------------ */

.hc-panel {
  border: 1px solid var(--hc-line); border-radius: var(--hc-r);
  background: var(--hc-surface);
}
.hc-panel__head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--hc-line);
}
.hc-panel__title { margin: 0; font-size: 1rem; }
.hc-panel__body { padding: 20px; display: grid; gap: 16px; }
.hc-panel__body--flush { padding: 8px; }
.hc-panel__lead { margin: 0; color: var(--hc-text-2); font-size: .93rem; line-height: 1.6; max-width: 66ch; }

/*
 * Demande d'evaluation. Elle ouvre la page d'une demande resolue et non
 * notee, donc elle doit se distinguer des autres panneaux sans passer
 * pour une alerte : la teinte de marque, pas l'ambre d'avertissement, et
 * un filet superieur plutot qu'un cadre colore.
 */
/* `overflow: hidden` sinon le filet deborde des angles arrondis. */
.hc-panel--rate { overflow: hidden; border-color: var(--hc-brand-line); background: var(--hc-surface-2); }
.hc-panel--rate::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--hc-brand), var(--hc-accent));
}
.hc-panel--rate .hc-panel__head { border-bottom-color: var(--hc-brand-line); }

.hc-grid2 { display: grid; gap: var(--hc-gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hc-grid3 { display: grid; gap: var(--hc-gap); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------------------------------------------------------------------
   12. FORMULAIRES
   ------------------------------------------------------------------ */

.hc-form { display: grid; gap: 22px; }
.hc-fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.hc-legend { padding: 0; color: var(--hc-text); font-size: 1rem; font-weight: 800; }

.hc-field { display: grid; gap: 7px; }
.hc-field__label { color: var(--hc-text); font-size: .92rem; font-weight: 700; }
.hc-field__req { color: var(--hc-bad-text); }
.hc-field__opt { color: var(--hc-text-3); font-weight: 500; font-size: .85rem; }
.hc-field__hint { color: var(--hc-text-3); font-size: .84rem; line-height: 1.5; }
.hc-field__error { display: flex; align-items: center; gap: 6px; color: var(--hc-bad-text); font-size: .85rem; font-weight: 600; }
.hc-field__error .icon { width: 15px; height: 15px; fill: currentColor; }

.hc-input, .hc-select, .hc-textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--hc-line-strong); border-radius: var(--hc-r-sm);
  background: var(--hc-surface-sunken); color: var(--hc-text);
  font: inherit; font-size: .95rem;
}
.hc-input::placeholder, .hc-textarea::placeholder { color: var(--hc-text-3); }
.hc-textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.hc-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
:is(.hc-input, .hc-select, .hc-textarea):focus-visible { outline: none; border-color: var(--hc-accent); box-shadow: var(--hc-ring); }
.hc-field--invalid :is(.hc-input, .hc-select, .hc-textarea) { border-color: var(--hc-bad); }

.hc-file {
  display: grid; gap: 10px; padding: 18px;
  border: 1px dashed var(--hc-line-strong); border-radius: var(--hc-r-sm);
  background: var(--hc-surface-2);
}
.hc-file input[type="file"] { color: var(--hc-text-2); font: inherit; font-size: .88rem; }

/* Cartes-choix (sujet du ticket, urgence, note) */
.hc-choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hc-choice {
  position: relative; display: grid; gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm);
  background: var(--hc-surface); cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.hc-choice:hover { border-color: var(--hc-line-strong); background: var(--hc-surface-2); }
.hc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.hc-choice__title { display: flex; align-items: center; gap: 10px; color: var(--hc-text); font-size: .96rem; font-weight: 700; }
.hc-choice__title::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--hc-line-strong); background: transparent;
}
.hc-choice__desc { color: var(--hc-text-2); font-size: .86rem; line-height: 1.5; padding-left: 28px; }
.hc-choice:has(input:checked) { border-color: var(--hc-brand); background: var(--hc-brand-soft); }
.hc-choice:has(input:checked) .hc-choice__title::before { border-color: var(--hc-brand); box-shadow: inset 0 0 0 4px var(--hc-brand); }
.hc-choice:has(input:focus-visible) { outline: 2px solid var(--hc-accent); outline-offset: 2px; }

/* Note de satisfaction compacte : le sprite d'icones du site fournit
   l'etoile, CSS gere le survol et les etats radio sans dependance. */
.hc-rating { display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.hc-rating__star {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin: 0;
  border: 1px solid transparent; border-radius: 10px;
  color: var(--hc-text-3); cursor: pointer;
}
.hc-rating__star .icon { width: 26px; height: 26px; fill: transparent; stroke: currentColor; stroke-width: .8px; transition: fill .12s ease, color .12s ease, transform .12s ease; }
.hc-rating__star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hc-rating__star:hover,
.hc-rating__star:has(~ .hc-rating__star:hover),
.hc-rating__star:has(input:checked),
.hc-rating__star:has(~ .hc-rating__star input:checked),
.hc-rating__star:has(input:focus-visible),
.hc-rating__star:has(~ .hc-rating__star input:focus-visible),
.hc-rating__star.is-filled { color: #ffd35a; }
.hc-rating__star:hover .icon,
.hc-rating__star:has(~ .hc-rating__star:hover) .icon,
.hc-rating__star:has(input:checked) .icon,
.hc-rating__star:has(~ .hc-rating__star input:checked) .icon,
.hc-rating__star:has(input:focus-visible) .icon,
.hc-rating__star:has(~ .hc-rating__star input:focus-visible) .icon,
.hc-rating__star.is-filled .icon { fill: currentColor; }
.hc-rating__star:hover .icon { transform: scale(1.08); }
.hc-rating__star:has(input:focus-visible) { border-color: var(--hc-accent); box-shadow: var(--hc-ring); }
.hc-rating--readonly { gap: 3px; }
.hc-rating--readonly .hc-rating__star { width: 24px; height: 24px; cursor: default; }
.hc-rating--readonly .hc-rating__star .icon { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------
   13. ASSISTANT (stepper)
   ------------------------------------------------------------------ */

.hc-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: hcstep; }
.hc-steps li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-pill);
  color: var(--hc-text-3); font-size: .85rem; font-weight: 700;
  background: var(--hc-surface);
}
.hc-steps li::before {
  counter-increment: hcstep; content: counter(hcstep);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--hc-surface-3); color: var(--hc-text-2);
  font-size: .78rem; flex: 0 0 auto;
}
.hc-steps li.is-done { color: var(--hc-ok-text); border-color: var(--hc-ok-line); background: var(--hc-ok-soft); }
.hc-steps li.is-done::before { content: "\2713"; background: var(--hc-ok); color: #06251a; }
.hc-steps li[aria-current="step"] { color: var(--hc-text); border-color: var(--hc-brand); background: var(--hc-brand-soft); }
.hc-steps li[aria-current="step"]::before { background: var(--hc-brand); color: #fff; }

.hc-progress { display: block; width: 100%; height: 4px; overflow: hidden; border: 0; border-radius: 2px; background: var(--hc-surface-3); appearance: none; }
.hc-progress::-webkit-progress-bar { background: var(--hc-surface-3); }
.hc-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--hc-brand), var(--hc-accent)); border-radius: inherit; }
.hc-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--hc-brand), var(--hc-accent)); border-radius: inherit; }

/* ---------------------------------------------------------------------
   14. FILTRES / ONGLETS
   ------------------------------------------------------------------ */

.hc-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-filter {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-pill);
  background: var(--hc-surface); color: var(--hc-text-2);
  font: inherit; font-size: .87rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.hc-filter:hover { border-color: var(--hc-line-strong); color: var(--hc-text); }
.hc-filter[aria-current="true"], .hc-filter.is-active {
  background: var(--hc-brand-soft); border-color: var(--hc-brand); color: var(--hc-text);
}
.hc-filter__count { color: var(--hc-text-3); font-weight: 700; font-size: .8rem; }

/* ---------------------------------------------------------------------
   15. ACCORDEONS
   ------------------------------------------------------------------ */

/*
 * DEFAUT CORRIGE : les items etaient trois rectangles identiques, sans
 * hierarchie ni etat ouvert lisible. Chaque item porte maintenant son
 * type, un pictogramme, et l'item ouvert se distingue par sa bordure,
 * son fond et un filet d'accent a gauche.
 */
.hc-accordion { display: grid; gap: 10px; }
.hc-accordion__item {
  position: relative;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r);
  background: var(--hc-surface); overflow: hidden;
  transition: border-color .16s ease, background-color .16s ease;
}
.hc-accordion__item:hover { border-color: var(--hc-line-strong); }
/* Filet d'accent : revele uniquement quand l'item est deplie. */
.hc-accordion__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--hc-brand), var(--hc-accent));
  opacity: 0; transition: opacity .16s ease;
}
.hc-accordion__item:has(.hc-accordion__trigger[aria-expanded="true"]) {
  border-color: var(--hc-brand-line); background: var(--hc-surface-2);
}
.hc-accordion__item:has(.hc-accordion__trigger[aria-expanded="true"])::before { opacity: 1; }

.hc-accordion h3 { margin: 0; font-size: inherit; }
.hc-accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 62px; padding: 15px 18px;
  border: 0; background: transparent; color: var(--hc-text);
  font: inherit; font-size: .98rem; font-weight: 700; text-align: left; cursor: pointer;
}
.hc-accordion__question-wrap { display: flex; align-items: center; gap: 13px; min-width: 0; }
/* Pictogramme de question : carre doux, jamais un aplat plein qui
   ecraserait le texte a cote. */
.hc-accordion__visual {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--hc-brand-line); background: var(--hc-brand-soft);
  color: var(--hc-brand);
}
.hc-accordion__visual .icon { width: 18px; height: 18px; fill: currentColor; }
.hc-accordion__question-wrap > span:last-child { display: grid; gap: 2px; min-width: 0; }
.hc-accordion__tag {
  color: var(--hc-text-3); font-size: .69rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.hc-accordion__question { font-size: .99rem; font-weight: 700; line-height: 1.4; }
.hc-accordion__trigger[aria-expanded="true"] .hc-accordion__question { color: var(--hc-text); }
.hc-accordion__trigger[aria-expanded="true"] .hc-accordion__visual {
  border-color: var(--hc-accent); background: var(--hc-accent-soft); color: var(--hc-accent);
}
.hc-accordion__mark {
  flex: 0 0 auto; position: relative; width: 28px; height: 28px;
  border: 1px solid var(--hc-line); border-radius: 50%; background: var(--hc-surface-2);
  transition: border-color .16s ease, background-color .16s ease;
}
.hc-accordion__trigger[aria-expanded="true"] .hc-accordion__mark {
  border-color: var(--hc-brand-line); background: var(--hc-brand-soft);
}
.hc-accordion__mark::before, .hc-accordion__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--hc-text-3);
  transform: translate(-50%, -50%); transition: transform .18s ease, opacity .18s ease;
}
.hc-accordion__mark::before { width: 14px; height: 2px; border-radius: 1px; }
.hc-accordion__mark::after { width: 2px; height: 14px; border-radius: 1px; }
.hc-accordion__trigger[aria-expanded="true"] .hc-accordion__mark::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.hc-accordion__trigger[aria-expanded="true"] .hc-accordion__mark::before { background: var(--hc-brand); }
.hc-accordion__trigger[aria-expanded="true"] { color: var(--hc-text); }
/* La reponse s'aligne sur la question, pas sur le bord de la carte :
   l'oeil suit une seule colonne de texte. */
.hc-accordion__panel { padding: 0 18px 18px 69px; color: var(--hc-text-2); line-height: 1.68; font-size: .94rem; max-width: var(--hc-read); }
.hc-accordion__panel[hidden] { display: none; }
.hc-accordion__panel > :first-child { margin-top: 0; }
.hc-accordion__panel a { color: var(--hc-accent); }
.hc-accordion__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hc-line); font-size: .82rem; color: var(--hc-text-3); }

/* ---------------------------------------------------------------------
   16. ARTICLE : mise en page editoriale
   ------------------------------------------------------------------ */

.hc-article-layout { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) 268px; align-items: start; }

.hc-article__header { display: grid; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--hc-line); }
.hc-article__kicker { display: inline-flex; align-items: center; gap: 8px; }
.hc-article__title { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1.15; max-width: 22ch; }
.hc-article__summary { margin: 0; max-width: var(--hc-read); color: var(--hc-text-2); font-size: 1.06rem; line-height: 1.6; }
.hc-article__byline { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--hc-text-3); font-size: .85rem; }
.hc-article__byline span { display: inline-flex; align-items: center; gap: 6px; }
.hc-article__byline .icon { width: 15px; height: 15px; fill: currentColor; }
.hc-preview-page .hc-shell { padding-top: 32px; }
.hc-preview-wrap { width: min(900px, 100%); margin-inline: auto; }
.hc-preview-article { border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); padding: clamp(20px, 4vw, 42px); background: var(--hc-surface); box-shadow: var(--hc-shadow); }
.hc-preview-cover { overflow: hidden; border-radius: var(--hc-r); }
.hc-preview-cover img { display: block; width: 100%; max-height: 420px; object-fit: cover; }

/* Prose : largeur de lecture bornee, jamais etiree sur tout l'ecran. */
.hc-prose { max-width: var(--hc-read); color: var(--hc-text-2); font-size: 1.02rem; line-height: 1.75; }
.hc-prose > * + * { margin-top: 1.1em; }
.hc-prose h2 { margin-top: 2em; font-size: 1.4rem; scroll-margin-top: 90px; }
.hc-prose h3 { margin-top: 1.7em; font-size: 1.13rem; scroll-margin-top: 90px; }
.hc-prose h4 { margin-top: 1.5em; font-size: 1rem; }
.hc-prose a { color: var(--hc-accent); text-underline-offset: 3px; }
.hc-prose strong { color: var(--hc-text); }
.hc-prose :is(ul, ol) { padding-left: 26px; }
.hc-prose li + li { margin-top: .5em; }
.hc-prose li::marker { color: var(--hc-brand); }
.hc-prose ol { counter-reset: hcli; list-style: none; padding-left: 0; }
.hc-prose ol > li {
  position: relative; padding-left: 44px; min-height: 32px;
}
.hc-prose ol > li::before {
  counter-increment: hcli; content: counter(hcli);
  position: absolute; left: 0; top: -1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--hc-brand-soft); color: var(--hc-brand);
  font-size: .85rem; font-weight: 800;
}
.hc-prose blockquote {
  margin: 0; padding: 14px 20px;
  border-left: 3px solid var(--hc-brand); border-radius: 0 var(--hc-r-sm) var(--hc-r-sm) 0;
  background: var(--hc-brand-soft); color: var(--hc-text-2);
}
.hc-prose code {
  padding: 2px 6px; border-radius: 5px;
  background: var(--hc-surface-sunken); border: 1px solid var(--hc-line);
  font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hc-prose pre {
  overflow-x: auto; padding: 16px 18px; border-radius: var(--hc-r-sm);
  background: var(--hc-surface-sunken); border: 1px solid var(--hc-line);
}
.hc-prose pre code { padding: 0; border: 0; background: none; }
.hc-prose img { max-width: 100%; height: auto; border-radius: var(--hc-r-sm); border: 1px solid var(--hc-line); }
.hc-prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.hc-prose :is(th, td) { padding: 10px 14px; border: 1px solid var(--hc-line); text-align: left; }
.hc-prose th { background: var(--hc-surface-2); color: var(--hc-text); font-weight: 700; }
.hc-prose hr { border: 0; border-top: 1px solid var(--hc-line); }
.hc-prose details {
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm);
  background: var(--hc-surface); padding: 12px 16px;
}
.hc-prose summary { cursor: pointer; color: var(--hc-text); font-weight: 700; }
/* Encarts produits par l'editeur */
.hc-prose .help-warn, .hc-prose .help-todo {
  padding: 14px 18px; border-radius: var(--hc-r-sm);
  border-left: 3px solid var(--hc-warn); background: var(--hc-warn-soft);
}
.hc-prose .help-todo { border-left-color: var(--hc-brand); background: var(--hc-brand-soft); }
.hc-table-scroll { overflow-x: auto; }

/* Sommaire lateral */
.hc-aside { display: grid; gap: 18px; position: sticky; top: 18px; }
.hc-toc { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .87rem; }
.hc-toc a {
  display: block; padding: 7px 12px; border-left: 2px solid var(--hc-line);
  color: var(--hc-text-2); text-decoration: none;
}
.hc-toc a:hover { color: var(--hc-text); border-left-color: var(--hc-line-strong); }
.hc-toc a.is-current { color: var(--hc-text); border-left-color: var(--hc-brand); background: var(--hc-brand-soft); }
.hc-toc--sub a { padding-left: 24px; font-size: .84rem; }

/* Utilite de l'article */
.hc-helpful { display: grid; gap: 14px; margin-top: 36px; padding: 24px; border: 1px solid var(--hc-line); border-radius: var(--hc-r); background: var(--hc-surface-2); }
.hc-helpful__title { margin: 0; font-size: 1.05rem; }
.hc-helpful__reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-helpful__reasons label {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-pill);
  color: var(--hc-text-2); font-size: .86rem; cursor: pointer;
}
.hc-helpful__reasons label:has(input:checked) { border-color: var(--hc-brand); background: var(--hc-brand-soft); color: var(--hc-text); font-weight: 700; }
.hc-helpful__reasons input { position: absolute; opacity: 0; width: 0; }
.hc-feedback-related__title { margin: 10px 0 4px; }
.hc-feedback-related__list { margin: 0; padding-left: 20px; }
.hc-feedback-related__action { margin: 12px 0 0; }

/* ---------------------------------------------------------------------
   17. TICKETS
   ------------------------------------------------------------------ */

/* Chaque demande est une carte autonome : la liste editoriale colle ses
   items a 2 px, ce qui transformait les cartes en un bloc indistinct. */
.hc-list:has(.hc-ticket-row) { gap: 12px; }

.hc-ticket-row {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r);
  background: var(--hc-surface);
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.hc-ticket-row:hover { border-color: var(--hc-line-strong); background: var(--hc-surface-2); }
/* Filet d'etat a gauche : revele seulement quand la demande attend une
   action du membre. Un filet sur toutes les lignes ne dirait rien. */
.hc-ticket-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--hc-row-accent, transparent);
}
.hc-ticket-row--action { --hc-row-accent: var(--hc-warn); }
/*
 * Surbrillance de la demande qui attend le membre. Trois signaux qui ne
 * dependent pas les uns des autres : le filet lateral, un fond degrade
 * qui part du filet, et une bordure ambree renforcee. Le degrade s'eteint
 * avant le tiers de la carte pour que le texte reste sur la surface
 * normale — un aplat plein ferait chuter le contraste du titre.
 */
.hc-ticket-row--action {
  border-color: var(--hc-warn);
  background:
    linear-gradient(90deg, rgba(245, 165, 36, .14), rgba(245, 165, 36, 0) 34%),
    var(--hc-surface);
  box-shadow: 0 0 0 1px var(--hc-warn-line), var(--hc-shadow);
}
.hc-ticket-row--action:hover {
  border-color: var(--hc-warn);
  background:
    linear-gradient(90deg, rgba(245, 165, 36, .2), rgba(245, 165, 36, 0) 40%),
    var(--hc-surface-2);
}
/* L'action elle-meme passe en plein ambre : c'est le seul element plein
   de la liste, on ne peut pas le manquer. */
.hc-ticket-row--action .hc-ticket-row__next {
  border-color: transparent; background: var(--hc-warn); color: #241700;
}
.hc-ticket-row--action .hc-ticket-row__ref { background: var(--hc-warn-soft); color: var(--hc-warn-text); }

.hc-ticket-row__ref {
  display: inline-block; padding: 2px 8px; border-radius: var(--hc-r-pill);
  background: var(--hc-surface-3); color: var(--hc-text-3);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.hc-ticket-row__title { margin: 8px 0; font-size: 1.02rem; }
.hc-ticket-row__title a { color: var(--hc-text); text-decoration: none; }
.hc-ticket-row__title a::after { content: ""; position: absolute; inset: 0; }
.hc-ticket-row:hover .hc-ticket-row__title a { color: var(--hc-accent); }
.hc-ticket-row__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--hc-text-3); font-size: .82rem; }
.hc-ticket-row__meta span { display: inline-flex; align-items: center; gap: 5px; }
.hc-ticket-row__meta .icon { width: 14px; height: 14px; fill: currentColor; }
.hc-ticket-row__side { display: grid; gap: 8px; justify-items: end; position: relative; z-index: 1; }
/* Bandeau au ras du texte, pas une barre pleine largeur : c'est une
   mention, pas un encart. */
.hc-ticket-row__next { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 6px 12px; border: 1px solid var(--hc-warn-line); border-radius: var(--hc-r-pill); background: var(--hc-warn-soft); color: var(--hc-warn-text); font-size: .84rem; font-weight: 700; }
.hc-ticket-row__next .icon { width: 15px; height: 15px; fill: currentColor; }

/* Conversation */
.hc-thread { display: grid; gap: 16px; }
.hc-msg {
  display: grid; gap: 10px; padding: 18px 20px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r);
  background: var(--hc-surface);
}
.hc-msg--agent { border-color: var(--hc-brand-line); background: var(--hc-brand-soft); }
.hc-msg--system { border-style: dashed; background: transparent; }
.hc-msg--internal { border-color: var(--hc-warn-line); background: var(--hc-warn-soft); }
.hc-msg__head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; font-size: .83rem; color: var(--hc-text-3); }
.hc-msg__who { display: inline-flex; align-items: center; gap: 8px; color: var(--hc-text); font-weight: 800; }
.hc-msg__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--hc-surface-3); color: var(--hc-text-2);
  font-size: .78rem; font-weight: 800;
}
.hc-msg--agent .hc-msg__avatar { background: var(--hc-brand); color: #fff; }
.hc-msg__body { color: var(--hc-text-2); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-msg__files { display: flex; flex-wrap: wrap; gap: 8px; }

.hc-attachment {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-pill);
  background: var(--hc-surface-2); color: var(--hc-text-2);
  font-size: .84rem; text-decoration: none;
}
.hc-attachment:hover { border-color: var(--hc-line-strong); color: var(--hc-text); }
.hc-attachment .icon { width: 15px; height: 15px; fill: currentColor; }
.hc-attachment__size { color: var(--hc-text-3); font-size: .79rem; }

/* Timeline */
.hc-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.hc-timeline li { position: relative; padding: 0 0 18px 24px; border-left: 2px solid var(--hc-line); }
.hc-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.hc-timeline li::before {
  content: ""; position: absolute; left: -6px; top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--hc-surface); border: 2px solid var(--hc-line-strong);
}
.hc-timeline li.is-done::before { background: var(--hc-ok); border-color: var(--hc-ok); }
.hc-timeline li.is-current::before { background: var(--hc-brand); border-color: var(--hc-brand); }
.hc-timeline__title { display: block; color: var(--hc-text); font-size: .9rem; font-weight: 700; }
.hc-timeline time { color: var(--hc-text-3); font-size: .78rem; }
.hc-timeline p { margin: 4px 0 0; color: var(--hc-text-2); font-size: .86rem; line-height: 1.5; }

/* Recapitulatif lateral */
.hc-summary { display: grid; gap: 10px; margin: 0; font-size: .88rem; }
.hc-summary > div { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
.hc-summary dt { color: var(--hc-text-3); }
.hc-summary dd { margin: 0; color: var(--hc-text); text-align: right; overflow-wrap: anywhere; font-weight: 600; }

/* ---------------------------------------------------------------------
   18. STATUT DES SERVICES
   ------------------------------------------------------------------ */

.hc-status-hero {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: 24px 26px;
  border: 1px solid var(--hc-line); border-left-width: 4px; border-radius: var(--hc-r);
  background: var(--hc-surface);
}
.hc-status-hero--ok { border-left-color: var(--hc-ok); }
.hc-status-hero--warn { border-left-color: var(--hc-warn); }
.hc-status-hero--bad { border-left-color: var(--hc-bad); }
.hc-status-hero--info { border-left-color: var(--hc-accent); }
.hc-status-hero__title { margin: 0; font-size: 1.25rem; }
.hc-status-hero__note { margin: 6px 0 0; color: var(--hc-text-2); font-size: .9rem; line-height: 1.55; max-width: 70ch; }

.hc-service {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--hc-line);
}
.hc-service:last-child { border-bottom: 0; }
.hc-service__name { display: block; color: var(--hc-text); font-size: .97rem; font-weight: 700; }
.hc-service__desc { display: block; margin-top: 3px; color: var(--hc-text-2); font-size: .85rem; }
.hc-service__mode { display: block; margin-top: 3px; color: var(--hc-text-3); font-size: .77rem; }

/* ---------------------------------------------------------------------
   19. ETATS VIDES, SQUELETTES, PAGINATION
   ------------------------------------------------------------------ */

.hc-empty {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: 44px 28px;
  border: 1px dashed var(--hc-line-strong); border-radius: var(--hc-r);
  background: var(--hc-surface);
}
.hc-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--hc-brand-soft); color: var(--hc-brand);
}
.hc-empty__icon .icon { width: 26px; height: 26px; fill: currentColor; }
.hc-empty__title { margin: 0; font-size: 1.08rem; }
.hc-empty__text { margin: 0; max-width: 56ch; color: var(--hc-text-2); font-size: .93rem; line-height: 1.6; }

.hc-skeleton { border-radius: var(--hc-r-sm); background: linear-gradient(90deg, var(--hc-surface-2) 25%, var(--hc-surface-3) 37%, var(--hc-surface-2) 63%); background-size: 400% 100%; animation: hc-shimmer 1.4s ease infinite; }
@keyframes hc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.hc-pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.hc-pagination a, .hc-pagination span {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 12px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm);
  color: var(--hc-text-2); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.hc-pagination a:hover { color: var(--hc-text); border-color: var(--hc-line-strong); }
.hc-pagination [aria-current="page"] { color: var(--hc-text); border-color: var(--hc-brand); background: var(--hc-brand-soft); font-weight: 800; }

/* Messages de formulaire */
.hc-flash { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid; border-radius: var(--hc-r-sm); }
.hc-flash--ok { border-color: var(--hc-ok-line); background: var(--hc-ok-soft); color: var(--hc-ok-text); }
.hc-flash--error { border-color: var(--hc-bad-line); background: var(--hc-bad-soft); color: var(--hc-bad-text); }
.hc-flash strong { color: inherit; }
.hc-flash ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* ---------------------------------------------------------------------
   19 bis. BARRE D'OUTILS DE LISTE (Mes demandes)
   ---------------------------------------------------------------------
   DEFAUT CORRIGE : l'ecran empilait trois bandeaux avant la moindre
   demande — trois cartes de compteurs, puis quatre pastilles de filtre
   qui repetaient exactement les memes trois etats, puis la recherche.
   Le compteur et le filtre sont la MEME information : ils sont
   desormais un seul controle, et la recherche partage sa rangee.
   ------------------------------------------------------------------ */

.hc-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--hc-line); border-radius: var(--hc-r);
  background: var(--hc-surface);
}
.hc-toolbar > .hc-filters { flex: 1 1 auto; }
/* La recherche prend la place restante de la rangee, sans descendre sous
   une largeur de saisie utile. */
.hc-toolbar > .hc-search { flex: 1 1 320px; max-width: 100%; }

/* Compteur porte par la pastille de filtre. */
.hc-filter__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: var(--hc-r-pill);
  background: var(--hc-surface-3); color: var(--hc-text-2);
  font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.hc-filter[aria-current="true"] .hc-filter__count { background: var(--hc-brand); color: #fff; }
/* Un seul etat merite d'attirer l'oeil : celui qui attend le membre. */
.hc-filter--alert { border-color: var(--hc-warn-line); color: var(--hc-warn-text); }
.hc-filter--alert .hc-filter__count { background: var(--hc-warn); color: #2a1a00; }
.hc-filter--alert[aria-current="true"] { background: var(--hc-warn-soft); border-color: var(--hc-warn); color: var(--hc-warn-text); }

/* Rappel d'action, place avant la liste. */
.hc-callout {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--hc-warn-line); border-left-width: 3px;
  border-radius: var(--hc-r);
  background: var(--hc-warn-soft); color: var(--hc-warn-text);
  font-weight: 700;
}
.hc-callout__text { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.hc-callout .icon { flex: 0 0 auto; width: 18px; height: 18px; fill: currentColor; }
.help-page .hc-callout__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------------------------------------------------------------------
   20. RESPONSIVE
   ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .hc-article-layout { grid-template-columns: minmax(0, 1fr); }
  .hc-aside { position: static; }
  .hc-toc { display: flex; flex-wrap: wrap; gap: 6px; }
  .hc-toc a { border-left: 0; border: 1px solid var(--hc-line); border-radius: var(--hc-r-pill); }
}

/* Le panneau lateral du hero perd sa colonne avant d'etre comprime :
   sous 980 px, deux colonnes reduisaient la recherche a moins de la
   moitie de la largeur utile. */
@media (max-width: 980px) {
  .hc-hero--home { grid-template-columns: minmax(0, 1fr); }
  .hc-hero__side { grid-template-columns: minmax(0, 1fr); }
  .hc-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-hero__stat { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 860px) {
  .hc-shell { gap: 24px; padding: 12px 16px 72px; }
  .hc-cats { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .hc-ticket-row { grid-template-columns: minmax(0, 1fr); }
  .hc-ticket-row__side { justify-items: start; }
  .hc-summary > div { flex-direction: column; gap: 2px; }
  .hc-summary dd { text-align: left; }
}

@media (max-width: 640px) {
  .hc-shell { padding: 10px 14px 64px; gap: 20px; }
  /* Le hero se compacte pour que la recherche reste au-dessus de la
     ligne de flottaison : c'est le geste numero un sur mobile. */
  .hc-hero { padding: 20px 16px; gap: 14px; border-radius: var(--hc-r); }
  .hc-hero__title { font-size: 1.42rem; max-width: none; }
  .hc-hero__lead { font-size: .95rem; }
  .hc-hero--home .hc-hero__lead { display: none; }
  .hc-hero--home .hc-hero__actions { order: 5; }
  .hc-search__input { height: 46px; font-size: 1rem; }
  .hc-search--lg .hc-search__input { height: 48px; font-size: 1rem; }
  /* La recherche reprend toute la largeur sous les filtres plutot que de
     se comprimer a cote d'eux. */
  .hc-toolbar { padding: 12px; }
  .hc-toolbar > .hc-search { flex: 1 1 100%; }
  .hc-cats { grid-template-columns: minmax(0, 1fr); }
  .hc-choices { grid-template-columns: minmax(0, 1fr); }
  /* Les boutons passent pleine largeur DANS LES BARRES D'ACTION seulement.
     Une regle `.hc-btn { width: 100% }` sans portee touchait aussi le
     bouton du champ de recherche : celui-ci imposait alors sa largeur a la
     grille du hero, qui debordait de l'ecran (mesure : enfants a droite de
     la fenetre sur 375 px). */
  .hc-actions .hc-btn,
  .hc-hero__actions .hc-btn,
  .hc-btn--block { width: 100%; flex: 1 1 100%; }
  /* Le champ de recherche empile son bouton SOUS la saisie plutot que de
     comprimer les deux : sur 360 px, cote a cote, le bouton reduisait le
     champ a une dizaine de caracteres visibles. */
  .hc-search__row { flex-direction: column; align-items: stretch; gap: 8px; }
  .help-page .hc-search__submit { width: 100%; justify-content: center; }
  .hc-search__field { padding: 0 12px; }
  /* Le dropdown suit la largeur du champ et ne peut pas sortir de l'ecran :
     il est positionne sur `.hc-search`, dont la largeur est bornee par la
     grille du hero. */
  .hc-suggest { max-height: 52vh; }
  .hc-suggest small { display: none; }
  .hc-accordion__panel { padding-left: 18px; }
  .hc-accordion__trigger { padding: 13px 14px; gap: 10px; }
  .hc-accordion__question-wrap { gap: 10px; }
  .hc-accordion__visual { width: 32px; height: 32px; border-radius: 9px; }
  .hc-accordion__visual .icon { width: 16px; height: 16px; }
  .hc-cat__visual { height: 96px; margin: -16px -16px 12px; }
  .hc-cat { padding: 16px; }
  .hc-cat__visual-icon { width: 38px; height: 38px; left: 14px; bottom: -16px; }
  .hc-hero__badge { font-size: .76rem; padding: 6px 11px; }
  /* Trois colonnes de statistiques sur 360 px cassaient les libelles en
     quatre lignes : on repasse a une seule colonne, en ligne. */
  .hc-hero__stats { grid-template-columns: minmax(0, 1fr); }
  .hc-hero__stat { flex-direction: row; align-items: center; justify-content: space-between; }
  .hc-hero__stat--status { flex-direction: column; align-items: flex-start; }
  .hc-hero__side { padding: 14px; }
  .hc-section__head { gap: 6px; }
  .hc-item { grid-template-columns: 1fr; padding: 14px 12px; }
  .hc-item__chevron { display: none; }
  .hc-steps { gap: 4px; }
  .hc-steps li { padding: 7px 12px 7px 9px; font-size: .78rem; }
  .hc-prose { font-size: 1rem; }
  .hc-msg { padding: 15px 16px; }
  .hc-topbar { align-items: flex-start; }
  .hc-lang-switch { margin-left: auto; }
}

/* Le tactile a besoin de place : on remonte toutes les cibles a 44 px. */
@media (pointer: coarse) {
  .help-page :is(.hc-section__link, .hc-crumbs a, .hc-cat__links a, .hc-toc a) { min-height: 44px; display: flex; align-items: center; }
}

/* ---------------------------------------------------------------------
   21. PREFERENCES SYSTEME
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .help-page *, .help-page *::before, .help-page *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .hc-cat:hover { transform: none; }
  .hc-skeleton { animation: none; }
  /* Le temoin de chargement ne tourne plus : il reste une pastille
     coloree, l'information est conservee sans mouvement. */
  .hc-search.is-loading .hc-search__activity { animation: none; }
}

@media (forced-colors: active) {
  .hc-badge, .hc-btn, .hc-filter, .hc-chip { border: 1px solid CanvasText; }
  .hc-item__title a::after { display: none; }
  /* Fonds et degrades sont ecrases en contraste force : la demande en
     attente se distingue alors par une bordure epaisse, pas par sa teinte. */
  .hc-ticket-row--action { border-width: 2px; border-left-width: 5px; }
  .hc-ticket-row__next { border: 1px solid CanvasText; }
}

@media print {
  .hc-topbar, .hc-search, .hc-chips, .hc-helpful, .hc-aside, .hc-actions { display: none !important; }
  .help-page { background: #fff; color: #000; }
  .hc-prose { max-width: none; }
}