/* ==========================================================================
   MSC Auto Pièces — Surcharge de couleurs pour le thème Hummingbird
   Palette : bleu marine (identique header/footer), blanc cassé, rouge en accent
   A coller à la fin de : themes/hummingbird/assets/css/theme.css
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  /* ---- Couleur principale : bleu marine (identique header/footer) ---- */
  --bs-primary: #0f2d54;
  --bs-primary-rgb: 15, 45, 84;
  --bs-primary-text-emphasis: #081a30;
  --bs-primary-bg-subtle: #d7dee6;
  --bs-primary-border-subtle: #8fa3b8;

  /* ---- Liens ---- */
  --bs-link-color: #0f2d54;
  --bs-link-color-rgb: 15, 45, 84;
  --bs-link-hover-color: #081a30;
  --bs-link-hover-color-rgb: 8, 26, 48;

  /* ---- Fond général : blanc cassé plutôt que blanc pur ---- */
  --bs-body-bg: #f6f5f2;
  --bs-body-bg-rgb: 246, 245, 242;
  --bs-tertiary-bg: #efeeea;
  --bs-tertiary-bg-rgb: 239, 238, 234;
  --bs-secondary-bg: #e9e7e2;
  --bs-secondary-bg-rgb: 233, 231, 226;

  /* ---- Rouge : accents (promos, alertes, liserés) ---- */
  --bs-danger: #c8202e;
  --bs-danger-rgb: 200, 32, 46;
  --bs-danger-text-emphasis: #7d141d;
  --bs-danger-bg-subtle: #f6d7da;
  --bs-danger-border-subtle: #e79aa1;

  /* ---- Focus ring assorti au bleu ---- */
  --bs-focus-ring-color: rgba(15, 45, 84, 0.25);
  --bs-btn-focus-shadow-rgb: 15, 45, 84;

  /* ---- Liseré rouge dégradé partagé (header, menu, fil d'ariane) ---- */
  --accent-fade-line: linear-gradient(
    to right,
    transparent,
    var(--bs-danger) 30%,
    var(--bs-danger) 70%,
    transparent
  );
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger-text-emphasis);
  --bs-btn-active-border-color: var(--bs-danger-text-emphasis);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

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

/* ==========================================================================
   ACCENTS ROUGES (badges, prix soldés, checkout)
   ========================================================================== */
.product-flags .badge.discount {
  border-color: var(--bs-danger) !important;
  color: var(--bs-danger) !important;
}

.product-miniature__regular-price,
.page-product .product__regular-price {
  color: var(--bs-danger);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* ==========================================================================
   FOOTER TOUJOURS COLLÉ EN BAS (sticky footer), même sur les pages courtes
   ========================================================================== */
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
body > main,
#content,
#wrapper,
.wrapper {
  flex: 1 0 auto;
}
footer,
#footer,
.footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* ==========================================================================
   MODULE HEADERBAR (mscheaderbar / topinfo.tpl) — bandeau livraison/horaires
   ========================================================================== */
.msc-topinfo {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}
.msc-topinfo__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
}
.msc-topinfo__left {
  border: 1px solid var(--bs-primary);
  animation: msc-pulse-blue 2.5s infinite;
}
.msc-topinfo__pickup-box {
  border: 1px solid var(--bs-danger);
  animation: msc-pulse-red 2.5s infinite;
}
@keyframes msc-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 45, 84, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(15, 45, 84, 0); }
}
@keyframes msc-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 32, 46, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(200, 32, 46, 0); }
}
.msc-topinfo__line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.msc-topinfo__icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.msc-topinfo__icon-badge--blue {
  background-color: var(--bs-primary);
}
.msc-topinfo__icon-badge--red {
  background-color: var(--bs-danger);
}
.msc-topinfo__icon-badge i {
  color: #fff;
  font-size: 0.8rem;
  margin-top: 3px;
}
.msc-topinfo__line--indent {
  padding-left: 1.45rem;
}
.msc-topinfo__whatsapp {
  color: #25d366;
  text-decoration: none;
  font-weight: 600;
}
.msc-topinfo__whatsapp:hover {
  text-decoration: underline;
}
.msc-topinfo__whatsapp i {
  color: #25d366;
}
.msc-topinfo__logo-space {
  flex: 0 0 auto;
  width: 12rem;
  min-width: 1px;
}
@media (max-width: 767.98px) {
  .msc-topinfo__left,
  .msc-topinfo__pickup-box {
    display: none !important;
  }
  .msc-topinfo {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.4rem;
  }
  .msc-topinfo__box {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0.6rem;
    white-space: nowrap;
  }
  .msc-topinfo__text {
    display: none;
  }
  .msc-topinfo__line--indent {
    display: none;
  }
  .msc-topinfo__logo-space {
    width: 6rem;
    order: -1;
    flex-basis: 100%;
    text-align: center;
  }
}
@media (max-width: 575.98px) {
  .msc-topinfo__left .msc-topinfo__line:nth-child(n+2) {
    display: none;
  }
  .msc-topinfo__pickup-box .msc-topinfo__line:nth-child(1) {
    display: none;
  }
}

/* ==========================================================================
   PAGE "NOS MAGASINS" (.page-content--stores) — largeur centrée normale
   + horaires toujours visibles à droite, sans accordéon à cliquer
   ========================================================================== */
.page-content--stores {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 992px) {
  .page-content--stores .store {
    display: grid;
    grid-template-columns: 18rem 1fr 20rem;
    gap: 2rem;
    align-items: start;
  }
  .page-content--stores .store__image {
    grid-row: 1 / -1; /* évite que la photo (haute) ne force une ligne géante pour tout le monde */
  }
  .page-content--stores .store__informations {
    display: contents;
  }
  .page-content--stores .accordion.accordion--small {
    display: contents;
  }
  .page-content--stores .store__name,
  .page-content--stores .store__address {
    grid-column: 2;
  }
  /* "À propos et Contact" reste avec le nom/adresse, repliable comme avant */
  .page-content--stores .accordion-item:not(.border-0) {
    grid-column: 2;
  }
  /* "Consulter les horaires" passe en 3e colonne, toujours ouvert */
  .page-content--stores .accordion-item.border-0 {
    grid-column: 3;
  }
  .page-content--stores .accordion-item.border-0 .accordion-collapse {
    display: block !important;
    height: auto !important;
  }
  .page-content--stores .accordion-item.border-0 .store__toggle {
    pointer-events: none; /* plus la peine de cliquer, c'est déjà ouvert */
  }
  .page-content--stores .accordion-item.border-0 .store__toggle::after {
    display: none;
  }
}

.footer__main {
  background: var(--bs-primary);
  position: relative;
}
p.footer-block__title,
.footer-block__title {
  margin-block-end: 1.5rem !important;
  text-transform: uppercase !important;
  color: var(--bs-danger) !important;
}
.footer-block__title a {
  text-transform: uppercase !important;
  color: var(--bs-danger) !important;
}
.footer__main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-fade-line);
}

/* Retire le lien "Logiciel e-commerce par PrestaShop" */
.copyright a[href*="prestashop-project.org"] {
  display: none;
}

.checkout-steps__step--current .checkout-steps__number,
.checkout-steps__step--success .checkout-steps__number {
  background: var(--bs-primary);
}

.address-card--radio.selected {
  border-color: var(--bs-primary);
}

/* ==========================================================================
   BARRE DU HAUT (Call us / Connexion / Panier)
   ========================================================================== */
.header-top {
  background-color: var(--bs-primary);
  position: relative;
  padding-block: 0.9rem; /* bande plus haute */
}
.header-top,
.header-top * {
  color: #fff !important;
}
.header-top a:hover,
.header-top a:hover * {
  color: #dce8f7 !important;
}

/* Le résultat de recherche (liste déroulante) ne doit PAS hériter du texte blanc forcé ci-dessus */
.header-top .ps-searchbar__dropdown,
.header-top .ps-searchbar__dropdown * {
  color: var(--bs-body-color) !important;
}
.header-top .ps-searchbar__result-name {
  color: var(--bs-body-color) !important;
}

/* Le menu "Votre compte" ne doit PAS hériter du texte blanc forcé non plus (même souci) */
.header-top .dropdown-menu,
.header-top .dropdown-menu * {
  color: var(--bs-body-color) !important;
  z-index:1050 !important;
}
.header-top .dropdown-menu {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: var(--bs-box-shadow-md);
  padding: 0.5rem 0;
  min-width: 12rem;
}
.header-top .dropdown-menu .material-icons {
  color: var(--bs-primary) !important;
  font-size: 1.15rem;
}
.header-top .dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}
.header-top .dropdown-item:hover,
.header-top .dropdown-item:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-primary) !important;
}
.header-top .dropdown-divider {
  margin: 0.35rem 0;
}

/* Liseré rouge en dégradé, qui s'estompe sur les bords */
.header-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-fade-line);
}

/* Le chiffre du panier reste lisible : cercle blanc, chiffre bleu, liseré rouge */
.header-top .header-block__badge {
  background-color: #fff !important;
  color: var(--bs-primary) !important;
  border: 2px solid var(--bs-danger) !important;
}

/* ==========================================================================
   HEADER : LOGO EN BADGE CENTRÉ (chevauche la barre bleue + le haut du menu)
   MENU CENTRÉ SUR UNE LIGNE, RECHERCHE EN LIGNE SÉPARÉE (col-4)
   ========================================================================== */
.header-bottom {
  position: relative;
  border-bottom: none; /* remplacé par le liseré dégradé ci-dessous */
}
@media (min-width: 768px) {
  .header-bottom {
    padding-top: 3.75rem; /* réserve la place pour le logo agrandi qui déborde par-dessus (desktop only) */
  }
}
.header-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bs-border-color);
}

.header-bottom .container,
.header-bottom .container-fluid {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

/* ==========================================================================
   CASCADE LAYERS — IMPORTANT
   Le thème (Bootstrap + ps-base) déclare ses utilitaires (.d-none, .d-md-block,
   .d-md-none, etc.) à l'intérieur de couches CSS (@layer). Or, ENTRE déclarations
   !important, une règle DANS une couche bat toujours une règle HORS couche,
   quelle que soit sa spécificité (c'est l'inverse du comportement sans couches).
   C'est pour ça que nos !important sur `display` ci-dessous étaient ignorés
   malgré une spécificité #id .classe supérieure à .d-none.
   → Toutes les règles qui doivent battre une classe utilitaire Bootstrap sont
   donc regroupées dans le même layer "utilities" que le thème.
   Si le nom exact du layer chez toi n'est pas "utilities" (vérifié via devtools
   ou le script JS donné en conversation), remplace le nom ci-dessous partout. ---- */
@layer utilities {

  /* ---- Bande bleue (header-top) : TOUJOURS visible, à toutes les tailles ---- */
  #header .header-top {
    display: block !important;
    background-color: var(--bs-primary) !important;
  }

  @media (min-width: 768px) {
    #header #_desktop_ps_searchbar,
    #header #_desktop_ps_customersignin,
    #header #_desktop_ps_shoppingcart {
      display: flex !important;
    }
    #header .ps-searchbar--mobile,
    #header #_mobile_ps_customersignin,
    #header #_mobile_ps_shoppingcart {
      display: none !important;
    }
  }

  @media (max-width: 767.98px) {
    /* La couleur bleue visible vient maintenant de #header lui-même (pas de
       .header-top) : #header n'a pas de z-index élevé qui plafonnerait ses
       enfants, donc le logo (z:1050) peut rester visible sans qu'aucun fond
       opaque ne le recouvre, même si .header-top (juste en dessous) doit
       garder un z-index élevé pour que son panneau de recherche s'affiche
       par-dessus le logo une fois ouvert. */
    #header {
      background-color: var(--bs-primary) !important;
    }
    #header .header-top {
      position: relative;
      background-color: transparent !important;
      z-index: 1095;
      height: 4.5rem;
      padding: 0 !important;
      overflow: visible;
    }
    #header,
    #header .header-bottom {
      overflow: visible !important;
    }
    /* On masque les versions desktop (trop fragiles à repositionner ici) et on
       réactive les versions mobiles natives à la place, en position absolue.
       ATTENTION : on ne cache PAS .header-top__left en entier, car
       .ps-searchbar--mobile (la loupe mobile) vit À L'INTÉRIEUR de cette
       colonne — la cacher entièrement cachait aussi la loupe avec elle,
       quoi qu'on fasse par ailleurs sur .ps-searchbar--mobile. */
    #header #_desktop_ps_searchbar,
    #header .header-top__right {
      display: none !important;
    }
    #header .header-top__left {
      display: flex !important;
    }
    /* Pas de transform ici : un transform sur un ancêtre change le point de
       référence de tout descendant en position:fixed (comme l'offcanvas de
       recherche Bootstrap juste en dessous), qui se retrouve alors coincé
       près de l'icône au lieu de s'ouvrir plein écran. Centrage en flexbox
       pur à la place, aucun transform en jeu. */
    #header .ps-searchbar--mobile {
      display: flex !important;
      align-items: center;
      position: absolute;
      left: 1rem;
      top: 0;
      bottom: 0;
    }
    #header .ps-searchbar--mobile .header-block__action-btn {
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
    /* Le panneau de recherche doit passer au-dessus du logo (z-index 1050) */
    #header .ps-searchbar__offcanvas {
      z-index: 1091 !important;
    }
    #header .ps-searchbar--mobile .header-block__icon {
      color: #fff !important;
      font-size: 0 !important; /* on désactive le rendu de police ici */
    }
    /* Loupe en SVG intégré plutôt qu'en police à ligature (Material Icons) :
       le rendu par ligature ("search" fusionné en un seul pictogramme) s'est
       révélé instable et dupliqué visuellement sur plusieurs navigateurs
       (Chrome, Edge, Firefox) malgré un code ne contenant qu'un seul élément —
       un SVG ne dépend d'aucune police et élimine ce risque définitivement. */
    #header .ps-searchbar--mobile .header-block__icon::before {
      content: "" !important;
      display: inline-block !important;
      width: 25.6px;
      height: 25.6px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      font-family: initial !important;
    }
    #header #_mobile_ps_customersignin,
    #header #_mobile_ps_shoppingcart {
      display: flex !important;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    #header #_mobile_ps_customersignin {
      right: 3rem;
    }
    #header #_mobile_ps_shoppingcart {
      right: 0.5rem;
    }
    #header #_mobile_ps_customersignin .header-block__icon,
    #header #_mobile_ps_shoppingcart .header-block__icon,
    #header #_mobile_ps_shoppingcart .header-block__title,
    #header #_mobile_ps_shoppingcart .header-block__badge {
      color: #fff !important;
    }

    /* Bandeau "MENU / BACK" du menu mobile : bleu au lieu de noir (mauvais
       sélecteur avant : le <li> a la classe close_menu SEULE, pas mm_menus_li) */
    .close_menu {
      background-color: var(--bs-primary) !important;
      color: #fff !important;
    }
    .close_menu * {
      color: #fff !important;
    }

    /* ---- Fusion visuelle : header-bottom (hamburger/logo/compte/panier)
       passe en bleu marine lui aussi, pour ne faire qu'un avec header-top
       (recherche) juste au-dessus. Pas de déplacement de DOM : #_mobile_ps_customersignin
       et #_mobile_ps_shoppingcart vivent dans header-bottom, pas dans header-top,
       donc on unifie les couleurs plutôt que de bricoler un positionnement fixe fragile. ---- */
    #header .header-bottom {
      background-color: var(--bs-primary) !important;
    }
    #header .header-bottom::after {
      display: none !important; /* pas de liseré au milieu de la fusion */
    }

    /* Hamburger "Menu" en blanc sur fond bleu */
    #header .ybc-menu-toggle,
    #header .ybc-menu-toggle .icon-bar {
      color: #fff !important;
    }
    #header .ybc-menu-toggle .icon-bar {
      background-color: #fff !important;
    }

    /* Icônes compte / panier mobile en blanc */
    #header #_mobile_ps_customersignin .header-block__icon,
    #header #_mobile_ps_shoppingcart .header-block__icon,
    #header #_mobile_ps_shoppingcart .header-block__title {
      color: #fff !important;
    }

    /* Bulle du panier mobile : identique au desktop (fond blanc, bord rouge, chiffre bleu) */
    #header #_mobile_ps_shoppingcart .header-block__badge {
      background-color: #fff !important;
      color: var(--bs-primary) !important;
      border: 2px solid var(--bs-danger) !important;
    }

    /* Bandeau bleu du haut réduit au minimum (juste la place pour la loupe) :
       vérifié en live que le logo (ancré via un top négatif sur header-bottom)
       reste entièrement visible jusqu'à cette hauteur, pas moins. */
    #header .header-top {
      height: 2.5rem !important;
    }
    /* Le liseré rouge ne doit plus marquer la couture entre header-top et
       header-bottom (invisible maintenant qu'ils sont fusionnés en une seule
       couleur) : on l'enlève ici... */
    #header .header-top::after {
      display: none !important;
    }
    /* ...et on le fait réapparaître tout en bas du bloc fusionné à la place */
    #header .header-bottom::after {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      height: 3px !important;
      background: var(--accent-fade-line) !important;
    }

    /* Fond gris (#f6f6f6) codé en dur par le module Mega Menu autour du
       bouton "MENU" : transparent pour se fondre dans le bleu marine */
    #header .ets_mm_megamenu .container {
      background-color: transparent !important;
    }

    /* Sécurité anti-doublon : l'icône loupe du champ desktop (normalement
       caché) ne doit jamais apparaître en plus de celle du déclencheur mobile */
    #header .ps-searchbar__magnifier {
      display: none !important;
    }

    /* Panneau de recherche mobile (une fois ouvert) : fond transparent pour
       voir la page derrière, champ de saisie en bleu sur blanc pour rester lisible.
       ATTENTION : le composant "offcanvas" natif de Bootstrap reste bloqué en
       position fermée sur ce site (son transform est ré-écrit en continu par un
       script, probablement un conflit jQuery UI / Bootstrap — un !important en
       style inline n'y change même rien, signe que ce n'est plus du ressort du
       CSS). On ne pilote donc plus l'ouverture via la classe .show de Bootstrap,
       mais via notre propre classe .msc-search-open, gérée par le petit script
       msc-search-toggle.js à ajouter en plus de ce fichier (voir fichier séparé). */
    /* transition: none — une transition CSS active a priorité sur TOUT,
       même un !important en style inline. On a confirmé en live qu'une
       transition restait bloquée en plein vol sur cet élément (probablement
       redéclenchée en boucle par un script en conflit) et ignorait donc nos
       corrections. En la désactivant, le panneau s'ouvre/se ferme
       instantanément mais de façon fiable — sans effet de glissement animé,
       mais ça fonctionne à tous les coups. */
    #header .ps-searchbar__offcanvas {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      transform: translateY(-100%) !important;
      transition: none !important;
      z-index: 1092 !important;
      background-color: transparent !important;
      box-shadow: none !important;
      visibility: visible !important;
      pointer-events: none !important;
    }
    #header .ps-searchbar__offcanvas.msc-search-open {
      transform: translateY(0) !important;
      pointer-events: auto !important;
    }
    #header .ps-searchbar__offcanvas .offcanvas-header {
      background-color: transparent !important;
    }
    #header .ps-searchbar__offcanvas .ps-searchbar__input {
      background-color: #fff !important;
      color: var(--bs-primary) !important;
    }
    #header .ps-searchbar__offcanvas .btn-link {
      color: #fff !important;
      transition: none !important;
    }
  }

} /* fin @layer utilities */

/* Logo : badge centré via position absolue (fiable, indépendant des voisins flex) */
.header-bottom .navbar-brand {
  position: absolute;
  left: 50%;
  top: -2.5rem; /* chevauche la bande bleue, ajusté pour la nouvelle hauteur 4.5rem */
  transform: translateX(-50%);
  z-index: 1050;
  margin: 0;
}
.header-bottom .navbar-brand .logo {
  height: 6.5rem;
  max-height: 6.5rem;
  width: auto;
  max-width: 16rem;
}

@media (min-width: 768px) {
  /* Desktop : badge 2x plus gros, commence sur la bande bleue, finit avant le menu */
  .header-bottom .navbar-brand {
    top: -5.5rem;
  }
  .header-bottom .navbar-brand .logo {
    height: 12rem;
    max-height: 12rem;
    max-width: 32rem;
  }
}

/* ---- Barre de recherche : hookée sur displayNav1 (header-top__left),
   simple flux normal dans sa colonne Bootstrap col-md-4 native ---- */
/* Marges retirées temporairement (test de comportement, à la demande) */

/* ---- Alignement gauche garanti : tous les conteneurs du header (recherche,
   bandeau livraison/horaires, menu) démarrent exactement au même endroit,
   peu importe leur classe Bootstrap d'origine (container-md / container-fluid / container).
   Largeur FIXE et centrée (pas 100%, sinon ça s'étale bord à bord). ---- */
.header-top .container-md,
.header-top .container-fluid,
.header-top .container,
.header-bottom .container-md,
.header-bottom .container-fluid,
.header-bottom .container,
.header-nav-full-width .container-md,
.header-nav-full-width .container-fluid,
.header-nav-full-width .container,
.ets_mm_megamenu .container {
  max-width: 1320px !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Recherche : neutralise ms-auto (Bootstrap) qui la pousse vers la droite */
#_desktop_ps_searchbar {
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}

.header-top__left {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  padding-left: 0 !important;
}

@media (max-width: 767.98px) {
  .mm_menus_ul > li.mm_menus_li:not(.close_menu) > a {
    color: var(--bs-primary) !important;
  }
}

/* Taille de police du menu principal — spécificité extrême (classes répétées)
   pour battre le CSS natif du module quel que soit l'ordre de chargement */
.ets_mm_megamenu.ets_mm_megamenu.ets_mm_megamenu ul.mm_menus_ul.mm_menus_ul.mm_menus_ul > li.mm_menus_li.mm_menus_li > a {
  font-size: 0.85rem !important;
}
@media (min-width: 768px) {
  .ets_mm_megamenu.ets_mm_megamenu.ets_mm_megamenu ul.mm_menus_ul.mm_menus_ul.mm_menus_ul > li.mm_menus_li.mm_menus_li > a {
    /* clamp(mini, préféré-fluide-en-vw, maxi) : suit vraiment la largeur d'écran,
       pas juste 2 paliers fixes comme avant avec le rem seul */
    font-size: clamp(0.55rem, 1vw, 1rem) !important;
  }
}
.ps-searchbar {
  max-width: 20rem;
  width: 100%;
  margin: 0;
}
.ps-searchbar__form {
  position: relative;
}
/* Le résultat de recherche s'ouvre vers la droite (pas vers la gauche) */
.ps-searchbar__dropdown {
  position: absolute !important;
  left: 0;
  right: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  z-index: 1090;
}
.ps-searchbar__dropdown a.ps-searchbar__result-link:hover,
.ps-searchbar__dropdown a.ps-searchbar__result-link:hover *,
.ps-searchbar__dropdown a.ps-searchbar__result-link:hover .ps-searchbar__result-name {
  color: var(--bs-primary) !important;
  background-color: var(--bs-tertiary-bg) !important;
}
.ps-searchbar__result-link:hover,
.ps-searchbar__result-link:hover * {
  color: var(--bs-primary) !important;
}
.ps-searchbar__input {
  background-color: #fff;
  color: var(--bs-primary) !important;
  border: 1px solid #fff !important;
  border-radius: 0.375rem;
  padding: 0.35rem 0.75rem 0.35rem 2.25rem;
  height: auto;
  width: 100%;
}
.ps-searchbar__input::placeholder {
  color: var(--bs-secondary-color);
}
.ps-searchbar__magnifier {
  color: var(--bs-primary) !important;
}
/* Résultats de recherche : texte normal lisible (pas blanc) */
.ps-searchbar__dropdown,
.ps-searchbar__dropdown * {
  color: var(--bs-body-color) !important;
}
.ps-searchbar__result-name {
  color: var(--bs-body-color) !important;
}

/* Menu : centré sur une ligne */
.header-nav-full-width {
  position: relative; /* contexte de positionnement correct pour les sous-menus */
}
.ps-mainmenu {
  flex-basis: 100%;
  max-width: 100%;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree {
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li {
  position: relative; /* indispensable pour que le sous-menu se positionne par rapport à CET item */
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
  padding: 0.9rem 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle {
  padding: 0.9rem 0.1rem;
}

/* Catégorie active du menu : rouge, comme demandé (plus de gris) */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link {
  color: var(--bs-danger) !important;
}

/* Survol des liens du menu : bleu marine (identique footer) */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link:hover,
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle:hover {
  color: var(--bs-primary) !important;
}

.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link:focus,
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link:focus-visible,
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle:focus,
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---- Sous-menus déroulants : mise en page 2 colonnes CÔTE À CÔTE ----
   Le switch entre catégories se fait NATIVEMENT au clic (JS déjà présent
   dans le thème : data-open-tab / role="tab" / classe .active) —
   on ne touche plus du tout à la logique d'affichage, juste au style. */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .submenu {
  top: 100% !important; /* le thème pose un style inline (top:103px) via JS, on le bat avec !important */
  left: 0;
  right: auto;
  transform: none;
  width: 46rem;
  max-width: 90vw;
  padding-block: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-md);
  z-index: 1060 !important;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left {
  border-right: 1px solid var(--bs-border-color);
  padding-block: 0.25rem;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left-item {
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.4rem 1rem;
  white-space: nowrap; /* le titre tient sur une seule ligne */
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left-item:hover {
  color: var(--bs-danger);
}
/* Mise en forme des liens à l'intérieur du volet de droite (contenu natif) */
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item__group-main-item {
  color: var(--bs-secondary-color) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item {
  display: block;
  padding: 0.35rem 0;
  color: var(--bs-tertiary-color);
  font-size: 0.85rem;
  font-weight: 400;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item:hover {
  color: var(--bs-danger);
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items ul {
  margin-bottom: 0.5rem;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items ul:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   FIL D'ARIANE — même bleu marine que le header, liseré rouge fin
   ========================================================================== */
.breadcrumb__wrapper {
  background-color: var(--bs-primary);
  position: relative;
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.6);
  --bs-breadcrumb-item-active-color: #ced4da;
}
.breadcrumb__wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-fade-line);
}
.breadcrumb__wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-fade-line);
}
.breadcrumb__wrapper .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.6);
}
.breadcrumb-item a {
  color: #fff !important;
}
/* L'élément actif du fil d'ariane est un <span> enfant DIRECT du li (pas dans un lien) */
.breadcrumb-item > span {
  color: var(--bs-danger) !important;
  font-weight: 600;
}

/* Le bouton WhatsApp est stylé directement dans le template du module
   (modules/.../whatsapp-button.tpl) — pas besoin de règles ici. */

/* ==========================================================================
   PAGES CATÉGORIE
   ========================================================================== */
.category__cover-image {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.subcategory__link {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 600;
}
.subcategory__link:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

.products__sort-dropdown-button {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.page-title-section,
h1 {
  color: var(--bs-primary);
}

.product-miniature__price,
.page-product .product__price {
  color: var(--bs-primary);
}

/* ==========================================================================
   MEGA MENU PRO (module ets_megamenu) — largeur normale, sous-menus imbriqués
   ========================================================================== */

/* Largeur du dropdown : desktop uniquement (mobile garde sa pleine largeur native) */
@media (min-width: 768px) {
  .mm_columns_ul {
    width: auto !important;
    min-width: 16rem;
    max-width: 24rem;
  }
  .mm_columns_li.column_size_12 {
    width: auto !important;
    flex: 0 0 auto;
  }
}
.ets_mm_block_content {
  padding: 0.5rem 1rem;
}

/* Indentation légère pour les sous-listes repliables (on ne touche PAS à
   display/position : ça casserait le clic natif pour plier/déplier) */
.ets_mm_categories .ets_mm_categories {
  padding-left: 1rem;
}

/* Volet du niveau le plus profond (ex: "Carter de distribution / Kit distribution") :
   bordure bleue arrondie, comme demandé */
.ets_mm_categories .ets_mm_categories .ets_mm_categories,
.ets_mm_categories .ets_mm_categories {
  border-radius: 0.5rem;
  border: 1px solid var(--bs-primary);
  padding: 0.5rem 1rem;
  background: var(--bs-body-bg);
}

/* Couleurs et espacement des liens */
.ets_mm_categories {
  margin: 0;
  padding: 0;
}
.ets_mm_categories > li {
  padding: 0.2rem 0;
}
.ets_mm_categories > li > a {
  color: var(--bs-body-color);
  font-size: 0.85rem;
  display: block;
  text-decoration: none;
}
.ets_mm_categories > li > a:hover {
  color: var(--bs-danger);
}
.ets_mm_categories .has-sub > a {
  font-weight: 600;
  color: var(--bs-primary);
}

/* Niveau le plus profond (sous-sous-menu) : liens en bleu */
.ets_mm_categories .ets_mm_categories > li > a {
  color: var(--bs-primary);
  font-size: 0.8rem;
  font-weight: 400;
}
.ets_mm_categories .ets_mm_categories > li > a:hover {
  color: var(--bs-danger);
}

/* Chemin actif (menu + sous-menu choisis) : en rouge */
.mm_menus_li.active > a,
.mm_menus_li.mm_current > a,
.ets_mm_categories > li.active > a,
.ets_mm_categories > li.opened > a,
.ets_mm_categories > li.has-sub.active > a {
  color: var(--bs-danger) !important;
}

/* ---- Barre de menu principale : DESKTOP UNIQUEMENT (≥768px) ----
   Important : tout ce bloc est limité au desktop pour ne pas casser
   le menu coulissant mobile qui réutilise la même structure HTML ---- */
@media (min-width: 768px) {

  .ets_mm_megamenu {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    background: var(--bs-body-bg) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ets_mm_megamenu_content {
    background: var(--bs-body-bg) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Filet de sécurité : si un ancêtre coupe le sticky, on le débloque */
  .header,
  .header-bottom,
  .header-nav-full-width {
    overflow: visible !important;
  }
  .ets_mm_megamenu .container,
  .ets_mm_megamenu .container-fluid,
  .ets_mm_megamenu .container-md,
  .ets_mm_megamenu .container-lg,
  .ets_mm_megamenu .container-xl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  ul.mm_menus_ul.mm_menus_ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
  }
  /* Le toggle mobile ("Menu"/"Back") ne doit pas prendre de place en desktop */
  ul.mm_menus_ul.mm_menus_ul > li.close_menu {
    display: none !important;
  }
  ul.mm_menus_ul.mm_menus_ul > li.mm_menus_li {
    position: relative !important; /* indispensable : sinon le sous-menu s'ancre ailleurs */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
  }
  ul.mm_menus_ul.mm_menus_ul > li.mm_menus_li > a {
    padding: 0.9rem 0.6rem !important;
    font-weight: 700 !important;
    color: var(--bs-primary) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-block !important;
    border: none !important;
    background: transparent !important;
  }
  ul.mm_menus_ul.mm_menus_ul > li.mm_menus_li > a:hover {
    color: var(--bs-danger) !important;
  }

  /* Sous-menu (.mm_columns_ul) : ancré à gauche de SON item, bordure bleue arrondie */
  ul.mm_menus_ul.mm_menus_ul > li.mm_menus_li > ul.mm_columns_ul {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    width: 22rem !important;
    max-width: 90vw !important;
    border: 1px solid var(--bs-primary) !important;
    border-radius: 0.5rem !important;
    box-shadow: var(--bs-box-shadow-md) !important;
    /* PAS de overflow:hidden ici : ça coupait le sous-sous-menu qui déborde (ex: Rotule) */
  }

} /* fin @media desktop-only */

/* ---- Mobile : élargir la zone cliquable à toute la ligne ----
   Le vrai bouton de bascule n'est PAS le petit chevron dans le lien (.mm_arrow,
   juste décoratif) mais un span SÉPARÉ, frère du lien : <span class="arrow">.
   On l'étire pour couvrir toute la ligne et le passer au-dessus du lien. ---- */
@media (max-width: 767.98px) {
  .mm_menus_li.mm_has_sub {
    position: relative;
  }
  .mm_menus_li.mm_has_sub > span.arrow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
  }
}

/* ==========================================================================
   CORRECTIONS PERSO — tableaux produits, fiche produit, bordures
   ========================================================================== */
.discounts-table, .rich-text table, .table {
  color: var(--bs-primary);
  width: 100% !important;
}
.page-product .product__bottom {
  grid-template-columns: 100% !important;
}
tbody, td, tfoot, th, thead, tr {
  border-color: var(--bs-primary) !important;
}

/* ==========================================================================
   CORRECTIONS PERSO — miniatures produits
   ========================================================================== */
.product-miniature__inner {
  border: 1px solid var(--bs-primary) !important;
}
.product-miniature__top {
  background-color: white !important;
}