/* ============================================================
   TOP BLOCK — thème enfant Hummingbird
   Charte reprise de l'ancien site (leo_mtdanstore_child) :
   noir #0d0d0d + rouge #ff0000 sur fond blanc, titres Rift.
   Hummingbird = Bootstrap 5.3 : on personnalise via les
   variables CSS par composant, sans recompiler le SCSS.
   ============================================================ */

@font-face {
  font-family: "Rift_bold";
  src: url("../fonts/Rift-Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Rift_medium";
  src: url("../fonts/Rift-Medium.otf") format("opentype");
  font-display: swap;
}

:root {
  --tb-red: #ff0000;
  --tb-black: #0d0d0d;

  /* Accent global : rouge Top Block à la place du bleu Hummingbird */
  --bs-primary: var(--tb-red);
  --bs-primary-rgb: 255, 0, 0;
  --bs-link-color: var(--tb-black);
  --bs-link-color-rgb: 13, 13, 13;
  --bs-link-hover-color: var(--tb-red);
  --bs-link-hover-color-rgb: 255, 0, 0;
}

/* ---------- Typographie ---------- */

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.page-title,
.section-title,
.block__title,
.product-miniature__title {
  font-family: "Rift_bold", var(--bs-body-font-family) !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Boutons : noir, hover rouge (charte historique) ---------- */

.btn-primary {
  --bs-btn-bg: var(--tb-black);
  --bs-btn-border-color: var(--tb-black);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--tb-red);
  --bs-btn-hover-border-color: var(--tb-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--tb-red);
  --bs-btn-active-border-color: var(--tb-red);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 255, 0, 0;
}

.btn-secondary {
  --bs-btn-bg: var(--tb-red);
  --bs-btn-border-color: var(--tb-red);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--tb-black);
  --bs-btn-hover-border-color: var(--tb-black);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--tb-black);
  --bs-btn-active-border-color: var(--tb-black);
  --bs-btn-active-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--tb-black);
  --bs-btn-border-color: var(--tb-black);
  --bs-btn-hover-bg: var(--tb-red);
  --bs-btn-hover-border-color: var(--tb-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--tb-red);
  --bs-btn-active-border-color: var(--tb-red);
  --bs-btn-active-color: #fff;
}

/* ---------- Header : blanc, liseré rouge (signature Top Block) ---------- */

#header.header {
  background-color: #fff;
  border-bottom: 3px solid var(--tb-red);
}

/* Menu principal centré, entrées en Rift */
.header .main-menu,
.header-bottom .main-menu__list {
  justify-content: center;
}

.main-menu__link,
.main-menu .nav-link {
  font-family: "Rift_medium", var(--bs-body-font-family);
  text-transform: uppercase;
  font-size: 1.1rem;
}

.main-menu__link:hover,
.main-menu .nav-link:hover,
.main-menu .nav-link.active {
  color: var(--tb-red);
}

/* Grille du header : logo à gauche sur 2 lignes, menu+icônes ligne 1, recherche ligne 2 */
.tb-header-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 30px;
  align-items: center;
}

.tb-header-grid__logo {
  grid-row: 1 / 3;
  padding: 6px 0;
  align-self: stretch;
}

/* Le h1 et le <a class="navbar-brand"> ne portent AUCUNE taille : ils
   épousent l'image (shrink-wrap). Toute la taille est sur l'<img> ci-dessous. */
/* Hummingbird plafonne le logo (img max-height:48px, a.navbar-brand max 250x120) :
   on lève TOUTES ces contraintes, le parent et le h1 épousent l'image (shrink-wrap). */
.tb-header-grid__logo h1,
.tb-header-grid__logo a.navbar-brand {
  display: block;
  padding: 0;
  margin: 0;
  line-height: 0;
  height: auto;
  width: auto;
  max-width: none !important;
  max-height: none !important;
}

/* Logo : image 471x319 (3 logos empilés Antivols / TBR / Trail), affichée sur la
   hauteur des deux lignes du header comme sur l'ancien site. Hauteur définie sur
   l'IMG elle-même, largeur auto = ratio natif garanti, aucune dépendance au parent.
   Bornes : jamais < 84px (lisible), jamais > 118px (ne déborde pas du header sticky). */
.tb-header-grid__logo img {
  height: clamp(84px, 8vw, 118px) !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
}

.tb-header-grid__top {
  grid-column: 2;
  grid-row: 1;
  min-height: 56px;
}

.tb-header-grid__search {
  grid-column: 2;
  grid-row: 2;
  border-top: 1px solid #eee;
  padding: 10px 0;
}

@media (max-width: 767px) {
  .tb-header-grid {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
  }

  .tb-header-grid__logo {
    grid-row: 1;
  }

  /* mobile : une seule ligne, hauteur de logo fixée */
  .tb-header-grid__logo img {
    height: 56px !important;
  }
}

/* Menu : Hummingbird dessine un cadre (outline) sur :focus, donc aussi après un
   simple clic souris. On le réserve à la navigation clavier (:focus-visible). */
.ps-mainmenu__tree-link:focus:not(:focus-visible),
.ps-mainmenu__tree-dropdown-toggle:focus:not(:focus-visible) {
  outline: none;
}

.ps-mainmenu__tree-link:focus-visible {
  outline: 0.125rem solid var(--tb-red);
  outline-offset: 0.125rem;
}

/* Menu : pas de sous-menus ni chevron (l'ancien site n'en avait pas) */
.tb-header__menu .ps-mainmenu__tree-dropdown-toggle,
.tb-header__menu .js-sub-menu,
.tb-header__menu .submenu {
  display: none !important;
}

/* Zone droite : icônes seules avec badge rouge (comme l'ancien site).
   !important requis : les utilitaires Bootstrap d-md-* sont eux-mêmes en !important */
/* Règle globale : le JS Hummingbird (sticky header / responsive movers) clone ces blocs
   hors de .tb-header__right — un sélecteur scopé ne suffit pas */
.header-block__title {
  display: none !important;
}

.tb-header__right .header-block__badge {
  background-color: var(--tb-red);
  color: #fff;
}

.tb-header__right .language-selector .form-select,
.tb-header__right select {
  border: none;
  font-size: 0.95rem;
}

/* Sélecteur de langue à drapeaux (comme l'ancien site) */
.tb-language-selector__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.95rem;
  color: var(--tb-black);
}

.tb-language-selector__toggle:hover {
  color: var(--tb-red);
}

.tb-language-selector__toggle img,
.tb-language-selector__item img {
  width: 16px;
  height: 11px;
}

.tb-language-selector__menu {
  min-width: 0;
}

.tb-language-selector__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}

.tb-language-selector__item.active {
  color: var(--tb-red);
  background: none;
}

/* Barre de recherche pleine largeur sous le header (ligne 2, comme l'ancien site) */
.tb-header__search {
  border-top: 1px solid #eee;
  padding: 12px 0;
}

.tb-header__search .ps-searchbar,
.tb-header__search form {
  max-width: 100%;
}

.tb-header__search .form-control,
.tb-header__search .ps-searchbar__input {
  height: 46px;
  width: 100%;
}

.tb-header__search .ps-searchbar,
.tb-header__search .ps-searchbar__form {
  width: 100%;
}

.tb-header__search .ps-searchbar__form {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Le dropdown des résultats ajax prend exactement la largeur du champ
   (wrapper positionné dans ps_searchbar.tpl ; en base Hummingbird il est
   ancré à droite avec max-width 30rem) */
.tb-header__search .ps-searchbar__field {
  position: relative;
  flex-grow: 1;
}

.tb-header__search .ps-searchbar__dropdown {
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
}

.tb-search-submit {
  background-color: var(--tb-red);
  border-color: var(--tb-red);
  color: #fff;
  padding: 10px 28px;
  font-size: 1rem;
  white-space: nowrap;
}

.tb-search-submit:hover {
  background-color: var(--tb-black);
  border-color: var(--tb-black);
  color: #fff;
}

/* Icônes compte/panier à droite */
.tb-header__right .header-block__action-btn {
  color: var(--tb-black);
}

.tb-header__right .header-block__action-btn:hover {
  color: var(--tb-red);
}

/* ---------- Prix : rouge sur fiche produit, noir sur les vignettes ---------- */

.product__price,
.product__prices .current-price,
.product__prices-block .product__price {
  color: var(--tb-red);
  font-weight: 700;
}

.product-miniature__price {
  color: var(--tb-black);
  font-weight: 600;
}

.product-miniature__title:hover {
  color: var(--tb-red) !important;
}

/* Badges produit (« Nouveau », promo…) : noirs comme sur l'ancien site.
   Le background est fixé en !important DANS un layer du thème → on surcharge
   les variables que la règle consomme, pas la propriété. */
.product-flags .badge {
  --bs-primary-rgb: 13, 13, 13;
  --bs-primary: var(--tb-black);
  border-radius: 0;
}

/* Étoiles des avis */
.star_on:before,
.grade-stars .star--filled,
.product-comments .star {
  color: var(--tb-red);
}

/* ---------- Divers repris de l'ancien site ---------- */

/* Réseaux sociaux (footer) */
.social-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-item {
  width: 35px;
  height: 35px;
  margin: 0 15px 15px 0;
  transition: all 400ms ease-in-out;
  transform: scale(1);
  opacity: 0.9;
}

.social-item:hover {
  transform: scale(1.1);
  opacity: 1;
}

.social-item a {
  display: block;
}

.social-item img {
  width: 100%;
}

/* Note LCR sur le formulaire de compte pro (reprise ancien site) */
body.page-authentication form[action*='professional_account=1'] section:after {
  content: 'Afin de valider votre compte, veuillez nous transmettre votre RIB sur lequel présenter la LCR à l\2019adresse commercial@cfps.fr.';
  display: block;
  padding: 10px;
  margin-bottom: 20px;
  border: solid 1px;
  color: var(--tb-red);
  font-weight: bold;
}

body.lang-en.page-authentication form[action*='professional_account=1'] section:after {
  content: 'In order to validate your account, please send us your RIB on which to present the LCR to commercial@cfps.fr.';
}

/* Référence produit */
.product-reference-value {
  font-weight: 600;
  text-align: left;
  font-size: 0.875rem;
  color: #414141;
}

/* ============================================================
   FICHE PRODUIT (et pages intérieures)
   ============================================================ */

/* Fil d'Ariane : bandeau noir pleine largeur, texte blanc en
   majuscules, séparateur « » » (reprise ancien site) */
.breadcrumb__wrapper {
  background: var(--tb-black);
  padding: 26px 0;
  margin-bottom: 35px;
}

.breadcrumb {
  --bs-breadcrumb-divider: "»";
  --bs-breadcrumb-item-active-color: #fff;
  margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item span {
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #999;
}

.breadcrumb-link {
  color: #fff;
  text-decoration: none;
}

.breadcrumb-link:hover,
.breadcrumb-link:hover span {
  color: var(--tb-red);
}

/* Pages catégorie : le titre s'affiche en gros dans le bandeau noir du fil
   d'Ariane (cf. _partials/breadcrumb.tpl child), comme sur l'ancien site */
.tb-category-band__title {
  color: #fff;
  font-size: 2.6rem;
  margin-bottom: 0.4rem;
}

body.page-category .breadcrumb__wrapper {
  padding: 30px 0 22px;
}

/* Marque non affichée sous le titre (l'ancien site ne la montrait pas) */
.product__manufacturer {
  display: none;
}

/* Prix : « TTC » accolé au prix, en petit (ancien site : 316,00 € TTC) */
.product__prices-block {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

.product__price {
  font-size: 1.75rem;
}

.product__tax-infos {
  font-size: 0.78rem;
  color: #414141;
}

/* Référence dans la colonne droite, avant Partager (cf. product.tpl child) */
.tb-product-reference {
  margin: 20px 0 5px;
  font-size: 0.875rem;
}

.tb-product-reference__label {
  font-weight: 700;
}

/* Message « connectez-vous pour commander » aux couleurs de la charte
   (l'ancien site masquait simplement l'ajout panier ; on garde le CTA) */
.product__add-to-cart-container.alert-info {
  --bs-alert-bg: #f8f8f8;
  --bs-alert-border-color: var(--tb-black);
  --bs-alert-color: var(--tb-black);
  border-radius: 0;
}

.product__add-to-cart-container.alert-info a {
  color: var(--tb-black);
  font-weight: 600;
}

.product__add-to-cart-container.alert-info a:hover {
  color: var(--tb-red);
}

/* Accordéon Description / Détails / Téléchargement : entêtes sur bandeau
   gris clair bien marqué, Rift majuscules, actif en rouge — équivalent des
   onglets « LA DESCRIPTION / PIÈCES JOINTES / AVIS » de l'ancien site */
.product__accordion .accordion-item {
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

.product__accordion .accordion-button {
  font-family: "Rift_bold", var(--bs-body-font-family);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.15rem;
  background: #ececec;
  color: var(--tb-black);
  padding: 0.9rem 1.25rem;
}

.product__accordion .accordion-button:not(.collapsed) {
  color: var(--tb-red);
  background: #ececec;
  box-shadow: none;
}

.product__accordion .accordion-button:focus {
  box-shadow: none;
}

.product__accordion .accordion-body {
  padding: 1.25rem;
}

/* Titres des sections basses (accessoires, produits même catégorie, avis) */
.section-title {
  font-size: 1.8rem;
}

/* « Produits liés » : centré sur l'ancien site */
.ps-categoryproducts .section-title {
  text-align: center;
}

/* ============================================================
   ACCUEIL — sections reconstruites (ancien ApPageBuilder)
   ============================================================ */

/* Titres de sections (ex title_block / sub-title-widget) :
   petit surtitre espacé au-dessus, grand titre Rift en dessous */
.tb-section-head {
  text-align: center;
  margin-bottom: 1.5rem;
}

.tb-section-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 0.4rem;
}

.tb-section-title {
  font-family: "Rift_bold", var(--bs-body-font-family) !important;
  text-transform: uppercase;
  font-size: 2.2rem;
  margin-bottom: 0.25rem;
}

.tb-section-sub {
  color: #666;
  font-size: 1.05rem;
  margin-bottom: 0;
}

.tb-home-section {
  padding-top: 50px;
  padding-bottom: 25px;
}

/* Slider pleine largeur, masqué sur mobile (comme l'ancien site) */
.tb-home__slider {
  margin-bottom: 0;
}
/* NB : la légende superposée des slides est retirée dans le template
   modules/ps_imageslider/.../slider.tpl (un display:none ici perd contre le
   d-lg-block de Bootstrap, layers CSS obligent) */

@media (max-width: 767px) {
  .tb-home__slider {
    display: none;
  }
}

/* 2. Cartes catégories (cartes blanches ombrées, boutons noirs).
   Comme sur l'ancien site, elles chevauchent le bas du slider. */
.tb-cat-cards {
  padding-top: 0;
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .tb-cat-cards {
    margin-top: -80px;
    position: relative;
    z-index: 5;
  }
}

@media (max-width: 767px) {
  /* slider masqué sur mobile : pas de chevauchement */
  .tb-cat-cards {
    padding-top: 30px;
  }
}

.tb-cat-card {
  flex: 1;
  padding: 30px;
  margin: 10px 0;
  background: #fff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

/* Bouton « Découvrir » sous le titre, petit et en majuscules (ancien site) */
.tb-cat-card__btn {
  margin-top: 10px;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 7px 18px;
  border-radius: 0;
}

.tb-cat-card__kicker {
  font-family: "Rift_medium", var(--bs-body-font-family);
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0.25rem;
}

.tb-cat-card__title {
  font-size: 1.9rem;
  margin-bottom: 0;
}

/* 5. Bandeau rouge des marques */
.tb-brands {
  background: var(--tb-red);
  padding: 100px 0;
  margin-top: 40px;
}

.tb-brands__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .tb-brands__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .tb-brands__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1500px) {
  .tb-brands__grid { grid-template-columns: repeat(6, 1fr); }
}

.tb-brands__item img {
  height: 200px;
  width: 200px;
  object-fit: contain;
  background-color: var(--tb-red);
  transition: transform 300ms ease-in-out;
}

.tb-brands__item a:hover img {
  transform: scale(1.05);
}

/* 6. Réassurance (fond gris clair) */
.tb-reassurance {
  background: #f8f8f8;
  padding: 80px 0;
}

.tb-reassurance__item {
  text-align: center;
  padding: 15px 30px;
}

.tb-reassurance__item img {
  height: 70px;
  width: auto;
  margin-bottom: 15px;
}

.tb-reassurance__item h5 {
  font-size: 1.4rem;
}

.tb-reassurance__item p {
  color: #555;
  margin-bottom: 0;
}

/* ============================================================
   FOOTER noir #0D0D0D (reconstruction ancien footer)
   ============================================================ */

.tb-footer {
  background: var(--tb-black);
  color: #fff;
  padding: 50px 0 25px;
}

.tb-footer .footer__main-top {
  row-gap: 30px;
}

.tb-footer__logo img {
  width: 260px;
  max-width: 100%;
}

.tb-footer__title {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.tb-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tb-footer__links li {
  margin-bottom: 10px;
}

.tb-footer__links a,
.tb-footer__contact p,
.tb-footer a {
  color: #fff;
  text-decoration: none;
}

.tb-footer__links a:hover {
  color: var(--tb-red);
}

.tb-footer-bottom {
  background: var(--tb-black);
  color: #fff;
  padding: 25px 0 30px;
  border-top: 1px solid #2a2a2a;
  font-size: 0.9rem;
}

.tb-footer-bottom a {
  color: #fff;
  text-decoration: underline;
}

.tb-footer-bottom a:hover {
  color: var(--tb-red);
}

.tb-footer-bottom__credit {
  text-align: right;
}

/* ============================================================
   PAGES CMS — accordéons <details>/<summary> (ex. FAQ)
   Équivalent de l'accordéon Elementor de l'ancien site :
   icône +/− à gauche, items encadrés, question active en rouge
   ============================================================ */

.page-content--cms details {
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

.page-content--cms details summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  background: #ececec;
  color: var(--tb-black);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.page-content--cms details summary::-webkit-details-marker {
  display: none;
}

/* Icône « + » fermé / « − » ouvert, comme les fa-plus/fa-minus d'Elementor */
.page-content--cms details summary::before {
  content: "+";
  flex: 0 0 auto;
  font-family: "Rift_bold", var(--bs-body-font-family);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--tb-red);
}

.page-content--cms details[open] summary::before {
  content: "−";
}

.page-content--cms details[open] summary {
  color: var(--tb-red);
}

.page-content--cms details summary:hover {
  color: var(--tb-red);
}

.page-content--cms details > div {
  padding: 1rem 1.25rem 1.25rem 3rem;
}

.page-content--cms details > div p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .tb-footer-bottom__credit {
    text-align: left;
    margin-top: 10px;
  }

  .tb-footer__contact,
  .tb-footer__col {
    text-align: inherit;
  }
}


/* Page contact : colonne « Informations » masquée (block left_column vidé dans contact.tpl),
   le centre reprend toute la largeur malgré les col-md-8/col-lg-9 du layout. */
.page-contact #center-column {
  width: 100%;
}

/* Page magasins (storelocator) : champs « localisation » + « rayon » + bouton
   Rechercher sur une seule ligne. Le module émet des col-lg-4 Bootstrap 3 sans
   .row parent → en Bootstrap 5 tout s'empilait. La liste des revendeurs trouvés
   (#locationSelect) passe en pleine largeur sous cette ligne. */
#stores #fmeStorePage {
  display: flex;
  /* .card (Bootstrap 5) impose flex-direction: column → à re-forcer en ligne */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 1.5rem;
}

#stores #fmeStorePage > .clearfix {
  display: none;
}

#stores #fmeStorePage > .col-lg-4 {
  width: auto;
  flex: 1 1 220px;
  margin: 0;
  padding: 0;
}

/* colonne du bouton : largeur du bouton seulement */
#stores #fmeStorePage > .col-lg-4:not(.form-group) {
  flex: 0 0 auto;
}

#stores #fmeStorePage > .col-lg-4:not(.form-group) p {
  margin: 0;
  padding: 0;
}

/* champ « Rayon » : select + loader côte à côte */
#stores #fmeStorePage > .form-group > div {
  display: flex;
  align-items: center;
}

#stores #fmeStorePage .col-lg-10,
#stores #fmeStorePage .col-lg-1 {
  width: auto;
  padding: 0;
  flex: 1 1 auto;
}

#stores #fmeStorePage .col-lg-1 {
  flex: 0 0 auto;
}

/* liste des revendeurs trouvés : pleine largeur sous la ligne */
#stores #fmeStorePage > .form-group:has(#locationSelect) {
  flex: 1 1 100%;
  margin-top: 1rem;
}

/* Popup des markers de la carte magasins (HTML généré par stores_17.js,
   modifié — copie de référence dans migrate/saved/). */
.gm-style .gm-style-iw-c {
  border-radius: 0;
}

.tb-store-popup {
  max-width: 280px;
  padding: 2px 4px;
  font-family: var(--bs-body-font-family, inherit);
}

.tb-store-popup__name {
  font-family: "Rift_bold", var(--bs-body-font-family);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tb-black);
  border-bottom: 2px solid var(--tb-red);
  padding-bottom: 0.4rem;
  padding-right: 1.25rem; /* évite le chevauchement avec la croix de fermeture */
  margin-bottom: 0.5rem;
}

.tb-store-popup__address {
  color: #444;
  line-height: 1.55;
}

.tb-store-popup__phone {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--tb-black);
  font-weight: 600;
  text-decoration: none;
}

.tb-store-popup__phone:hover {
  color: var(--tb-red);
}

.tb-store-popup__row {
  margin-top: 0.35rem;
  color: #444;
}

.tb-store-popup__actions {
  margin-top: 0.75rem;
}

.tb-store-popup__btn {
  display: inline-block;
  background: var(--tb-black);
  color: #fff !important;
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none !important;
  margin-right: 0.5rem;
}

.tb-store-popup__btn:hover {
  background: var(--tb-red);
}

/* ============================================================
   PAGE CONNEXION
   ============================================================ */

/* Le module lpsproaccount propose déjà "Compte particulier /
   Compte professionnel" : on masque le bloc "Pas de compte ?"
   natif de Hummingbird qui fait doublon juste en dessous. */
body.page-authentication .login__register-prompt {
  display: none;
}

/* Aérer le bloc de création de compte du module */
body.page-authentication .login hr {
  margin: 2rem 0;
}

#lpsproaccount {
  margin: 0 0 1.5rem;
}

#lpsproaccount .lpsproaccount-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tb-black);
  padding-bottom: 1rem;
}

.lpsproaccount-button {
  gap: 1rem;
}

#lpsproaccount #login-form-particular {
  margin-right: 0;
}

/* Honeypot anti-spam lpsproaccount : le JS du module le cache via .form-group
   (Bootstrap 4) qui n'existe plus sous Hummingbird (wrapper .mb-3) */
.mb-3:has(> input[name="lpsproaccount_honeypot"]),
div:has(> input[name="lpsproaccount_honeypot"]) {
  display: none;
}

/* ============================================================
   BASCULE « PVC / PRIX ACHAT »  (cf. BASCULE-PVC-PRIX-ACHAT.md)
   ============================================================
   La classe .show-baseprices est posée sur <html> par
   assets/js/baseprices-toggle.js (cookie show_baseprices, 1 an).
   Le bloc PVC est rendu par le module baseprices dans
   .baseprices_module, que son propre CSS met en display:block :
   on le masque donc par défaut, et on ne l'affiche qu'en mode
   PVC — et seulement s'il contient un prix.

   Le :has() corrige un bug de l'ancien site : le module ne rend
   le PVC que si le prix d'origine DIFFÈRE du prix client. Sans ce
   test, un client sans remise (groupe 3, ou un pro sur un produit
   sans prix spécifique) voyait son prix disparaître sans rien à
   la place. */

/* Par défaut : bloc PVC masqué (le CSS du module le met en block) */
.baseprices_module {
  display: none !important;
}

/* --- Fiche produit --- */
html.show-baseprices .product__prices:has(.baseprices_original_tin) .product__price,
html.show-baseprices .product__prices:has(.baseprices_original_tin) .product__tax-infos {
  display: none !important;
}

html.show-baseprices .product__prices .baseprices_module:has(.baseprices_original_tin) {
  display: block !important;
}

/* Même rendu que .product__price (rouge, gras, 1.75rem) */
.product__prices .baseprices_original_tin {
  color: var(--tb-red);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
}

/* Libellé « TTC » : même rendu que .product__tax-infos */
.product__prices .baseprices_original_tinl {
  font-size: 0.78rem;
  color: #414141;
}

/* --- Listes / grilles (vignettes) --- */
html.show-baseprices .product-miniature__prices:has(.baseprices_original_tin) .product-miniature__price {
  display: none !important;
}

html.show-baseprices .product-miniature__prices .baseprices_module:has(.baseprices_original_tin) {
  display: block !important;
}

/* Même rendu que .product-miniature__price (noir, 600) */
.product-miniature__prices .baseprices_original_tin {
  color: var(--tb-black);
  font-weight: 600;
}

.product-miniature__prices .baseprices_original_tinl {
  font-size: 0.78rem;
  color: #414141;
}

/* Le CSS du module met ses sous-blocs en float:left ; on les remet
   en flux inline pour que le prix et son libellé restent alignés */
.baseprices_module .baseprices_tin_prices,
.baseprices_module .baseprices_tin_prices div {
  float: none;
  display: inline;
}