.cat-section [hidden] { display: none !important; }
.cat-section { max-width: 1180px; margin: 0 auto; padding: 104px 16px 72px; }
.cat-product-intro { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.cat-product-copy .eyebrow { color: var(--brand-700); font-size: var(--t-caption); font-weight: 500; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.cat-product-copy h1 { max-width: 19ch; margin: var(--s-2) 0 0; color: var(--ink-1000); font-family: var(--font-display); font-size: var(--t-display-md); font-weight: 400; letter-spacing: 0; line-height: var(--lh-display); text-wrap: balance; }
.cat-product-copy h1 em { color: var(--brand-700); font-style: italic; font-weight: 400; }
.cat-product-copy .lede { max-width: 68ch; margin: var(--s-2) 0 0; color: var(--fg-muted); font-size: var(--t-body-md); line-height: var(--lh-relaxed); }
.cat-catalog-proof { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; min-height: var(--s-10); border: 1px solid var(--brand-hairline); border-radius: var(--r-pill); background: var(--brand-50); padding: 0 var(--s-3); }
.cat-proof-dot { width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--brand-600); box-shadow: 0 0 0 4px var(--brand-hairline); }
.cat-count { margin: 0; color: var(--brand-800); font-size: var(--t-body-sm); font-weight: 600; white-space: nowrap; }
@media (min-width: 720px) {
  .cat-section { padding: 112px 24px 80px; }
  .cat-product-intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); }
  .cat-catalog-proof { margin-bottom: var(--s-1); }
}

.cat-controls { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin: 0 0 var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--bg-elev-1); padding: var(--s-3); }
.cat-search, .cat-filter-field { display: grid; gap: var(--s-1); }
.cat-control-label { color: var(--fg-muted); font-size: var(--t-caption); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; }
.cat-search-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cat-filter-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
.cat-search-input, .cat-page-size, .cat-filter-input { width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); color: var(--ink-1000); font: inherit; min-height: var(--s-12); padding: 0 var(--s-3); }
.cat-search-input:focus-visible, .cat-page-size:focus-visible, .cat-filter-input:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-color: var(--brand-700); }
.cat-budget-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-1); }
.cat-budget-input { position: relative; min-width: 0; }
.cat-budget-input .cat-filter-input { appearance: textfield; padding-inline: var(--s-10) var(--s-8); font-variant-numeric: tabular-nums; font-weight: 600; }
.cat-budget-input .cat-filter-input::-webkit-inner-spin-button,
.cat-budget-input .cat-filter-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.cat-budget-bound { position: absolute; z-index: 1; inset-inline-start: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--fg-tertiary); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--tr-wide); text-transform: uppercase; pointer-events: none; }
.cat-budget-currency { position: absolute; inset-inline-end: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--fg-muted); font-size: var(--t-body-sm); pointer-events: none; }
.cat-budget-separator { color: var(--fg-tertiary); font-size: var(--t-body-sm); }
.cat-budget-input .cat-filter-input[aria-invalid="true"] { border-color: var(--danger-strong); }
.cat-budget-error { margin: var(--s-1) 0 0; color: var(--danger-strong); font-size: var(--t-caption); line-height: var(--lh-relaxed); }
.cat-multi { position: relative; min-width: 0; }
.cat-multi-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: var(--s-12); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); color: var(--ink-1000); font: inherit; padding: 0 var(--s-3); cursor: pointer; list-style: none; }
.cat-multi-trigger::-webkit-details-marker { display: none; }
.cat-multi-trigger:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-color: var(--brand-700); }
.cat-multi[open] .cat-multi-trigger { border-color: var(--brand-500); }
.cat-multi-trigger [data-catalog-multi-summary] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-multi-chevron { color: var(--fg-muted); transition: transform .15s ease; }
.cat-multi[open] .cat-multi-chevron { transform: rotate(180deg); }
.cat-multi-panel { position: absolute; z-index: 20; top: calc(100% + var(--s-1)); left: 0; right: 0; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-elev-1); box-shadow: var(--shadow-lg); padding: var(--s-2); }
.cat-multi-search { width: 100%; min-height: var(--s-10); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); color: var(--ink-1000); font: inherit; padding: 0 var(--s-3); }
.cat-multi-search:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-color: var(--brand-700); }
.cat-multi-options { display: grid; gap: var(--s-3); max-height: min(18rem, 54vh); margin-top: var(--s-2); overflow: auto; overscroll-behavior: contain; }
.cat-multi-group-title { margin: 0 0 var(--s-1); color: var(--fg-tertiary); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--tr-wide); text-transform: uppercase; }
.cat-multi-option { display: flex; align-items: center; gap: var(--s-2); min-height: var(--s-10); border-radius: var(--r-md); color: var(--ink-900); cursor: pointer; font-size: var(--t-body-sm); padding: 0 var(--s-2); }
.cat-multi-option:hover { background: var(--paper-2); }
.cat-multi-option input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand-700); flex-shrink: 0; }
.cat-multi-option[hidden], .cat-multi-group[hidden] { display: none; }
.cat-multi.is-disabled .cat-multi-trigger { opacity: 0.55; cursor: not-allowed; }
.cat-multi.is-disabled .cat-multi-panel { pointer-events: none; }
.cat-control-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); color: var(--ink-900); font: inherit; font-weight: 600; min-height: var(--s-12); padding: 0 var(--s-4); cursor: pointer; white-space: nowrap; text-decoration: none; }
.cat-control-button:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--brand-500); color: var(--brand-700); }
.cat-control-button:disabled, .cat-control-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.cat-control-button.primary { background: var(--brand-700); border-color: var(--brand-700); color: var(--paper); }
.cat-control-button.primary:hover:not(:disabled) { background: var(--brand-800); color: var(--paper); }
.cat-filter-field-toggle { align-content: end; }
.cat-premium-toggle { display: flex; align-items: center; gap: var(--s-2); min-height: var(--s-12); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); color: var(--ink-900); font-weight: 600; padding: 0 var(--s-3); cursor: pointer; }
.cat-premium-toggle:hover { border-color: var(--brand-500); color: var(--brand-700); }
.cat-premium-toggle input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand-700); flex-shrink: 0; }
.cat-premium-toggle span { min-width: 0; }
.cat-filter-input:disabled, .cat-premium-toggle:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
@media (min-width: 360px) and (max-width: 719px) {
  .cat-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-filter-format, .cat-filter-budget { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
  .cat-controls { padding: var(--s-3); gap: var(--s-3); }
  .cat-search-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cat-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-filter-format, .cat-filter-budget { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .cat-filter-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1.4fr); }
  .cat-filter-format, .cat-filter-budget { grid-column: auto; }
}

.cat-runtime-status { color: var(--fg-muted); font-size: var(--t-body-sm); margin: 0 0 var(--s-2); }
.cat-runtime-status:empty { display: none; }
.cat-runtime-status[data-kind="error"] { color: var(--danger-strong); }
.cat-results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0 0 var(--s-3); }
.cat-page-size-wrap { display: flex; align-items: center; gap: var(--s-2); }
.cat-page-size { width: 4.75rem; min-height: var(--s-10); }
.cat-page-size-label { display: none; }
@media (min-width: 720px) {
  .cat-results-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .cat-pagination.top { grid-column: 2; }
  .cat-page-size-wrap { grid-column: 3; justify-self: end; }
  .cat-page-size-label { display: inline; }
}
.cat-table-shell { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.cat-table-shell[aria-busy="true"] { opacity: 0.64; }
.cat-table { display: block; width: 100%; min-width: 0; border-collapse: separate; }
.cat-table thead { display: none; }
.cat-table tbody { display: grid; gap: 12px; }
.cat-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--bg-elev-1); padding: 14px; }
.cat-table th { padding: 14px 18px; text-align: left; color: var(--fg-tertiary); font-size: var(--t-caption); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; border-bottom: 1px solid var(--hairline); }
.cat-table td { display: block; min-width: 0; padding: 0; border-bottom: 0; color: var(--fg-muted); font-size: var(--t-body-md); vertical-align: middle; }
.cat-table td[data-label] { border-radius: var(--r-md); background: var(--paper-2); padding: 10px; }
.cat-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--fg-tertiary); font-size: var(--t-caption); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; }
.cat-th-label { display: inline-flex; align-items: center; gap: 5px; }
.cat-th-label[data-catalog-tip] { cursor: help; }
.cat-th-label[data-catalog-tip]::after { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--hairline-strong); color: var(--fg-muted); font-size: 11px; line-height: 1; letter-spacing: 0; text-transform: none; }
.cat-cell-media { grid-column: 1 / -1; }
.cat-media { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cat-media > div { min-width: 0; }
.cat-favicon { width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--bg-elev-1); display: flex; align-items: center; justify-content: center; color: var(--brand-700); font-family: var(--font-display); font-size: 18px; flex-shrink: 0; overflow: hidden; }
.cat-favicon img { width: 18px; height: 18px; display: block; }
.cat-favicon-letter { font-weight: 600; line-height: 1; }
.cat-domain-line { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.cat-domain { display: inline-block; color: var(--brand-700); font-weight: 600; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-domain:hover { text-decoration: underline; }
/* Badge « Vérifié éditorial » — cohérent avec la marketplace connectée (BadgeCheck brand). */
.cat-badge-editorial { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-600); line-height: 0; }
.cat-badge-editorial svg { display: block; }
.cat-name { color: var(--fg-muted); font-size: var(--t-caption); margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-900); font-weight: 500; white-space: normal; }
.cat-cell-language .cat-pill { white-space: normal; }
.cat-cell-price { display: flex !important; flex-direction: column; justify-content: center; min-height: 46px; }
.cat-price { color: var(--ink-1000); font-weight: 700; white-space: nowrap; }
.cat-cell-action { display: flex !important; align-items: stretch; justify-content: stretch; }
.cat-action { display: inline-flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; border: 1px solid var(--brand-700); border-radius: var(--r-md); background: var(--brand-700); color: var(--paper); font-weight: 700; text-align: center; text-decoration: none; white-space: nowrap; }
.cat-action:hover { background: var(--brand-800); color: var(--paper); text-decoration: none; }

@media (max-width: 380px) {
  .cat-table tr { grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  .cat-table-shell { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--bg-elev-1); }
  .cat-table { display: table; min-width: 680px; border-collapse: collapse; }
  .cat-table thead { display: table-header-group; }
  .cat-table tbody { display: table-row-group; }
  .cat-table tr { display: table-row; border: 0; border-radius: 0; background: transparent; padding: 0; }
  .cat-table td { display: table-cell; padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
  .cat-table td[data-label] { border-radius: 0; background: transparent; padding: 16px 18px; }
  .cat-table td[data-label]::before { display: none; }
  .cat-table tbody tr:last-child td { border-bottom: 0; }
  .cat-table tbody tr:hover { background: var(--paper-2); }
  .cat-cell-media { grid-column: auto; }
  .cat-media { align-items: center; min-width: 260px; }
  .cat-domain { max-width: 260px; }
  .cat-name { max-width: 320px; }
  .cat-pill { border-radius: var(--r-pill); background: var(--paper-2); padding: 6px 10px; white-space: nowrap; }
  .cat-cell-price { display: table-cell !important; min-height: 0; }
  .cat-cell-action { display: table-cell !important; }
  .cat-action { display: inline; width: auto; min-height: 0; border: 0; border-radius: 0; background: transparent; color: var(--brand-700); font-weight: 600; text-align: left; white-space: nowrap; }
  .cat-action:hover { background: transparent; color: var(--brand-700); text-decoration: underline; }
}

.cat-empty { border: 1px dashed var(--hairline); border-radius: var(--r-card); padding: var(--s-10); text-align: center; color: var(--fg-muted); font-size: var(--t-body); line-height: var(--lh-relaxed); }

/* Pager moderne : ← Précédent · page X / Y · Suivant → en une ligne centrée.
   Les sauts logarithmiques (crawl SEO O(log n)) vivent dans une rangée « Aller à »
   secondaire et discrète — bénéfice crawl conservé, bruit visuel supprimé. */
.cat-pagination { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.cat-pagination.top { align-items: center; margin: 0; padding: 0; border: 0; background: transparent; }
.cat-pager { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cat-pager-arrow { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--paper); color: var(--ink-900); font: inherit; font-weight: 500; font-size: var(--t-body-sm); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.cat-pager-arrow:hover:not([aria-disabled="true"]) { border-color: var(--brand-500); color: var(--brand-700); }
.cat-pager-arrow[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.cat-page-status { color: var(--fg-muted); font-size: var(--t-body-sm); font-weight: 500; margin: 0; padding: 0 12px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-page-jump { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: var(--s-4); }
.cat-page-jump-label { color: var(--fg-muted); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.05em; }
.cat-page-milestones { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.cat-milestone-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--fg-muted); font: inherit; font-size: var(--t-body-sm); font-variant-numeric: tabular-nums; text-decoration: none; transition: color 0.15s, border-color 0.15s; }
.cat-milestone-link:hover:not([aria-disabled="true"]) { border-color: var(--hairline); color: var(--ink-900); }
.cat-milestone-link[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
@media (max-width: 560px) {
  .cat-pager-arrow-label { display: none; }
  .cat-pager-arrow { padding: 0 14px; }
}

.cat-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--bg-elev-1);
  color: var(--ink-900);
  box-shadow: var(--shadow-lg);
  font-size: var(--t-body-sm);
  line-height: var(--lh-relaxed);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.cat-tooltip.is-visible { opacity: 1; transform: translateY(0); }