/**
 * Kit Pro — couloir ds-header : intégration des composants Header, Footer et
 * Reassurance (kp-components.css) dans Hummingbird, et écarts propres aux
 * maquettes HeaderDesktop/Mobile, FooterDesktop/Mobile. Chargé après
 * kp-components.css et custom.css (docs/design-system.md). Le méga-menu et le
 * tiroir mobile sont stylés par le module kp_megamenu (views/css/megamenu.css).
 */

/* --kp-sticky-top : hauteur de ce qui reste collé en haut au défilement,
   pour les éléments collants des pages (BuyBox de la fiche : top =
   calc(var(--kp-sticky-top) + marge)). Mobile : en-tête sur deux lignes
   (10 + 44 + 10 + 48 + 10 + filet 1) ; dès 992 px : en-tête (14 + 48 + 14 +
   filet 1) et barre des rayons (44 + filet 1), la topbar ayant défilé. */
:root {
  --kp-topbar-h: 34px;
  --kp-sticky-top: 123px;
}

/* ─── Topbar et en-tête collant ─────────────────────────────
   Hummingbird rend déjà #header sticky (top: 0, z-index 1021). À partir de
   992 px, la topbar (une ligne de 34 px) défile hors de l'écran ; l'en-tête
   et la barre des rayons restent collés. Sous 992 px, pas de topbar
   (maquette HeaderMobile) : tout l'en-tête reste collé. */
.kp-topbar { display: none; }

@media (min-width: 992px) {
  :root { --kp-sticky-top: 129px; }
  .kp-topbar { display: block; }
  .kp-topbar__inner { height: var(--kp-topbar-h); padding: 0 var(--kp-space-6); }
  #header.header { top: calc(-1 * var(--kp-topbar-h)); }
}

/* La cellule de recherche réserve la hauteur du champ (48 px) quel que soit
   le rendu de kp_search : hauteur d'en-tête stable (--kp-sticky-top), pas de
   saut de mise en page au chargement du module. */
.kp-header__search { min-height: var(--kp-control-lg); }

/* ─── Actions de l'en-tête ──────────────────────────────────
   Sous 992 px, le libellé est masqué de façon accessible (le composant le
   met en display: none) : « Compte, Se connecter » reste le nom du lien
   icône. Devis n'apparaît qu'à partir de 992 px (maquette HeaderMobile). */
.kp-hdr-action__label {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.kp-hdr-action--quote { display: none; }

@media (min-width: 992px) {
  .kp-hdr-action__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .kp-hdr-action--quote { display: inline-flex; }
}

/* ─── Pied de page ──────────────────────────────────────────
   Le téléphone est un lien tel: (blanc comme dans la maquette, pas le gris
   des liens) ; le logo garde l'alignement de ligne que le reboot Bootstrap
   de Hummingbird remet au milieu. Mobile (maquette FooterMobile) : deux
   colonnes, marque puis « Nos produits » | « Informations », « Commander »
   sur toute la largeur. */
.kp-footer a.kp-footer__phone { color: var(--kp-white); }
.kp-footer__brand img { vertical-align: baseline; }

.kp-footer__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--kp-space-4);
  padding: 40px var(--kp-space-4) 28px;
}
.kp-footer__brand,
.kp-footer__col--order { grid-column: 1 / -1; }
.kp-footer__col--order { order: 1; }

@media (min-width: 768px) {
  .kp-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 56px var(--kp-space-6) 40px;
  }
  .kp-footer__brand,
  .kp-footer__col--order { grid-column: auto; order: 0; }
}

/* ─── Bandeau de réassurance (_partials/kp-reassurance.tpl) ──
   Fond blanc pleine largeur, contenu aligné sur celui du conteneur (1320 px
   hors tout, gouttière de 24 px dès 992 px), comme l'en-tête et le pied de
   page. */
.kp-reassure--band { gap: 18px 14px; }

@media (min-width: 992px) {
  .kp-reassure--band {
    gap: 24px;
    padding: 22px max(var(--kp-space-6), calc((100% - var(--kp-container)) / 2 + var(--kp-space-6)));
  }
}