/* Boutique Budget Drain — affichage public
   Même famille visuelle que le tableau de bord, mais posé dans le thème :
   les variables restent surchargeables depuis le CSS du site. */

/* =============================================================================
   Police de la boutique
   =============================================================================
   Déclarée sur les trois racines — catalogue, fiche produit, fiche générique —
   puis héritée par tout ce qu'elles contiennent. Le sélecteur nomme la racine
   ET l'élément : beaucoup de thèmes imposent leur police aux titres et aux
   boutons avec !important, et une règle d'une seule classe leur céderait.
   ========================================================================== */

:root {
  --bd-boutique-font: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bd-produits,
.bd-produit-page,
.bd-fiche-page,
.bd-mc,
.bd-logos {
  font-family: var(--bd-boutique-font) !important;
}

.bd-produits *,
.bd-produit-page *,
.bd-fiche-page *,
.bd-mc *,
.bd-logos * {
  font-family: var(--bd-boutique-font) !important;
}

/*
 * Le sélecteur universel ci-dessus ne pèse qu'une classe : un thème qui écrit
 * `.container-wrap h3 { font-family: … !important }` compte une classe et une
 * balise, et l'emporterait sur les titres et les boutons. La classe répétée
 * ajoute un cran de spécificité sans rien changer à ce qui est ciblé.
 */
.bd-produits.bd-produits h1, .bd-produits.bd-produits h2,
.bd-produits.bd-produits h3, .bd-produits.bd-produits h4,
.bd-produits.bd-produits p, .bd-produits.bd-produits a,
.bd-produits.bd-produits span, .bd-produits.bd-produits li,
.bd-produits.bd-produits button, .bd-produits.bd-produits input,
.bd-produits.bd-produits select, .bd-produits.bd-produits textarea,
.bd-produits.bd-produits label, .bd-produits.bd-produits strong,
.bd-produit-page.bd-produit-page h1, .bd-produit-page.bd-produit-page h2,
.bd-produit-page.bd-produit-page h3, .bd-produit-page.bd-produit-page p,
.bd-produit-page.bd-produit-page a, .bd-produit-page.bd-produit-page span,
.bd-produit-page.bd-produit-page li, .bd-produit-page.bd-produit-page button,
.bd-fiche-page.bd-fiche-page h1, .bd-fiche-page.bd-fiche-page h2,
.bd-fiche-page.bd-fiche-page h3, .bd-fiche-page.bd-fiche-page p,
.bd-fiche-page.bd-fiche-page a, .bd-fiche-page.bd-fiche-page span,
.bd-fiche-page.bd-fiche-page li, .bd-fiche-page.bd-fiche-page button {
  font-family: var(--bd-boutique-font) !important;
}

.bd-repertoire {
  --bd-p-encre: #1E2A35;
  --bd-p-doux: #5A6B7B;
  --bd-p-muet: #94A3B2;
  --bd-p-bord: #E3E8EE;
  --bd-p-bord-fort: #D5DCE5;
  --bd-p-fond: #F5F7FA;
  --bd-p-accent: #2F80ED;
  --bd-p-urgence: #C2410C;
  --bd-p-rayon: 10px;

  color: var(--bd-p-encre);
  font-size: 15px;
  line-height: 1.5;
}

.bd-repertoire *,
.bd-repertoire *::before,
.bd-repertoire *::after { box-sizing: border-box; }

/* -------------------------------- Filtres -------------------------------- */

/* -------------------------- Formulaire de recherche ------------------------- */

.bd-repertoire .bd-recherche {
  margin: 0 0 26px;
  padding: 24px 26px;
  background: #F4F5F6;
  border-radius: 8px;
}

.bd-repertoire .bd-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 26px;
}
.bd-repertoire .bd-champ { flex: 0 1 260px; }
.bd-repertoire .bd-champ label {
  display: block;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #1E2A35;
  line-height: 1.2;
}

/* Groupe de cases à cocher : titre souligné, puis grille sur quatre colonnes. */
.bd-repertoire .bd-groupe {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.bd-repertoire .bd-groupe__titre {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #C9D3DC;
  font-size: 18px;
  font-weight: 800;
  color: #1E2A35;
  line-height: 1.2;
}

/*
 * Colonnes typographiques plutôt qu'une grille.
 *
 * Une grille remplit ligne par ligne : la lecture saute d'une colonne à
 * l'autre. Le multicolonnage remplit chaque colonne de haut en bas, si bien
 * que la liste se lit verticalement — 1 à 5 dans la première colonne, 6 à 10
 * dans la deuxième, et ainsi de suite.
 */
.bd-repertoire .bd-cases {
  column-count: 4;
  column-gap: 24px;
}
.bd-repertoire .bd-case {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  font-size: 15px;
  font-weight: 300;
  color: #1E2A35;
  cursor: pointer;
  line-height: 1.3;
}
.bd-repertoire .bd-case input[type="checkbox"] {
  flex: none;
  width: 17px !important;
  height: 17px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #4A5768;
  cursor: pointer;
}

.bd-repertoire .bd-recherche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* Le bouton porte ses dimensions en ligne ; il ne reste ici que le survol,
   qu'un attribut style ne peut pas exprimer. */
.bd-repertoire button.bd-effacer:hover { background: #2C3542 !important; }

@media (max-width: 1000px) {
  .bd-repertoire .bd-cases { column-count: 3; }
}
@media (max-width: 760px) {
  .bd-repertoire .bd-cases { column-count: 2; }
}
@media (max-width: 480px) {
  .bd-repertoire .bd-cases { column-count: 1; }
  .bd-repertoire .bd-champ { flex: 1 1 100%; }
}

.bd-repertoire .bd-compte {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--bd-p-muet);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------- Grille --------------------------------- */

.bd-repertoire .bd-grille {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(var(--bd-cols, 3), minmax(0, 1fr));
}
.bd-repertoire .bd-grille--1 { --bd-cols: 1; }
.bd-repertoire .bd-grille--2 { --bd-cols: 2; }
.bd-repertoire .bd-grille--3 { --bd-cols: 3; }
.bd-repertoire .bd-grille--4 { --bd-cols: 4; }

.bd-repertoire .bd-carte {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--bd-p-bord);
  border-left: 4px solid var(--bd-p-bord-fort);
  border-radius: var(--bd-p-rayon);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bd-repertoire .bd-carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(16, 24, 40, .1);
}
.bd-repertoire .bd-carte.is-urgence { border-left-color: var(--bd-p-urgence); }

.bd-repertoire .bd-carte__tete { display: flex; align-items: flex-start; gap: 12px; }
.bd-repertoire .bd-carte__logo img,
.bd-repertoire .bd-carte__logo--vide {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.bd-repertoire .bd-carte__logo--vide {
  display: grid;
  place-items: center;
  background: var(--bd-p-fond);
  color: var(--bd-p-doux);
  font-size: 20px;
  font-weight: 700;
}
.bd-repertoire .bd-carte__titre { flex: 1; min-width: 0; }
.bd-repertoire .bd-carte h3 { margin: 0 0 3px; font-size: 17px; line-height: 1.3; color: var(--bd-p-encre); }
.bd-repertoire .bd-carte__lieu { margin: 0; font-size: 13px; color: var(--bd-p-doux); }
.bd-repertoire .bd-carte__note { margin: 0; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.bd-repertoire .bd-carte__note-val { font-size: 18px; font-weight: 700; }
.bd-repertoire .bd-carte__note-sur { font-size: 12px; color: var(--bd-p-muet); }

.bd-repertoire .bd-urgence {
  align-self: flex-start;
  margin: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: #FEF0E7;
  color: var(--bd-p-urgence);
  font-size: 12px;
  font-weight: 700;
}

.bd-repertoire .bd-carte__desc { margin: 0; font-size: 14px; color: var(--bd-p-doux); }

.bd-repertoire .bd-carte__services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-repertoire .bd-carte__services li {
  padding: 4px 10px;
  border: 1px solid var(--bd-p-bord);
  border-radius: 999px;
  background: var(--bd-p-fond);
  font-size: 12px;
  color: var(--bd-p-doux);
}

.bd-repertoire .bd-carte__infos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 0;
  font-size: 13px;
}
.bd-repertoire .bd-carte__infos dt { color: var(--bd-p-muet); }
.bd-repertoire .bd-carte__infos dd { margin: 0; color: var(--bd-p-doux); }
.bd-repertoire .bd-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.bd-repertoire .bd-carte__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.bd-repertoire .bd-cta {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid var(--bd-p-bord-fort);
  border-radius: 8px;
  background: #fff;
  color: var(--bd-p-encre);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.bd-repertoire .bd-cta:hover { background: var(--bd-p-fond); color: var(--bd-p-encre); }
.bd-repertoire .bd-cta--primaire {
  background: #3E4C5A;
  border-color: #3E4C5A;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.bd-repertoire .bd-cta--primaire:hover { background: #14181D; border-color: #14181D; color: #fff; }

.bd-repertoire .bd-vide {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--bd-p-bord-fort);
  border-radius: var(--bd-p-rayon);
  background: var(--bd-p-fond);
  color: var(--bd-p-doux);
}

/* ------------------------------- Pagination ------------------------------- */

.bd-repertoire .bd-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #E7EBEF;
}

.bd-repertoire .bd-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #E1E6EC;
  border-radius: 10px;
  background: #fff;
  color: #46586A;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bd-repertoire .bd-page:hover:not(:disabled):not(.is-active) {
  background: #F4F6F8;
  border-color: #CFD8E1;
  color: #1E2A35;
}
.bd-repertoire .bd-page:focus-visible {
  outline: 2px solid var(--bd-p-accent);
  outline-offset: 2px;
}

/* Page courante : pleine, sans effet de survol — on y est déjà. */
.bd-repertoire .bd-page.is-active {
  background: #3E4C5A;
  border-color: #3E4C5A;
  color: #fff;
  font-weight: 600;
  cursor: default;
}

/* Précédent / Suivant : plus larges, avec leur chevron. */
.bd-repertoire .bd-page--nav { padding: 0 18px; font-weight: 500; }
.bd-repertoire .bd-page--nav svg { display: block; flex: none; }
.bd-repertoire .bd-page:disabled {
  opacity: .45;
  cursor: default;
  background: #FAFBFC;
}

.bd-repertoire .bd-page-sep {
  min-width: 24px;
  text-align: center;
  color: #A6B0BA;
  letter-spacing: .1em;
}

/* Repère textuel : utile dès que le nombre de pages devient grand. */
.bd-repertoire .bd-pages__etat {
  flex: 1 0 100%;
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  color: #A6B0BA;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .bd-repertoire .bd-page--nav span { display: none; }
  .bd-repertoire .bd-page--nav { padding: 0; min-width: 42px; }
}

.bd-repertoire.is-loading .bd-resultat { opacity: .45; transition: opacity .15s ease; }

.bd-repertoire a:focus-visible,
.bd-repertoire button:focus-visible,
.bd-repertoire input:focus-visible,
.bd-repertoire select:focus-visible {
  outline: 2px solid var(--bd-p-accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .bd-repertoire .bd-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bd-repertoire .bd-grille { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-repertoire .bd-carte { transition: none; }
  .bd-repertoire .bd-carte:hover { transform: none; }
}

.bd-repertoire .bd-carte__alias {
  margin: 0 0 3px;
  font-size: 13px;
  font-style: italic;
  color: var(--bd-p-muet);
}

/* =============================================================================
   Premier niveau : la liste du répertoire
   ========================================================================== */

.bd-repertoire .bd-liste {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none !important;
  grid-template-columns: repeat(var(--bd-cols, 4), minmax(0, 1fr));
}
.bd-repertoire .bd-liste--1 { --bd-cols: 1; }
.bd-repertoire .bd-liste--2 { --bd-cols: 2; }
.bd-repertoire .bd-liste--3 { --bd-cols: 3; }
.bd-repertoire .bd-liste--4 { --bd-cols: 4; }

/* Le thème colle ses puces et ses retraits à tout <li> : on les neutralise,
   sinon chaque carte s'affiche précédée d'un point. */
.bd-repertoire .bd-item {
  margin: 0 !important;
  padding: 26px 24px !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: #F4F5F6;
  border: 0;
  border-radius: 8px;
  transition: background .15s ease, box-shadow .15s ease;
}
.bd-repertoire .bd-item::before,
.bd-repertoire .bd-item::marker { content: none !important; display: none !important; }
.bd-repertoire .bd-item:hover { background: #EDEFF1; box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
.bd-repertoire .bd-item.is-urgence { box-shadow: inset 3px 0 0 var(--bd-p-urgence); }

.bd-repertoire .bd-item__nom { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; }
.bd-repertoire .bd-item__nom a { color: #3E4C5A; text-decoration: none; }
.bd-repertoire .bd-item__nom a:hover { color: #14181D; text-decoration: underline; }

.bd-repertoire .bd-item__ville { margin: 0; font-size: 17px; color: #1E2A35; }
.bd-repertoire .bd-item__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #FEF0E7;
  color: var(--bd-p-urgence);
  font-size: 11px;
  font-weight: 700;
}

.bd-repertoire .bd-item__tel { margin: 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.bd-repertoire .bd-item__tel a { color: #1E2A35; text-decoration: none; }
.bd-repertoire .bd-item__tel a:hover { color: #2F80ED; }
.bd-repertoire .bd-item__sans { color: #A6B0BA; font-size: 14px; }

.bd-repertoire .bd-item__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-top: 10px;
  padding: 0 28px;
  border-radius: 4px;
  background: #4A5768;
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease;
}
.bd-repertoire .bd-item__btn:hover { background: #2C3542; color: #fff; }

@media (max-width: 1100px) { .bd-repertoire .bd-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .bd-repertoire .bd-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .bd-repertoire .bd-liste { grid-template-columns: 1fr; } }

/* =============================================================================
   Second niveau : la page d'une fiche
   ========================================================================== */

.bd-fiche-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 30px 20px 60px;
  color: #1E2A35;
  font-size: 15px;
  line-height: 1.6;
}
.bd-fiche-page *,
.bd-fiche-page *::before,
.bd-fiche-page *::after { box-sizing: border-box; }

.bd-fiche-page .bd-fil { margin-bottom: 14px; font-size: 13px; color: #94A3B2; }
.bd-fiche-page .bd-fil a { color: #5A6B7B; text-decoration: none; }
.bd-fiche-page .bd-fil a:hover { color: #2F80ED; text-decoration: underline; }
.bd-fiche-page .bd-fil > span { margin: 0 6px; }
.bd-fiche-page .bd-fil__ici { color: #1E2A35; margin: 0; }

.bd-fiche__h1 {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1E2A35;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.2;
}

/* Le panneau gris qui contient les deux colonnes */
.bd-fiche {
  background: #EFEFEF;
  border-radius: 8px;
  padding: 40px;
}
.bd-fiche__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: 40px;
  align-items: start;
}

/* ------------------------------ Colonne gauche ----------------------------- */

.bd-fiche__logo { margin-bottom: 16px; }
.bd-fiche__logo img {
  /* Deux limites : la plus contraignante s'applique. Un logo en bandeau
     s'arrête à 350 px de large, un logo carré à 150 px de haut. */
  max-width: 350px;
  max-height: 150px;
  width: auto;
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.bd-fiche__nom { margin: 0 0 14px; font-size: 24px; font-weight: 600; line-height: 1.25; }
.bd-fiche__alias { margin: -8px 0 14px; font-size: 14px; font-style: italic; color: #7A8894; }

.bd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none !important;
}
/* Certains thèmes imposent leurs puces et leurs retraits aux <li>.
   On les neutralise ici, faute de quoi chaque étiquette part à la ligne
   précédée d'un point. */
.bd-tags li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block;
}
.bd-tags li::before,
.bd-tags li::marker { content: none !important; display: none !important; }
.bd-tag {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: #3E4C5A;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  transition: background .15s ease;
}
a.bd-tag:hover { background: #14181D; color: #fff; }

.bd-fiche__texte { margin: 0 0 18px; color: #5A6B7B; }
.bd-fiche__texte p { margin: 0; }
.bd-fiche__services-txt strong { color: #1E2A35; }
.bd-fiche__rbq { margin: 0; font-size: 13px; color: #7A8894; }
.bd-fiche__rbq span { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ------------------------------ Colonne droite ----------------------------- */

.bd-fiche__cote { display: flex; flex-direction: column; gap: 18px; }

.bd-carte {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #DDE3E8;
}
.bd-carte iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Repli pour les navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16 / 10) {
  .bd-carte { height: 300px; }
}

.bd-coord { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.bd-coord li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.bd-coord__ico { flex: none; display: inline-flex; color: #5A6B7B; }
.bd-coord a { color: #5A6B7B; text-decoration: none; }
.bd-coord a:hover { color: #2F80ED; text-decoration: underline; }

.bd-voir-num {
  padding: 9px 20px;
  border: 0;
  border-radius: 6px;
  background: #3E4C5A;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.bd-voir-num:hover { background: #14181D; }
/* Le numéro révélé : texte simple, sans lien ni effet de survol. */
.bd-num-affiche {
  font-size: 17px;
  font-weight: 300;
  color: #1E2A35;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  cursor: text;
}

.bd-fiche__sceaux { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.bd-sceau {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.bd-sceau--verifie { background: #16A34A; color: #fff; }
.bd-sceau--urgence { background: #FEF0E7; color: #C2410C; }

/* ------------------------------- Bas de page ------------------------------- */

.bd-fiche__bloc { margin-top: 34px; }
.bd-fiche__bloc h2 { margin: 0 0 12px; font-size: 19px; }

.bd-voisins { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bd-voisins li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border: 0;
  border-radius: 8px;
  background: #3E4C5A;
}
.bd-voisins__tel { font-variant-numeric: tabular-nums; }

.bd-retour { color: #2F80ED; text-decoration: none; font-size: 14px; }
.bd-retour:hover { text-decoration: underline; }
.bd-retour-bas { margin-top: 30px; padding-top: 18px; border-top: 1px solid #E3E8EE; }

.bd-ville-titre { margin: 0 0 6px; font-size: 30px; line-height: 1.2; font-weight: 800; }

@media (max-width: 900px) {
  .bd-fiche { padding: 26px; }
  .bd-fiche__grille { grid-template-columns: 1fr; gap: 28px; }
  .bd-fiche__sceaux { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .bd-fiche__h1 { font-size: 24px; }
  .bd-fiche { padding: 20px; }
  .bd-tag { padding: 8px 14px; font-size: 13px; }
}

/* =============================================================================
   Priorité sur le thème
   -----------------------------------------------------------------------------
   Les thèmes de constructeur (Salient, Divi, Elementor…) ciblent les titres et
   les liens avec des sélecteurs très spécifiques : #content h3, .wpb_wrapper h3,
   .entry-content a… Ces règles-là l'emportent sur une simple classe et écrasent
   la carte. Le bloc ci-dessous rétablit l'apparence voulue, avec une spécificité
   suffisante pour ne plus dépendre du thème installé.
   ========================================================================== */

.bd-repertoire .bd-liste .bd-item h3.bd-item__nom,
.bd-repertoire .bd-liste .bd-item .bd-item__nom {
  margin: 0 0 2px !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #3E4C5A !important;
}
.bd-repertoire .bd-liste .bd-item .bd-item__nom::before,
.bd-repertoire .bd-liste .bd-item .bd-item__nom::after { content: none !important; display: none !important; }

.bd-repertoire .bd-liste .bd-item .bd-item__nom a {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}
.bd-repertoire .bd-liste .bd-item .bd-item__nom a:hover {
  color: #14181D !important;
  text-decoration: underline !important;
}

.bd-repertoire .bd-liste .bd-item .bd-item__ville,
.bd-repertoire .bd-liste .bd-item .bd-item__tel {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: #1E2A35 !important;
}
.bd-repertoire .bd-liste .bd-item .bd-item__tel a {
  color: #1E2A35 !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
}
.bd-repertoire .bd-liste .bd-item .bd-item__tel a:hover { color: #2F80ED !important; }

.bd-repertoire .bd-liste .bd-item a.bd-item__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 42px !important;
  margin: 10px 0 0 !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #4A5768 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.bd-repertoire .bd-liste .bd-item a.bd-item__btn:hover {
  background: #2C3542 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Pagination : les thèmes stylent lourdement les <button>. On reprend la main. */
.bd-repertoire .bd-pages button.bd-page {
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid #E1E6EC !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #46586A !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.bd-repertoire .bd-pages button.bd-page--nav { padding: 0 18px !important; }
.bd-repertoire .bd-pages button.bd-page.is-active {
  background: #3E4C5A !important;
  border-color: #3E4C5A !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.bd-repertoire .bd-pages button.bd-page:disabled {
  background: #FAFBFC !important;
  color: #46586A !important;
}
.bd-repertoire .bd-pages button.bd-page:hover:not(:disabled):not(.is-active) {
  background: #F4F6F8 !important;
  border-color: #CFD8E1 !important;
  color: #1E2A35 !important;
}

/* Bouton « Retour au répertoire » des pages fiche et ville */
.bd-fiche-page .bd-retour-haut { margin: 0 0 18px; }
.bd-fiche-page .bd-retour-bas { margin-top: 34px; padding-top: 22px; border-top: 1px solid #E7EBEF; }

.bd-fiche-page a.bd-retour-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #088EA0 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .15s ease;
}
.bd-fiche-page a.bd-retour-btn:hover {
  background: #2C3542 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.bd-fiche-page a.bd-retour-btn svg { display: block; flex: none; }
.bd-fiche-page a.bd-retour-btn:focus-visible { outline: 2px solid #2F80ED; outline-offset: 3px; }

/* Étiquettes en <h3> : les thèmes imposent aux titres une taille, une graisse
   et des marges qui feraient éclater la pastille. On reprend la main. */
.bd-fiche-page .bd-tags h3.bd-tag,
.bd-fiche-page .bd-tags .bd-tag {
  display: inline-block !important;
  margin: 0 !important;
  padding: 9px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #3E4C5A !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}
.bd-fiche-page .bd-tags h3.bd-tag::before,
.bd-fiche-page .bd-tags h3.bd-tag::after { content: none !important; display: none !important; }

.bd-fiche-page .bd-tags h3.bd-tag a {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
}
.bd-fiche-page .bd-tags h3.bd-tag a:hover { text-decoration: underline !important; }
.bd-fiche-page .bd-tags li:has(> h3.bd-tag > a):hover h3.bd-tag { background: #14181D !important; }

/* Bandeau d'appel en haut de fiche */
.bd-fiche-page .bd-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
  padding: 18px 22px;
  background: #3E4C5A;
  border-radius: 8px;
}
.bd-fiche-page .bd-bandeau__texte {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  color: #fff !important;
  line-height: 1.4 !important;
}
.bd-fiche-page .bd-bandeau__suite { color: #fff; font-weight: 300; }

.bd-fiche-page a.bd-bandeau__tel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #EF3340 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease;
}
.bd-fiche-page a.bd-bandeau__tel:hover { background: #C81E29 !important; color: #fff !important; }
.bd-fiche-page a.bd-bandeau__tel svg { display: block; flex: none; }

@media (max-width: 600px) {
  .bd-fiche-page .bd-bandeau { flex-direction: column; align-items: stretch; text-align: center; }
  .bd-fiche-page a.bd-bandeau__tel { justify-content: center; }
  .bd-fiche-page .bd-bandeau__suite { display: block; }
}

/* Entrées libres : même présentation que « Autres réparateurs de spa », sans lien. */
.bd-fiche-page .bd-voisins__nom {
  color: #fff;
  font-size: 17px;
  font-weight: 300;
}
.bd-fiche-page a.bd-voisins__tel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #EF3340 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease;
}
.bd-fiche-page a.bd-voisins__tel svg { display: block; flex: none; }
.bd-fiche-page a.bd-voisins__tel:hover { background: #C81E29 !important; color: #fff !important; }

@media (max-width: 600px) {
  .bd-fiche-page .bd-voisins li { flex-direction: column; align-items: stretch; text-align: center; }
  .bd-fiche-page a.bd-voisins__tel { justify-content: center; }
}

/* =============================================================================
   Barre de filtres : priorité sur le thème
   -----------------------------------------------------------------------------
   Les thèmes stylent input[type="search"], select et button avec leurs propres
   hauteurs, marges et couleurs. Résultat : trois contrôles de tailles
   différentes qui ne s'alignent plus. On impose ici une hauteur unique et une
   marge nulle, sans quoi aucun alignement n'est possible.
   ========================================================================== */








/* La flèche du menu doit rester visible : on garde l'apparence native. */







/* Champ de recherche : certains thèmes lui imposent « height: auto » avec un
   fort rembourrage vertical, ce qui le rend plus haut que les menus voisins.
   On verrouille les trois dimensions — hauteur, hauteur minimale et maximale —
   et on neutralise le rembourrage, seule façon fiable de les mettre d'équerre. */




/* Le bouton « Rechercher » porte ses dimensions en ligne ; ces règles ne
   servent qu'à son survol, que l'attribut style ne peut pas exprimer. */

/* Texte du formulaire : les thèmes colorent volontiers les <label> et les
   <legend> avec leur teinte de lien. On rétablit le noir. */
.bd-repertoire form.bd-recherche label,
.bd-repertoire form.bd-recherche label span,
.bd-repertoire form.bd-recherche legend,
.bd-repertoire form.bd-recherche .bd-groupe__titre {
  color: #1E2A35 !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.bd-repertoire form.bd-recherche .bd-champ label,
.bd-repertoire form.bd-recherche .bd-groupe__titre {
  font-size: 18px !important;
  font-weight: 800 !important;
}
.bd-repertoire form.bd-recherche .bd-case,
.bd-repertoire form.bd-recherche .bd-case span { font-size: 15px !important; font-weight: 300 !important; }

/* Un champ relié à un <datalist> affiche, sous Chrome, un petit triangle
   dans le coin. On le masque : les suggestions apparaissent de toute façon
   dès la saisie, et l'icône déséquilibrait le champ. */
.bd-repertoire input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}
.bd-repertoire input[list]::-webkit-list-button {
  display: none !important;
  opacity: 0 !important;
}

/* =============================================================================
   Vérification d'un entrepreneur — [verifier_reparateur]
   ========================================================================== */

.bd-verif {
  color: #1E2A35;
  font-size: 15px;
  line-height: 1.6;
}
.bd-verif *, .bd-verif *::before, .bd-verif *::after { box-sizing: border-box; }

.bd-verif__form {
  padding: 24px 26px;
  background: #F4F5F6;
  border-radius: 8px;
}
.bd-verif__titre {
  margin: 0 0 6px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}
.bd-verif__sous { margin: 0 0 18px !important; color: #5A6B7B !important; font-size: 15px !important; }

.bd-verif__ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bd-verif__label {
  display: block !important;
  flex: 1 1 100%;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5A6B7B !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.bd-verif__champ { flex: 1 1 260px; }
.bd-verif__bouton { flex: 0 0 auto; }
.bd-verif input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* ------------------------------- Résultats -------------------------------- */

.bd-verif__resultat { margin-top: 22px; }
.bd-verif.is-loading .bd-verif__resultat { opacity: .45; transition: opacity .15s ease; }

.bd-verif__compte { margin: 0 0 12px !important; font-size: 14px !important; color: #94A3B2 !important; }

.bd-verif__liste { margin: 0; padding: 0; list-style: none !important; display: grid; gap: 10px; }
.bd-verif__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 !important;
  padding: 18px 22px !important;
  list-style: none !important;
  border: 1px solid #E3E8EE;
  border-left: 4px solid #C9D3DC;
  border-radius: 8px;
  background: #fff;
}
.bd-verif__item::before, .bd-verif__item::marker { content: none !important; display: none !important; }
.bd-verif__item.is-verifie { border-left-color: #16A34A; }

.bd-verif__info { flex: 1 1 240px; min-width: 0; }
.bd-verif__nom { margin: 0 !important; font-size: 17px !important; font-weight: 600 !important; color: #1E2A35 !important; }
.bd-verif__meta { margin: 2px 0 0 !important; font-size: 14px !important; color: #6B7A88 !important; }
.bd-verif__rbq { margin: 4px 0 0 !important; font-size: 13px !important; color: #94A3B2 !important; }
.bd-verif__rbq span { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.bd-verif__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }

/* Mentions attestées : la coche verte porte le signal, le texte reste sobre. */
.bd-verif__coche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 300;
  color: #1E2A35;
  white-space: nowrap;
}
.bd-verif__coche svg { display: block; flex: none; color: #16A34A; }

.bd-verif__avis {
  margin: 0 !important;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 15px !important;
}
.bd-verif__avis--absent { background: #FDECEC; color: #B42318 !important; }
.bd-verif__avis--neutre { background: #F4F5F6; color: #5A6B7B !important; }

.bd-verif__note {
  margin: 14px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #94A3B2 !important;
}

/* Le champ ne doit jamais dépasser sa colonne, quelle que soit la largeur. */
.bd-verif .bd-verif__champ {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  .bd-verif__form { padding: 20px; }
  .bd-verif__ligne { flex-direction: column; align-items: stretch; gap: 10px; }
  .bd-verif .bd-verif__champ { flex: 1 1 auto; width: 100%; }
  .bd-verif__bouton { width: 100%; }
  .bd-verif__titre { font-size: 19px !important; }

  /*
   * En colonne, « flex: 1 1 240px » n'agit plus sur la largeur mais sur la
   * hauteur : chaque bloc réservait 240 px, d'où les grands vides entre le
   * nom et les mentions. On rend la hauteur à son contenu.
   */
  .bd-verif__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px !important;
  }
  .bd-verif .bd-verif__info {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
  }
  .bd-verif__etat {
    flex: 0 0 auto;
    width: 100%;
    gap: 6px 16px;
  }
  .bd-verif__coche { white-space: normal; font-size: 14px; }
  .bd-verif__nom { font-size: 16px !important; }
  .bd-verif__liste { gap: 8px; }
}

/* Lien vers la fiche, à la suite des mentions */
.bd-verif__lien {
  color: #2F80ED !important;
  text-decoration: none !important;
  font-size: 14px;
  white-space: nowrap;
}
.bd-verif__lien:hover { text-decoration: underline !important; }

/* =============================================================================
   Listes de régions et de villes — [regions_reparateurs] / [villes_reparateurs]
   ========================================================================== */

.bd-listes {
  color: #1E2A35;
  font-size: 16px;
  line-height: 1.55;
}
.bd-listes *, .bd-listes *::before, .bd-listes *::after { box-sizing: border-box; }

.bd-listes__titre {
  margin: 0 0 14px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}

/* Colonnes remplies de haut en bas : la liste se lit verticalement,
   comme les colonnes d'un journal, plutôt qu'en zigzag. */
.bd-listes__cols {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  column-count: var(--bd-listes-cols, 3);
  column-gap: 40px;
}
.bd-listes--1 { --bd-listes-cols: 1; }
.bd-listes--2 { --bd-listes-cols: 2; }
.bd-listes--3 { --bd-listes-cols: 3; }
.bd-listes--4 { --bd-listes-cols: 4; }
.bd-listes--5 { --bd-listes-cols: 5; }
.bd-listes--6 { --bd-listes-cols: 6; }

/* Les thèmes appliquent puces et retraits à tout <li> : on les neutralise. */
.bd-listes__item {
  margin: 0 0 4px !important;
  padding: 0 !important;
  list-style: none !important;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.bd-listes__item::before,
.bd-listes__item::marker { content: none !important; display: none !important; }

.bd-listes__item a {
  color: #1E2A35 !important;
  text-decoration: none !important;
  border: 0 !important;
}
.bd-listes__item a:hover { text-decoration: underline !important; }

@media (max-width: 900px) { .bd-listes__cols { column-count: 2; } }
@media (max-width: 560px) { .bd-listes__cols { column-count: 1; } }

/* Bloc des réparateurs de spa recommandés : le titre reprend celui des listes. */
.bd-recommandes { margin: 0 0 26px; }
.bd-recommandes .bd-listes__titre {
  margin: 0 0 16px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
}

/* Entrées libres posées hors d'une fiche, via [entrees_libres].
   Le conteneur emprunte l'habillage de la fiche pour le style des lignes,
   sans en reprendre la largeur ni les marges. */
.bd-libres {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bd-libres__titre {
  margin: 0 0 16px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}
.bd-libres .bd-voisins {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--bd-libres-cols, 1), minmax(0, 1fr));
}
.bd-libres--1 { --bd-libres-cols: 1; }
.bd-libres--2 { --bd-libres-cols: 2; }
.bd-libres--3 { --bd-libres-cols: 3; }
.bd-libres--4 { --bd-libres-cols: 4; }

@media (max-width: 900px) { .bd-libres .bd-voisins { grid-template-columns: 1fr; } }

/* =============================================================================
   Blogue — [blogue_spa]
   ========================================================================== */

.bd-blogue {
  max-width: none;
  width: 100%;
  color: #1E2A35;
}
.bd-blogue *, .bd-blogue *::before, .bd-blogue *::after { box-sizing: border-box; }

.bd-blogue__titre {
  margin: 0 0 18px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}

.bd-blogue__liste {
  display: grid;
  gap: 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  grid-template-columns: repeat(var(--bd-blog-cols, 3), minmax(0, 1fr));
}
.bd-blogue--1 { --bd-blog-cols: 1; }
.bd-blogue--2 { --bd-blog-cols: 2; }
.bd-blogue--3 { --bd-blog-cols: 3; }
.bd-blogue--4 { --bd-blog-cols: 4; }

.bd-blogue__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.bd-blogue__item::before,
.bd-blogue__item::marker { content: none !important; display: none !important; }

.bd-blogue__image {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 4px;
}
.bd-blogue__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .25s ease;
}
.bd-blogue__image:hover img { transform: scale(1.03); }

.bd-blogue__nom {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.bd-blogue__nom a { color: #1E2A35 !important; text-decoration: none !important; }
.bd-blogue__nom a:hover { color: #2F80ED !important; }

.bd-blogue__date { margin: 0 !important; font-size: 13px !important; color: #94A3B2 !important; }
.bd-blogue__extrait { margin: 0 !important; font-size: 15px !important; color: #5A6B7B !important; line-height: 1.55 !important; }

.bd-blogue__lien {
  margin-top: auto;
  padding-top: 6px;
  color: #2F80ED !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
}
.bd-blogue__lien:hover { text-decoration: underline !important; }

/* Mention de transparence sous les articles générés */
.bd-mention-ia {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #E3E8EE;
  font-size: 13px;
  color: #94A3B2;
}

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

/* Formulaire de zone, affiché après la fiche */
.bd-fiche-page .bd-form-zone {
  margin-top: 34px;
  scroll-margin-top: 90px;
}
.bd-fiche-page .bd-form-zone iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
}
/* Une iframe sans dimensions s'affiche en 300×150 : on impose la hauteur choisie. */
.bd-fiche-page .bd-form-zone--fixe iframe {
  height: var(--bd-iframe-hauteur, 700px) !important;
}

/* Le thème impose parfois ses propres dimensions aux images de contenu. */
.bd-fiche-page .bd-fiche__logo img {
  max-width: 350px !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Sur un écran étroit, 350 px dépasseraient la colonne. */
@media (max-width: 420px) {
  .bd-fiche-page .bd-fiche__logo img { max-width: 100% !important; }
}

/* =============================================================================
   Maillage interne : liens vers les villes voisines
   ========================================================================== */

.bd-maillage {
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid #E3E8EE;
}
.bd-maillage--seul { margin: 0; padding-top: 0; border-top: 0; }

.bd-maillage__titre {
  margin: 0 0 14px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.3 !important;
}

/* Colonnes remplies verticalement : la liste se parcourt du regard. */
.bd-maillage__liste {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  column-count: 3;
  column-gap: 32px;
}
.bd-maillage__liste li {
  margin: 0 0 6px !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 14px;
  line-height: 1.5;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.bd-maillage__liste li::before,
.bd-maillage__liste li::marker { content: none !important; display: none !important; }

.bd-maillage__liste a {
  color: #5A6B7B !important;
  text-decoration: none !important;
}
.bd-maillage__liste a:hover { color: #2F80ED !important; text-decoration: underline !important; }

.bd-maillage__larges {
  margin: 16px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #94A3B2 !important;
}
.bd-maillage__larges a { color: #5A6B7B !important; text-decoration: none !important; }
.bd-maillage__larges a:hover { color: #2F80ED !important; text-decoration: underline !important; }
.bd-maillage__larges span { margin: 0 6px; color: #C9D3DC; }

@media (max-width: 760px) { .bd-maillage__liste { column-count: 2; } }
@media (max-width: 460px) { .bd-maillage__liste { column-count: 1; } }

/* =============================================================================
   Produits — [produits_spa]
   ========================================================================== */

.bd-produits {
  padding: 26px;
  background: #F4F5F6;
  border-radius: 10px;
  color: #1E2A35;
}
/* Le bloc « Autres produits » reste transparent : il vit déjà dans une page. */
.bd-produits--voisins { padding: 24px 0 0; background: none; border-radius: 0; }
.bd-produits *, .bd-produits *::before, .bd-produits *::after { box-sizing: border-box; }

.bd-produits__titre {
  margin: 0 0 20px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}

.bd-produits,
.bd-produits__contenu { max-width: 100%; overflow-x: hidden; }

.bd-produits__liste {
  display: grid;
  align-items: stretch;
  gap: 26px 22px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  grid-template-columns: repeat(var(--bd-prod-cols, 4), minmax(0, 1fr));
}
.bd-produits--1 { --bd-prod-cols: 1; }
.bd-produits--2 { --bd-prod-cols: 2; }
.bd-produits--3 { --bd-prod-cols: 3; }
.bd-produits--4 { --bd-prod-cols: 4; }
.bd-produits--5 { --bd-prod-cols: 5; }
.bd-produits--6 { --bd-prod-cols: 6; }

/*
 * Les cartes s'étirent sur toute la hauteur de leur rangée, et chaque zone
 * a une hauteur fixe : sans cela, une description de deux lignes décale le
 * bouton par rapport à celui d'à côté, et la grille paraît désordonnée.
 */
/*
 * Rien ne sort d'une carte.
 *
 * min-width: 0 lève la largeur minimale automatique d'un enfant de grille,
 * qui empêche autrement le rétrécissement en dessous de son contenu — c'est
 * elle qui laissait un nom sans espace ou un bouton large repousser la carte
 * au-delà de sa colonne, très visible sur un écran de téléphone.
 */
.bd-produits__item {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /*
   * Aucun écart automatique entre les lignes de texte : chaque bloc pose
   * lui-même sa marge quand il en faut une. Un gap global rouvrait un
   * espace entre la marque, le nom, le modèle et la catégorie.
   */
  gap: 0;
  height: 100%;
  margin: 0 !important;
  padding: 16px !important;
  background: #fff;
  border-radius: 8px;
  list-style: none !important;
}
.bd-produits--voisins .bd-produits__item { padding: 14px !important; }
.bd-produits__item::before,
.bd-produits__item::marker { content: none !important; display: none !important; }

/*
 * Zone photo en blanc franc.
 *
 * Les produits sont détourés sur blanc : un gris même très pâle laisse voir
 * un rectangle plus clair au milieu de la case, là où l'image s'arrête.
 */
.bd-produits__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  margin-bottom: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  text-align: center;
}
.bd-produits__image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/*
 * Même échelle que les vitrines : 60 % de la zone, centrée.
 *
 * La zone est un conteneur souple, non un cadre en position absolue : le
 * centrage y est déjà acquis, et seules les dimensions changent. Écrire un
 * retrait ici ne servirait à rien.
 */
/*
 * Photos du catalogue : 90 % de leur zone.
 *
 * Plus généreuses qu'ailleurs, et c'est voulu. Les vitrines de collections et
 * de rayons montrent une image parmi d'autres, en petit format ; le catalogue,
 * lui, est l'endroit où le client examine l'article. Les 60 % communs aux
 * vitrines y laissaient trop de blanc autour d'un robinet déjà menu.
 */
.bd-produits__image img {
  max-width: 90% !important;
  max-height: 90% !important;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*
 * Marges internes de la carte : remises à zéro avec une spécificité élevée.
 *
 * Les règles précédentes portaient bien !important, mais sur un sélecteur
 * d'une seule classe. Un thème qui écrit `.container-wrap p { margin-bottom:
 * 1.5em !important }` — Salient le fait — est plus spécifique et l'emporte :
 * d'où l'espace qui subsistait sous la marque et sous le modèle, deux <p>,
 * alors que le nom, un <h3>, n'était pas touché. En nommant le conteneur,
 * la carte et la balise, on passe devant.
 */
.bd-produits .bd-produits__item > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.bd-produits .bd-produits__item p,
.bd-produits .bd-produits__item h3 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Les écarts voulus, rétablis après la remise à zéro. */
.bd-produits .bd-produits__item .bd-produits__image { margin-bottom: 10px !important; }
.bd-produits .bd-produits__item .bd-produits__desc { margin-top: 6px !important; }
/*
 * « auto » colle le bouton en bas de la carte : c'est lui qui aligne les
 * boutons d'une même rangée quand les noms n'ont pas la même longueur.
 */
.bd-produits .bd-produits__item .bd-produits__lien { margin-top: auto !important; }

.bd-produits .bd-produits__item .bd-produits__marque {
  min-height: 20px;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #088EA0 !important;
}

/*
 * Le nom dispose de deux lignes.
 *
 * Une seule coupait presque tout : « Barres de douche coulissantes BARIL
 * DGL-2175-52-LL laiton satiné » n'a aucune chance d'y tenir, et le client
 * ne voyait ni la gamme ni la finition. Deux lignes suffisent à la plupart
 * des intitulés sans déséquilibrer la grille.
 *
 * La coupure revient au navigateur : il connaît la largeur réelle de la
 * carte et celle de chaque lettre, ce qu'un décompte de caractères ne peut
 * pas savoir. Le nom complet reste dans l'infobulle du lien et sur la fiche.
 */
.bd-produits .bd-produits__item .bd-produits__nom {
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.bd-produits .bd-produits__item .bd-produits__nom a {
  display: inline;
  color: #1E2A35 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
}
.bd-produits .bd-produits__item .bd-produits__nom a:hover { color: #2F80ED !important; }

/*
 * Informations secondaires de la carte, en gris.
 *
 * En noir, elles pesaient autant que le nom du produit et l'œil ne savait
 * plus où se poser. Le gris les range au second plan sans les effacer.
 */
.bd-produits .bd-produits__item .bd-produits__modele,
.bd-produits .bd-produits__item .bd-produits__categorie {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 20px;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  color: #5A6B7B !important;
}
.bd-produits .bd-produits__item .bd-produits__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 63px;
  margin: 6px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #5A6B7B !important;
}

.bd-produits__lien { margin-top: auto; padding-top: 12px; }

.bd-produits__vide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #B9C4CE;
  font-size: 13px;
  text-decoration: none !important;
}
/* Le thème souligne les liens : ce texte n'en est pas un. */
.bd-produits__image a { text-decoration: none !important; }

@media (max-width: 1000px) { .bd-produits__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sur mobile, une seule colonne : deux cartes côte à côte réduiraient
   l'image à une vignette illisible et couperaient les noms de modèle. */
@media (max-width: 782px)  { .bd-produits__liste { grid-template-columns: 1fr; } }

/* Écrans étroits : plus rien ne dépasse, ni sur la grille ni sur la fiche. */
@media (max-width: 782px) {
  .bd-produit-page,
  .bd-produit-page * { max-width: 100%; }
  .bd-produit-page img { height: auto; }
  .bd-produits__item { padding: 14px !important; }
}


/* =============================================================================
   Page individuelle d'un produit
   ========================================================================== */

.bd-produit-page .bd-fiche__col--produit-image {
  align-self: start;
}

.bd-produit__visuel {
  padding: 22px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
.bd-produit__visuel img {
  display: inline-block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.bd-produit__visuel--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: #B9C4CE;
  font-size: 14px;
}

.bd-produit-page .bd-produit__marque {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #088EA0 !important;
}

/*
 * Nom, modèle et catégorie forment un seul bloc d'identification : ils se
 * suivent sans écart, comme sur la carte du catalogue. Seule la description
 * en est détachée, plus bas.
 */
/*
 * Aucun écart entre les lignes : modèle, numéro, collection, finition et
 * catégorie forment un bloc unique. Seule la première se détache du titre.
 */
.bd-produit-page .bd-produit__modele {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: #5A6B7B !important;
}

/*
 * Les lignes du bloc se suivent sans écart : elles forment un seul ensemble,
 * lu d'un trait. L'étiquette porte le gras, la valeur reste fine.
 */
.bd-produit-page .bd-produit__categorie {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: #5A6B7B !important;
}
.bd-produit-page .bd-produit__etiquette {
  font-weight: 600 !important;
  color: #3E4C5A !important;
}
/*
 * Le tiret sépare l'étiquette de sa valeur. Il est masqué aux lecteurs
 * d'écran : « N° manufacturier tiret M3551 » n'apporte rien à l'écoute.
 */
.bd-produit-page .bd-produit__tiret {
  font-weight: 300 !important;
  color: #5A6B7B !important;
}

/*
 * Sans modèle, c'est la catégorie qui suit directement le nom : elle reprend
 * alors l'écart, sinon elle se collerait au titre.
 */
.bd-produit-page .bd-fiche__nom + .bd-produit__modele { margin-top: 10px !important; }

/* L'écart avant la description est porté par la description elle-même. */
.bd-produit-page .bd-fiche__desc { margin-top: 18px !important; }

/* Le nom se colle à ce qui le suit. */
.bd-produit-page .bd-fiche__nom {
  margin: 0 !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.bd-produit-page .bd-fiche__desc,
.bd-produit-page .bd-fiche__desc p {
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: #5A6B7B !important;
}
/* wpautop enveloppe la description : son premier paragraphe rouvrirait
   l'écart que la catégorie vient de fixer. */
.bd-produit-page .bd-fiche__desc p:first-child { margin-top: 0 !important; }
.bd-produit-page .bd-fiche__desc p:last-child { margin-bottom: 0 !important; }

.bd-produit__action { margin: 22px 0 8px !important; }

.bd-produit__hote {
  margin: 0 !important;
  font-size: 12px !important;
  color: #94A3B2 !important;
}

/* Bloc « Autres produits » en bas de page */
.bd-produits--voisins {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #E3E8EE;
}
.bd-produits--voisins .bd-produits__titre { font-size: 17px !important; }

/* Vues secondaires d'un produit */
.bd-produit__vues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.bd-produit__vues li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bd-produit__vues li::before, .bd-produit__vues li::marker { content: none !important; display: none !important; }

.bd-produit__vue {
  display: block;
  padding: 4px !important;
  border: 2px solid #E3E8EE !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer;
  transition: border-color .12s ease;
}
.bd-produit__vue img {
  display: block;
  width: 62px;
  height: 52px;
  object-fit: contain;
}
.bd-produit__vue:hover { border-color: #B9C4CE !important; }
.bd-produit__vue.is-active { border-color: #4A5768 !important; }


/* En-tête de la grille : ce qui est affiché, et combien. */
.bd-produits__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E3E8EE;
}
.bd-produits .bd-produits__entete .bd-produits__intitule {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1E2A35 !important;
}
.bd-produits .bd-produits__entete .bd-produits__total {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #5A6B7B !important;
  white-space: nowrap;
}

.bd-produits__compte {
  margin: 0 0 16px !important;
  font-size: 13px !important;
  color: #6B7A88 !important;
}

/* Une carte masquée par les filtres ne doit pas occuper de place. */
.bd-produits__item[hidden] { display: none !important; }

/* Bouton du formulaire de filtres, aligné avec les menus */
/* Les filtres reprennent le dessin du répertoire ; seuls les boutons
   demandent un ajustement. */
.bd-produits .bd-recherche__actions a { text-decoration: none !important; }



.bd-produits__vide-liste {
  margin: 0 !important;
  padding: 30px 0;
  text-align: center;
  color: #6B7A88 !important;
  font-size: 15px !important;
}

/* Pagination de la grille de produits */
.bd-produits__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #E3E8EE;
}
.bd-produits__pages a { text-decoration: none !important; }

.bd-produits__pages-etat {
  font-size: 14px;
  color: #4A5768;
}
.bd-produits__pages-total { color: #94A3B2; }

/* =============================================================================
   Mise en page : barre latérale + grille
   =============================================================================
   Marques et catégories quittent le bandeau du haut pour la colonne de
   gauche, comme dans une boutique en ligne : on entre par la marque ou le
   type de pièce, et la grille se met à jour à droite.
   ========================================================================== */

.bd-produits__layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
}
.bd-produits__layout--seul { grid-template-columns: minmax(0, 1fr); }
.bd-produits__contenu { min-width: 0; }

/*
 * La colonne accompagne le défilement de la page.
 *
 * Elle était collée en haut de l'écran, avec sa propre barre de défilement
 * quand elle dépassait. Deux zones de défilement imbriquées sont
 * désagréables à la molette : on croit faire descendre la page et c'est la
 * colonne qui bouge. Elle se déroule maintenant avec le reste.
 */
.bd-produits .bd-produits__aside {
  position: static;
  max-height: none;
  overflow: visible;
}

/* Une colonne étroite ne peut plus porter deux champs côte à côte. */
.bd-produits .bd-produits__aside .bd-champs {
  display: block;
  margin-bottom: 20px;
}
.bd-produits .bd-produits__aside .bd-champ { margin-bottom: 16px; }
.bd-produits .bd-produits__aside .bd-champ label { font-size: 15px !important; }

/* Les listes de la barre latérale. */
.bd-facette { margin-bottom: 22px; }
.bd-facette__titre {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px !important;
  padding: 0 0 8px;
  border-bottom: 1px solid #E3E8EE;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1E2A35 !important;
}
/*
 * Les listes s'affichent en entier.
 *
 * Elles défilaient auparavant dans une hauteur fixe, ce qui évitait qu'une
 * centaine de marques repousse la grille — mais une barre de défilement
 * dans une colonne qui défile déjà était pénible, et cachait des entrées
 * sans le dire.
 */
.bd-facette__liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bd-facette__ligne {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  color: #1E2A35 !important;
  cursor: pointer;
}
.bd-facette__ligne:hover { background: #F1F5F8; }
.bd-facette__ligne input { flex: 0 0 auto; accent-color: #088EA0; }

/* Le <span> porte le texte : taille et graisse doivent y descendre aussi,
   un thème pouvant fixer les siennes sur les éléments en ligne. */
.bd-facette__ligne span {
  font-size: 15px !important;
  font-weight: 300 !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Entrées au-delà de la dixième, tant que « + » n'a pas été cliqué. */
.bd-facette__ligne.est-cachee { display: none !important; }

/*
 * Pendant une recherche, le repli du « + » ne s'applique plus : ce qui
 * correspond s'affiche, même au-delà du seuil. Seul le filtre de la recherche
 * masque, ce qui évite de chercher dans une liste amputée sans le savoir.
 */
.bd-facette.en-recherche .bd-facette__ligne.est-cachee:not(.est-filtree) {
  display: flex !important;
}
.bd-facette__ligne.est-filtree { display: none !important; }

.bd-facette__cherche {
  width: 100%;
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid #D5DCE5;
  border-radius: 5px;
  background: #fff;
  font-size: 14px;
  color: #1E2A35;
}
.bd-facette__cherche:focus {
  outline: none;
  border-color: #088EA0;
}

.bd-facette__vide {
  margin: 6px 0 0 8px !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #94A3B2 !important;
}

.bd-facette__plus {
  display: inline-block;
  margin: 6px 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #088EA0;
  cursor: pointer;
}
.bd-facette__plus:hover { text-decoration: underline; }

.bd-facette__reset {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px !important;
  color: #6B7A88 !important;
  text-decoration: underline !important;
}

@media (max-width: 900px) {
  /* La barre passe au-dessus de la grille, et cesse de suivre le défilement. */
  .bd-produits__layout { grid-template-columns: minmax(0, 1fr); }
  .bd-produits .bd-produits__aside .bd-champs { display: flex; }
}

/* =============================================================================
   Filtres des produits : même dessin que ceux du répertoire
   ========================================================================== */

.bd-produits .bd-recherche {
  margin: 0;
  padding: 22px;
  background: #fff;
  border-radius: 8px;
}

.bd-produits .bd-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 26px;
}
.bd-produits .bd-champ { flex: 0 1 260px; }

.bd-produits .bd-champ label {
  display: block !important;
  margin: 0 0 8px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.bd-produits .bd-champ input[type="text"] {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #D6DDE4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #1E2A35 !important;
  line-height: 40px !important;
}
.bd-produits .bd-champ input[type="text"]:focus {
  outline: none !important;
  border-color: #4A5768 !important;
}

.bd-produits .bd-groupe {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.bd-produits .bd-groupe__titre {
  display: block !important;
  width: 100%;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #C9D3DC;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Groupes repliables (marque, catégorie) : l'en-tête sert de bouton et
   porte le « + », qui bascule en « − » une fois le groupe ouvert. */
.bd-produits .bd-groupe--pli > summary.bd-groupe__titre {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bd-produits .bd-groupe--pli > summary.bd-groupe__titre::-webkit-details-marker { display: none; }
.bd-produits .bd-groupe__nom { flex: none; }
.bd-produits .bd-groupe__compte {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: #E7EDF2;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4A5768 !important;
}
.bd-produits .bd-groupe__actifs {
  flex: none;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #4A5768 !important;
}
/* Le « + » est poussé à droite : repère de pliage constant d'un groupe à l'autre. */
.bd-produits .bd-groupe--pli > summary.bd-groupe__titre::after {
  content: "+";
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #C9D3DC;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #4A5768;
}
.bd-produits .bd-groupe--pli[open] > summary.bd-groupe__titre::after { content: "−"; }
.bd-produits .bd-groupe--pli > summary.bd-groupe__titre:hover::after {
  background: #E7EDF2;
  border-color: #4A5768;
}

/* Ouverte, la liste défile au lieu de repousser le bouton « Rechercher »
   hors de l'écran. La hauteur laisse voir une dizaine de lignes. */
.bd-produits .bd-cases-zone {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 4px 0;
  border: 1px solid #E1E8ED;
  border-radius: 8px;
  overscroll-behavior: contain;
}
.bd-produits .bd-cases-zone::-webkit-scrollbar { width: 10px; }
.bd-produits .bd-cases-zone::-webkit-scrollbar-thumb {
  background: #C9D3DC;
  border-radius: 999px;
}
.bd-produits .bd-cases-zone::-webkit-scrollbar-track { background: transparent; }

/* Quatre colonnes, remplies verticalement : la liste des marques se lit
   de haut en bas plutôt qu'en zigzag. */
.bd-produits .bd-cases {
  column-count: 4;
  column-gap: 24px;
}
.bd-produits .bd-case {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px !important;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #1E2A35 !important;
  cursor: pointer;
  line-height: 1.3 !important;
}
.bd-produits .bd-case span { font-size: 15px !important; font-weight: 300 !important; }
.bd-produits .bd-case input[type="checkbox"] {
  flex: none;
  width: 17px !important;
  height: 17px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #4A5768;
  cursor: pointer;
}

.bd-produits .bd-recherche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.bd-produits .bd-recherche__actions a { text-decoration: none !important; }
.bd-produits .bd-recherche__actions button:hover { background: #2C3542 !important; }

@media (max-width: 1000px) { .bd-produits .bd-cases { column-count: 3; } }
@media (max-width: 760px)  { .bd-produits .bd-cases { column-count: 2; } }
@media (max-width: 480px) {
  .bd-produits .bd-cases { column-count: 1; }
  .bd-produits .bd-champ { flex: 1 1 100%; }
}

/* Un champ relié à une liste de suggestions affiche, sous Chrome, un petit
   triangle dans le coin. On le masque : les suggestions apparaissent de toute
   façon dès la saisie, et l'icône déséquilibrait le champ. */
.bd-produits input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
}

/* Grille en cours de rafraîchissement : un léger estompement suffit à
   signaler l'attente sans faire sauter la mise en page. */
.bd-produits__grille { transition: opacity .12s ease; }
.bd-produits__grille.is-charge { opacity: .45; }

/* Offre affichée sur la page d'un produit */
.bd-produit__offre {
  margin-top: 24px;
  padding: 20px 22px;
  background: #fff;
  border-radius: 8px;
}
.bd-produit__offre-titre {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.4 !important;
}
.bd-produit__offre .bd-produit__action { margin: 14px 0 0 !important; padding: 0 !important; }
.bd-produit__offre a { text-decoration: none !important; }

/*
 * Coordonnées de la fiche produit.
 *
 * Trois lignes séparées par un filet, comme la carte du bandeau de contact.
 * Chacune est cliquable : appeler, écrire, ou ouvrir une carte — le bouton
 * d'appel qu'elles remplacent ne servait qu'à qui téléphone depuis son mobile.
 */
.bd-produit__contact {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}
.bd-produit__contact .bd-produit__contact-ligne {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #EDF1F4;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
  color: #1E2A35 !important;
}
.bd-produit__contact .bd-produit__contact-ligne:first-child { padding-top: 4px; }
.bd-produit__contact .bd-produit__contact-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.bd-produit__contact .bd-produit__contact-ligne:hover { color: #077A8A !important; }
.bd-produit__contact-ico { flex: none; margin-top: 1px; color: #0A6C7A; line-height: 0; }
.bd-produit__contact .bd-produit__contact-ligne span span {
  display: block;
  color: inherit !important;
}

/* Pastille verte de disponibilité */
.bd-produit__pastille {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 50%;
  background: #22A45D;
  /* Halo léger : la pastille se détache du texte sans l'alourdir. */
  box-shadow: 0 0 0 3px rgba(34, 164, 93, .18);
  vertical-align: middle;
}

/*
 * Adresse du point de vente : collée au reste du bloc, comme les autres
 * lignes. L'encadré blanc porte déjà son propre rembourrage — un écart de
 * plus s'y ajoutait sans rien séparer d'utile.
 */
/*
 * L'adresse est détachée du titre : c'est une autre information, et sans
 * cet écart les deux lignes se lisaient comme une seule phrase.
 */
.bd-produit__offre-lieu {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: #5A6B7B !important;
}

/* ------------------------------------------------------------------ */
/* Listes de marques et de catégories — [marques_spa], [categories_spa] */
/* ------------------------------------------------------------------ */

.bd-valeurs { margin: 0 0 28px; }
.bd-valeurs__titre {
  margin: 0 0 14px !important;
  padding: 0 0 10px;
  border-bottom: 1px solid #E1E8ED;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1F2A37 !important;
}

/* Colonnes remplies verticalement : la liste se lit de haut en bas,
   comme les cases à cocher du formulaire. Le nombre vient du shortcode. */
.bd-valeurs__liste {
  column-gap: 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.bd-valeurs__item {
  break-inside: avoid;
  margin: 0 0 2px !important;
  padding: 0 !important;
  list-style: none !important;
}
.bd-valeurs__item::before { content: none !important; }
.bd-valeurs__item a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  text-decoration: none !important;
  color: #2F6F8F !important;
  line-height: 1.35;
}
.bd-valeurs__item a:hover {
  background: #EFF3F7;
  color: #1F2A37 !important;
}
.bd-valeurs__compte {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #E7EDF2;
  font-size: 12px;
  font-weight: 600;
  color: #4A5768;
}

@media (max-width: 900px) {
  .bd-valeurs__liste { column-count: 2 !important; }
}
@media (max-width: 560px) {
  .bd-valeurs__liste { column-count: 1 !important; }
}

/* ------------------------------------------------------------------ */
/* Grille de logos de marques — [logos_marques_spa]                     */
/* ------------------------------------------------------------------ */

/* Même panneau gris que le catalogue : les cases blanches y ressortent. */
.bd-logos {
  margin: 0 0 28px;
  padding: 26px;
  background: #F4F5F6;
  border-radius: 10px;
}
.bd-logos *, .bd-logos *::before, .bd-logos *::after { box-sizing: border-box; }
/*
 * En-tête du bandeau : titre à gauche, lien à droite.
 *
 * Sur une page d'accueil, le bandeau doit se lire en une seconde — d'où
 * l'intitulé court et le lien de sortie posé à l'opposé, là où l'œil finit
 * sa course.
 */
.bd-logos .bd-logos__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 16px;
}
.bd-logos .bd-logos__ico {
  flex: none;
  margin-right: 8px;
  color: #94A3B2;
  vertical-align: -3px;
}
.bd-logos .bd-logos__tout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #088EA0 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.bd-logos .bd-logos__tout:hover { text-decoration: underline !important; }

/* Le trait de séparation passe sur l'en-tête entier, titre et lien compris. */
.bd-logos .bd-logos__entete {
  padding-bottom: 12px;
  border-bottom: 1px solid #E7EBEF;
}
.bd-logos__titre {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1F2A37 !important;
}

/* Le nombre de colonnes vient du shortcode, par variable CSS. */
.bd-logos__grille {
  display: grid;
  grid-template-columns: repeat(var(--bd-logos-colonnes, 4), minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Hauteur fixe : les logos ont des proportions très inégales, et sans
   contrainte commune les rangées seraient bancales. L'image s'inscrit
   dans la case sans se déformer ni se rogner. */
.bd-logos .bd-logos__case {
  display: flex;
  align-items: center;
  justify-content: center;
  /* line-height nul : un thème qui impose 1,7 aux liens réserverait de la
     place sous l'image, alors qu'aucun texte n'y figure. */
  line-height: 0;
  /* La hauteur exclut la marge : régler l'une n'écrase pas l'autre, et le
     logo garde la même respiration quand la case grandit. */
  box-sizing: content-box;
  height: var(--bd-logos-hauteur, 110px);
  padding: var(--bd-logos-marge, 22px);
  border: 1px solid #E1E8ED;
  border-radius: 10px;
  background: #FFFFFF;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bd-logos .bd-logos__case:hover {
  border-color: #C9D3DC;
  box-shadow: 0 2px 10px rgba(31, 42, 55, .08);
}
/*
 * Le logo est centré, sans rien sous lui.
 *
 * Beaucoup de thèmes posent une marge basse sur toutes les images, souvent
 * avec !important : le logo se retrouvait poussé vers le haut de sa case,
 * et l'écart passait pour un défaut de centrage. La règle nomme donc le
 * conteneur et la case pour passer devant, et remet marge et rembourrage
 * à zéro.
 */
/*
 * Tous les logos à la même échelle, et de l'air autour.
 *
 * Deux réglages en un. D'abord l'échelle : avec des dimensions laissées
 * libres, un fichier de 120 px s'affichait à 120 px et un autre de 600 px
 * remplissait sa case — deux marques voisines paraissaient d'importance très
 * inégale, alors que seule la définition des fichiers différait.
 *
 * Ensuite la place occupée : remplir la case entière donnait des logos
 * envahissants. Chacun s'inscrit donc dans une boîte plus petite, commune à
 * tous, qui laisse respirer le cadre. « contain » l'y ajuste sans le
 * déformer ni le rogner.
 */
.bd-logos .bd-logos__case img {
  display: block !important;
  width: var(--bd-logos-boite-l, 60%) !important;
  height: var(--bd-logos-boite-h, 60%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: middle !important;
  object-fit: contain;
}
/*
 * Case sans logo : le nom et sa mention, empilés au centre.
 *
 * Le bloc occupe toute la case pour que le texte se cale au milieu, comme le
 * ferait une image — sans quoi il s'appuierait en haut à gauche et la grille
 * paraîtrait bancale dès qu'un logo manque.
 */
.bd-logos .bd-logos__sansimage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
}
.bd-logos .bd-logos__nom {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #4A5768 !important;
}
.bd-logos .bd-logos__attente {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  color: #9AA6B4 !important;
}
.bd-logos--sombre .bd-logos__attente,
.bd-logos .bd-logos__case--sombre .bd-logos__attente { color: #8C9AA8 !important; }

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

/* Fond commun des cases, réglé par l'attribut « fond » du shortcode. */
.bd-logos--gris .bd-logos__case { background: #F1F4F7; border-color: #E1E8ED; }
.bd-logos--sombre .bd-logos__case { background: #1F2A37; border-color: #2C3A4B; }
.bd-logos--sombre .bd-logos__nom { color: #E7EDF2 !important; }

/* Cas particuliers, marque par marque. Un logo blanc reste lisible sur
   fond sombre ; l'inversion sert aux logos noirs sur fond sombre commun. */
.bd-logos .bd-logos__case--sombre {
  background: #1F2A37;
  border-color: #2C3A4B;
}
.bd-logos .bd-logos__case--sombre .bd-logos__nom { color: #E7EDF2 !important; }
.bd-logos .bd-logos__case--clair { background: #FFFFFF; border-color: #E1E8ED; }

/* L'inversion convient aux logos d'une seule couleur : un blanc devient
   noir. Sur un logo en couleurs, elle fausserait les teintes. */
.bd-logos .bd-logos__case--invert img { filter: invert(1) grayscale(1); }

/* ------------------------------------------------------------------ */
/* Catégories et marques illustrées                                    */
/* — [images_categories_spa], [images_marques_spa]                     */
/* ------------------------------------------------------------------ */

.bd-vignettes { margin: 0 0 28px; }
.bd-vignettes__titre {
  margin: 0 0 16px !important;
  padding: 0 0 10px;
  border-bottom: 1px solid #E1E8ED;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1F2A37 !important;
}
.bd-vignettes__grille {
  display: grid;
  grid-template-columns: repeat(var(--bd-vignettes-colonnes, 4), minmax(0, 1fr));
  gap: 18px;
}

.bd-vignette {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #E1E8ED;
  border-radius: 10px;
  background: #FFFFFF;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bd-vignette:hover {
  border-color: #C9D3DC;
  box-shadow: 0 2px 12px rgba(31, 42, 55, .09);
}

/* Hauteur d'image commune : les photos de pièces ont des proportions très
   variées, et sans cadre fixe les cartes d'une rangée seraient inégales.
   « contain » plutôt que « cover » : une pièce détourée ne doit pas être
   rognée, quitte à laisser de l'air autour. */
.bd-vignette__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--bd-vignettes-hauteur, 180px);
  padding: 14px;
  background: #F7FAFC;
  border-bottom: 1px solid #E1E8ED;
}
.bd-vignette__image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.bd-vignette__vide {
  font-size: 13px;
  color: #9AA7B4;
}

.bd-vignette__nom {
  padding: 12px 14px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #1F2A37 !important;
}
.bd-vignette__compte {
  padding: 4px 14px 14px;
  font-size: 13px;
  color: #6B7A88 !important;
}

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

/* Quand le produit n'a pas de modèle, la catégorie remonte à sa place. */

/* =============================================================================
   Marques et leurs collections
   =============================================================================
   Une marque par ligne : son logo, puis ses collections réparties en
   colonnes. Les cartes côte à côte obligeaient à lire en serpentin — une
   marque à gauche, la suivante à droite, et des hauteurs inégales partout.
   Ici chaque marque occupe toute la largeur et se lit d'un trait.
   ========================================================================== */

/*
 * Même cadre que le catalogue : un panneau gris à coins arrondis, dans
 * lequel les cartes blanches ressortent. Sans lui, ces blocs flottaient sur
 * le fond de la page et paraissaient venir d'ailleurs.
 */
.bd-mc {
  margin: 0 0 34px;
  padding: 26px;
  background: #F4F5F6;
  border-radius: 10px;
  color: #1E2A35;
}
.bd-mc *, .bd-mc *::before, .bd-mc *::after { box-sizing: border-box; }

/*
 * Taille de base de la page : 15 px.
 *
 * Sans elle, chaque élément dépendait de ce que le thème impose à son
 * conteneur, et deux blocs voisins pouvaient ne pas avoir la même échelle.
 */
.bd-mc, .bd-mc * {
  font-size: 15px;
  line-height: 1.5;
}


.bd-mc .bd-mc__titre {
  margin: 0 0 22px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1E2A35 !important;
}

.bd-mc__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.bd-mc .bd-mc__bloc {
  min-width: 0;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #E7EBEF;
  border-radius: 8px;
}

/* Le logo est à gauche, à hauteur fixe : la ligne de titre garde la même
   allure d'une marque à l'autre, quelles que soient les proportions. */
/*
 * Le logo reprend la taille de la grille d'accueil : une hauteur d'environ
 * 88 px, largeur libre. Les deux affichages se ressemblent, et un visiteur
 * qui passe de l'un à l'autre reconnaît les mêmes marques.
 */
.bd-mc .bd-mc__marque {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  height: 88px;
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid #EEF2F5;
  line-height: 0;
  text-decoration: none !important;
}
.bd-mc .bd-mc__marque img {
  display: block !important;
  width: auto !important;
  max-width: 240px !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: left center;
}
.bd-mc .bd-mc__nom {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .05em;
  color: #088EA0 !important;
  text-transform: uppercase;
}

/*
 * Les collections coulent en colonnes.
 *
 * Une grille figée laisserait des colonnes à moitié vides quand une marque
 * n'a que trois gammes ; le multi-colonnes remplit ce qu'il faut et s'arrête.
 */
.bd-mc .bd-mc__liste {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  column-count: var(--bd-mc-colonnes, 4);
  column-gap: 28px;
}
.bd-mc .bd-mc__liste li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* Sans cela, une entrée peut se couper en deux d'une colonne à l'autre. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.bd-mc .bd-mc__liste li::before,
.bd-mc .bd-mc__liste li::marker {
  content: none !important;
  display: none !important;
}

.bd-mc .bd-mc__liste a {
  display: block !important;
  padding: 4px 0 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.45 !important;
  color: #5A6B7B !important;
  text-decoration: none !important;
}
.bd-mc .bd-mc__liste a:hover { color: #088EA0 !important; }

.bd-mc .bd-mc__nb {
  margin-left: 6px;
  font-size: 13px !important;
  color: #A9B4BF !important;
}

.bd-mc .bd-mc__plus {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #088EA0 !important;
  text-decoration: none !important;
}
.bd-mc .bd-mc__plus:hover { text-decoration: underline !important; }

.bd-mc .bd-mc__vide {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #A9B4BF !important;
}

@media (max-width: 900px) {
  .bd-mc .bd-mc__liste { column-count: 2; }
}
@media (max-width: 560px) {
  .bd-mc .bd-mc__liste { column-count: 1; }
  .bd-mc .bd-mc__bloc { padding: 16px; }
}

/* =============================================================================
   Collections populaires
   =============================================================================
   Une vitrine : la photo d'abord, le nom ensuite. Le visiteur reconnaît un
   style avant de lire un nom de gamme, et c'est par là qu'il entre.
   ========================================================================== */

/* Même panneau gris que le catalogue et la liste des collections. */
.bd-pop {
  margin: 0 0 34px;
  padding: 26px;
  background: #F4F5F6;
  border-radius: 10px;
  color: #1E2A35;
}
.bd-pop *, .bd-pop *::before, .bd-pop *::after { box-sizing: border-box; }
.bd-pop, .bd-pop * { font-family: var(--bd-boutique-font) !important; }

.bd-pop .bd-pop__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E7EBEF;
}
.bd-pop .bd-pop__titre {
  display: flex;
  align-items: center;
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1F2A37 !important;
}
.bd-pop .bd-pop__ico { flex: none; margin-right: 8px; color: #94A3B2; }

/*
 * Logo du fabricant en tête de vitrine.
 *
 * Hauteur fixe, largeur libre : les logos ont des proportions très inégales,
 * et les caler sur la largeur donnerait un logotype minuscule à côté d'un
 * logo carré démesuré.
 */
.bd-pop .bd-pop__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-right: 14px;
  line-height: 0;
}
.bd-pop .bd-pop__logo img {
  display: block !important;
  width: auto !important;
  max-width: 240px !important;
  height: 58px !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: left center;
}

/* Le logo et le titre forment un seul groupe, le lien reste à l'opposé. */
.bd-pop .bd-pop__entete { flex-wrap: wrap; }
.bd-pop .bd-pop__tout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #088EA0 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.bd-pop .bd-pop__tout:hover { text-decoration: underline !important; }

/*
 * Phrase sous la grille.
 *
 * Un filet la sépare des cases : posée juste dessous sans rien, elle se lit
 * comme la légende de la dernière carte plutôt que comme un mot sur
 * l'ensemble.
 */
.bd-pop .bd-pop__note {
  margin: 22px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid #E7EBEF;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: #5A6B7B !important;
}

/* Le bouton de dépliage doit ressembler au lien qu'il remplace. */
.bd-pop button.bd-pop__tout {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/*
 * Vitrine dépliée : la bande redevient une grille.
 *
 * Les flèches et le calage latéral n'ont plus lieu d'être — il n'y a plus
 * rien à faire glisser.
 */
/*
 * Vitrine dépliée : même raisonnement que les rayons. La largeur du bloc
 * commande, pas celle de l'écran.
 */
.bd-pop.est-deplie .bd-pop__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  overflow: visible;
}

@supports (container-type: inline-size) {
  .bd-pop { container-type: inline-size; }

  @container (min-width: 1000px) {
    .bd-pop.est-deplie .bd-pop__grille {
      grid-template-columns: repeat(var(--bd-pop-colonnes, 5), minmax(0, 1fr));
    }
  }
}
.bd-pop.est-deplie .bd-pop__case { flex-basis: auto; }
.bd-pop.est-deplie .bd-pop__fleche { display: none; }

@media (max-width: 1100px) {
  .bd-pop.est-deplie .bd-pop__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bd-pop.est-deplie .bd-pop__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bd-pop.est-deplie .bd-pop__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/*
 * Sous 460 pixels : une seule colonne, comme les cartes de catégories.
 *
 * Deux cases sur un téléphone laissent moins de cent cinquante pixels à
 * chacune : la photo n'est plus qu'une vignette, et « par American Standard »
 * s'étale sur trois lignes.
 */
@media (max-width: 460px) {
  .bd-pop__grille { grid-template-columns: minmax(0, 1fr); }
  .bd-pop.est-deplie .bd-pop__grille { grid-template-columns: minmax(0, 1fr); }
}

.bd-pop__grille {
  display: grid;
  grid-template-columns: repeat(var(--bd-pop-colonnes, 5), minmax(0, 1fr));
  gap: 16px;
}

.bd-pop .bd-pop__case {
  display: block !important;
  min-width: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #E7EBEF;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
.bd-pop .bd-pop__case:hover {
  box-shadow: 0 6px 18px rgba(31, 42, 55, .09);
  transform: translateY(-2px);
}

/*
 * La vignette garde le même rapport pour toutes les cases : sans hauteur
 * imposée, une photo carrée et une photo panoramique donneraient des cases
 * de tailles différentes sur la même rangée.
 */
.bd-pop .bd-pop__vignette {
  position: relative;
  display: block;
  width: 100%;
  padding-top: var(--bd-pop-ratio, 105%);
  background: #fff;
  border-bottom: 1px solid #F1F4F7;
  overflow: hidden;
}
/*
 * L'image est posée au centre, sans remplir la case.
 *
 * En « cover », elle était agrandie jusqu'à occuper toute la vignette et
 * rognée sur les côtés : un robinet perdait son bec ou sa base. « contain »
 * la montre entière, et la marge intérieure l'empêche de toucher les bords.
 */
/*
 * Même échelle que les cartes de catégories : 60 % de la case, 20 % de
 * retrait de chaque côté. Le retrait vaut toujours la moitié de ce qui reste,
 * sans quoi l'image se colle dans un coin au lieu d'être centrée.
 */
.bd-pop .bd-pop__vignette img {
  position: absolute;
  inset: 20%;
  width: 60% !important;
  height: 60% !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: center;
}

/*
 * Le compte se pose sur la photo, à droite : à gauche, il tombait sur le
 * produit lui-même, que les photos de catalogue cadrent presque toujours au
 * centre-gauche. À droite, il se pose sur le fond.
 */
.bd-pop .bd-pop__compte {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: #088EA0;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: #fff !important;
}

/*
 * Bandeau sombre au pied de la case.
 *
 * Il court d'un bord à l'autre, sans marge latérale : une bande qui s'arrête
 * avant les côtés laisse deux liserés blancs et donne l'impression d'une
 * erreur d'alignement. Les marges passent donc à l'intérieur, en rembourrage.
 */
.bd-pop .bd-pop__nom {
  display: block;
  margin: 0 !important;
  padding: 4% 5% 0;
  background: #1E2A35;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #fff !important;
}
.bd-pop .bd-pop__marque {
  display: block;
  margin: 0 !important;
  padding: 0 5% 4%;
  background: #1E2A35;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
  color: #C9D3DC !important;
}

@media (max-width: 1100px) { .bd-pop__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .bd-pop__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .bd-pop__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* =============================================================================
   Vitrine en bande défilante
   =============================================================================
   Une seule ligne qui glisse latéralement, plutôt qu'une grille qui s'étale
   sur huit rangées. Le défilement au doigt ou à la molette fonctionne sans
   JavaScript ; les flèches ne font qu'ajouter le confort de la souris.
   ========================================================================== */

.bd-pop__piste { position: relative; }

.bd-pop--bande .bd-pop__grille {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* La barre de défilement est masquée : les flèches et le glissement au
     doigt suffisent, et une barre sous les cartes alourdit la bande. */
  scrollbar-width: none;
}
.bd-pop--bande .bd-pop__grille::-webkit-scrollbar { display: none; }

/*
 * Largeur d'une case : la place disponible divisée par le nombre de colonnes,
 * gouttières déduites. « flex: 0 0 » l'empêche de rétrécir pour faire entrer
 * toute la série — c'est précisément ce qu'on ne veut pas ici.
 *
 * Un plancher de 210 pixels prime sur le calcul : dans une bande étroite,
 * cinq colonnes donneraient des cases de soixante pixels. « max() » retient
 * la plus grande des deux valeurs.
 *
 * Ce seuil est mesuré, non choisi au hasard : à 1200 pixels de large, cinq
 * colonnes font 227 pixels. Un plancher à 240 les aurait ramenées à quatre
 * sur un écran d'ordinateur ordinaire — le réglage du shortcode aurait cessé
 * d'être respecté là où il a justement du sens.
 */
.bd-pop--bande .bd-pop__case {
  flex: 0 0 max(
    min(100%, 210px),
    calc((100% - (var(--bd-pop-colonnes, 5) - 1) * 16px) / var(--bd-pop-colonnes, 5))
  );
  scroll-snap-align: start;
}

/*
 * Bande étroite : une seule case à la fois.
 *
 * Deux cases de deux cents pixels tiennent dans un téléphone, mais le nom et
 * le fabricant s'y chevauchent et la photo n'est plus lisible. La mesure
 * porte sur le bloc, non sur la fenêtre : une vitrine dans une colonne
 * étroite se comporte comme sur un téléphone, ce qui est bien ce qu'on veut.
 *
 * 86 % laisse voir le bord de la suivante — sans cet indice, on ne devine pas
 * que la bande glisse.
 */
@supports (container-type: inline-size) {
  @container (max-width: 560px) {
    .bd-pop--bande .bd-pop__case { flex: 0 0 86%; }
  }
}

.bd-pop .bd-pop__fleche {
  position: absolute;
  top: 38%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #E1E8ED;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(31, 42, 55, .12);
  font-size: 22px;
  line-height: 1;
  color: #1E2A35;
  cursor: pointer;
}
.bd-pop .bd-pop__fleche:hover { border-color: #C9D3DC; }
.bd-pop .bd-pop__fleche--avant { left: -14px; }
.bd-pop .bd-pop__fleche--apres { right: -14px; }

/* Une flèche qui ne mène nulle part n'a pas à s'afficher. */
.bd-pop .bd-pop__fleche[hidden] { display: none; }


/* -----------------------------------------------------------------------------
   Écrans étroits
   -----------------------------------------------------------------------------
   Le panneau gris mangeait 26 px de chaque côté, l'en-tête se cassait en deux
   lignes, et les cases restaient trop larges pour qu'on devine la suivante.
   Sur un téléphone, une bande ne se lit bien que si le bord de la case
   suivante dépasse : c'est ce qui dit qu'il y a autre chose à voir.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .bd-pop {
    padding: 16px 0 16px 16px;
    border-radius: 10px;
  }

  /* L'en-tête garde sa marge droite, la bande file jusqu'au bord. */
  .bd-pop .bd-pop__entete {
    flex-wrap: nowrap;
    gap: 10px;
    margin-right: 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  /*
   * Le lien passe sous le titre.
   *
   * Il était posé à côté, le titre cédant la place en points de suspension :
   * « Collections populaires robinets de cuisine » devenait « Collections
   * populaire… », ce qui ne dit plus de quoi il s'agit. Une ligne de plus
   * coûte moins cher qu'un titre amputé.
   */
  .bd-pop .bd-pop__entete { flex-wrap: wrap; }
  .bd-pop .bd-pop__titre {
    min-width: 0;
    flex-basis: 100%;
    font-size: 16px !important;
    overflow: visible;
    white-space: normal;
  }
  .bd-pop .bd-pop__tout { flex: none; font-size: 13px !important; }
  .bd-pop .bd-pop__logo img { height: 40px !important; }

  /*
   * Les flèches restent affichées sur écran étroit.
   *
   * Elles étaient masquées au motif qu'un doigt fait glisser la bande — mais
   * rien ne dit au visiteur qu'elle glisse, et une case coupée au bord ne
   * suffit pas toujours à le faire comprendre. Elles sont ramenées à
   * l'intérieur du panneau, faute de place à l'extérieur.
   */
  .bd-pop .bd-pop__fleche { width: 34px; height: 34px; font-size: 20px; }
  .bd-pop .bd-pop__fleche--avant { left: 2px; }
  .bd-pop .bd-pop__fleche--apres { right: 2px; }

  .bd-pop--bande .bd-pop__grille {
    gap: 12px;
    /* Un peu d'air à droite, pour que la dernière case ne colle pas au bord. */
    padding-right: 16px;
    scroll-snap-type: x mandatory;
  }

  .bd-pop .bd-pop__nom { font-size: 14px !important; }
  .bd-pop .bd-pop__marque { font-size: 13px !important; }
  .bd-pop .bd-pop__compte {
    right: 6px;
    bottom: 6px;
    padding: 6px 10px;
    font-size: 12px !important;
  }
}



/* =============================================================================
   Rayons illustrés
   =============================================================================
   Photo en haut, texte au milieu, bouton sombre en pied. La carte entière
   est cliquable : le pied ressemble à un bouton, mais viser un bouton de
   trois centimètres au doigt est pénible — toute la surface répond.
   ========================================================================== */

.bd-rayons {
  margin: 0 0 34px;
  padding: 26px;
  background: #F4F5F6;
  border-radius: 10px;
}
.bd-rayons, .bd-rayons * { font-family: var(--bd-boutique-font) !important; }
.bd-rayons *, .bd-rayons *::before, .bd-rayons *::after { box-sizing: border-box; }

/* En-tête à deux bouts, comme les autres vitrines. */
.bd-rayons .bd-rayons__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E7EBEF;
}
.bd-rayons .bd-rayons__titre {
  display: flex;
  align-items: center;
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1F2A37 !important;
}
.bd-rayons .bd-rayons__ico { flex: none; margin-right: 8px; color: #94A3B2; }
.bd-rayons .bd-rayons__tout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #088EA0 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.bd-rayons .bd-rayons__tout:hover { text-decoration: underline !important; }

/*
 * Le nombre de colonnes suit la place disponible, pas la taille de l'écran.
 *
 * Les règles d'écran ne voient que la fenêtre du navigateur : dans une
 * colonne étroite d'un thème, ou dans un aperçu, elles laissaient six cases
 * côte à côte sur trois cents pixels. « auto-fill » raisonne sur la largeur
 * réelle du bloc, et « min(100%, 240px) » garantit qu'une case ne descend
 * jamais sous deux cent quarante pixels — au-dessous, la photo n'est plus
 * qu'une vignette et les noms longs s'empilent sur cinq lignes. Sur un
 * téléphone de 390 pixels, cela donne bien une seule colonne.
 *
 * La variable garde son rôle : elle borne le maximum sur les grands écrans.
 */
.bd-rayons__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Au-delà de la place nécessaire, on s'en tient au nombre demandé. */
@supports (container-type: inline-size) {
  .bd-rayons { container-type: inline-size; }

  @container (min-width: 1000px) {
    .bd-rayons__grille {
      grid-template-columns: repeat(var(--bd-rayons-colonnes, 6), minmax(0, 1fr));
    }
  }
}

.bd-rayons .bd-rayons__case {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E7EBEF;
  border-radius: 10px;
  text-decoration: none !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
.bd-rayons .bd-rayons__case:hover {
  box-shadow: 0 6px 18px rgba(31, 42, 55, .1);
  transform: translateY(-2px);
}

.bd-rayons .bd-rayons__photo {
  position: relative;
  display: block;
  width: 100%;
  padding-top: var(--bd-rayons-ratio, 88%);
  background: #fff;
  border-bottom: 1px solid #F1F4F7;
  overflow: hidden;
}
/*
 * L'image occupe 60 % de la case, centrée.
 *
 * « inset » doit valoir la moitié de ce qui reste — 20 % de chaque côté pour
 * une image de 60 % — sinon elle est décalée : c'est le retrait qui la place,
 * pas la largeur. Poser 8 % de retrait sur une image de 60 % la collerait en
 * haut à gauche.
 */
.bd-rayons .bd-rayons__photo img {
  position: absolute;
  inset: 20%;
  width: 60% !important;
  height: 60% !important;
  margin: 0 !important;
  object-fit: contain;
}

/*
 * Nombre d'articles, en pastille sur la photo — comme les collections
 * populaires. Posée à droite : les photos de catalogue cadrent presque
 * toujours le produit au centre-gauche, et la pastille tombait dessus.
 */
.bd-rayons .bd-rayons__compte {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: #088EA0;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: #fff !important;
}

/*
 * Bandeau sombre, identique à celui des cartes de collections.
 *
 * Il s'étire pour occuper la place restante sous la photo : les cartes d'une
 * même rangée finissent alors à la même hauteur, quelle que soit la longueur
 * des noms. Le texte est aligné à gauche, comme partout ailleurs.
 */
.bd-rayons .bd-rayons__corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 16px 14px !important;
  background: #1E2A35;
  text-align: left;
}
.bd-rayons .bd-rayons__nom {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #fff !important;
}
.bd-rayons .bd-rayons__texte {
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
  color: #C9D3DC !important;
}
.bd-rayons .bd-rayons__invite {
  margin-top: 8px;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
  color: #7FD3DE !important;
}
.bd-rayons .bd-rayons__case:hover .bd-rayons__invite { color: #A9E3EB !important; }

@media (max-width: 640px)  {
  .bd-rayons { padding: 16px; }
  .bd-rayons .bd-rayons__entete { flex-wrap: nowrap; }
  .bd-rayons .bd-rayons__titre {
    min-width: 0;
    font-size: 16px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bd-rayons .bd-rayons__tout { flex: none; font-size: 13px !important; }
  .bd-rayons__grille { gap: 10px; }
  /* Le titre et son lien ne tiennent plus côte à côte : le lien passe
     dessous plutôt que d'écraser le titre en points de suspension. */
  .bd-rayons .bd-rayons__entete { flex-wrap: wrap; }
  .bd-rayons .bd-rayons__titre { white-space: normal; overflow: visible; }
  .bd-rayons .bd-rayons__corps { padding: 12px !important; }
  .bd-rayons .bd-rayons__nom,
  .bd-rayons .bd-rayons__texte,
  .bd-rayons .bd-rayons__invite { font-size: 14px !important; }
  .bd-rayons .bd-rayons__compte {
    right: 6px;
    bottom: 6px;
    padding: 6px 10px;
    font-size: 12px !important;
  }
}





/* =============================================================================
   Barre de filtres et fenêtre
   =============================================================================
   Un seul bouton ouvre une fenêtre qui porte tous les groupes. Une colonne
   latérale mange un quart de la largeur en permanence, alors qu'un client ne
   s'en sert qu'au début de sa visite.
   ========================================================================== */

.bd-barre {
  margin: 0 0 22px;
  padding: 14px;
  background: #fff;
  border: 1px solid #E7EBEF;
  border-radius: 10px;
}
.bd-barre__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.bd-barre .bd-barre__ouvrir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid #10202C;
  border-radius: 8px;
  background: #10202C;
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.bd-barre .bd-barre__ouvrir:hover { background: #1B3040; }

.bd-barre__compte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #088EA0;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.bd-barre__recherche {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
}
.bd-barre__recherche svg {
  position: absolute;
  left: 14px;
  color: #8996A4;
  pointer-events: none;
}
.bd-barre .bd-barre__recherche input {
  width: 100%;
  padding: 12px 14px 12px 42px !important;
  border: 1px solid #D9E0E7 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 15px !important;
  color: #1E2A35 !important;
}
.bd-barre .bd-barre__recherche input:focus { outline: none; border-color: #088EA0 !important; }

/*
 * Étiquette d'un filtre actif dont le groupe n'est pas affiché.
 *
 * Elle porte une croix : un filtre qu'on ne peut pas retirer enferme le
 * visiteur dans une sélection dont il ignore l'existence.
 */
.bd-barre__actifs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bd-barre .bd-barre__actif {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #B7E3EA;
  border-radius: 999px;
  background: #EAF7F9;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0A6C7A !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.bd-barre .bd-barre__actif:hover { background: #DCF1F5; }
.bd-barre .bd-barre__actif span { font-size: 16px; line-height: 1; }

.bd-barre .bd-barre__reset {
  padding: 11px 14px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #5A6B7B !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.bd-barre .bd-barre__reset:hover { color: #088EA0 !important; }

/* -----------------------------------------------------------------------------
   Fenêtre
   -------------------------------------------------------------------------- */

/*
 * La fenêtre est fixée à l'écran, non à la page.
 *
 * « inset: 0 » la cale sur les quatre bords de la fenêtre du navigateur : le
 * centrage tient donc quel que soit l'endroit où l'on avait fait défiler la
 * page. Le thème peut placer le catalogue n'importe où, cela ne la déplace
 * pas.
 */
.bd-modale {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bd-modale[hidden] { display: none; }

.bd-modale__voile {
  position: absolute;
  inset: 0;
  background: rgba(13, 29, 41, .55);
}

.bd-modale__boite {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Assez large pour trois colonnes de cases sans les serrer. */
  max-width: 1100px;
  max-height: 88vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(13, 29, 41, .3);
  overflow: hidden;
}

.bd-modale__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #E7EBEF;
}
.bd-modale .bd-modale__titre {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1E2A35 !important;
}
.bd-modale .bd-modale__fermer {
  padding: 0 6px;
  border: 0;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: #8996A4;
  cursor: pointer;
}
.bd-modale .bd-modale__fermer:hover { color: #1E2A35; }

/*
 * Seul le corps défile : l'en-tête et le pied restent en vue, sans quoi le
 * bouton « Voir les produits » se perdrait sous huit cents collections.
 */
.bd-modale__corps {
  flex: 1;
  overflow-y: auto;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 32px;
  align-content: start;
}

.bd-modale__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid #E7EBEF;
  background: #FAFBFC;
}
.bd-modale__etat {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #5A6B7B !important;
}
.bd-modale .bd-modale__valider {
  padding: 13px 24px;
  border: 0;
  border-radius: 8px;
  background: #088EA0;
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  cursor: pointer;
}
.bd-modale .bd-modale__valider:hover { background: #077A8A; }

.bd-modale .bd-facette__titre {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1000px) {
  .bd-modale__corps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .bd-barre { padding: 12px; }
  .bd-barre__recherche { order: -1; flex-basis: 100%; }
  /* Sur un téléphone, la fenêtre prend l'écran entier : une boîte centrée
     avec des marges y perdrait la moitié de la place utile. */
  .bd-modale { padding: 0; }
  .bd-modale__boite { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .bd-modale__corps { grid-template-columns: minmax(0, 1fr); padding: 18px; }
}


/* =============================================================================
   Recherche en langage courant
   ========================================================================== */

.bd-ria { margin: 0 0 34px; }
.bd-ria, .bd-ria * { font-family: var(--bd-boutique-font) !important; }
.bd-ria *, .bd-ria *::before, .bd-ria *::after { box-sizing: border-box; }

/*
 * Bannière en deux moitiés : présentation à gauche, champ à droite.
 *
 * Le dégradé part du blanc et s'éteint vers la droite, où la photo prend le
 * relais : un fond uni sous le texte, quelle que soit l'image choisie.
 */
.bd-ria__banniere {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  padding: 34px 40px;
  border: 1px solid #DCE7EA;
  border-radius: 12px;
  background: linear-gradient(120deg, #F2FAFB 0%, #EAF6F8 55%, #E4F2F5 100%);
}
.bd-ria__banniere.a-image {
  position: relative;
  background-image: var(--bd-ria-image);
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}
.bd-ria__banniere.a-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #F2FAFB 0%, rgba(242, 250, 251, .97) 40%, rgba(234, 246, 248, .72) 58%, rgba(234, 246, 248, 0) 78%);
}
/*
 * Photo portant déjà son dégradé : aucun voile.
 *
 * Superposer le nôtre délaverait la couleur au lieu de l'éclaircir — deux
 * transparences ne s'additionnent pas, elles se ternissent.
 */
.bd-ria__banniere.sans-voile::before { content: none; }

/*
 * Sans voile, le texte repose sur la photo elle-même : les gris moyens qui
 * suffisaient sur un fond très clair y perdent leur lisibilité. Tout est
 * ramené vers le foncé, y compris les lignes secondaires.
 */
.bd-ria__banniere.sans-voile .bd-ria__soustitre,
.bd-ria__banniere.sans-voile .bd-ria__atout-texte span { color: #1B2A33 !important; }
.bd-ria__banniere.sans-voile .bd-ria__atout-texte strong,
.bd-ria__banniere.sans-voile .bd-ria__titre { color: #0B1620 !important; }
.bd-ria__banniere.sans-voile .bd-ria__ico { color: #0A5A66; }

/* Photo foncée : voile sombre et texte clair. */
.bd-ria__banniere.voile-sombre::before {
  background: linear-gradient(100deg, #0D1D29 0%, rgba(13, 29, 41, .95) 40%, rgba(13, 29, 41, .55) 60%, rgba(13, 29, 41, 0) 80%);
}
.bd-ria__banniere.voile-sombre .bd-ria__titre,
.bd-ria__banniere.voile-sombre .bd-ria__atout-texte strong { color: #fff !important; }
.bd-ria__banniere.voile-sombre .bd-ria__soustitre,
.bd-ria__banniere.voile-sombre .bd-ria__atout-texte span { color: #C9D3DC !important; }
.bd-ria__banniere.voile-sombre .bd-ria__ico { color: #7FD3DE; }
.bd-ria__banniere.voile-sombre .bd-ria__etiquette {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  color: #A9E3EB !important;
}

.bd-ria__presentation, .bd-ria__zone { position: relative; z-index: 1; }

.bd-ria__etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px !important;
}
.bd-ria__etiquette {
  padding: 6px 14px;
  border: 1px solid #B7E3EA;
  border-radius: 999px;
  background: #fff;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0A6C7A !important;
}
.bd-ria__etiquette--beta { background: #DCF1F5; }

.bd-ria .bd-ria__titre {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 12px !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #10202C !important;
}
.bd-ria__etincelles { flex: none; margin-top: 4px; color: #2FB6CC; }

.bd-ria .bd-ria__soustitre {
  max-width: 34em;
  margin: 0 0 26px !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: #41525F !important;
}

.bd-ria__atouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bd-ria__atout { display: flex; flex-direction: column; gap: 8px; }
.bd-ria__ico { color: #0A6C7A; line-height: 0; }
.bd-ria__atout-texte { display: flex; flex-direction: column; gap: 2px; }
.bd-ria .bd-ria__atout-texte strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #10202C !important;
}
.bd-ria .bd-ria__atout-texte span {
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: #5A6B7B !important;
}

/* Bulle d'exemple, avec sa pointe vers le champ. */
.bd-ria__bulle {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 22px 8px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 32, 44, .08);
}
.bd-ria__bulle::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
}
.bd-ria .bd-ria__bulle-titre {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #8996A4 !important;
}
.bd-ria .bd-ria__bulle-texte {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #10202C !important;
}

/* Champ et bouton dans un même cadre blanc, comme une barre unique. */
.bd-ria__boite {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #D3E4E8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 32, 44, .07);
}
.bd-ria .bd-ria__champ {
  flex: 1;
  min-width: 0;
  padding: 14px 16px !important;
  border: 0 !important;
  background: none !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #10202C !important;
}
.bd-ria .bd-ria__champ:focus { outline: none; }

.bd-ria .bd-ria__bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: 8px;
  background: #088EA0;
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.bd-ria .bd-ria__bouton:hover { background: #077A8A; }
.bd-ria .bd-ria__bouton[disabled] { opacity: .6; cursor: default; }

/*
 * Panneau des résultats : un seul cadre gris pour l'état, la grille et les
 * liens de page. La grille y perd le sien, sinon on aurait deux gris
 * emboîtés avec un double rembourrage.
 */
.bd-ria__panneau {
  margin-top: 26px;
  padding: 26px;
  background: #F4F5F6;
  border-radius: 10px;
}
.bd-ria__panneau[hidden] { display: none; }
.bd-ria__resultats.bd-produits {
  padding: 0 !important;
  background: none !important;
  border-radius: 0;
}

/*
 * Le proverbe servi aux demandes grossières se lit comme une citation, non
 * comme un message d'erreur : une remontrance en rouge appelle la surenchère,
 * une phrase posée y coupe court.
 */
.bd-ria__panneau.est-citation { text-align: center; }
.bd-ria__panneau.est-citation .bd-ria__etat {
  margin: 12px 0 !important;
  font-size: 18px !important;
  font-style: italic;
  line-height: 1.6 !important;
  color: #41525F !important;
}

.bd-ria .bd-ria__etat {
  margin: 0 0 18px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  /* Foncé comme les titres du catalogue : ce compte est une information, pas
     une note de bas de page. */
  color: #1E2A35 !important;
}

/*
 * Les résultats reprennent le conteneur du catalogue tel quel.
 *
 * J'avais retiré son fond gris pour éviter un gris dans le gris : sans lui,
 * les cartes blanches perdaient leur cadre et flottaient sur la page. Le
 * panneau de recherche n'ayant plus de fond propre depuis la nouvelle
 * bannière, il n'y a plus de doublon à craindre.
 */
.bd-ria__resultats:empty { display: none; }

.bd-ria__pages { margin-top: 18px; }
.bd-ria__pages:empty { margin-top: 0; }

@media (max-width: 960px) {
  /* La photo n'a plus de place à côté du texte : le voile couvre tout. */
  .bd-ria__banniere { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .bd-ria__banniere.a-image::before {
    background: linear-gradient(180deg, rgba(242, 250, 251, .96) 0%, rgba(234, 246, 248, .96) 100%);
  }
  .bd-ria .bd-ria__titre { font-size: 30px !important; }
  .bd-ria__atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .bd-ria__atouts { grid-template-columns: minmax(0, 1fr); }
  .bd-ria__boite { flex-wrap: wrap; }
  .bd-ria .bd-ria__bouton { width: 100%; justify-content: center; }
}

/* =============================================================================
   Bandeau de contact
   =============================================================================
   Il reprend la bannière de la recherche — mêmes classes pour le fond, le
   voile et le titre — et n'ajoute que la carte des coordonnées.
   ========================================================================== */

.bd-contact {
  /* Une seule colonne : la photo occupe la moitié droite par le fond. */
  grid-template-columns: minmax(0, 620px);
  margin: 0 0 34px;
}

/*
 * Titre en 800, sous-titre en 300.
 *
 * Le contraste de graisse fait tout le travail : un titre lourd et une
 * explication légère se distinguent d'un coup d'œil, sans avoir à changer de
 * couleur ni de taille pour les séparer.
 */
/*
 * Avec la carte, la bannière revient à deux moitiés — coordonnées à gauche,
 * carte à droite — et perd le voile, qui n'a plus de photo à couvrir.
 */
.bd-contact.a-carte {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.bd-contact.a-carte::before { content: none; }
.bd-contact.a-carte .bd-ria__presentation { padding: 34px 40px; }

.bd-contact__carte-zone {
  position: relative;
  min-height: 340px;
  /* Le fond rappelle celui d'une carte : l'attente ressemble déjà à ce qui
     va la remplacer, plutôt qu'à un rectangle vide. */
  background: #E8EDE9;
}
.bd-contact__carte-zone iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}
/*
 * Le cadre n'apparaît qu'une fois chargé.
 *
 * Un cadre vide s'affiche en blanc dès le premier instant : le laisser
 * transparent tant qu'il n'a pas répondu évite ce clignotement blanc au
 * milieu du bandeau.
 */
.bd-contact__carte-zone iframe.est-prete { opacity: 1; }

.bd-contact__attente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #7E8C99;
}
.bd-contact__epingle {
  color: #B44A3C;
  line-height: 0;
  /* Une épingle qui respire : assez pour signaler que ça travaille, assez
     lente pour ne pas attirer l'œil pendant la lecture des coordonnées. */
  animation: bd-contact-pulse 1.6s ease-in-out infinite;
}
.bd-contact .bd-contact__attente-texte {
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #7E8C99 !important;
}

@keyframes bd-contact-pulse {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50% { transform: translateY(-6px); opacity: 1; }
}

/* Une animation qui bouge peut gêner : on la retire si le visiteur l'a
   demandé dans son système. */
@media (prefers-reduced-motion: reduce) {
  .bd-contact__epingle { animation: none; }
  .bd-contact__carte-zone iframe { transition: none; }
}

.bd-contact .bd-ria__titre { font-weight: 800 !important; }
.bd-contact .bd-ria__soustitre {
  font-size: 17px !important;
  font-weight: 300 !important;
}
.bd-contact, .bd-contact * { font-family: var(--bd-boutique-font) !important; }
.bd-contact *, .bd-contact *::before, .bd-contact *::after { box-sizing: border-box; }

.bd-contact__carte {
  display: inline-flex;
  flex-direction: column;
  min-width: min(100%, 420px);
  margin: 6px 0 22px;
  padding: 6px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 32, 44, .1);
}

.bd-contact .bd-contact__ligne {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #EDF1F4;
  color: #10202C !important;
  text-decoration: none !important;
}
.bd-contact .bd-contact__ligne:last-child { border-bottom: 0; }
.bd-contact a.bd-contact__ligne:hover { color: #077A8A !important; }

.bd-contact__ico { flex: none; margin-top: 1px; color: #0A6C7A; line-height: 0; }

.bd-contact__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
}
.bd-contact .bd-contact__texte span {
  font-size: 16px !important;
  font-weight: 300 !important;
  color: inherit !important;
}

.bd-contact .bd-contact__bouton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 8px;
  background: #088EA0;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.bd-contact .bd-contact__bouton:hover { background: #077A8A; }

@media (max-width: 960px) {
  /* La carte passe sous les coordonnées : côte à côte, aucune des deux
     n'aurait la largeur nécessaire pour être lisible. */
  .bd-contact.a-carte { grid-template-columns: minmax(0, 1fr); }
  .bd-contact.a-carte .bd-ria__presentation { padding: 26px 22px; }
  .bd-contact__carte-zone { min-height: 280px; }
}

@media (max-width: 620px) {
  .bd-contact__carte { min-width: 100%; padding: 4px 16px; }
  .bd-contact .bd-contact__bouton { width: 100%; justify-content: center; }
  .bd-contact__carte-zone { min-height: 240px; }
}

/* =============================================================================
   Pied de page
   =============================================================================
   Fond sombre, titres turquoise, liens gris clair : les couleurs des bandeaux
   de produits, pas le bleu vif d'une maquette. Le pied doit se lire comme la
   suite du site, non comme une pièce rapportée.
   ========================================================================== */

.bd-pied {
  margin: 34px 0 0;
  padding: 46px 40px 0;
  background: #10202C;
  border-radius: 10px;
  color: #C9D3DC;
}
.bd-pied, .bd-pied * { font-family: var(--bd-boutique-font) !important; }
.bd-pied *, .bd-pied *::before, .bd-pied *::after { box-sizing: border-box; }

/*
 * Les colonnes s'ajustent au nombre de rubriques.
 *
 * Le gabarit fixe de quatre colonnes convenait aux listes que le module
 * construisait lui-même ; un menu peut en compter trois ou sept, et les
 * surnuméraires passaient à la ligne en laissant de grands vides. « auto-fit »
 * répartit ce qu'il y a, quel qu'en soit le nombre.
 *
 * « align-items: start » évite qu'une colonne courte s'étire sur la hauteur
 * de la plus longue, ce qui décollait son titre du haut.
 */
.bd-pied__haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: start;
  gap: 40px;
  padding-bottom: 38px;
}

/*
 * Titres en blanc, sans capitales.
 *
 * Les capitales forcées se lisent moins vite : l'œil reconnaît la silhouette
 * d'un mot, et « ROBINETS DE CUISINE » n'en a plus. Le blanc et la graisse
 * suffisent à les distinguer des liens.
 */
.bd-pied .bd-pied__titre {
  margin: 0 0 6px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  text-transform: none;
  color: #fff !important;
}
.bd-pied .bd-pied__titre a { color: #fff !important; text-decoration: none !important; }
.bd-pied .bd-pied__titre a:hover { color: #7FD3DE !important; }

.bd-pied .bd-pied__sous-titre {
  margin: 18px 0 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.bd-pied .bd-pied__intro {
  margin: 0 0 26px !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: #fff !important;
}

.bd-pied .bd-pied__coord {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.bd-pied .bd-pied__coord:hover { color: #7FD3DE !important; }
.bd-pied .bd-pied__coord svg { flex: none; margin-top: 1px; color: #7FD3DE; }
.bd-pied .bd-pied__coord span { display: block; }
.bd-pied .bd-pied__coord span span { color: inherit !important; }

.bd-pied__reseaux { display: flex; gap: 10px; margin-top: 24px; }
.bd-pied .bd-pied__reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: #C9D3DC !important;
}
.bd-pied .bd-pied__reseau:hover { border-color: #7FD3DE; color: #7FD3DE !important; }

.bd-pied .bd-pied__liste {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Les entrées respirent : une liste serrée se parcourt mal au doigt. */
.bd-pied .bd-pied__liste li {
  margin: 0 0 14px !important;
  padding: 0 !important;
  list-style: none !important;
  /* Une entrée coupée entre deux colonnes se lit deux fois de travers. */
  break-inside: avoid;
}
.bd-pied .bd-pied__liste li::marker { content: none !important; }
.bd-pied .bd-pied__liste a,
.bd-pied .bd-pied__liste span {
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.bd-pied .bd-pied__liste a:hover { color: #7FD3DE !important; }

/*
 * Une longue liste occupe deux colonnes et se répartit dedans.
 *
 * Cinquante collections dans une colonne étroite feraient un ruban de deux
 * mètres ; sur deux colonnes, le pied garde une hauteur raisonnable.
 */
.bd-pied__liste--colonnes { column-width: 170px; column-gap: 28px; }
.bd-pied__bloc--large { grid-column: span 2; }

@media (max-width: 700px) {
  /* Plus la place de s'étaler : la liste revient sur une seule colonne. */
  .bd-pied__bloc--large { grid-column: span 1; }
}

/* -----------------------------------------------------------------------------
   Bande des atouts et mentions
   -------------------------------------------------------------------------- */

.bd-pied__atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.bd-pied__atout { display: flex; align-items: flex-start; gap: 14px; }
.bd-pied__ico { flex: none; color: #7FD3DE; line-height: 0; }
.bd-pied__atout-texte { display: flex; flex-direction: column; gap: 4px; }
.bd-pied .bd-pied__atout-texte strong {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  text-transform: none;
  color: #fff !important;
}
.bd-pied .bd-pied__atout-texte span {
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: #fff !important;
}

.bd-pied__bas {
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.bd-pied .bd-pied__droits {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #fff !important;
}

@media (max-width: 700px) {
  .bd-pied { padding: 32px 20px 0; }
  .bd-pied__haut { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .bd-pied__liste--colonnes { column-width: auto; column-count: 1; }
}


/* =============================================================================
   Demande de soumission
   =============================================================================
   Trois parties : un en-tête centré, deux colonnes — la pièce à gauche, la
   saisie à droite —, puis une bande d'arguments. La carte de gauche rappelle
   ce qui sera demandé, image comprise : un récapitulatif en texte laisse un
   doute quand plusieurs fiches sont ouvertes côte à côte.
   ========================================================================== */

.bd-devis {
  margin: 40px 0 0;
  padding: 40px 34px;
  background: #F7F9FA;
  border-radius: 12px;
}
.bd-devis, .bd-devis * { font-family: var(--bd-boutique-font) !important; }
.bd-devis *, .bd-devis *::before, .bd-devis *::after { box-sizing: border-box; }

/* -------------------------------- En-tête -------------------------------- */

.bd-devis__entete { max-width: 620px; margin: 0 auto 30px; text-align: center; }

/*
 * Les deux lignes forment un seul titre en deux temps.
 *
 * L'espace visible ne venait pas de la marge, déjà nulle, mais de la hauteur
 * de ligne et du rembourrage que le thème pose sur ses paragraphes et ses
 * titres. Les deux sont donc remis à zéro ici.
 */
.bd-devis .bd-devis__surtitre {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .12em;
  color: #088EA0 !important;
}
.bd-devis .bd-devis__titre {
  margin: 0 0 14px !important;
  /* Le thème rembourre ses titres : sans cette remise à zéro, un vide
     subsiste au-dessus, indépendant de toute marge. */
  padding: 0 !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  color: #10202C !important;
}
.bd-devis .bd-devis__titre span { color: #088EA0 !important; }
.bd-devis .bd-devis__intro {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  color: #5A6B7B !important;
}

/* -------------------------------- Deux colonnes -------------------------------- */

.bd-devis__corps {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* Carte de la pièce. */
.bd-devis__piece {
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 32, 44, .07);
}
.bd-devis__piece-tete { padding: 20px; background: #10202C; }
/*
 * « Produit sélectionné » : du texte, sans pastille.
 *
 * La bulle en faisait une étiquette d'état, comme un badge de promotion ;
 * c'est simplement la légende de la carte. Le texte seul suffit à le dire.
 */
.bd-devis .bd-devis__etiquette {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  background: none;
  font-size: 17px !important;
  font-weight: 300 !important;
  letter-spacing: 0;
  text-transform: none;
  color: #fff !important;
}
.bd-devis .bd-devis__piece-titre {
  display: block;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #fff !important;
}
.bd-devis .bd-devis__piece-ref {
  display: block;
  margin-top: 2px;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.bd-devis__piece-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: #fff;
}
.bd-devis .bd-devis__piece-photo img {
  max-width: 80% !important;
  max-height: 240px !important;
  width: auto;
  height: auto;
  object-fit: contain;
}

.bd-devis .bd-devis__details {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.bd-devis .bd-devis__details li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 14px 20px !important;
  border-top: 1px solid #EDF1F4;
  list-style: none !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #1E2A35 !important;
}
.bd-devis .bd-devis__details li::marker { content: none !important; }

/*
 * Pictogrammes dans une pastille : le rond leur donne une assise, sans quoi
 * des traits de tailles différentes flottent au milieu de la ligne.
 */
.bd-devis__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid #DCE7EA;
  border-radius: 10px;
  color: #088EA0;
}

/* -------------------------------- Formulaire -------------------------------- */

.bd-devis__formulaire {
  padding: 30px 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 32, 44, .07);
}

.bd-devis__champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px 20px;
  margin-bottom: 18px;
}
.bd-devis .bd-devis__champ { display: flex; flex-direction: column; gap: 8px; }
.bd-devis .bd-devis__champ > span:first-child {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #10202C !important;
}
/* L'astérisque des champs obligatoires. */
.bd-devis .bd-devis__champ b { color: #D0483C !important; font-weight: 700 !important; }

/* Champ avec son pictogramme à l'intérieur. */
.bd-devis__saisie { position: relative; display: block; }
.bd-devis__saisie-ico {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #8996A4;
  line-height: 0;
  pointer-events: none;
}
.bd-devis .bd-devis__saisie input {
  width: 100%;
  padding: 14px 16px 14px 46px !important;
  border: 1px solid #E1E7EC !important;
  border-radius: 10px !important;
  background: #FBFCFD !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #10202C !important;
}
.bd-devis .bd-devis__saisie input:focus {
  outline: none;
  border-color: #088EA0 !important;
  background: #fff !important;
}

/* Quantité : deux touches et un nombre au centre. */
.bd-devis__nombre {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #E1E7EC;
  border-radius: 10px;
  background: #FBFCFD;
}
.bd-devis .bd-devis__pas {
  width: 52px;
  border: 0;
  background: #F2F5F7;
  font-size: 20px;
  line-height: 1;
  color: #41525F;
  cursor: pointer;
}
.bd-devis .bd-devis__pas:hover { background: #E7ECEF; }
.bd-devis .bd-devis__nombre input {
  flex: 1;
  min-width: 0;
  padding: 14px 8px !important;
  border: 0 !important;
  background: none !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  text-align: center;
  color: #10202C !important;
  /* Les flèches du navigateur feraient doublon avec nos deux touches. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.bd-devis .bd-devis__nombre input::-webkit-outer-spin-button,
.bd-devis .bd-devis__nombre input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bd-devis__champ--large { margin-bottom: 18px; }
.bd-devis .bd-devis__champ textarea {
  width: 100%;
  padding: 14px 16px !important;
  border: 1px solid #E1E7EC !important;
  border-radius: 10px !important;
  background: #FBFCFD !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: #10202C !important;
  resize: vertical;
}
.bd-devis .bd-devis__champ textarea:focus {
  outline: none;
  border-color: #088EA0 !important;
  background: #fff !important;
}

.bd-devis .bd-devis__coche {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #10202C !important;
  cursor: pointer;
}
.bd-devis .bd-devis__coche input { width: 20px; height: 20px; accent-color: #088EA0; }

/*
 * La question d'arithmétique.
 *
 * Un champ étroit, pour qu'on voie qu'un ou deux chiffres suffisent : un champ
 * pleine largeur donnerait à croire qu'on attend une phrase.
 */
.bd-devis__controle { max-width: 260px; margin-bottom: 22px; }
.bd-devis .bd-devis__controle input {
  width: 100%;
  padding: 14px 16px !important;
  border: 1px solid #E1E7EC !important;
  border-radius: 10px !important;
  background: #FBFCFD !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #10202C !important;
}
.bd-devis .bd-devis__controle input:focus {
  outline: none;
  border-color: #088EA0 !important;
  background: #fff !important;
}

.bd-devis__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bd-devis__actions { display: flex; flex-direction: column; gap: 12px; }
.bd-devis .bd-devis__envoyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: flex-start;
  padding: 17px 34px;
  border: 0;
  /* Angles vifs, comme le bouton « Voir le produit » des cartes. */
  border-radius: 0;
  background: #088EA0;
  font-size: 17px;
  font-weight: 300;
  color: #fff;
  cursor: pointer;
}
.bd-devis .bd-devis__envoyer:hover { background: #077A8A; }
.bd-devis .bd-devis__envoyer[disabled] { opacity: .6; cursor: default; }

.bd-devis .bd-devis__etat {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #5A6B7B !important;
}
.bd-devis .bd-devis__etat.est-erreur { color: #C0473B !important; }

.bd-devis .bd-devis__merci {
  margin: 0 !important;
  padding: 40px 0 !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  text-align: center;
  color: #10202C !important;
}

/* -------------------------------- Bande d'arguments -------------------------------- */

.bd-devis__atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px;
  margin-top: 26px;
  padding: 26px 30px;
  background: #10202C;
  border-radius: 12px;
}
.bd-devis__atout { display: flex; flex-direction: column; gap: 8px; }
.bd-devis__atout-tete { display: flex; align-items: center; gap: 12px; }
.bd-devis .bd-devis__atout-tete strong {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.bd-devis .bd-devis__atout-tete .bd-devis__ico {
  border-color: rgba(255, 255, 255, .18);
  color: #7FD3DE;
}
.bd-devis .bd-devis__atout > span:last-child {
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  /* La carte passe au-dessus du formulaire : côte à côte, aucune des deux
     n'aurait la largeur nécessaire. */
  .bd-devis__corps { grid-template-columns: minmax(0, 1fr); }
  .bd-devis .bd-devis__titre { font-size: 30px !important; }
}

@media (max-width: 620px) {
  .bd-devis { padding: 26px 18px; }
  .bd-devis__formulaire { padding: 22px 18px; }
  .bd-devis__atouts { padding: 22px 18px; }
  .bd-devis .bd-devis__envoyer { width: 100%; align-self: stretch; }
}