@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* ------------------------------------------------------------------
   Broke & IT Solutions, habillage de la boutique.

   Theme enfant de hummingbird : ce fichier ne remplace pas sa feuille,
   il la surcharge. Les valeurs viennent de bls-theme/assets/site.css,
   pour que la boutique et le site vitrine soient le meme objet.

   Trois partis pris, qui expliquent la plupart des regles :
   - une seule barre sombre en haut, pas deux empilees ;
   - la vignette n'est pas une carte : la photo la porte, et les deux
     valeurs qui decident d'un achat d'occasion sont alignees dessous ;
   - un seul objet sombre par page sert de destination : le bandeau sur
     l'accueil, le panneau d'action sur la fiche, la bande de demande
     en bas des listings.
   ------------------------------------------------------------------ */

:root {
  --blue: #0164FD;
  --blue-deep: #0146B0;
  --orange: #FD7A01;
  --orange-deep: #D86500;
  --orange-clair: #FF9A3D;
  --ink: #0A1424;
  --paper: #fff;
  --band: #F1F4F9;
  --grey: #5A6678;
  --dim: #8FA3BF;
  --soft: #C3D2E8;
  --line: #E2E7EF;
  --vert: #0E7A5F;
  --vert-fond: #E4F4EE;
  --sans: "Plus Jakarta Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap 5 pilote une partie de hummingbird : on lui donne nos valeurs
     plutot que de rattraper chaque composant un par un. */
  --bs-primary: #0164FD;
  --bs-primary-rgb: 1, 100, 253;
  --bs-body-color: #0A1424;
  --bs-body-bg: #fff;
  --bs-body-font-family: var(--sans);
  --bs-border-color: #E2E7EF;
  --bs-border-radius: 14px;
  --bs-link-color: #0164FD;
  --bs-link-hover-color: #0146B0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Une echelle, au lieu de onze tailles a un demi-pixel d'ecart. */
h1, .h1 { font-size: clamp(30px, 3.8vw, 44px); }
h2, .h2 { font-size: clamp(22px, 2.4vw, 28px); }
h3, .h3 { font-size: 19px; }
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.14;
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- boutons ---------- */
.btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  padding: 13px 22px;
  border-width: 1.5px;
  transition: background-color .18s, color .18s, border-color .18s, transform .12s;
}
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
}

.btn-outline-primary {
  border-color: var(--line);
  color: var(--ink);
  background: none;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--band);
  border-color: var(--line);
  color: var(--ink);
}

/* L'orange de la marque, tenu a un seul objet par page : le geste que
   la boutique attend, demander une estimation. */
.btn-orange,
.btn-secondary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}
.btn-orange:hover,
.btn-orange:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--ink);
}

.btn-clair {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  background: none;
}
.btn-clair:hover,
.btn-clair:focus { background: #fff; color: var(--ink); border-color: #fff; }

/* ------------------------------------------------------------------
   En-tete : deux rangees, un seul bandeau.

   hummingbird empile une barre de services et une barre de navigation,
   de la meme couleur, separees par un filet qui ne separe rien. Les
   fusionner en une seule rangee demanderait de deplacer les modules,
   ce qui casse leur rendu : ps_contactinfo sert son bloc de pied de
   page des qu'il sort de displayNav1. On garde donc les deux rangees,
   mais sans filet, sans respiration au milieu et sur le meme fond :
   a l'oeil, c'est un seul bandeau sombre, avec une ligne de service
   fine au-dessus de la navigation.
   ------------------------------------------------------------------ */
.header-top {
  background: var(--ink);
  color: #EDF2FA;
  border: 0;
  font-size: 13.5px;
  padding-block: 0;
}
.header-top .row { align-items: center; min-height: 42px; }
.header-top a { color: inherit; text-decoration: none; }

.header-top__left .ps-contactinfo {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-top__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Le selecteur de langue de hummingbird est un form-select Bootstrap :
   blanc, borde, haut de 38 px. Dans une ligne de service il doit se faire
   oublier ; la liste deroulante native, elle, reste sur fond clair. */
.header-top .form-select,
.header-top .js-language-selector {
  background-color: transparent;
  background-position: right .2rem center;
  border: 0;
  color: inherit;
  width: auto;
  padding: 4px 26px 4px 8px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
}
.header-top .form-select option { color: var(--ink); }
.header-top .header-block__action-btn { color: inherit; padding-inline: 6px; }
.header-top .header-block__title { font-size: 13.5px; font-weight: 600; }

.header,
#header,
.header-bottom {
  background: var(--ink);
  color: #EDF2FA;
  border: 0;
}
#header a,
.header a,
.header-bottom a { color: inherit; }

.header-bottom {
  position: sticky;
  top: 0;
  z-index: 20;
}
/* hummingbird rend la barre avec une rangee Bootstrap portant
   align-items-stretch, en !important : il faut la meme arme pour recentrer. */
.header-bottom__row {
  min-height: 76px;
  align-items: center !important;
  gap: 0;
}
.header-bottom__logo { padding-block: 9px; }
.header-bottom__h1 { margin: 0; font-size: 0; }

/* Centrer la rangee ne suffit pas : la colonne du menu est plus haute que
   son contenu, elle porte aussi le bouton du menu mobile et le tiroir
   hors-canevas. Le menu se retrouve donc cale en haut pendant que le logo
   et la recherche sont centres. On centre a l'interieur de la colonne. */
.header-bottom__row > .ps-mainmenu--desktop {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.ps-mainmenu__desktop { display: flex; align-items: center; }
.ps-mainmenu__tree-item-wrapper { display: flex; align-items: center; }
#_desktop_ps_searchbar { align-self: center; }

/* Le monogramme est un PNG transparent haut de 400 px : sans contrainte,
   il impose sa hauteur a toute la barre. Meme gabarit que dans l'en-tete
   du site vitrine. */
.header-bottom__logo img,
.header-top__logo img,
#_desktop_logo img,
.header-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* rayons : meme traitement que la navigation du site vitrine */
.ps-mainmenu__tree {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-mainmenu__tree-link {
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  opacity: .78;
  padding-block: 5px;
  white-space: nowrap;
}
.ps-mainmenu__tree-link:hover { opacity: 1; }
.ps-mainmenu__tree-item.current .ps-mainmenu__tree-link,
.ps-mainmenu__tree-link[aria-current="page"] {
  opacity: 1;
  box-shadow: inset 0 -2px 0 var(--orange-clair);
}

/* Champ de recherche : blanc, pas une pastille translucide. C'est le seul
   endroit ou le visiteur ecrit, il se voit. */
#_desktop_ps_searchbar,
.ps-searchbar { margin-inline-start: auto; }
#ps_searchbar { position: relative; }
#ps_searchbar .ps-searchbar__input,
.ps-searchbar__form .form-control {
  background: #fff;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  padding: 10px 18px 10px 42px;
  width: 340px;
  max-width: 100%;
  box-shadow: none;
  text-overflow: ellipsis;
}

/* Les deux rangees de l'en-tete se terminent sur la meme verticale : la
   colonne de recherche et celle de la langue perdent la gouttiere que
   Bootstrap leur pose a droite. */
#_desktop_ps_searchbar { padding-inline-end: 0; }
.header-top__right { padding-inline-end: 0; }
.header-top .form-select,
.header-top .js-language-selector { padding-inline-end: 24px; margin-inline-end: -8px; }
#ps_searchbar .ps-searchbar__input::placeholder { color: var(--grey); }
#ps_searchbar .ps-searchbar__magnifier {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey);
  font-size: 19px;
  z-index: 2;
}

/* coordonnees de l'en-tete : horaires en surtitre, numero lisible */
.bls-tel {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.bls-tel__heures {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}
.bls-tel__numero { font-size: 14.5px; font-weight: 700; }

.bls-estimation {
  flex: 0 0 auto;
  background: var(--orange);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
}
.bls-estimation:hover { background: var(--orange-deep); color: var(--ink); }

/* ---------- fil d'Ariane ---------- */
.breadcrumb {
  background: none;
  padding: 22px 0 0;
  margin: 0;
  font-size: 13px;
  color: var(--grey);
}
.breadcrumb a { color: var(--grey); text-decoration: none; }
.breadcrumb li:last-child { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------
   En-tete de listing
   ------------------------------------------------------------------ */
.block-category,
#js-product-list-header {
  background: none;
  padding: 0;
}
.bls-entete { padding-block: 20px 0; }
.bls-entete__haut {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 48px);
}
.bls-entete h1 { max-width: 22ch; }
.bls-entete__texte {
  color: var(--grey);
  max-width: 56ch;
  margin-top: 14px;
  font-size: 17px;
}
.bls-entete__compte {
  margin-inline-start: auto;
  text-align: end;
  flex: 0 0 auto;
}
.bls-entete__compte b {
  display: block;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bls-entete__compte span {
  display: block;
  font-size: 13.5px;
  color: var(--grey);
  margin-top: 2px;
}

/* Les trois promesses ne sont dites qu'ici : elles disparaissent de la
   fiche et de la bande de demande, ou elles se repetaient. */
.bls-promesses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 26px;
}
.bls-promesse { display: grid; gap: 3px; }
.bls-promesse b { font-size: 15px; }
.bls-promesse span { color: var(--grey); font-size: 13.5px; line-height: 1.5; }

/* ------------------------------------------------------------------
   Colonne de gauche : rayons et facettes.
   ------------------------------------------------------------------ */
#left-column .block-categories,
#left-column .block_newsletter,
#search_filters_wrapper,
#search_filters {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: none;
}
#search_filters .h6,
#search_filters .facet-title,
#left-column .block-categories .h6,
.facet__title {
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 700;
  margin-bottom: 12px;
}
#search_filters .facet { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
#search_filters .facet:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
#search_filters .facet-label,
#search_filters label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  margin: 0 0 11px;
  cursor: pointer;
}
#search_filters input[type="checkbox"],
#search_filters input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--blue);
  margin: 0;
}
#search_filters .magnitude {
  margin-inline-start: auto;
  color: var(--grey);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#left-column .category-sub-menu a { text-decoration: none; font-size: 14.5px; }

/* ------------------------------------------------------------------
   Barre d'outils du listing : le compte, les filtres actifs, le tri.
   ------------------------------------------------------------------ */
#js-product-list-top .products__selection {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
/* « Il y a 5 produits. » : un decompte que le visiteur lit de toute facon
   en regardant la grille, et qui sonne creux sur un stock de cette taille.
   Il est rendu par un partiel du theme parent, on le masque plutot que de
   recopier tout le gabarit pour une ligne. */
.products__count { display: none; }
#js-product-list-top .products__selection { justify-content: flex-end; }
.products__sort { display: flex; align-items: center; gap: 10px; }
.products__sort-label { font-size: 13.5px; color: var(--grey); }
.products__sort-dropdown-button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.active-filters {
  background: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.active-filters .filter-block,
.active-filters li {
  background: var(--band);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: none;
  list-style: none;
}

/* ------------------------------------------------------------------
   Vignette produit.

   Ce n'est plus une carte : la photo porte la tuile, le contenu se pose
   sur le fond de page. Le lien est porte par le titre, son ::after
   couvre la vignette : un seul element focalisable, et le lecteur
   d'ecran annonce le nom de l'appareil.
   ------------------------------------------------------------------ */
#products .products,
#js-product-list .products,
.products.row,
.products {
  gap: clamp(30px, 2.8vw, 36px) clamp(26px, 2.4vw, 32px);
}

.product-miniature {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transition: none;
}
.product-miniature:hover { transform: none; box-shadow: none; }

/* hummingbird fait de __inner une carte : fond blanc, coins arrondis et
   ombre au survol. La maquette n'a pas de carte, c'est la photo qui porte
   la vignette. On defait les trois, y compris au survol et au focus, ou
   le parent remet son ombre. */
.product-miniature__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: none;
  /* Le halo du survol deborde de la vignette sans decaler la grille :
     la marge negative reprend exactement le rembourrage. */
  padding: 12px;
  margin: -12px;
  border-radius: 20px;
  transition: background-color .2s ease;
}
/* Survol : un fond a peine pose, qui designe la vignette sans en refaire
   une carte. Pas d'ombre, pas de bordure, pas de soulevement. */
.product-miniature__inner:hover,
.product-miniature__inner:has(:focus-visible) {
  box-shadow: none;
  background: var(--band);
}
/* Le parent carre le bas de la photo au survol, ce qui faisait sauter les
   coins ; la photo garde son rayon. */
.product-miniature__inner:hover .product-miniature__top,
.product-miniature__inner:has(:focus-visible) .product-miniature__top {
  border-end-end-radius: 14px;
  border-end-start-radius: 14px;
}
/* Le parent zoome l'image de 10 % au survol, en plus de notre propre
   agrandissement : une seule animation suffit. */
.product-miniature__inner:hover .product-miniature__image { transform: scale(1.035); }

/* Fond blanc et non gris clair : PrestaShop ajuste l'image dans le cadre
   au lieu de la rogner, une photo en portrait arrive donc avec des bandes
   blanches sur les cotes. Sur un fond blanc elles ne se voient plus, la
   photo est simplement centree. La vraie correction reste de recadrer la
   photo source en paysage. */
.product-miniature__top {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.product-miniature__top img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.product-miniature:hover .product-miniature__top img { transform: scale(1.035); }

.product-miniature__bottom {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bls-ref {
  margin: 15px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}

.product-miniature__title {
  display: block;
  margin-top: 6px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}
.product-miniature__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.product-miniature__title:focus-visible { outline: none; }
.product-miniature:has(.product-miniature__title:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 6px;
  border-radius: 14px;
}

/* Les deux valeurs qui decident d'un achat d'occasion, alignees d'une
   tuile a l'autre : on compare deux appareils sans lire deux phrases. */
.bls-paires {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 24px;
  row-gap: 5px;
  font-size: 13.5px;
}
.bls-paires dt { color: var(--grey); font-weight: 400; margin: 0; }
.bls-paires dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.product-miniature__actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.bls-pied-tuile {
  margin: 0;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 14px;
}
.bls-pied-tuile__lien {
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.bls-pied-tuile__lien svg { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.product-miniature:hover .bls-pied-tuile__lien svg { transform: translateX(4px); }

/* Le prix n'a pas sa place tant que la boutique est en mode catalogue.
   Si le mode est desactive, cette regle saute avec lui. */
.product-miniature__prices { display: none; }

/* ---------- pastille de disponibilite ---------- */
.bls-flags {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  /* hummingbird etire cette liste sur toute la largeur de la photo.
     Decalee de 12 px vers la droite, elle depassait donc de 12 px du
     cadre, qui devenait defilable. Elle ne fait plus que la largeur de
     son contenu. */
  inset-inline-end: auto;
  width: max-content;
  max-width: calc(100% - 24px);
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bls-dispo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 18px -10px rgba(10, 20, 36, .6);
}
.bls-dispo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--grey);
  flex: 0 0 auto;
}
.bls-dispo--stock::before { background: var(--vert); }
.bls-dispo--attente::before { background: var(--orange); }

/* ---------- pagination ---------- */
.pagination { margin-top: 38px; }
.pagination .page-list { display: flex; gap: 10px; justify-content: center; }
.pagination .page-item .page-link {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.pagination .page-item.current .page-link,
.pagination .page-item.active .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Fiche produit
   ------------------------------------------------------------------ */
.product__card,
.product-information,
.product-actions { font-size: 16.5px; }
.product h1,
.product-information h1 { font-size: clamp(26px, 3.2vw, 34px); }

/* La grande photo remplit sa colonne, au meme 4/3 que les vignettes. */
.product__carousel .carousel-item img,
.product-cover img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: 0;
  background: #fff;
  display: block;
}
.product__carousel { border-radius: 18px; overflow: hidden; }
.product__thumbnail-image,
.product-images img { border-radius: 10px; border: 0; }
.product__thumbnails-list { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.product__thumbnail { border: 0; background: none; padding: 0; width: 88px; }

.product-reference,
.bls-surtitre {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 9px;
  font-variant-numeric: tabular-nums;
}

/* Le panneau d'action suit la lecture de la fiche : sur un ecran large,
   la colonne de droite est plus courte que la description et les
   caracteristiques, il resterait sinon hors de portee au moment ou le
   visiteur a fini de lire. */
@media (min-width: 992px) {
  .product__right { position: sticky; top: 96px; align-self: start; }
}

/* ---------- la description, en face de la fiche technique ---------- */
.bls-appareil h2 { font-size: clamp(20px, 2.2vw, 24px); margin-bottom: 16px; }
.bls-appareil .product__description { color: var(--grey); font-size: 15.5px; line-height: 1.7; }
.bls-appareil .product__description p + p { margin-top: 14px; }
.bls-appareil { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* ---------- fiche technique, en bas de fiche ---------- */
.bls-technique h2 { font-size: clamp(20px, 2.2vw, 24px); margin-bottom: 16px; }
.bls-technique { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* ---------- le dossier de tracabilite ---------- */
.bls-dossier {
  background: var(--band);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  margin-top: clamp(34px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr .78fr;
  gap: clamp(26px, 3.4vw, 44px);
  align-items: center;
}
.bls-dossier h2 { font-size: clamp(20px, 2.2vw, 24px); }
.bls-dossier p {
  margin-top: 10px;
  color: var(--grey);
  font-size: 15px;
  line-height: 1.6;
  max-width: 52ch;
}
.bls-dossier__pieces { margin-top: 20px; display: grid; }
.bls-dossier__pieces > div {
  display: grid;
  gap: 2px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.bls-dossier__pieces > div:first-child { border-top: 0; padding-top: 0; }
.bls-dossier__pieces b { font-size: 15px; }
.bls-dossier__pieces span { font-size: 13.5px; color: var(--grey); line-height: 1.5; }
.bls-dossier__photo {
  width: 100%;
  /* Sans hauteur automatique, l'attribut height du balisage gagne et le
     format est ignore : la photo s'etirait a 640 px de haut. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

@media (max-width: 860px) {
  .bls-dossier { grid-template-columns: 1fr; }
  .bls-dossier__photo { order: -1; }
}

/* Une seule photo, donc une seule vignette sous la grande image : elle ne
   sert alors a rien, elle repete ce qui est deja affiche et donne a croire
   qu'il manque des photos. Elle disparait tant qu'il n'y en a pas deux. */
.product__thumbnails:not(:has(.product__thumbnail:nth-child(2))) { display: none; }

/* Caracteristiques ouvertes, en haut de fiche : elles decident de la
   demande, elles ne peuvent pas rester repliees en bas de page. */
.bls-feuille {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  margin: 0 0 20px;
}
.bls-feuille > div {
  display: grid;
  grid-template-columns: minmax(150px, .85fr) 1fr;
  gap: 16px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.bls-feuille > div:first-child { border-top: 0; }
.bls-feuille dt { color: var(--grey); font-weight: 600; margin: 0; }
.bls-feuille dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Le seul objet sombre de la fiche : le geste attendu. */
.bls-action {
  border: 0;
  border-radius: 18px;
  background: var(--ink);
  color: #EDF2FA;
  padding: 26px;
  display: grid;
  gap: 18px;
}
.bls-action b { font-size: 21px; color: #fff; display: block; }
.bls-action p { color: var(--soft); font-size: 14px; margin: 6px 0 0; line-height: 1.55; }
.bls-action .btn { width: 100%; justify-content: center; }
.bls-action ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 14.5px;
}
.bls-action li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 11px;
  align-items: start;
  line-height: 1.5;
}
.bls-action li svg { margin-top: 3px; }
.bls-action__tel {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bls-action__tel span { font-size: 13.5px; color: var(--dim); }
.bls-action__tel a { font-size: 16px; font-weight: 700; color: #fff; text-decoration: none; }

.bls-action :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Les accordeons en double sont retires du gabarit, plus du DOM que du
   seul affichage : voir templates/catalog/product.tpl. */
.product-features,
.product-details {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
  padding: 0;
}
.data-sheet { display: grid; margin: 0; gap: 0; }
.data-sheet dt,
.data-sheet dd {
  margin: 0;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  background: var(--paper);
}
.data-sheet dt { color: var(--grey); font-weight: 600; }
.data-sheet dd { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
   « Dans le meme rayon », en bas de fiche : une seule ligne qui defile.
   La piste est une zone defilable native, les fleches ne font que la
   pousser. Aucun defilement automatique.
   ------------------------------------------------------------------ */
.bls-rayon {
  margin-top: clamp(34px, 4vw, 56px);
  /* La piste deborde de 12 px de chaque cote pour laisser passer le halo
     de survol. Sans coupe, ces 12 px ajoutent une barre de defilement
     horizontale a toute la page ; avec une coupe nette, ils tranchent le
     halo de la premiere et de la derniere vignette. overflow-clip-margin
     recule la coupe de 14 px : le halo passe, le debordement est retenu.
     « clip » et non « hidden » pour ne rien couper en haut ni en bas. */
  overflow-x: clip;
  overflow-clip-margin: 14px;
}
/* Sans overflow-clip-margin, mieux vaut un halo entier qu'un halo coupe :
   les 12 px debordent alors dans la gouttiere du conteneur. */
@supports not (overflow-clip-margin: 14px) {
  .bls-rayon { overflow-x: visible; }
}
/* Moins de vignettes que de places : les fleches n'ont rien a faire. */
.bls-rayon--court .bls-rayon__fleches { display: none; }
.bls-rayon__tete {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.bls-rayon__tete h2 { margin: 0; }
.bls-rayon__fleches { margin-inline-start: auto; display: flex; gap: 8px; }

.bls-fleche {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, opacity .18s;
}
.bls-fleche:hover:not(:disabled) { background: var(--band); border-color: #C9D4E6; }
.bls-fleche:disabled { opacity: .35; cursor: default; }

.bls-rayon__piste {
  display: flex;
  gap: clamp(26px, 2.4vw, 32px);
  padding-inline: 12px;
  margin-inline: -12px;
  /* Sur un pointeur, la piste n'avance que par les fleches : le
     debordement est masque, ce qui retire le defilement libre a la
     molette et au pave tactile. Un element en overflow hidden reste
     pilotable par script, scrollBy continue donc de fonctionner. */
  overflow-x: hidden;
  /* Pas d'accrochage sur pointeur : combine a un debordement masque, il
     faisait partir la rangee decalee au chargement, la premiere vignette
     a demi sortie. Les fleches avancent d'une vignette exacte, elles n'ont
     pas besoin d'aide. L'accrochage revient au doigt, plus bas. */
  scroll-snap-type: none;
  scroll-padding-inline-start: 0;
  /* La barre de defilement native ferait sauter la ligne de base des
     vignettes ; le defilement reste possible au doigt et au pave. */
  scrollbar-width: none;
  padding-bottom: 4px;
}
.bls-rayon__piste::-webkit-scrollbar { display: none; }
.bls-rayon__piste:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 14px; }

.bls-rayon__element {
  flex: 0 0 calc((100% - 2 * clamp(26px, 2.4vw, 32px)) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 991px) {
  .bls-rayon__element { flex-basis: calc((100% - clamp(26px, 2.4vw, 32px)) / 2); }
}
@media (max-width: 640px) {
  .bls-rayon__element { flex-basis: 82%; }
}

/* Au doigt, en revanche, le balayage est le geste attendu : sous la
   tablette la piste redevient defilable et les fleches s'effacent. */
@media (max-width: 991px) {
  .bls-rayon__piste { overflow-x: auto; scroll-snap-type: x mandatory; }
  .bls-rayon__fleches { display: none; }
}

/* ------------------------------------------------------------------
   Bande de demande, en bas des listings et des fiches.
   ------------------------------------------------------------------ */
/* Bloc de rappel de l'accueil : les promesses, une seule fois. */
.bls-pourquoi {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  margin-top: clamp(34px, 4vw, 56px);
}
.bls-pourquoi .bls-promesses { margin-top: 20px; }

.bls-capture {
  border: 0;
  border-radius: 18px;
  background: var(--ink);
  color: #fff;
  padding: clamp(28px, 3.6vw, 44px);
  margin-block: clamp(28px, 3.2vw, 44px) clamp(34px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.bls-capture h2 { max-width: 18ch; color: #fff; }
.bls-dit { color: var(--soft); font-size: 16px; margin-top: 14px; max-width: 50ch; line-height: 1.6; }
.bls-appel { margin-top: 26px; }
.bls-appel span {
  display: block;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}
.bls-appel a {
  display: inline-block;
  margin-top: 4px;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  text-decoration: none;
}
.bls-formulaire {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  display: grid;
  gap: 14px;
}
.bls-champ { display: grid; gap: 7px; }
.bls-champ label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
}
.bls-champ input {
  font: inherit;
  font-size: 15.5px;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid #A6B2C4;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.bls-formulaire small { color: var(--grey); font-size: 13px; line-height: 1.5; }

/* ------------------------------------------------------------------
   Accueil de la boutique.
   Le bandeau est servi par ps_customtext : son contenu est dans
   contenus/accueil-bandeau.html, a coller dans le back-office.
   ------------------------------------------------------------------ */
.bls-bandeau,
.ps-customtext {
  position: relative;
  background: var(--ink);
  color: #EDF2FA;
  overflow: hidden;
  /* Pas de marge sous le bandeau : chaque section de l'accueil porte
     sa propre respiration, les deux s'ajoutaient. */
  margin-bottom: 0;
}
/* La photo passe sous le texte : un voile degrade, plus dense a gauche ou
   se tient le titre, plus clair a droite ou la photo doit rester lisible.
   Sans photo, le bleu nuit tient seul et le voile ne se voit pas. */
.bls-bandeau::after,
.ps-customtext::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10, 20, 36, .95) 0%, rgba(10, 20, 36, .86) 38%, rgba(10, 20, 36, .55) 100%);
  pointer-events: none;
}
.bls-bandeau > .container { position: relative; z-index: 2; }
.bls-hero {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  justify-items: start;
  padding-block: clamp(48px, 6vw, 68px) clamp(40px, 5vw, 56px);
}
.bls-hero > * { max-width: 100%; }
.bls-hero__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  margin: 0;
  max-width: none;
}
.bls-hero h1 {
  font-size: clamp(30px, 4.4vw, 52px);
  max-width: 19ch;
  color: #fff;
}
.bls-hero > p {
  color: var(--soft);
  font-size: clamp(15.5px, 1.3vw, 18px);
  max-width: 54ch;
}
.bls-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.bls-hero__chiffres,
.bls-hero__promesses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 24px;
  margin-top: 26px;
  max-width: 760px;
}
.bls-hero__chiffres > div,
.bls-hero__promesses > div { display: grid; gap: 3px; }
.bls-hero__chiffres b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #fff;
}
/* Le bandeau en place dans le back-office met des phrases dans ces <b>,
   la ou le nouveau bloc met des chiffres : 30 px les feraient passer a la
   ligne. Une taille de libelle, donc, tant que le contenu est celui-la. */
.bls-hero__promesses b {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}
.bls-hero__chiffres span,
.bls-hero__promesses span { font-size: 13.5px; color: #9FB3D1; line-height: 1.45; }

.ps-customtext :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- les rayons, en tuiles photo ---------- */
.bls-rayons { margin-top: clamp(34px, 4vw, 56px); }
.bls-rayons__tete {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bls-rayons__tete h2 { margin: 0; }
.bls-rayons__tete p { color: var(--grey); font-size: 15px; }
.bls-rayons__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}
/* Le format est porte par la tuile et non par la photo : un rayon dont
   aucun appareil n'a encore de photo garde la meme hauteur que les
   autres, en bleu nuit, au lieu de s'ecraser sur son texte. */
.bls-tuile-rayon {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  display: block;
}
.bls-tuile-rayon img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
  transition: opacity .25s, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.bls-tuile-rayon:hover img { opacity: .72; transform: scale(1.04); }
.bls-tuile-rayon__texte {
  position: absolute;
  inset-inline: 20px;
  inset-block-end: 18px;
  z-index: 2;
  display: grid;
  gap: 3px;
  color: #fff;
  /* Le texte se pose sur la photo : un degrade local lui garantit son
     contraste quelle que soit la photo dessous. */
  text-shadow: 0 1px 12px rgba(10, 20, 36, .8);
}
.bls-tuile-rayon__texte b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.bls-tuile-rayon__texte b a { color: #fff; text-decoration: none; }
.bls-tuile-rayon__texte b a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.bls-tuile-rayon__texte b a:focus-visible { outline: none; }
.bls-tuile-rayon:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 4px; }
.bls-tuile-rayon__texte > span { font-size: 13.5px; color: #D5E1F2; }

@media (max-width: 900px) {
  .bls-rayons__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Les blocs de produits de l'accueil sont des rangees defilantes, comme
   le bas de fiche : voir templates/_partials/bls-rayon.tpl. */
.ps-featuredproducts,
.ps-newproducts { display: block; }

/* ------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------ */
#footer,
.footer,
.footer__main {
  background: var(--ink);
  color: #EDF2FA;
  border-top: 0;
}
/* La bande d'inscription porte bg-body-tertiary sur sa <section>, pas sur
   son conteneur : l'utilitaire Bootstrap est en !important, il faut viser
   la section elle-meme et lui repondre de la meme facon. */
.footer__before,
.footer__before .ps-emailsubscription { background: var(--ink) !important; }
.footer__before .form-control { border-radius: 11px; border: 1px solid #A6B2C4; }
#footer a { color: inherit; text-decoration: none; opacity: .85; }
#footer a:hover { opacity: 1; }
.footer-block__title,
#footer .h3,
#footer h3 {
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}
.footer-block__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

/* Le pied garde trois colonnes de liens et une de coordonnees : elles
   respirent mieux avec un interlignage plus serre que celui du corps. */
.footer__main-top { row-gap: 32px; }
.footer-block { line-height: 1.5; }
.footer-block__content { margin-top: 14px; }

/* Bas de pied : une ligne, la societe a gauche, les pages obligatoires
   a droite. Remplace la mention PrestaShop. */
.bls-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  color: var(--dim);
}
.bls-bas nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 22px; }
.bls-bas a { color: var(--dim); text-decoration: none; }
.bls-bas a:hover { color: #EDF2FA; }

@media (max-width: 640px) {
  .bls-bas nav { margin-inline-start: 0; gap: 14px; }
}
#footer :focus-visible,
.header-bottom :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Largeurs de grille et telephone.
   hummingbird rend .products en grille : on redefinit ses colonnes
   plutot que la largeur des enfants. Trois par ligne au-dela de 992 px,
   une seule sur telephone : en dessous, la photo tombe a 129 px de haut,
   trop peu pour juger l'etat d'une machine, qui est la raison d'etre de
   la vignette.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  #products .products,
  #js-product-list .products,
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .module-products__list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .bls-capture { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  #products .products,
  #js-product-list .products,
  .module-products__list .products,
  .products { grid-template-columns: 1fr; gap: 24px; }

  /* En une colonne, la photo en 4/3 fait 270 px de haut et la vignette
     approche les 450 : deux appareils par ecran, et le reste du stock
     hors de vue. La photo passe en 16/10, ce qui suffit encore a juger
     l'etat d'une machine, et le texte se resserre autour. */
  .product-miniature__top img { aspect-ratio: 16 / 10; }
  .bls-ref { margin-top: 12px; }
  .product-miniature__title { margin-top: 4px; font-size: 18px; }
  .bls-paires { margin-top: 9px; row-gap: 3px; }

  /* En une colonne, le pied de vignette ne dit rien que la tuile ne dise
     deja : « Prix sur demande » se repete a chaque appareil, et « Voir la
     fiche » double un lien qui couvre toute la vignette. Le filet part
     avec eux. La mention de prix reste sur la fiche, ou elle est suivie
     de son explication et du bouton. */
  .product-miniature__actions { display: none; }

  .bls-entete__haut { flex-direction: column; align-items: flex-start; gap: 18px; }
  .bls-entete__compte { margin-inline-start: 0; text-align: start; }
  .bls-promesses,
  .bls-hero__chiffres,
  .bls-hero__promesses { grid-template-columns: 1fr; gap: 14px; }
  .bls-estimation,
  .bls-tel__heures { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .btn,
  .product-miniature__top img,
  .bls-pied-tuile__lien svg { transition: none; }
}