/*
 * Centre d'aide CookinBreak (help.cookinbreak.com) — préfixe hc-
 * Couleurs, rayons, ombres et typographie : jetons du design system du site (static/css/ds/tokens.css, chargé avant).
 * Mode sombre : classe « dark-mode » sur <html> (sélecteur de thème du pied de page).
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: var(--ds-radius-xs); }

.cb-icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; fill: currentColor; }
.hc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--ds-radius-sm); background: var(--ds-primary); color: var(--ds-on-primary); text-decoration: none; font-weight: 600; }
.hc-skip:focus { top: 12px; }

.hc-wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 900px) { .hc-wrap { padding-inline: 32px; } }
.hc-main { min-height: 50vh; }

.hc-h2 { margin: 0; font-family: var(--ds-font-display); font-weight: 500; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; }
.hc-h3 { margin: 0; font-family: var(--ds-font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.3; }
.hc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-primary-text); }
.hc-eyebrow .cb-icon { font-size: 1.25rem; }
.hc-link { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; color: var(--ds-primary-text); font-weight: 600; font-size: var(--ds-text-sm); text-decoration: none; }
.hc-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hc-link .cb-icon { transition: transform var(--ds-duration) var(--ds-ease); }
.hc-link:hover .cb-icon { transform: translateX(3px); }

/* ---------- Boutons, puces, tuiles d'icône ---------- */
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--ds-radius-btn);
  font-weight: 600; font-size: var(--ds-text-sm); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease), transform 120ms var(--ds-ease), color var(--ds-duration) var(--ds-ease);
}
.hc-btn:active { transform: scale(0.97); }
.hc-btn .cb-icon { font-size: 1.15rem; }
.hc-btn--primary { background: var(--ds-primary); color: var(--ds-on-primary); }
.hc-btn--primary:hover { background: var(--ds-primary-hover); }
.hc-btn--ghost { background: var(--ds-surface); border-color: var(--ds-border-strong); color: var(--ds-text); }
.hc-btn--ghost:hover { background: var(--ds-surface-hover); }
.hc-btn--soft { background: var(--ds-surface-2); color: var(--ds-text); }
.hc-btn--soft:hover { background: var(--ds-primary-soft); color: var(--ds-primary-text); }
.hc-btn--block { width: 100%; }

.hc-chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--ds-radius-xs);
  background: var(--ds-surface); border: 1px solid var(--ds-border); color: var(--ds-text-2);
  font-size: var(--ds-text-sm); text-decoration: none; transition: border-color var(--ds-duration), color var(--ds-duration), background var(--ds-duration);
}
.hc-chip:hover { border-color: var(--ds-primary); color: var(--ds-primary-text); }

.hc-tile {
  --hc-tile-bg: var(--ds-primary-soft); --hc-tile-fg: var(--ds-primary-text);
  display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--ds-radius-sm);
  background: var(--hc-tile-bg); color: var(--hc-tile-fg); font-size: 1.6rem;
}
.hc-tile--sm { width: 36px; height: 36px; border-radius: var(--ds-radius-xs); font-size: 1.2rem; }
.hc-tile--lg { width: 64px; height: 64px; border-radius: var(--ds-radius-md); font-size: 2.1rem; }
.hc-tile--teal { --hc-tile-bg: var(--ds-primary-soft); --hc-tile-fg: var(--ds-primary-text); }
.hc-tile--orange { --hc-tile-bg: var(--ds-accent-soft); --hc-tile-fg: var(--ds-accent-text); }
.hc-tile--blue { --hc-tile-bg: var(--ds-info-soft); --hc-tile-fg: var(--ds-info); }
.hc-tile--green { --hc-tile-bg: var(--ds-success-soft); --hc-tile-fg: var(--ds-success); }
.hc-tile--rose { --hc-tile-bg: var(--ds-danger-soft); --hc-tile-fg: var(--ds-danger); }
.hc-tile--sand { --hc-tile-bg: var(--ds-warning-soft); --hc-tile-fg: var(--ds-warning); }
.hc-tile--violet { --hc-tile-bg: #efe8fb; --hc-tile-fg: #6a43b5; }
.dark-mode .hc-tile--violet { --hc-tile-bg: rgba(180, 150, 245, 0.16); --hc-tile-fg: #c7b2f7; }

.hc-badge {
  --hc-tile-bg: var(--ds-primary-soft); --hc-tile-fg: var(--ds-primary-text);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--ds-radius-badge);
  background: var(--hc-tile-bg); color: var(--hc-tile-fg); font-size: var(--ds-text-sm); font-weight: 600; text-decoration: none;
}
.hc-badge .cb-icon { font-size: 1.1rem; }
.hc-badge--orange { --hc-tile-bg: var(--ds-accent-soft); --hc-tile-fg: var(--ds-accent-text); }
.hc-badge--blue { --hc-tile-bg: var(--ds-info-soft); --hc-tile-fg: var(--ds-info); }
.hc-badge--green { --hc-tile-bg: var(--ds-success-soft); --hc-tile-fg: var(--ds-success); }
.hc-badge--rose { --hc-tile-bg: var(--ds-danger-soft); --hc-tile-fg: var(--ds-danger); }
.hc-badge--sand { --hc-tile-bg: var(--ds-warning-soft); --hc-tile-fg: var(--ds-warning); }
.hc-badge--violet { --hc-tile-bg: #efe8fb; --hc-tile-fg: #6a43b5; }
.dark-mode .hc-badge--violet { --hc-tile-bg: rgba(180, 150, 245, 0.16); --hc-tile-fg: #c7b2f7; }

.hc-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); }

/* ---------- Barre du haut ---------- */
.hc-bar {
  position: sticky; top: 0; z-index: var(--ds-z-sticky);
  background: color-mix(in srgb, var(--ds-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--ds-duration), box-shadow var(--ds-duration);
}
.hc-bar.is-scrolled { border-bottom-color: var(--ds-border); box-shadow: 0 6px 20px -16px rgba(0, 0, 0, 0.3); }
.hc-bar__in { display: flex; align-items: center; gap: 16px; max-width: 1160px; margin-inline: auto; padding: 12px 20px; min-height: 68px; }
@media (min-width: 900px) { .hc-bar__in { padding-inline: 32px; } }

.hc-brand { display: inline-flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: var(--ds-text); }
.hc-brand__logo { display: block; width: auto; height: 34px; }
.dark-mode .hc-brand__logo { filter: invert(1) hue-rotate(180deg); }
.hc-brand__sep { width: 1px; height: 24px; background: var(--ds-border-strong); }
.hc-brand__label { font-family: var(--ds-font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; }

.hc-bar__search { position: relative; flex: 1 1 200px; max-width: 260px; display: none; }
.hc-bar__search input {
  width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); font-size: var(--ds-text-sm); outline: none; transition: border-color var(--ds-duration), box-shadow var(--ds-duration);
}
.hc-bar__search input:focus { border-color: var(--ds-primary); box-shadow: var(--ds-focus-ring); }
.hc-bar__search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ds-text-3); pointer-events: none; }

.hc-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hc-nav__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--ds-radius-sm);
  color: var(--ds-text-2); font-size: var(--ds-text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--ds-duration), color var(--ds-duration);
}
.hc-nav__link .cb-icon { font-size: 1.15rem; display: none; }
.hc-nav__link:hover { background: var(--ds-surface-2); color: var(--ds-text); }
.hc-nav__link.is-on { color: var(--ds-primary-text); background: var(--ds-primary-soft); }
.hc-nav__site, .hc-nav__link--contact { display: none !important; }
.hc-bar__contact { flex: none; }
.hc-bar__menu { display: none; }

/* bureau : « Accueil » est le logo ; la recherche compacte n'apparaît que s'il reste la place */
@media (min-width: 900px) { .hc-nav__link:first-child { display: none; } }
@media (min-width: 1200px) { .hc--article .hc-bar__search, .hc--articles .hc-bar__search, .hc--category .hc-bar__search, .hc--search .hc-bar__search, .hc--404 .hc-bar__search { display: block; } }
@media (min-width: 900px) and (max-width: 1099px) { .hc-bar__contact span { display: none; } .hc-bar__contact { width: 44px; padding: 0; } }

/* mobile et tablette : menu déroulant */
@media (max-width: 899px) {
  .hc-bar__in { min-height: 60px; padding-block: 10px; gap: 10px; }
  .hc-brand__logo { height: 28px; }
  .hc-brand { gap: 10px; }
  .hc-brand__label { font-size: 0.85rem; }
  .hc-bar__contact { display: none; }
  .hc-bar__menu {
    display: inline-grid; place-items: center; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm); background: var(--ds-surface); font-size: 1.35rem; cursor: pointer;
  }
  .hc-bar__menu > span { display: inline-grid; }
  .hc-bar__menu > .hc-bar__menu-close,
  .hc-bar.is-open .hc-bar__menu > .hc-bar__menu-open { display: none; }
  .hc-bar.is-open .hc-bar__menu > .hc-bar__menu-close { display: inline-grid; }
  .hc-nav {
    position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: var(--ds-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top center;
    transition: opacity 180ms var(--ds-ease), transform 220ms var(--ds-ease), visibility 0s linear 220ms;
  }
  .hc-bar.is-open .hc-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .hc-nav__link { min-height: 50px; padding: 0 14px; font-size: var(--ds-text-base); color: var(--ds-text); }
  .hc-nav__link .cb-icon { display: inline-block; font-size: 1.35rem; color: var(--ds-primary-text); }
  .hc-nav .hc-nav__link--contact { display: inline-flex !important; color: var(--ds-primary-text); font-weight: 600; }
  .hc-nav__site {
    display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 14px; border-top: 1px solid var(--ds-border);
    color: var(--ds-text-2); font-size: var(--ds-text-sm); text-decoration: none;
  }
}

/* ---------- Héros de l'accueil ---------- */
.hc-hero { position: relative; overflow-x: clip; padding: 56px 0 84px; }   /* pas de coupe verticale : la liste de la recherche en direct dépasse */
.hc-hero::before {
  content: ""; position: absolute; inset: 0 -20% auto; height: 100%; z-index: -1;
  background:
    radial-gradient(42% 46% at 18% 30%, color-mix(in srgb, var(--ds-primary) 18%, transparent), transparent 70%),
    radial-gradient(34% 40% at 84% 18%, color-mix(in srgb, var(--ds-accent) 14%, transparent), transparent 70%),
    radial-gradient(40% 40% at 60% 90%, color-mix(in srgb, var(--ds-primary) 10%, transparent), transparent 70%);
}
.hc-hero__in { text-align: center; max-width: 860px; }
.hc-hero__title { margin: 0; font-family: var(--ds-font-display); font-weight: 500; font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.hc-hero__lead { margin: 16px auto 32px; max-width: 560px; color: var(--ds-text-2); font-size: var(--ds-text-lg); }

.hc-search {
  position: relative; display: flex; align-items: center; gap: 8px; max-width: 720px; margin-inline: auto; padding: 8px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-lg);
  transition: border-color var(--ds-duration), box-shadow var(--ds-duration);
}
.hc-search:focus-within { border-color: var(--ds-primary); box-shadow: var(--ds-shadow-lg), var(--ds-focus-ring); }
.hc-search__ico { margin-left: 12px; font-size: 1.3rem; color: var(--ds-text-3); }
.hc-search__input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; outline: none; font-size: 1.05rem; }
.hc-search__input:focus, .hc-search__input:focus-visible { outline: none; box-shadow: none; }   /* le cadre du champ montre déjà le focus */
.hc-search__input::placeholder { color: var(--ds-text-3); }
.hc-search__input::-webkit-search-cancel-button { cursor: pointer; }
.hc-search__btn { min-height: 48px; padding-inline: 22px; }
.hc-search--page { margin: 20px 0 0; max-width: 680px; box-shadow: var(--ds-shadow-md); }
@media (max-width: 599px) {
  .hc-search__btn { width: 48px; padding: 0; }
  .hc-search__btn span { display: none; }
  .hc-search__input { font-size: 1rem; }
  .hc-search__ico { margin-left: 6px; }
}

.hc-suggest { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; }
.hc-suggest > span { margin-right: 4px; color: var(--ds-text-3); font-size: var(--ds-text-sm); }
.hc-suggest--center { margin-top: 18px; }
@media (max-width: 599px) {
  .hc-suggest { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -20px; padding: 2px 20px; scrollbar-width: none; }
  .hc-suggest::-webkit-scrollbar { display: none; }
  .hc-suggest > * { flex: none; }
  .hc-suggest--center { flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding: 0; }
}

/* ---------- Raccourcis ---------- */
.hc-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: -40px; position: relative; }
.hc-quick__item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--ds-radius-md);
  background: var(--ds-surface); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-md);
  text-decoration: none; font-weight: 600; font-size: var(--ds-text-sm); line-height: 1.3;
  transition: transform var(--ds-duration) var(--ds-ease), border-color var(--ds-duration);
}
.hc-quick__item:hover { transform: translateY(-2px); border-color: var(--ds-primary); }
.hc-quick__ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--ds-radius-xs); background: var(--ds-primary-soft); color: var(--ds-primary-text); font-size: 1.35rem; }
.hc-quick__label { flex: 1; }
.hc-quick__go { color: var(--ds-text-3); }
@media (max-width: 899px) { .hc-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -48px; } }
@media (max-width: 420px) { .hc-quick__item { padding: 12px; gap: 10px; } .hc-quick__go { display: none; } }

/* ---------- Sections ---------- */
.hc-section { margin-top: 56px; }
.hc-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

.hc-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hc-cat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border-radius: var(--ds-radius-lg);
  background: var(--ds-surface); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-sm); text-decoration: none;
  transition: transform var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease), border-color var(--ds-duration);
}
.hc-cat:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-md); border-color: var(--ds-border-strong); }
.hc-cat .hc-tile { margin-bottom: 8px; transition: transform var(--ds-duration) var(--ds-ease); }
.hc-cat:hover .hc-tile { transform: scale(1.06) rotate(-4deg); }
.hc-cat__title { font-family: var(--ds-font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
.hc-cat__lead { color: var(--ds-text-2); font-size: var(--ds-text-sm); line-height: 1.5; flex: 1; }
.hc-cat__count { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--ds-primary-text); font-size: var(--ds-text-sm); font-weight: 600; }
.hc-cat__count .cb-icon { transition: transform var(--ds-duration) var(--ds-ease); }
.hc-cat:hover .hc-cat__count .cb-icon { transform: translateX(3px); }
.hc-cats--compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.hc-cats--compact .hc-cat { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--ds-radius-md); }
.hc-cats--compact .hc-cat .hc-tile { margin: 0; width: 40px; height: 40px; font-size: 1.3rem; border-radius: var(--ds-radius-xs); }
.hc-cats--compact .hc-cat__title { font-size: 0.95rem; }
@media (max-width: 899px) { .hc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .hc-cats { grid-template-columns: 1fr; gap: 10px; }
  .hc-cats:not(.hc-cats--compact) .hc-cat { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; padding: 16px; border-radius: var(--ds-radius-md); }
  .hc-cats:not(.hc-cats--compact) .hc-cat .hc-tile { grid-row: span 3; margin: 0; }
  .hc-cats:not(.hc-cats--compact) .hc-cat__count { margin-top: 2px; }
}

.hc-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.hc-split .hc-section { margin-top: 56px; }
@media (max-width: 899px) { .hc-split { grid-template-columns: 1fr; gap: 0; } }

/* listes de liens */
.hc-list { list-style: none; margin: 0; padding: 6px; }
.hc-list li + li { border-top: 1px solid var(--ds-border); }
.hc-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: var(--ds-radius-md);
  text-decoration: none; transition: background var(--ds-duration);
}
.hc-list li + li .hc-row { margin-top: 0; }
.hc-row:hover { background: var(--ds-surface-hover); }
.hc-row__title { flex: 1; font-weight: 500; line-height: 1.4; }
.hc-row__go { color: var(--ds-text-3); transition: transform var(--ds-duration) var(--ds-ease), color var(--ds-duration); }
.hc-row:hover .hc-row__go { transform: translateX(3px); color: var(--ds-primary-text); }
.hc-row__lead { font-size: 1.2rem; color: var(--ds-primary-text); }
.hc-row--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.hc-row__meta { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-text-3); font-size: var(--ds-text-xs); font-weight: 500; }
.hc-row--rich { align-items: flex-start; }
.hc-row--rich .hc-row__go { margin-top: 4px; }
.hc-row__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hc-row__text { color: var(--ds-text-2); font-size: var(--ds-text-sm); line-height: 1.55; }
.hc-row mark { background: var(--ds-primary-soft); color: var(--ds-primary-text); border-radius: 4px; padding: 0 2px; font-weight: 600; }

/* aide en dernier recours */
.hc-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hc-help__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border-radius: var(--ds-radius-lg);
  background: var(--ds-surface); border: 1px solid var(--ds-border); text-decoration: none;
  transition: transform var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease);
}
.hc-help__card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-md); }
.hc-help__card .hc-tile { margin-bottom: 8px; }
.hc-help__card--breaky { background: linear-gradient(150deg, var(--ds-primary-soft), var(--ds-surface) 75%); border-color: color-mix(in srgb, var(--ds-primary) 30%, var(--ds-border)); }
.hc-help__title { font-family: var(--ds-font-display); font-weight: 500; font-size: 1.05rem; }
.hc-help__text { flex: 1; color: var(--ds-text-2); font-size: var(--ds-text-sm); }
.hc-help__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ds-primary-text); font-weight: 600; font-size: var(--ds-text-sm); }
@media (max-width: 899px) { .hc-help { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- En-tête des pages intérieures ---------- */
.hc-head { padding: 28px 0 8px; }
.hc-head__row { display: flex; align-items: center; gap: 18px; }
.hc-head__title { margin: 0; font-family: var(--ds-font-display); font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.hc-head__lead { margin: 8px 0 0; color: var(--ds-text-2); }
.hc-head__fix { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--ds-text-2); font-size: var(--ds-text-sm); }
.hc-head__fix .cb-icon { color: var(--ds-primary-text); font-size: 1.1rem; }
@media (max-width: 599px) { .hc-head__row { align-items: flex-start; gap: 14px; } .hc-head__row .hc-tile--lg { width: 52px; height: 52px; font-size: 1.7rem; } }

.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--ds-text-3); font-size: var(--ds-text-sm); }
.hc-crumbs a { color: var(--ds-text-2); text-decoration: none; }
.hc-crumbs a:hover { color: var(--ds-primary-text); text-decoration: underline; text-underline-offset: 3px; }
.hc-crumbs .cb-icon { font-size: 0.75rem; }

/* onglets de thématiques (liste et thématique) */
.hc-listing { padding-top: 16px; }
.hc-tabs { position: relative; display: flex; gap: 8px; overflow-x: auto; margin: 8px -20px 28px; padding: 4px 20px; scrollbar-width: none; }
.hc-tabs::-webkit-scrollbar { display: none; }
.hc-tabs__item {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border); background: var(--ds-surface); color: var(--ds-text-2); font-size: var(--ds-text-sm); font-weight: 500; text-decoration: none;
  transition: border-color var(--ds-duration), color var(--ds-duration), background var(--ds-duration);
}
.hc-tabs__item .cb-icon { font-size: 1.1rem; }
.hc-tabs__item span { min-width: 22px; padding: 1px 6px; border-radius: 7px; background: var(--ds-surface-2); color: var(--ds-text-3); font-size: var(--ds-text-xs); text-align: center; }
.hc-tabs__item:hover { border-color: var(--ds-primary); color: var(--ds-primary-text); }
.hc-tabs__item.is-on { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); }
.hc-tabs__item.is-on span { background: rgba(255, 255, 255, 0.22); color: inherit; }
@media (min-width: 900px) { .hc-tabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.hc-group + .hc-group { margin-top: 36px; }
.hc-group__title { display: flex; align-items: center; gap: 12px; }

/* ---------- Article ---------- */
.hc-article { padding-top: 28px; }
.hc-article__head { max-width: 780px; }
.hc-article__title { margin: 14px 0 0; font-family: var(--ds-font-display); font-weight: 500; font-size: clamp(1.6rem, 1.05rem + 2.3vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.hc-article__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; color: var(--ds-text-3); font-size: var(--ds-text-sm); }
.hc-article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hc-article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; margin-top: 32px; }
.hc-article__main { min-width: 0; max-width: 760px; }
.hc-article__side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 999px) {
  .hc-article__grid { grid-template-columns: 1fr; gap: 32px; }
  .hc-article__side { position: static; }
  .hc-toc { display: none; }
  /* le bandeau « Toujours bloqué ? » suit juste après : pas deux fois les mêmes boutons */
  .hc-article__side .hc-side:not(.hc-side--cat) { display: none; }
}

.hc-prose { font-size: 1.05rem; line-height: 1.75; color: var(--ds-text); overflow-wrap: anywhere; }
.hc-prose > :first-child { margin-top: 0; }
.hc-prose p, .hc-prose ul, .hc-prose ol { margin: 0 0 1.1em; }
.hc-prose h1, .hc-prose h2, .hc-prose h3, .hc-prose h4 { font-family: var(--ds-font-display); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.hc-prose h1, .hc-prose h2 { margin: 1.8em 0 0.6em; font-size: 1.35rem; }
.hc-prose h3 { margin: 1.5em 0 0.5em; font-size: 1.12rem; }
.hc-prose h4 { margin: 1.3em 0 0.4em; font-size: 1rem; }
.hc-prose ul, .hc-prose ol { padding-left: 1.3em; }
.hc-prose li { margin: 0.35em 0; }
.hc-prose li::marker { color: var(--ds-primary-text); }
.hc-prose strong { font-weight: 600; }
.hc-prose a { color: var(--ds-primary-text); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ds-primary-text) 40%, transparent); text-underline-offset: 3px; }
.hc-prose a:hover { text-decoration-color: currentColor; }
.hc-prose blockquote { margin: 1.4em 0; padding: 16px 20px; border-radius: var(--ds-radius-md); background: var(--ds-primary-soft); color: var(--ds-text); }
.hc-prose blockquote > :last-child { margin-bottom: 0; }
.hc-prose code { padding: 2px 6px; border-radius: 6px; background: var(--ds-surface-2); font-size: 0.9em; }
.hc-prose pre { padding: 16px; border-radius: var(--ds-radius-md); background: var(--ds-surface-2); overflow-x: auto; }
.hc-prose pre code { padding: 0; background: none; }
.hc-prose img { display: block; margin: 1.4em 0; border-radius: var(--ds-radius-md); border: 1px solid var(--ds-border); }
.hc-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ds-border); }
.hc-prose table { width: 100%; margin: 1.4em 0; border-collapse: collapse; font-size: 0.95rem; display: block; overflow-x: auto; }
.hc-prose th, .hc-prose td { padding: 10px 12px; border-bottom: 1px solid var(--ds-border); text-align: left; }
.hc-prose th { font-weight: 600; background: var(--ds-surface-2); }

.hc-vote { margin-top: 40px; padding: 22px 24px; border-radius: var(--ds-radius-lg); background: var(--ds-surface); border: 1px solid var(--ds-border); }
.hc-vote__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.hc-vote__title { margin: 0; font-weight: 600; }
.hc-vote__btns { display: flex; gap: 8px; }
.hc-vote__btns .hc-btn { min-width: 96px; }
.hc-vote__done { display: flex; align-items: center; gap: 12px; }
.hc-vote__done[hidden] { display: none; }
.hc-vote__done .cb-icon { flex: none; font-size: 1.6rem; color: var(--ds-success); }
.hc-vote__done p { margin: 0; }
.hc-vote__done a { color: var(--ds-primary-text); font-weight: 600; }

.hc-related { margin-top: 40px; }
.hc-related .hc-h3 { margin-bottom: 14px; }

.hc-side { padding: 20px; border-radius: var(--ds-radius-lg); display: flex; flex-direction: column; gap: 10px; }
.hc-side__title { display: block; margin: 0; font-weight: 600; }
.hc-side__text { display: block; margin: 0 0 4px; color: var(--ds-text-2); font-size: var(--ds-text-sm); }
.hc-side__copy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; padding: 8px; border: 0; background: none;
  color: var(--ds-text-2); font-size: var(--ds-text-sm); cursor: pointer; border-radius: var(--ds-radius-xs);
}
.hc-side__copy:hover { color: var(--ds-primary-text); }
.hc-side__copy.is-done { color: var(--ds-success); }
.hc-side--cat { flex-direction: row; align-items: center; gap: 12px; text-decoration: none; transition: border-color var(--ds-duration); }
.hc-side--cat > span:nth-child(2) { flex: 1; }
.hc-side--cat .hc-side__text { margin: 2px 0 0; }
.hc-side--cat:hover { border-color: var(--ds-primary); }

.hc-toc { padding: 20px 20px 14px; }
.hc-toc ol { list-style: none; margin: 10px 0 0; padding: 0; border-left: 2px solid var(--ds-border); }
.hc-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--ds-text-2); font-size: var(--ds-text-sm); line-height: 1.4; text-decoration: none; transition: color var(--ds-duration), border-color var(--ds-duration); }
.hc-toc a:hover, .hc-toc a.is-on { color: var(--ds-primary-text); border-left-color: var(--ds-primary); }

/* ---------- Recherche, vide, 404 ---------- */
.hc-results { padding-top: 20px; }
.hc-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
.hc-empty .hc-tile { margin-bottom: 6px; }
.hc-empty p { margin: 0; max-width: 520px; color: var(--ds-text-2); }
.hc-empty--404 { margin-top: 28px; gap: 14px; }
.hc-empty--404 .hc-search { width: 100%; margin: 8px auto 4px; }

/* ---------- Bandeau « toujours bloqué » ---------- */
.hc-still { margin-top: 72px; }
.hc-still__in {
  display: flex; align-items: center; gap: 20px; padding: 26px 28px; border-radius: var(--ds-radius-lg);
  background: linear-gradient(120deg, var(--ds-primary-soft), var(--ds-surface) 80%); border: 1px solid color-mix(in srgb, var(--ds-primary) 25%, var(--ds-border));
}
.hc-still__ico { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-primary-text); font-size: 1.9rem; box-shadow: var(--ds-shadow-sm); }
.hc-still__text { flex: 1; }
.hc-still__text h2 { margin: 0 0 4px; font-family: var(--ds-font-display); font-weight: 500; font-size: 1.2rem; }
.hc-still__text p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-text-sm); }
.hc-still__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 799px) {
  .hc-still__in { flex-direction: column; align-items: flex-start; padding: 22px; }
  .hc-still__actions { width: 100%; }
  .hc-still__actions .hc-btn { flex: 1 1 200px; }
}

/* ---------- Pied de page ---------- */
.hc-foot { margin-top: 72px; padding: 48px 0 24px; background: var(--ds-surface); border-top: 1px solid var(--ds-border); }
.hc--home .hc-foot { margin-top: 80px; }
.hc-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.hc-foot__brand p { margin: 16px 0 18px; max-width: 340px; color: var(--ds-text-2); font-size: var(--ds-text-sm); }
.hc-foot__social { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-foot__social a {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ds-radius-xs);
  background: var(--ds-surface-2); color: var(--ds-text-2); font-size: 1.2rem; transition: background var(--ds-duration), color var(--ds-duration), transform var(--ds-duration) var(--ds-ease);
}
.hc-foot__social a:hover { background: var(--ds-primary-soft); color: var(--ds-primary-text); transform: translateY(-2px); }
.hc-foot__col h2 { margin: 6px 0 14px; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-text); }
.hc-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hc-foot__col a { color: var(--ds-text-2); font-size: var(--ds-text-sm); text-decoration: none; }
.hc-foot__col a:hover { color: var(--ds-primary-text); text-decoration: underline; text-underline-offset: 3px; }
.hc-foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--ds-border); color: var(--ds-text-3); font-size: var(--ds-text-sm); }
.hc-foot__back { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-text-2); text-decoration: none; font-weight: 500; }
.hc-foot__back:hover { color: var(--ds-primary-text); }
.hc-theme { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--ds-surface-2); }
.hc-theme__opt { position: relative; display: inline-grid; place-items: center; width: 34px; height: 30px; border-radius: 9px; color: var(--ds-text-3); font-size: 1.05rem; cursor: pointer; transition: background var(--ds-duration), color var(--ds-duration); }
.hc-theme__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hc-theme__opt:has(input:checked) { background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow-sm); }
.hc-theme__opt:has(input:focus-visible) { box-shadow: var(--ds-focus-ring); }
@media (max-width: 899px) {
  .hc-foot__grid { grid-template-columns: 1fr 1fr; }
  .hc-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 499px) {
  .hc-foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Recherche en direct (help.js) ---------- */
form[data-hc-live] { position: relative; }
form[data-hc-live]:focus-within { z-index: 30; }
.hc-live {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; max-height: min(70vh, 460px); overflow-y: auto; padding: 6px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-lg);
  text-align: left;
}
.hc-live[hidden] { display: none; }
.hc-bar__search .hc-live { left: auto; width: min(440px, calc(100vw - 40px)); }
.hc-live__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--ds-radius-sm); color: var(--ds-text); text-decoration: none; }
.hc-live__item:hover, .hc-live__item.is-active, .hc-live__all:hover, .hc-live__all.is-active { background: var(--ds-surface-2); }
.hc-live__ico { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ds-primary-soft); color: var(--ds-primary-text); font-size: 1.1rem; }
.hc-live__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-live__meta { color: var(--ds-text-3); font-size: 0.78rem; font-weight: 500; }
.hc-live__title { font-size: var(--ds-text-sm); font-weight: 500; line-height: 1.35; }
.hc-live__title mark { background: none; color: var(--ds-primary-text); font-weight: 700; }
.hc-live__all { display: block; margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--ds-border); border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm); color: var(--ds-primary-text); font-size: var(--ds-text-sm); font-weight: 600; text-decoration: none; }
.hc-live__fix, .hc-live__none { margin: 0; padding: 10px 12px; color: var(--ds-text-2); font-size: var(--ds-text-sm); }
.hc-live__fix { padding-bottom: 4px; color: var(--ds-text-3); }
.hc-live__none a { color: var(--ds-primary-text); font-weight: 600; }

/* ---------- Plateformes d'un article ---------- */
.hc-plats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.hc-plat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-badge); color: var(--ds-text-2); font-size: 0.8rem; font-weight: 500; }
.hc-plat .cb-icon { font-size: 1rem; color: var(--ds-text-3); }

/* ---------- Captures d'écran dans un article ---------- */
.hc-prose img { display: block; max-width: min(100%, 360px); height: auto; margin: 18px auto; border-radius: 22px; border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-md); }

/* ---------- Apparition douce ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hc-hero__in > * { animation: hc-rise 600ms var(--ds-ease) both; }
  .hc-hero__in > :nth-child(2) { animation-delay: 60ms; }
  .hc-hero__in > :nth-child(3) { animation-delay: 120ms; }
  .hc-hero__in > :nth-child(4) { animation-delay: 180ms; }
  .hc-hero__in > :nth-child(5) { animation-delay: 240ms; }
  .hc-quick { animation: hc-rise 600ms 260ms var(--ds-ease) both; }
}
@keyframes hc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }