/* Styles de page du couloir ds-listing (chargé après custom.css). Voir docs/design-system.md.
   Accueil (maquettes Main / AccueilMobile), rayons et marques (Rayon / RayonMobile),
   carte produit partagée, facettes. Composants kp-* repris tels quels de
   kp-components.css ; ici seulement leur mise en page et leurs variantes de contexte.
   Ruptures en min-width : 576 / 768 / 992 / 1200. */

/* ═══ Carte produit (catalog/_partials/miniatures/product.tpl) ═══════════════ */

/* Contenu des hooks de la carte (kitpro_quickspecs, kitpro_ingramsync) restylé
   en caractéristiques discrètes (kp-card__specs) : valeurs seules en
   kp-ink-60, libellé gardé pour les lecteurs d'écran. Les pastilles restent
   des liens vers le rayon filtré, au-dessus du lien de carte (z-index). */
.kp-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
/* Vraie boîte (pas display: contents) : la garde #208 mesure .kitpro-badges dans sa carte. */
.kp-card .kitpro-badges { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; min-width: 0; max-width: 100%; }
.kp-card .kitpro-badge {
  position: relative; z-index: 1;
  display: inline; padding: 0; border-radius: 0;
  background: none !important; /* style en ligne du module (couleur par caractéristique) */
  color: var(--kp-ink-60) !important;
  font-size: 13px; line-height: 18px; font-weight: 400;
  max-width: 100%; min-width: 0;
}
.kp-card a.kitpro-badge:hover { opacity: 1; color: var(--kp-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
.kp-card .kitpro-badge__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kp-card .kitpro-badge__value { display: inline; max-width: none; font-weight: 400; white-space: normal; }
.kp-card .kp-warranty-badge--card {
  display: inline-flex; gap: 4px; margin: 0; padding: 0; border-radius: 0;
  background: none; color: var(--kp-ink-60); font-size: 13px; line-height: 18px; font-weight: 400;
}
.kp-card .kp-warranty-text { white-space: normal; }

/* Nom sans point de césure (« IPS/1920x1200/8GB/256G/LTE/Android », #340) : coupé, pas rogné. */
.kp-card__title { overflow-wrap: anywhere; }

/* Miniature produit (toutes listes, dont « Produits de la même catégorie » en pied de fiche) :
   `.product-miniature__infos` est une grille (thème parent) dont la colonne implicite prenait la
   largeur min-content du titre. Un titre sans point de césure (« TERRA PAD 1007 10.95"
   IPS/1920x1200/8GB/256G/LTE/Android 14 », segment de 34 caractères) faisait 251px dans une carte
   de 210px : 413 à 423px de largeur de page à 390px, selon les produits tirés au hasard par
   ps_categoryproducts (mobile-overflow.spec.ts « fiche produit », pipeline 2989). */
.product-miniature__infos { grid-template-columns: minmax(0, 1fr); }
.product-miniature__title { overflow-wrap: anywhere; }

.kp-card__foot form { margin: 0; }
/* Bundle v7 : pied de carte sans retour à la ligne ; dans les cartes étroites (miniatures de fin de
   fiche à 390 px) prix et bouton passent l'un sous l'autre au lieu de déborder. */
.kp-card__foot { flex-wrap: wrap; row-gap: 8px; }
.kp-card__foot .kp-btn--primary { color: var(--kp-white); }
.kp-card__foot .kp-btn--secondary { color: var(--kp-ink); }
/* <picture> (sources avif/webp) ne doit pas imposer la largeur intrinsèque de l'image. */
.kp-card__media picture { display: contents; }
/* Point d'insertion de blockwishlist (.thumbnail-container) : hors de la grille du média. */
.kp-card .wishlist-button { display: none; }
.kp-card__media img { width: auto; height: auto; }

/* ═══ Grille de rayon et rails d'accueil ═══════════════════════════════════ */

.kp-products { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* Variante liste sous 576 px (maquette RayonMobile) : image 104 px à gauche,
   nom, stock, prix et bouton à droite. Réservée aux grilles de listing. */
@media (max-width: 575.98px) {
  .kp-products .kp-card {
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px; padding: 12px;
  }
  .kp-products .kp-card__media { aspect-ratio: auto; height: 104px; padding: 0; border-bottom: 0; }
  .kp-products .kp-card__body { padding: 0; gap: 5px; }
  .kp-products .kp-card__title { font-size: 14px; line-height: 19px; }
  .kp-products .kp-card__foot { flex-wrap: nowrap; gap: 8px; padding-top: 2px; }
  .kp-products .kp-price__amount { font-size: 19px; line-height: 24px; }
  .kp-products .kp-price__tag, .kp-products .kp-price__ttc { font-size: 12px; line-height: 16px; }
}

@media (min-width: 576px) {
  .kp-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kp-space-4); }
}
@media (min-width: 992px) {
  .kp-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kp-space-5); }
}
@media (min-width: 1200px) {
  .kp-products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Rail d'accueil : défilement horizontal sur mobile (cartes de 250 px), quatre
   colonnes dès 992 px. */
.kp-rail {
  display: flex; gap: var(--kp-space-3);
  margin: 0 calc(-1 * var(--kp-space-4)); padding: 0 var(--kp-space-4) var(--kp-space-1);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.kp-rail { scroll-padding-inline: var(--kp-space-4); }
.kp-rail::-webkit-scrollbar { display: none; }
.kp-rail > .kp-card { flex: none; width: 250px; scroll-snap-align: start; }
@media (min-width: 992px) {
  .kp-rail {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kp-space-5);
    margin: 0; padding: 0; overflow: visible;
  }
  .kp-rail > .kp-card { width: auto; }
}

/* ═══ Rayon / marque : en-tête pleine largeur (catalog/listing/*.tpl) ═══════ */

/* Fil d'Ariane : style du socle (custom.css) ; ici seulement son espacement. */
#category .breadcrumb, #manufacturer .breadcrumb { padding: var(--kp-space-5) 0 0; }

.kp-listing-head {
  display: grid; gap: 10px;
  padding-top: var(--kp-space-4);
}
.kp-listing-head__intro { display: grid; gap: var(--kp-space-2); min-width: 0; max-width: 760px; }
.kp-listing-head__back {
  display: inline-flex; align-items: center; gap: var(--kp-space-1); justify-self: start;
  min-height: 24px; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); text-decoration: none;
}
.kp-listing-head__back:hover { color: var(--kp-ink); }
.kp-listing-head__title {
  margin: 0; font-size: 26px; line-height: 32px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--kp-ink);
}
.kp-listing-head__desc { font-size: 15px; line-height: 23px; color: var(--kp-ink-60); }
@media (max-width: 767.98px) {
  /* RayonMobile : la grille d'abord ; la description reste dans la page, sur deux lignes. */
  .kp-listing-head__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 20px; }
}
.kp-listing-head__desc p { margin: 0; }
.kp-listing-head__desc p + p { margin-top: var(--kp-space-2); }
.kp-listing-head__sync { display: none; margin: 0; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }

/* Sous-rayons : puces sur une ligne qui défile sur mobile. */
.kp-subnav {
  display: flex; gap: var(--kp-space-2);
  margin: 0 calc(-1 * var(--kp-space-4)); padding: 0 var(--kp-space-4) 2px;
  overflow-x: auto; scrollbar-width: none;
}
.kp-subnav::-webkit-scrollbar { display: none; }
.kp-subnav__link {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-sm); background: var(--kp-white);
  color: var(--kp-ink-80); font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color var(--kp-transition), background-color var(--kp-transition);
}
.kp-subnav__link:hover { border-color: var(--kp-ink-30); color: var(--kp-ink); background: var(--kp-ink-05); }

@media (min-width: 768px) {
  .kp-listing-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--kp-space-8); padding-top: 14px; }
  .kp-listing-head__back { display: none; }
  .kp-listing-head__title { font-size: 32px; line-height: 38px; }
  .kp-listing-head__sync { display: block; max-width: 22em; text-align: right; }
  .kp-subnav { grid-column: 1 / -1; flex-wrap: wrap; margin: var(--kp-space-1) 0 0; padding: 0; overflow: visible; }
  .kp-subnav__link { padding: 0 14px; }
}
@media (max-width: 767.98px) {
  /* Sur mobile, le fil d'Ariane devient le lien « retour au rayon parent ». */
  #category .breadcrumb__wrapper { display: none; }
}

/* ═══ Rayon / marque : colonnes facettes + résultats ════════════════════════ */

#category .columns-container > .row,
#manufacturer .columns-container > .row {
  --bs-gutter-x: 0;
  margin: 0; padding-top: var(--kp-space-4);
}
@media (min-width: 768px) {
  #category .columns-container > .row,
  #manufacturer .columns-container > .row { flex-wrap: nowrap; gap: var(--kp-space-6); padding-top: 28px; }
  #category #left-column, #manufacturer #left-column { flex: 0 0 240px; width: 240px; max-width: none; padding: 0; }
  #category #center-column, #manufacturer #center-column { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; }
}
@media (min-width: 992px) {
  #category .columns-container > .row,
  #manufacturer .columns-container > .row { gap: var(--kp-space-8); }
  #category #left-column, #manufacturer #left-column { flex-basis: 264px; width: 264px; }
}

#products { display: grid; gap: 18px; }

/* Barre : compte, tri, bouton Filtrer (mobile). */
.kp-listing-toolbar { row-gap: 10px; }
.kp-listing-toolbar .kp-toolbar__count { margin: 0; }
.kp-listing-toolbar__actions { display: flex; align-items: center; gap: var(--kp-space-2); }
.kp-listing-toolbar__filter { color: var(--kp-ink); }
.kp-listing-sort__label { white-space: nowrap; }
@media (max-width: 767.98px) {
  /* Maquette RayonMobile : Filtrer et Trier côte à côte, pleine largeur, au-dessus du compte. */
  .kp-listing-toolbar { flex-direction: column-reverse; align-items: stretch; }
  .kp-listing-toolbar__actions {
    margin: 0 calc(-1 * var(--kp-space-4)); padding: 10px var(--kp-space-4);
    background: var(--kp-white); border-block: 1px solid var(--kp-ink-10);
  }
  .kp-listing-toolbar__actions > * { flex: 1; }
  .kp-listing-sort__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kp-listing-sort select { width: 100%; min-height: var(--kp-control-md); }
}
@media (min-width: 768px) {
  .kp-listing-toolbar__filter { display: none; }
}

/* Filtres actifs. */
.kp-listing-chips:not(:has(.kp-chip)) { display: none; }
.kp-listing-chips .kp-chip { text-decoration: none; }
.kp-listing-chips .kp-chip--clear { text-decoration: underline; }

/* Suite de la liste. */
.kp-listing-more { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; padding-top: var(--kp-space-3); }
.kp-listing-more__count { margin: 0; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-listing-more__btn { width: 100%; color: var(--kp-ink); }
.kp-listing-more__first { font-size: 14px; }
@media (min-width: 576px) {
  .kp-listing-more { flex-direction: column; }
  .kp-listing-more__btn { width: auto; min-width: 280px; }
}

.kp-listing-extra { margin-top: var(--kp-space-8); font-size: 15px; line-height: 23px; color: var(--kp-ink-80); }

/* Bas de page : réassurance, puis FAQ du rayon. */
#category .kp-reassure--band, #manufacturer .kp-reassure--band { margin-top: 56px; }
.kp-listing-faq .kp-page-faq { margin: var(--kp-space-12) 0 0; padding: var(--kp-space-6); border-radius: var(--kp-radius-lg); }
.kp-listing-faq .kp-page-faq__title { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.kp-listing-faq .kp-page-faq__q { font-size: 15px; line-height: 21px; font-weight: 700; color: var(--kp-ink); }
.kp-listing-faq .kp-page-faq__a { font-size: 14px; line-height: 21px; color: var(--kp-ink-80); }

/* ═══ Facettes (themes/kitpro/modules/ps_facetedsearch) ════════════════════ */

.kp-facets-col { margin-bottom: var(--kp-space-4); }
.kp-facets-col .kp-facets {
  padding: 4px 18px;
  background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-lg);
}
.kp-facets > :last-child { border-bottom: 0; }
.kp-facets__stock { border-bottom: 1px solid var(--kp-ink-10); }
.kp-facets__stock { gap: var(--kp-space-2); }
.kp-facets__stock-label { flex: 1; }
@media (min-width: 992px) {
  .kp-facets__stock-label { white-space: nowrap; }
}
.kp-facets__stock .kp-check__count { font-weight: 500; }
.kp-facets .kp-check > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.kp-facets .kp-range .kp-input { min-width: 0; text-align: center; }

/* Panneau plein écran sous 768 px (offcanvas Bootstrap de Hummingbird). */
.kp-filter-panel.offcanvas { width: 100%; max-width: none; border: 0; background: var(--kp-white); }
.kp-filter-panel__head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--kp-space-3);
  padding: 10px var(--kp-space-4); border-bottom: 1px solid var(--kp-ink-10);
}
.kp-filter-panel__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--kp-ink); }
.kp-filter-panel__head .kp-btn--ghost { color: var(--kp-ink); }
.kp-filter-panel__body { flex: 1; overflow-y: auto; padding: 0 var(--kp-space-4); }
.kp-filter-panel__foot {
  padding: 10px var(--kp-space-4) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--kp-ink-10); box-shadow: var(--kp-shadow-md);
}
.kp-filter-panel__foot .kp-btn--primary { color: var(--kp-white); }

/* ═══ Accueil (index.tpl et partiels d'accueil) ═══════════════════════════ */

#index .page-content--home { gap: 0; }
#index .kp-section { padding: 36px 0 0; }
#index .kp-section:last-child { padding-bottom: var(--kp-space-12); }

.kp-home-head { display: grid; gap: 6px; margin-bottom: 14px; }
.kp-home-head__title { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--kp-ink); }
.kp-home-head__text { margin: 0; font-size: 15px; line-height: 22px; color: var(--kp-ink-60); }
.kp-home-head--rail { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kp-space-4); }
.kp-home-head--rail .kp-link { flex: none; font-size: 14px; }
.kp-home-rail__more-long { display: none; }
@media (min-width: 576px) {
  .kp-home-rail__more-long { display: inline; }
  .kp-home-rail__more-short { display: none; }
}

/* Besoins : liste de lignes sur mobile, grille de tuiles dès 768 px. */
.kp-needs {
  display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;
  background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md);
}
.kp-needs > li + li { border-top: 1px solid var(--kp-ink-10); }
.kp-need {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px;
  color: inherit; text-decoration: none;
}
.kp-need:hover { color: inherit; background: var(--kp-ink-02); }
.kp-need__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--kp-radius-sm); background: var(--kp-ink-05); color: var(--kp-ink);
}
.kp-need__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kp-need__label { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-ink); }
.kp-need__desc { display: none; }
.kp-need__meta { font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-need__arrow { color: var(--kp-ink-40); }

@media (min-width: 768px) {
  .kp-needs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kp-space-4);
    background: none; border: 0; border-radius: 0;
  }
  .kp-needs > li + li { border-top: 0; }
  .kp-need {
    flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; min-height: 0; padding: var(--kp-space-5);
    background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md);
    transition: border-color var(--kp-transition), box-shadow var(--kp-transition);
  }
  .kp-need:hover { background: var(--kp-white); border-color: var(--kp-ink-20); box-shadow: var(--kp-shadow-sm); }
  .kp-need__icon { width: 44px; height: 44px; }
  .kp-need__body { flex: 1; gap: 10px; }
  .kp-need__label { font-size: 16px; line-height: 22px; }
  .kp-need__desc { display: block; font-size: 13px; line-height: 19px; color: var(--kp-ink-60); }
  .kp-need__meta { margin-top: auto; font-weight: 600; color: var(--kp-ink-80); }
  .kp-need__arrow { display: none; }
}
@media (min-width: 992px) {
  #index .kp-section { padding-top: 56px; }
  .kp-home-head { margin-bottom: var(--kp-space-6); }
  .kp-home-head__title { font-size: 28px; line-height: 34px; }
  .kp-home-needs .kp-home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--kp-space-6); }
  .kp-home-head--rail { margin-bottom: var(--kp-space-5); }
  .kp-needs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Bandeau devis (fond encre). */
.kp-home-quote {
  display: flex; flex-direction: column; gap: var(--kp-space-3);
  padding: var(--kp-space-6) var(--kp-space-5);
  background: var(--kp-ink); border-radius: var(--kp-radius-lg); color: var(--kp-ink-20);
}
.kp-home-quote__title { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--kp-white); }
.kp-home-quote__text { display: grid; gap: 10px; max-width: 720px; }
.kp-home-quote__text p { margin: 0; font-size: 15px; line-height: 23px; }
.kp-home-quote__actions { display: flex; flex-direction: column; gap: 10px; }
.kp-home-quote__actions .kp-btn { color: var(--kp-white); }
.kp-home-quote__phone { font-size: 14px; line-height: 20px; text-align: center; }
.kp-home-quote__phone a { color: var(--kp-white); font-weight: 700; text-decoration: none; }
.kp-home-quote__phone a:hover { text-decoration: underline; }
@media (min-width: 992px) {
  .kp-home-quote { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--kp-space-12); padding: 40px 48px; }
  .kp-home-quote__title { font-size: 28px; line-height: 34px; }
  .kp-home-quote__text p { font-size: 16px; line-height: 25px; }
  .kp-home-quote__actions { flex: none; align-items: flex-end; }
  .kp-home-quote__phone { text-align: right; }
}

/* FAQ de l'accueil (details/summary, FAQPage). */
.kp-faq-grid { display: grid; gap: 10px; }
.kp-faq-item { background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); }
.kp-faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--kp-space-3);
  min-height: 48px; padding: 14px var(--kp-space-5);
  list-style: none; cursor: pointer; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--kp-ink);
}
.kp-faq-q::-webkit-details-marker { display: none; }
.kp-faq-q .kp-i { color: var(--kp-ink-60); transition: transform var(--kp-transition); }
.kp-faq-item[open] .kp-faq-q .kp-i { transform: rotate(180deg); }
.kp-faq-a { padding: 0 var(--kp-space-5) var(--kp-space-4); font-size: 14px; line-height: 21px; color: var(--kp-ink-80); }
@media (min-width: 992px) {
  .kp-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Guides d'achat (pages CMS, section masquée tant qu'il n'y en a pas). */
.kp-guides-grid { display: grid; gap: var(--kp-space-4); }
.kp-guide-card {
  display: flex; flex-direction: column; gap: var(--kp-space-3); padding: var(--kp-space-5);
  background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md);
  color: inherit; text-decoration: none;
}
.kp-guide-card:hover { border-color: var(--kp-ink-20); box-shadow: var(--kp-shadow-sm); color: inherit; }
.kp-guide-title { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--kp-ink); }
.kp-guide-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--kp-blue); }
@media (min-width: 768px) {
  .kp-guides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Texte de référence et marques. */
.kp-home-seo__title { margin: 0 0 var(--kp-space-2); font-size: 17px; line-height: 24px; font-weight: 700; color: var(--kp-ink); }
.kp-home-seo__text { max-width: 80ch; margin: 0; color: var(--kp-ink-60); }
.kp-home-brands {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kp-space-2) var(--kp-space-4);
  margin-top: var(--kp-space-5); padding-top: var(--kp-space-5); border-top: 1px solid var(--kp-ink-10);
  font-size: 14px; line-height: 20px;
}
.kp-home-brands__label { font-weight: 600; color: var(--kp-ink); }
.kp-home-brands a:not(.kp-link) { color: var(--kp-ink-80); text-decoration: none; }
.kp-home-brands a:not(.kp-link):hover { color: var(--kp-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .kp-need, .kp-subnav__link, .kp-faq-q .kp-i { transition: none; }
}