/* ==========================================================================
   child_hummingbird — Palette + Polices Vins Plaisirs
   Repris de l'ancien thème classic-rocket (PS 1.7.7.5).
     Primaire : #D1A43A (or)
     Foncé    : #000     (noir — barres header / menu / footer)
     Corps    : futura-pt   (Adobe Fonts)
     Titres   : bodoni-urw  (Adobe Fonts, serif)
   Hummingbird = Bootstrap 5 stock (primaire bleu #0d6efd, police "Inter").
   ========================================================================== */

/* Kit Adobe Fonts (Typekit, pzj2dsh) : désormais chargé dans le <head> via
   templates/_partials/preload.tpl (preconnect + <link rel=stylesheet>), pour
   les Core Web Vitals. L'ancien @import bloquant a été retiré d'ici. */

/* --------------------------------------------------------------------------
   1. Variables Bootstrap (pilotent la majorité des composants :
      .text-primary, .bg-primary, .border-primary, liens, badges, alerts…)
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  /* Police du corps (remplace "Inter") */
  --bs-body-font-family: "futura-pt", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bs-primary: #D1A43A;
  --bs-primary-rgb: 209, 164, 58;
  --bs-primary-text-emphasis: #54421a;
  --bs-primary-bg-subtle: #f6edd8;
  --bs-primary-border-subtle: #ecdbb0;

  /* Foncé = noir pur */
  --bs-dark: #000;
  --bs-dark-rgb: 0, 0, 0;

  /* Liens */
  --bs-link-color: #D1A43A;
  --bs-link-color-rgb: 209, 164, 58;
  --bs-link-hover-color: #a7832e;
  --bs-link-hover-color-rgb: 167, 131, 46;

  /* Anneau de focus */
  --bs-focus-ring-color: rgba(209, 164, 58, .25);

  /* Titres en or (comme l'ancien thème — retirer cette ligne pour des titres neutres) */
  --bs-heading-color: #D1A43A;
}

/* Polices Typekit appliquées EN DUR sur le corps et les éléments où le parent
   compile « Inter » littéralement (body, .tooltip, .popover) ou via une variable
   qui ignore --bs-body-font-family. Sans ça, le corps reste en Inter malgré la
   variable. Les contrôles de formulaire héritent (reboot Bootstrap = inherit),
   on les liste par sécurité. → tout le corps en futura-pt. */
body,
.tooltip,
.popover,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--bs-body-font-family);
}

/* (Modale « âge légal » psagechecker : sa police était figée en `Roboto !important`
   inline + <style> → non surchargeable en CSS. Réglée via la config du module
   `PS_AGE_CHECKER_FONTS = futura-pt` pour qu'elle utilise la police Typekit.) */

/* Poids disponibles dans le kit Typekit : futura-pt 400/600, bodoni-urw 400/500.
   Le « gras » générique de Bootstrap vaut 700 (b/strong/dt/th/.fw-bold) → faux-gras
   pour futura qui plafonne à 600. On ramène le gras du CORPS (futura) à 600. Les
   titres bodoni gardent leur 500 (réglé explicitement sur .h1..h6 + titres). */
:root,
[data-bs-theme="light"] {
  --bs-font-weight-bold: 600;
}
b, strong, dt, th {
  font-weight: 600;
}
.fw-bold {
  font-weight: 600 !important;
}

/* Titres en bodoni-urw (hummingbird ne déclare pas de font-family sur les titres,
   ils héritent du corps : on la pose explicitement). Poids 500 (= « bold » bodoni). */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-weight: 500;
}

/* Titres de section (« …ont également acheté », produits en vedette…) :
   or + grand + barre or sous le texte (repris de .title_block de l'ancien thème).
   display:table → la barre fait la largeur du texte ; margin auto → centré. */
.section-title {
  color: #D1A43A;
  display: table;
  margin: 1.875rem auto 2.8125rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid #D1A43A;
  font-size: 2rem;
}

/* Titres de produit : neutres + police corps futura-pt (le titre fiche produit
   <h1 class="h4 product__name"> hériterait sinon de l'or et du serif des titres). */
.product__name,
.product__title,
.product-miniature__title {
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
}

/* Fiche produit : titre (h1.product__name) agrandi, poids 400 */
.product__name {
  font-size: 2rem;
  font-weight: 400;
}

/* Fiche produit : mention « quantité minimale » légèrement plus petite */
.product__minimal-quantity {
  font-size: 0.875rem;
}

/* Fiche produit : bouton « Ajouter au panier » en largeur fixe sur desktop
   (au lieu de remplir la colonne) */
@media (min-width: 768px) {
  .product__add-to-cart .product-actions__button.add {
    flex: 0 0 auto;
    width: auto;
  }
  .product__add-to-cart .add-to-cart {
    width: 280px;
  }
}

/* Prix : or + police serif bodoni-urw (poids 500 comme toute la bodoni) */
.product-miniature__price,
.product__current-price {
  color: #D1A43A;
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-weight: 500;
}

/* Prix du listing : taille « h3 » et poids 500 comme l'ancien site
   (spécificité .product-miniature … pour battre le 600 du parent) */
.product-miniature .product-miniature__price {
  font-size: 1.875rem;
  font-weight: 500;
}
/* Badges produit (flags : « -13% », « Nouveau »…) — design repris de l'ancien
   thème (.product-flag) : bodoni, fond or + texte noir, ombre dure décalée noire,
   coins carrés (le parent .badge est arrondi, texte blanc, sans ombre). */
.product-flags .badge {
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-weight: 500;
  color: #000;
  box-shadow: -3px 3px 0 0 #000;
  border-radius: 0;
}

/* Pas de zoom de la photo au survol de la vignette */
.product-miniature .product-miniature__link:hover .product-miniature__image {
  transform: none;
}
/* Titre produit en or au survol de la vignette */
.product-miniature:hover .product-miniature__title {
  color: #D1A43A;
}
/* Photo de vignette : hauteur réduite, centrée, avec de l'air haut/bas */
.product-miniature__image-container {
  padding-top: 15px;
  padding-bottom: 15px;
}
.product-miniature__image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 220px;
  width: auto;
}

/* Inverser l'ordre prix barré / prix promo (barré en premier, comme l'ancien thème).
   .product-miniature__prices est en flex → on remonte le prix barré, et on aligne
   les deux prix vers le bas. */
.product-miniature__prices {
  align-items: flex-end;
}
.product-miniature__discount-price {
  order: -1;
  padding-bottom: 5px;
  padding-right: 5px;
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
}

/* Fiche produit : prix courant plus grand, poids 500
   (spécificité .page-product … pour battre le 600 du parent) */
.page-product .product__current-price {
  font-size: 2rem;
  font-weight: 500;
}

/* Fiche produit : titres d'accordéon « Détails du produit » et « Fiche technique »
   en or (états ouvert/fermé) */
#product-description-heading .accordion-button,
#product-description-heading .accordion-button:not(.collapsed),
#product-details-heading .accordion-button,
#product-details-heading .accordion-button:not(.collapsed),
#product-features-heading .accordion-button,
#product-features-heading .accordion-button:not(.collapsed) {
  color: #D1A43A;
  /* Titres d'accordéon non gras (étaient en 700). */
  font-weight: 400;
}

/* Titres d'onglet (Description, Détails du produit, Fiche technique…) — repris de
   l'ancien thème nav-tabs : ligne GRISE pleine largeur sous l'en-tête
   (gray-300, comme $nav-tabs-border-color). */
.product__infos .accordion-button {
  border-bottom: 1px solid #dee2e6;
}
/* Accordéon à plat : le dernier item gardait des coins bas arrondis (Bootstrap
   `--bs-accordion-border-radius` 8px sur :last-of-type) → léger arrondi visible
   sur la barre du bas. On le carre (cohérent avec les séparateurs droits). */
.product__infos .accordion-item:last-of-type,
.product__infos .accordion-item:last-of-type > .accordion-header .accordion-button,
.product__infos .accordion-item:last-of-type > .accordion-collapse {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Listes « Détails du produit » / « Fiche technique » : retirer le fond gris
   du parent (var(--bs-gray-100)) et passer les labels (Millésime, etc.) en or */
.product__details,
.product__features {
  background: transparent;
}
.product__details .detail__title,
.product__features .detail__title {
  color: #D1A43A;
  font-size: 0.875rem;
}
/* Réduire l'espacement vertical entre les lignes de valeurs (parent : padding 1rem
   + bordure basse 4px) */
.product__details .detail,
.product__features .detail {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f1f1 !important;
}
/* Réduire la taille de typo des valeurs (colonne de droite) */
.product__details .detail__right,
.product__features .detail__right {
  font-size: 0.875rem;
}
/* Colonne des labels (detail__left) plus étroite (parent : 50%) → plus de place
   pour les valeurs */
.product__details .detail__left,
.product__features .detail__left {
  width: 35%;
}

/* Fiche produit : prix barré + « Économisez X% » en bodoni comme le prix */
.product__price-regular,
.product__discount-percentage,
.product__discount-amount {
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-weight: 500;
}

/* Badge de remise (« -13% ») — design repris de l'ancien thème
   (.product-flag.discount) : fond noir, texte or, ombre dure décalée OR,
   coins carrés (pas de bordure). Typo agrandie (1rem). */
.badge.discount {
  background-color: #000;
  color: var(--bs-primary);
  box-shadow: -3px 3px 0 0 var(--bs-primary);
  border-radius: 0;
  font-size: 1rem;
}

/* Fiche produit : « (Économisez X%) » stylé comme le badge remise mais en
   couleurs inversées (fond or, texte noir, ombre dure noire décalée, coins carrés). */
.product__discount-percentage {
  display: inline-block;
  background-color: var(--bs-primary);
  color: #000;
  box-shadow: -3px 3px 0 0 #000;
  border-radius: 0;
  padding: 1px 10px;
  font-size: 1.25rem;
}

/* Fiche produit : mention de taxe (TTC) en or, à côté du prix (cf. override
   templates/catalog/_partials/product-prices.tpl).
   Spécificité .page-product … pour battre le gris du parent. */
.page-product .product__tax-info {
  color: #D1A43A;
  padding-bottom: 2px;
}
/* Mention « TTC » : même typo que le prix (bodoni-urw, poids 500) */
.page-product .product__tax-label {
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-weight: 500;
}

/* Vignettes produit (listings, cross-selling, produits en vedette…) :
   tout le contenu de la carte centré */
.product-miniature__infos {
  text-align: center;
}
/* Conteneurs en flex : on recentre explicitement */
.product-miniature__prices,
.product-miniature__infos__bottom form {
  justify-content: center;
}
/* Titre produit en majuscules */
.product-miniature__title {
  text-transform: uppercase;
}

/* Description courte en futura-pt (y compris d'éventuels titres internes qui
   hériteraient sinon du serif) — popup aperçu produit + fiche produit. */
#product-description-short,
#product-description-short *,
.product__description-short,
.product__description-short * {
  font-family: var(--bs-body-font-family);
}

/* --------------------------------------------------------------------------
   Header — bandeau (logo + menu + recherche) sur fond noir, texte blanc
   -------------------------------------------------------------------------- */
/* Désactiver le header sticky EN DESKTOP (≥ lg). Le parent met
   #header.js-sticky-header en position:sticky → le bandeau (promo + logo + menu)
   se fige au scroll. En desktop on le laisse défiler normalement ; le sticky
   reste actif en mobile/tablette (< 992px) où il est utile. */
@media (min-width: 992px) {
  #header.js-sticky-header {
    position: static;
  }
}
.header-bottom {
  background-color: #000;
  border-bottom: none;
  --header-bottom-border-bottom: none;
  /* Liens du bandeau en blanc : le parent fait
     .header a:not(.dropdown-item):not(.btn){color:var(--header-color)} →
     on bascule la variable en blanc (les sous-menus .dropdown-item gardent
     leur panneau blanc / texte sombre). */
  --header-color: #fff;
}
/* Menu desktop : items répartis sur toute la largeur disponible */
.js-menu-desktop {
  width: 100%;
}
.main-menu__tree {
  width: 100%;
  justify-content: space-between;
}

/* Liens du menu de 1er niveau en MAJUSCULES (sous-menus laissés en casse normale) */
.main-menu__tree__link:not(.dropdown-item) {
  text-transform: uppercase;
}
/* Police du menu en futura (corps) */
.main-menu__tree__link {
  font-family: var(--bs-body-font-family);
}
/* Retirer le caret Bootstrap (::after) sur les liens de menu déroulants
   (1er niveau .dropdown-toggle) — pas de petit triangle après le libellé. */
.main-menu__tree__link.dropdown-toggle::after {
  display: none;
}
/* Items de sous-menu (dropdown) en or, or foncé au survol */
.main-menu__tree__link.dropdown-item {
  color: #D1A43A;
}
/* Poids 400 sur les items de sous-menu (surspécifié pour battre la règle parent) */
.main-menu__tree .menu-container a.main-menu__tree__link.dropdown-item {
  font-weight: 400;
}
.main-menu__tree__link.dropdown-item:hover,
.main-menu__tree__link.dropdown-item:focus {
  color: #a7832e;
}
/* En-têtes de groupes du sous-menu (Type, Pays, Région…) en MAJUSCULES, gras allégé.
   Sélecteur surspécifié pour battre .main-menu__tree > li .menu-container a[data-depth="1"] (0,3,2). */
.menu-container a.main-menu__tree__link.dropdown-toggle.dropdown-item[data-depth="1"] {
  text-transform: uppercase;
  font-weight: 400;
}
/* Sous-menu desktop : colonnes de groupes ajustées au contenu (listes moins
   larges au lieu de 25% fixes via row-cols-4) */
.menu-container .row-cols-4 > * {
  flex: 0 0 auto;
  width: auto;
}
/* Espacement horizontal entre les groupes de sous-catégories (colonnes) */
.menu-container .row-cols-4 > * {
  padding-right: 2.5rem;
}
/* La première colonne de groupes ne colle pas au bord */
.menu-container .row-cols-4 > *:first-child {
  padding-left: 50px;
}
/* Sous-menus très longs : répartir la liste en plusieurs colonnes au lieu
   d'une seule colonne qui dépasse l'écran. items non coupés entre colonnes. */
.menu-container #category-21 .submenu {  /* Région (~60 items) */
  column-count: 3;
  column-gap: 1.5rem;
}
.menu-container #category-18 .submenu {  /* Pays (~15 items) */
  column-count: 2;
  column-gap: 1.5rem;
}
.menu-container .submenu li {
  break-inside: avoid;
}
/* Filet de sécurité : si le panneau dépasse quand même, on autorise le scroll */
.menu-container .container {
  max-height: 85vh;
  overflow-y: auto;
}

/* Retirer le lien contact (« Appelez-nous… ») du header */
#_desktop_contact_link {
  display: none;
}

/* Plus de hauteur sur la rangée du haut (logo + recherche + compte/panier) */
.header-top {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Logo : hauteur max 80px */
.navbar-brand,
.navbar-brand .logo,
.navbar-brand img {
  max-height: 80px;
  width: auto;
}
/* Mobile (< md) : le logo vit dans .header-bottom à côté du burger + 3 pictos
   (recherche/compte/panier). Le parent le laisse à max(50px,10vh) ≈ 84px sur un
   grand écran de téléphone → ce logotype large déborde la barre (le panier passe
   à la ligne, le logo chevauche le burger). On le borne à 46px pour qu'il tienne
   sur une seule rangée. */
@media (max-width: 767.98px) {
  .header-bottom .navbar-brand,
  .header-bottom .navbar-brand img {
    max-height: 46px;
  }
  /* La rangée du haut (.header-top) ne contient que .header-top-desktop, masqué
     en mobile (d-none d-md-flex). Mais le <nav> garde son padding 20px → bande
     blanche vide sous la barre promo. On le masque complètement en mobile. */
  .header-top {
    display: none;
  }
}

/* Icônes/textes du bandeau (pas des liens <a>) en blanc */
.header-bottom .header-block__icon,
.header-bottom .header-block__title,
.header-bottom .header-block__badge {
  color: #fff;
}
.header-bottom .main-menu__tree__link:not(.dropdown-item):hover,
.header-bottom .main-menu__tree__link:not(.dropdown-item):focus {
  color: #D1A43A;
}

/* Menu MOBILE (offcanvas) : le tiroir est sur fond BLANC, mais les liens
   héritent du blanc (`--header-color:#fff`) prévu pour la barre menu NOIRE du
   desktop → texte blanc sur blanc (illisible). On repasse les liens du tiroir
   en sombre, accent or au survol. (Le close + le pied « Appelez-nous » restent
   sombres/lisibles, le tiroir reste blanc comme le reste de l'UI mobile.) */
.main-menu__offcanvas {
  --header-color: #1d1d1b;
}
.main-menu__offcanvas a.menu__link,
.main-menu__offcanvas .main-menu__tree__link.dropdown-item {
  color: #1d1d1b;
}
.main-menu__offcanvas a.menu__link:hover,
.main-menu__offcanvas a.menu__link:focus,
.main-menu__offcanvas a.menu__link[aria-expanded="true"] {
  color: #D1A43A;
}

/* Lien Accueil : texte remplacé par un picto « maison » (comme l'ancien site).
   Le texte « Accueil » est masqué (font-size:0) et l'icône posée en ::before.
   Ne vise que le menu desktop (.main-menu__tree__link) ; le menu mobile
   (.menu__link) garde le libellé texte. */
#lnk-accueil .main-menu__tree__link {
  font-size: 0;
  line-height: 1;
}
#lnk-accueil .main-menu__tree__link::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.4' height='17' viewBox='0 0 15.4 17'%3E%3Cg id='Icon_feather-home' data-name='Icon feather-home' transform='translate(-4 -2.5)'%3E%3Cpath id='Tracé_58' data-name='Tracé 58' d='M4.5,8.6,11.7,3l7.2,5.6v8.8A1.6,1.6,0,0,1,17.3,19H6.1a1.6,1.6,0,0,1-1.6-1.6Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3Cpath id='Tracé_59' data-name='Tracé 59' d='M13.5,26V18h4.8v8' transform='translate(-4.2 -7)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: middle;
}
#lnk-accueil .main-menu__tree__link:hover::before,
#lnk-accueil .main-menu__tree__link:focus::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.4' height='17' viewBox='0 0 15.4 17'%3E%3Cg id='Icon_feather-home' data-name='Icon feather-home' transform='translate(-4 -2.5)'%3E%3Cpath id='Tracé_58' data-name='Tracé 58' d='M4.5,8.6,11.7,3l7.2,5.6v8.8A1.6,1.6,0,0,1,17.3,19H6.1a1.6,1.6,0,0,1-1.6-1.6Z' fill='none' stroke='%23D1A43A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3Cpath id='Tracé_59' data-name='Tracé 59' d='M13.5,26V18h4.8v8' transform='translate(-4.2 -7)' fill='none' stroke='%23D1A43A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Filtre pm_advancedsearch4 — design repris de l'ancien thème
   (classes PM_AS* générées par le module ; tout est scopé au bloc du module
   pour ne pas toucher le faceted search natif de hummingbird).
   -------------------------------------------------------------------------- */

/* Retrait de l'en-tête « Filtres » du bloc (card-header non voulu).
   Scopé via l'id du bloc filtre (#PM_ASBlock_x) pour ne pas toucher les autres .card-header. */
[id^="PM_ASBlock"] .card-header {
  display: none;
}

/* Titre de chaque groupe de critères en or */
.PM_ASCriterionsGroupTitle {
  color: #D1A43A;
}

/* Pas de soulignement au survol dans l'arbre de catégories */
.PM_ASCriterionLevelChoosen a:hover {
  text-decoration: none !important;
}

/* Barre « Filtres actifs » : fond or, texte noir (scopée au module) */
.PM_ASSelectionsBlock .active-filter-title {
  background-color: #D1A43A;
  color: #000;
}

/* Slider de prix (jQuery UI) : piste noire fine, poignées or rondes */
.PM_ASCriterions .ui-slider-horizontal {
  height: 3px;
}
.PM_ASCriterions .ui-widget-header,
.PM_ASCriterions .ui-widget-content {
  border: none;
  background: #000;
}
.PM_ASCriterions .ui-state-default,
.PM_ASCriterions .ui-widget-content .ui-state-default,
.PM_ASCriterions .ui-widget-header .ui-state-default {
  border: none;
  background: #D1A43A;
}
.PM_ASCriterions .ui-state-hover,
.PM_ASCriterions .ui-widget-content .ui-state-hover,
.PM_ASCriterions .ui-widget-header .ui-state-hover,
.PM_ASCriterions .ui-state-focus,
.PM_ASCriterions .ui-widget-content .ui-state-focus,
.PM_ASCriterions .ui-widget-header .ui-state-focus {
  border: none;
  background: #D1A43A;
  opacity: .9;
}
.PM_ASCriterions .ui-slider .ui-slider-handle {
  width: 15px;
  height: 15px;
  border-radius: 15px;
}
.PM_ASCriterions .ui-slider-horizontal .ui-slider-handle {
  top: -7px;
  margin-left: -7px;
}
/* Espace entre le soulignement du titre de groupe et le slider (il était
   collé à la barre dorée du titre). margin-top sur la piste du slider. */
.PM_ASCriterions .ui-slider-horizontal {
  margin-top: 1.5rem;
}

/* Selectize (Pays, Région, Appellation, Cépage…) : par défaut contour gris,
   coins peu arrondis, plus court que les autres champs. On l'aligne sur le
   modèle « liseré doré » : contour or, rayon 8px, hauteur ~42px. Scopé au bloc
   filtre pour ne pas toucher d'éventuels autres selectize. */
[id^="PM_ASBlock"] .selectize-input {
  border-color: #D1A43A;
  border-radius: 8px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  /* Même hauteur que les select (42px) : padding 8px + bordure identiques, seule
     la line-height différait (18 vs 24px) → on l'aligne sur 24px. */
  line-height: 24px;
}
[id^="PM_ASBlock"] .selectize-input.focus,
[id^="PM_ASBlock"] .selectize-input.dropdown-active {
  border-color: #D1A43A;
  box-shadow: none;
}
/* Panneau déroulant selectize : contour or assorti */
[id^="PM_ASBlock"] .selectize-dropdown {
  border-color: #D1A43A;
}

/* --------------------------------------------------------------------------
   Fil d'Ariane — liens en or, dernier élément (page courante) neutre
   (le dernier maillon est un <span> sans lien : non ciblé, reste neutre)
   -------------------------------------------------------------------------- */
.breadcrumb a,
.breadcrumb-link {
  color: #D1A43A;
}
/* Séparateurs « > » en or et plus petits */
.breadcrumb {
  --bs-breadcrumb-divider-color: #D1A43A;
}
.breadcrumb-item + .breadcrumb-item::before {
  font-size: 0.7rem;
}

/* Titre du bloc catégories (colonne gauche) : or + bodoni serif, poids 500 */
.left-block .left-block__title,
.left-block .left-block__title__link {
  color: #D1A43A;
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-weight: 500;
}
/* Items de l'arbre de catégories : retirer le gras (règle parent très spécifique) */
.category-tree .category-tree__item__link {
  font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   Footer — signature ProduWeb en majuscules + or
   -------------------------------------------------------------------------- */

/* Liens du footer : or au survol (variable utilisée par liste + contact) */
.footer {
  --footer-hover-color: #D1A43A;
  /* Colonnes footer sur fond blanc → liens en sombre (lisibles) */
  --footer-text-color: #333;
  /* Fond des colonnes footer en blanc (la règle parent utilise cette variable) */
  --footer-background-color: #fff;
}
/* Bloc newsletter (displayFooterBefore) sur fond noir */
.email-subscription {
  background-color: #000;
}
/* Signature ProduWeb sur bande noire (texte or via .copyright) */
.footer__signature {
  background-color: #000;
  padding: 1rem 0;
}
/* Lien « Déconnexion » : retirer le rouge (couleur de lien normale) */
.footer .footer__block__content-list a.logout {
  color: var(--footer-text-color);
}

/* Footer contact : pictos « feather » or (même style que l'ancien site)
   pour les 3 lignes. On masque les glyphes Material Icons et on pose le SVG
   correspondant en ::before de chaque conteneur (flex). */
.footer__block__content-contact .material-icons {
  display: none;
}
.footer__block__content-contact .contact__infos,
.footer__block__content-contact .contact__phone,
.footer__block__content-contact .contact__email,
.footer__block__content-contact .contact__fax {
  gap: .5rem;
}
.footer__block__content-contact .contact__infos::before,
.footer__block__content-contact .contact__phone::before,
.footer__block__content-contact .contact__email::before {
  flex: 0 0 auto;
  align-self: flex-start;
  position: relative;
  top: 2px;
}
/* Adresse : map-pin */
.footer__block__content-contact .contact__infos::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.091' height='17' viewBox='0 0 14.091 17'%3E%3Cg transform='translate(-4 -1)'%3E%3Cpath d='M17.591,8.045c0,5.091-6.545,9.455-6.545,9.455S4.5,13.136,4.5,8.045a6.545,6.545,0,1,1,13.091,0Z' fill='none' stroke='%23d1a43a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3Cpath d='M17.864,12.682A2.182,2.182,0,1,1,15.682,10.5a2.182,2.182,0,0,1,2.182,2.182Z' transform='translate(-4.636 -4.636)' fill='none' stroke='%23d1a43a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}
/* Téléphone : combiné feather */
.footer__block__content-contact .contact__phone::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.969' height='17.001' viewBox='0 0 16.969 17.001'%3E%3Cpath d='M19.136,14.979v2.409a1.606,1.606,0,0,1-1.75,1.606,15.889,15.889,0,0,1-6.929-2.465,15.656,15.656,0,0,1-4.817-4.817A15.889,15.889,0,0,1,3.174,4.75,1.606,1.606,0,0,1,4.772,3H7.181A1.606,1.606,0,0,1,8.786,4.381a10.309,10.309,0,0,0,.562,2.256,1.606,1.606,0,0,1-.361,1.694l-1.02,1.02a12.846,12.846,0,0,0,4.817,4.817l1.02-1.02a1.606,1.606,0,0,1,1.694-.361,10.309,10.309,0,0,0,2.256.562,1.606,1.606,0,0,1,1.381,1.63Z' transform='translate(-2.667 -2.5)' fill='none' stroke='%23d1a43a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E");
}
/* E-mail : enveloppe feather */
.footer__block__content-contact .contact__email::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.393' height='13.8' viewBox='0 0 17.393 13.8'%3E%3Cg transform='translate(-2.304 -5.5)'%3E%3Cpath d='M4.6,6H17.4A1.6,1.6,0,0,1,19,7.6v9.6a1.6,1.6,0,0,1-1.6,1.6H4.6A1.6,1.6,0,0,1,3,17.2V7.6A1.6,1.6,0,0,1,4.6,6Z' fill='none' stroke='%23d1a43a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3Cpath d='M19,9l-8,5.6L3,9' transform='translate(0 -1.4)' fill='none' stroke='%23d1a43a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}
.footer .copyright,
.footer .copyright a {
  text-transform: uppercase;
  color: #D1A43A;
  font-size: 0.8125rem;
}

/* Titres des blocs footer (Notre société, Votre compte, Informations) :
   or + bodoni serif, plus grand */
.footer .footer__block__title,
.footer .footer__block__title a {
  color: #D1A43A;
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 500;
}
/* Soulignement or sous chaque titre de bloc footer (toute la largeur de la colonne) */
.footer .footer__block__title {
  border-bottom: 2px solid #D1A43A;
  padding-bottom: .5rem;
}
/* Caret d'accordéon footer en MOBILE (▼ .footer__block__toggle) : blanc par
   défaut (pensé pour un footer foncé) → invisible sur nos colonnes blanches.
   On le passe en or, comme les titres de bloc qu'il accompagne. */
.footer .footer__block__toggle .material-icons {
  color: #D1A43A;
}
/* MOBILE : barre dorée PLEINE LARGEUR sous l'en-tête d'accordéon. En desktop la
   bordure est portée par le <p>.footer__block__title (pleine colonne) ; en mobile
   le titre est un <span>.footer__block__title flex-item dimensionné au texte
   (~129px) → bordure trop courte. On bascule la bordure sur le .footer__block__toggle
   (pleine largeur) et on la retire du span. */
@media (max-width: 767.98px) {
  .footer .footer__block__toggle {
    border-bottom: 2px solid #D1A43A;
    padding-bottom: .5rem;
  }
  .footer .footer__block__toggle .footer__block__title {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* Répartition des 3 blocs footer sur toute la largeur (1/3 chacun au lieu de
   col-lg-3 = 1/4, depuis le passage de 4 à 3 blocs) */
@media (min-width: 992px) {
  .footer .footer__main__top .footer__block {
    flex: 0 0 auto;
    width: 33.3333%;
    max-width: 33.3333%;
  }
}

/* --------------------------------------------------------------------------
   Formulaires (front) — contour des champs en or
   (repris de l'ancien thème : $input-border-color: $primary, box-shadow none)
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
textarea,
textarea.form-control {
  border-color: #D1A43A;
  /* Look unifié sur le modèle du select (liseré doré) : même rayon partout
     (8px = --bs-border-radius). Les champs étaient à 4-5px, le select à 8px.
     Les input-groups (stepper quantité ±) gardent leurs coins droits via les
     règles Bootstrap plus spécifiques. */
  border-radius: 8px;
}
.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: #D1A43A;
  box-shadow: none;
}
/* Boutons +/- du sélecteur de quantité (− [input] +) : contour gris par défaut
   → or, pour faire un groupe cohérent avec le champ central (liseré doré). */
.input-group .btn.decrement,
.input-group .btn.increment,
.bootstrap-touchspin .btn-touchspin {
  border-color: #D1A43A;
}
/* Recherche header + champ newsletter : même rayon que le select. */
#_desktop_search #search_widget input,
.search__offcanvas #search_widget input,
.email-subscription .email-subscription__content__inputs input[type="email"] {
  border-radius: 8px;
}
/* Hauteur unifiée : le select avait moins de padding vertical (38px) que les
   champs texte (42px). On l'aligne sur 42px (padding 0.5rem) → rangée homogène. */
.form-select {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/* Champ d'inscription newsletter (input[type=email], hors .form-control) :
   contour or + enveloppe SVG devant le placeholder (repris de l'ancien thème) */
.email-subscription .email-subscription__content__inputs input[type="email"] {
  border-color: #D1A43A;
  color: #888888;
  padding-left: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.393' height='17' viewBox='0 0 21.393 17'%3E%3Cg id='Icon_feather-mail' data-name='Icon feather-mail' transform='translate(-2.304 -5.5)'%3E%3Cpath id='Tracé_112' data-name='Tracé 112' d='M5,6H21a2.006,2.006,0,0,1,2,2V20a2.006,2.006,0,0,1-2,2H5a2.006,2.006,0,0,1-2-2V8A2.006,2.006,0,0,1,5,6Z' fill='none' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3Cpath id='Tracé_113' data-name='Tracé 113' d='M23,9,13,16,3,9' transform='translate(0 -1)' fill='none' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat 10px center;
}
/* Newsletter : placeholder en gris (un peu plus foncé que le gris parent) */
.email-subscription .email-subscription__content__inputs input[type="email"]::placeholder {
  color: #888888;
  opacity: 1;
}
/* Newsletter : masquer la mention « Vous pouvez vous désinscrire… » */
.email-subscription__content__infos {
  display: none;
}
/* Newsletter : titre « Recevez nos offres spéciales » en or + bodoni 500
   (spécificité .email-subscription … pour battre la règle du parent) */
.email-subscription .email-subscription__label {
  color: #D1A43A;
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0;
}
/* Centrer verticalement label + champ, et rapprocher le label du champ */
.email-subscription .email-subscription__content {
  align-items: center;
}
.email-subscription .email-subscription__content__left {
  text-align: right;
}
/* Mobile (bloc empilé) : le label « Recevez nos offres spéciales » centré
   (le right-align ci-dessus sert au desktop où le label précède le champ). */
@media (max-width: 767.98px) {
  .email-subscription .email-subscription__content__left,
  .email-subscription .email-subscription__label {
    text-align: center;
  }
}
/* Select du filtre à facette pm_advancedsearch4 */
.PM_ASCriterionGroupSelect {
  border-color: #D1A43A;
}

/* Moteur de recherche (desktop #_desktop_search + offcanvas mobile) :
   contour or sur le champ, focus or sans halo bleu, loupe en or */
#_desktop_search #search_widget input,
.search__offcanvas #search_widget input {
  border: 1px solid #D1A43A;
  /* Retire le fond gris #f1f1f1 posé par ps_searchbar.css (#search_widget form input) */
  background-color: transparent;
}
#_desktop_search #search_widget input:focus,
.search__offcanvas #search_widget input:focus {
  border-color: #D1A43A;
  box-shadow: none;
}
#_desktop_search #search_widget .search,
.search__offcanvas #search_widget .search {
  color: #D1A43A;
}
/* Barre de recherche agrandie + centrée dans sa zone */
#_desktop_search {
  flex-grow: 1;
  /* .col-auto pose flex:0 0 auto (shrink:0) → la recherche refuse de rétrécir
     sous sa largeur de contenu (~296px). OK sur desktop large, mais en tablette
     (md, 768–991) sa colonne ne fait que ~204px → la recherche déborde sur les
     liens Connexion/Panier. On réautorise le rétrécissement. */
  flex-shrink: 1;
  min-width: 0;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
#_desktop_search #search_widget {
  width: 100%;
  max-width: 32rem;
  min-width: 0;
}
#_desktop_search #search_widget input {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Tunnel de commande (.page-order) — « validé » en OR au lieu du vert
   (le vert = --bs-success #198754 : contour/checkmark des champs valides,
   cercle de progression mobile .text-success, libellés validés). Scopé à la
   page commande.
   -------------------------------------------------------------------------- */
.page-order {
  --bs-success: #D1A43A;
  --bs-success-rgb: 209, 164, 58;
  --bs-success-text-emphasis: #54421a;
  --bs-form-valid-color: #D1A43A;
  --bs-form-valid-border-color: #D1A43A;
}
/* Le checkmark ✓ des champs valides est une SVG verte figée par Bootstrap
   (les variables ne la touchent pas) → on la remplace par une version or. */
.page-order .form-control.is-valid,
.page-order .was-validated .form-control:valid,
.page-order .form-select.is-valid,
.page-order .was-validated .form-select:valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23D1A43A' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
   Tri produits (« Trier par ») — retrait de l'icône, sélecteur plus étroit
   -------------------------------------------------------------------------- */
/* Retirer l'icône "sort" devant « Trier par : » */
.sort-by .material-icons {
  display: none;
}
/* Réduire la largeur du sélecteur de tri */
.products-sort-order {
  flex-grow: 0;
  width: auto;
  max-width: 210px;
}
/* Bouton de tri : contour or (comme les champs de l'ancien thème).
   Spécificité .products-selection … pour battre .layout-* .products-selection .select-title (0,3,0). */
.products-selection .products-sort-order .select-title {
  border: 1px solid #D1A43A;
}

/* --------------------------------------------------------------------------
   Bloc présentation (#custom-text) — 2 colonnes 50/50 image / texte
   (contenu CMS à plat : 1er <p> = image, puis h1 + p = texte)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #custom-text .custom-text__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    align-items: center;
  }
  /* tout le texte dans la colonne de droite */
  #custom-text .custom-text__content > * {
    grid-column: 2;
  }
  /* le 1er paragraphe (image) occupe la colonne de gauche sur toute la hauteur */
  #custom-text .custom-text__content > p:first-child {
    grid-column: 1;
    grid-row: 1 / span 99;
    align-self: center;
    margin: 0;
  }
}
#custom-text .custom-text__content img {
  max-width: 100%;
  height: auto;
}
/* Titre du bloc présentation en or */
#custom-text .custom-text__content h1 {
  color: #D1A43A;
  font-weight: 500;
}

/* Espace bas du contenu principal */
#content-wrapper {
  padding-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Slider d'accueil (ps_imageslider) — légende native centrée (titre + bouton)
   recréant l'ancien visuel incrusté, à partir des champs du module.
   -------------------------------------------------------------------------- */
/* Graisses du slider : le parent met le titre en 800 et le sous-titre en 700
   (sur `.carousel`). On les ramène aux graisses voulues. Surspécifié
   (#home-slider .carousel) pour battre la déclaration du parent portée par
   `.carousel` lui-même. */
#home-slider .carousel {
  --slider-title-weight: 500;
  --slider-subtitle-weight: 400;
}
/* Tout le slide est un lien (url) : pas de soulignement sur le titre/description
   (les liens Bootstrap sont soulignés par défaut). */
#home-slider .carousel-link,
#home-slider .carousel-link:hover {
  text-decoration: none;
}
/* Légende CENTRÉE sur l'image (hummingbird la pose à gauche, alignée à gauche). */
#home-slider .carousel-caption {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 760px;
  text-align: center;
  padding: 0;
}
/* Titre : blanc (pas l'or des titres), bodoni, ombre légère pour la lisibilité
   sur photo. */
#home-slider .carousel-caption .carousel-title {
  color: #fff;
  font-size: clamp(1.75rem, 5.5vw, 3.25rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
/* Description optionnelle : blanche, centrée. */
#home-slider .carousel-caption .caption-description,
#home-slider .carousel-caption .caption-description p {
  color: #fff;
  max-width: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
#home-slider .carousel-caption .caption-description {
  margin-bottom: 1.25rem;
}
/* Bouton CTA = champ « légende » + lien « url » : bouton or (btn-primary),
   libellé en MAJUSCULES comme l'ancien visuel. */
#home-slider .carousel-caption .carousel-cta {
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   Filet de sécurité images — empêche tout débordement horizontal
   -------------------------------------------------------------------------- */
/* Le parent ne borne que .img-fluid et .rich-text img ; les images hors de ces
   contextes (descriptions produit collées en HTML, pages CMS, blocs/HTML de
   modules, logos marques…) peuvent dépasser la largeur sur mobile. Filet global
   reprenant la convention du thème (height:auto + max-width:100%). Les règles
   plus spécifiques (slider object-fit, logo max-height…) gardent la priorité. */
img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Bloc réassurance (blockreassurance) — picto espacé, titre or bodoni
   -------------------------------------------------------------------------- */
/* Ligne fine grise centrée au-dessus du bloc (séparateur) */
.blockreassurance {
  border-top: 1px solid #ddd;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  margin-top: 1.5rem;
}
/* Le module rend un <div class="row"> (gouttières négatives -12px) dans une
   colonne .col-sm-12 sans padding → débordement horizontal de 24px (visible
   surtout en mobile : barre de scroll horizontale). On neutralise les marges. */
.blockreassurance .row {
  margin-left: 0;
  margin-right: 0;
}
.blockreassurance .block-icon {
  padding-bottom: 1rem;
}
/* Titre : or + bodoni 1.5rem 500 (le module met un style inline color:#000 → !important) */
.blockreassurance .block-title {
  color: #D1A43A !important;
  font-family: "bodoni-urw", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 500;
  padding-bottom: 5px;
}
/* MOBILE : en desktop l'item est centré (picto au-dessus) ; en mobile le module
   flotte le picto à gauche → la description s'enroule autour (1ʳᵉ ligne décalée,
   suite pleine largeur), titre à gauche mais paragraphe « bancal ». On repasse en
   grille 2 colonnes : picto à gauche, titre + paragraphe empilés à droite, tous
   alignés à gauche sur le même bord (un titre suivi d'un paragraphe = aligné à
   gauche). */
@media (max-width: 767.98px) {
  .blockreassurance .row > div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .85rem;
    align-items: center;
    text-align: left;
  }
  .blockreassurance .row > div > .block-icon {
    float: none;
    grid-row: 1 / span 2;
    align-self: center;
    padding-bottom: 0;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   2. Composants dont la couleur est figée en dur dans le CSS compilé
      (l'override des variables ci-dessus ne les atteint pas)
   -------------------------------------------------------------------------- */

/* Boutons */
.btn-primary {
  --bs-btn-bg: #D1A43A;
  --bs-btn-border-color: #D1A43A;
  --bs-btn-hover-bg: #b28b31;
  --bs-btn-hover-border-color: #a7832e;
  --bs-btn-active-bg: #a7832e;
  --bs-btn-active-border-color: #9c7b2b;
  --bs-btn-disabled-bg: #D1A43A;
  --bs-btn-disabled-border-color: #D1A43A;
  --bs-btn-focus-shadow-rgb: 209, 164, 58;
}
.btn-outline-primary {
  --bs-btn-color: #D1A43A;
  --bs-btn-border-color: #D1A43A;
  --bs-btn-hover-bg: #D1A43A;
  --bs-btn-hover-border-color: #D1A43A;
  --bs-btn-active-bg: #D1A43A;
  --bs-btn-active-border-color: #D1A43A;
  --bs-btn-disabled-color: #D1A43A;
  --bs-btn-disabled-border-color: #D1A43A;
  --bs-btn-focus-shadow-rgb: 209, 164, 58;
}

/* Navigation, pagination, liste, barre de progression */
.nav-pills {
  --bs-nav-pills-link-active-bg: #D1A43A;
}
.pagination {
  --bs-pagination-active-bg: #D1A43A;
  --bs-pagination-active-border-color: #D1A43A;
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(209, 164, 58, .25);
}
.list-group {
  --bs-list-group-active-bg: #D1A43A;
  --bs-list-group-active-border-color: #D1A43A;
}
.progress,
.progress-stacked {
  --bs-progress-bar-bg: #D1A43A;
}
.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: #D1A43A;
}

/* Formulaires (cases à cocher, sliders) */
.form-check-input:checked {
  background-color: #D1A43A;
  border-color: #D1A43A;
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #D1A43A;
  border-color: #D1A43A;
}
.form-range::-webkit-slider-thumb {
  background-color: #D1A43A;
}
.form-range::-moz-range-thumb {
  background-color: #D1A43A;
}

/* Carrousel */
.carousel-indicators [data-bs-target] {
  background-color: #D1A43A;
}

/* Bordures de sélection : déclinaisons couleur produit, adresse choisie,
   miniature active */
.custom-checkbox input[type="checkbox"] + span.color.active,
.custom-checkbox input[type="checkbox"] + span.color:hover,
.variant-links .color.active,
.variant-links .color:hover,
label .color.active,
label .color:hover,
.step .address.selected,
.thumbnails__container .thumbnail.active img {
  border-color: #D1A43A !important;
}
