/* Styles de page du couloir ds-search (chargé après custom.css). Voir docs/design-system.md.
   Widget de recherche du module kp_search ({widget name='kp_search'} dans l'en-tête) et page
   de résultats /recherche. Le module stylise son widget avec ses variables --kps-*
   (modules/kp_search/views/css/front.css) : ici, elles prennent les jetons du design
   system, plus le placement propre à l'en-tête kit-pro. */

/* ─── Widget de recherche : variables du module sur les jetons ─────────── */
:root {
  --kps-accent: var(--kp-blue);
  --kps-accent-hover: var(--kp-blue-dark);
  --kps-accent-soft: var(--kp-blue-light);
  --kps-on-accent: var(--kp-white);
  --kps-bg: var(--kp-white);
  --kps-bg-muted: var(--kp-ink-02);
  --kps-text: var(--kp-ink);
  --kps-text-soft: var(--kp-ink-80);
  --kps-text-muted: var(--kp-ink-60);
  --kps-border: var(--kp-ink-10);
  --kps-field-border: var(--kp-ink-30);
  --kps-success: var(--kp-success);
  --kps-success-soft: var(--kp-success-light);
  --kps-warning: var(--kp-warning);
  --kps-warning-soft: var(--kp-warning-light);
  --kps-danger: var(--kp-danger);
  --kps-radius: var(--kp-radius-sm);
  --kps-radius-lg: var(--kp-radius-lg);
  --kps-shadow: var(--kp-shadow-lg);
  --kps-focus-ring: 0 0 0 3px var(--kp-blue-light);
  --kps-font: var(--kp-font-sans);
  --kps-field-height: var(--kp-control-lg);
  --kps-z: var(--kp-z-search);
}

/* Le libellé du bouton d'envoi dès la tablette, comme le champ du design system. */
@media (min-width: 768px) {
  .kp-header__search .kps-submit__label { display: inline; }
}

/* Sous 768 px, l'en-tête garde une rangée de recherche : le bouton qui ouvre la vue
   plein écran (maquette RechercheMobile) a l'allure du champ. */
@media (max-width: 767.98px) {
  .kp-header__search .kps-mobile__toggle {
    justify-content: flex-start; gap: 10px; width: 100%; padding: 0 14px;
    border: 1px solid var(--kp-ink-30); border-radius: var(--kp-radius-sm); background: var(--kp-white); color: var(--kp-ink-60);
  }
  .kp-header__search .kps-mobile__label {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    color: var(--kp-ink-40); font: 400 16px/22px var(--kp-font-sans);
  }
  .kps-overlay { z-index: var(--kp-z-modal); }
}

/* ─── Page de résultats /recherche (page `search` native, catalog/listing/search.tpl) ───
   Même gabarit que le rayon (kp-listing.css) : en-tête pleine largeur, facettes
   à gauche, grille. La page `search` est en pleine largeur dans le thème : les
   colonnes sont posées par le gabarit, leur placement est repris ici. */
#search .breadcrumb { padding: var(--kp-space-5) 0 0; }
#search .columns-container > .row { --bs-gutter-x: 0; margin: 0; padding-top: var(--kp-space-4); }
#search .kp-reassure--band { margin-top: 56px; }

.kps-notice { margin: 0 0 var(--kp-space-3); padding: 10px 12px; border-radius: var(--kp-radius-sm); background: var(--kp-info-light); color: var(--kp-ink-80); font-size: 14px; line-height: 20px; }
.kps-notice a, .kps-didyoumean a { color: var(--kp-blue); font-weight: 700; }

.kps-zero-results {
  display: grid; justify-items: start; gap: var(--kp-space-3); margin-bottom: var(--kp-space-4); padding: var(--kp-space-6);
  border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-lg); background: var(--kp-white);
}
.kps-zero-results p { margin: 0; }
.kps-zero-results__title { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--kp-ink); }

@media (min-width: 768px) {
  #search .columns-container > .row { flex-wrap: nowrap; gap: var(--kp-space-6); padding-top: 28px; }
  #search #left-column { flex: 0 0 240px; width: 240px; max-width: none; padding: 0; }
  #search #center-column { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; }
}
@media (min-width: 992px) {
  #search .columns-container > .row { gap: var(--kp-space-8); }
  #search #left-column { flex-basis: 264px; width: 264px; }
  .kps-zero-results { padding: var(--kp-space-12) var(--kp-space-8); }
}