/* ============================================================
   immatriculation-autocollant.fr — Thème enfant « hummingbird_child »
   PrestaShop 9.1.4 · Hummingbird v2.0.0 (Bootstrap 5.3.3)
   Injecté via override _partials/head.tpl
   ------------------------------------------------------------
   SOMMAIRE
     1.  Variables & base (typo, breadcrumb, skip-link, overflow)
     2.  Éléments globaux (boutons, prix)
     3.  Header — bannière + layout de la barre principale
     4.  Header — composants (recherche, connexion, panier)
     5.  Navigation — menu principal
     6.  Méga-menu & sous-menus (dropdown)
     7.  Catégories spécifiques (menus plats / Monde-Europe)
     8.  Accueil — Hero
     9.  Accueil — Réassurance (bloc accueil)
     10. Accueil — Bloc SEO
     11. Accueil — Avis clients
     12. Sections produits (bestsellers / featured) + espacements
     13. Miniatures produits
     14. Footer
     15. Responsive
   ============================================================ */


/* ============================================================
   1. VARIABLES & BASE
   ============================================================ */
:root {
  --ia-navy: #2c3e50;
  --ia-red: #3888c8;          /* accent (bleu logo) */
  --ia-red-dark: #2e70a4;
  --bs-body-font-family: 'Manrope', system-ui, Arial, sans-serif !important;
}

body, h1, h2, h3, button, input, .btn {
  font-family: var(--bs-body-font-family);
}

/* Empêcher tout débordement horizontal (sections en 100vw) */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* Masquer le fil d'ariane uniquement sur l'accueil */
body#index .breadcrumb_wrapper,
body#index .breadcrumb {
  display: none !important;
}

/* Accueil : supprimer le padding bas (bande blanche sous les avis) */
body#index #center-column {
  padding-bottom: 0 !important;
}

/* Bandeau promo — une déclaration par langue */
body::before {
  display: block;
  background: var(--ia-red) !important;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 10px;
  letter-spacing: .2px;
}
body.lang-fr::before { content: "Livraison gratuite en 48h  \00B7  Garantie 7 ans  \00B7  100% satisfait ou remboursé"; }
body.lang-de::before { content: "Kostenloser Versand in 48h  \00B7  7 Jahre Garantie  \00B7  100% zufrieden oder Geld zurück"; }
body.lang-es::before { content: "Envío gratuito en 48h  \00B7  7 años de garantía  \00B7  100% satisfecho o reembolsado"; }
body.lang-gb::before { content: "Free delivery in 48h  \00B7  7-year warranty  \00B7  100% satisfied or refunded"; }

/* Skip-link : masqué, visible uniquement au focus clavier (Tab) */
#header .skip-link:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ============================================================
   2. ÉLÉMENTS GLOBAUX (BOUTONS, PRIX)
   ============================================================ */
.btn-primary,
.btn-primary:focus,
.search-widget button {
  background: var(--ia-red) !important;
  border-color: var(--ia-red) !important;
}

.btn-primary:hover {
  background: var(--ia-red-dark) !important;
  border-color: var(--ia-red-dark) !important;
}

/* Prix en accent (markup BEM Hummingbird & natif) */
.product-price,
.price,
.current-price span,
.product-miniature__price,
.product-miniature__price *,
.product__price,
[class*="__price"] {
  color: var(--ia-red) !important;
}

/* Curseur main sur les éléments interactifs du header */
#_desktop_ps_customersignin .header-block__action-btn,
#_desktop_ps_customersignin button,
#_desktop_ps_customersignin a,
#_desktop_ps_shoppingcart .header-block__action-btn,
#_desktop_ps_shoppingcart a,
#_desktop_ps_languageselector .form-select,
#_desktop_ps_languageselector select {
  cursor: pointer !important;
}

/* ============================================================
   3. HEADER — BANNIÈRE + LAYOUT DE LA BARRE PRINCIPALE
   ============================================================ */
#header,
.header-top,
.header-nav {
  background: var(--ia-navy) !important;
  color: #fff !important;
}

#header a { color: #fff !important; }

/* Rendre le texte visible dans le dropdown du compte client */
#header .dropdown-menu a.dropdown-item {
  color: var(--ia-navy) !important;
}

/* Effet au survol pour rester cohérent avec la charte graphique */
#header .dropdown-menu a.dropdown-item:hover,
#header .dropdown-menu a.dropdown-item:focus {
  color: var(--ia-red) !important;
  background-color: #f4f5f7;
}

/* Barre principale : logo | recherche | connexion | panier sur une ligne */
.header-bottom__row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  position: relative;
  padding: 10px 0 !important;
}

/* Neutraliser les colonnes natives de PrestaShop (col-md-X) */
.header-bottom__row > div {
  width: auto !important;
  padding: 0 !important;
  max-width: none !important;
  position: relative !important;
}

/* Ordonnancement Flexbox de la barre principale */
.header-bottom__row > .ps-mainmenu__mobile-toggle { order: 0; flex: 0 0 auto !important; }
.header-bottom__row > .header-bottom__logo        { order: 1; flex: 1 1 auto !important; min-width: 0; }
.header-bottom__row > #_desktop_ps_searchbar      { order: 2; flex: 0 0 auto !important; min-width: 0; }
.header-bottom__row > #_desktop_ps_customersignin { order: 3; flex: 0 0 auto !important; }
.header-bottom__row > #_desktop_ps_shoppingcart   { order: 4; flex: 0 0 auto !important; }

.header-bottom__logo img {
  max-height: 44px;
  width: auto;
}

/* Bouton burger (mobile) */
.ps-mainmenu__mobile-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}
.ps-mainmenu__mobile-toggle,
.ps-mainmenu__mobile-toggle i,
.ps-mainmenu__mobile-toggle .material-icons {
  color: #ffffff !important;
}


/* ============================================================
   4. HEADER — COMPOSANTS (RECHERCHE, CONNEXION, PANIER)
   ============================================================ */

/* --- 4.1 Recherche --- */
#_desktop_ps_searchbar {
  order: 2;
  flex: 1 1 auto !important;
  min-width: 250px;
  max-width: 520px;
  margin: 0 auto !important;
}

#_desktop_ps_searchbar .ps-searchbar,
#_desktop_ps_searchbar .ps-searchbar__form {
  position: relative;
  width: 100% !important;
  max-width: none !important;
}

#_desktop_ps_searchbar .ps-searchbar__input {
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 6px !important;
  padding: 0 60px 0 16px !important;
  background: #fff !important;
}

#_desktop_ps_searchbar .ps-searchbar__magnifier {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: 50%;
  transform: translateY(-50%);
  width: 60px !important;
  height: 48px !important;
  border-radius: 0 6px 6px 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--ia-red) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  z-index: 3;
  font-size: 22px;
}

#_desktop_ps_searchbar .ps-searchbar__clear {
  right: 58px !important;
  left: auto !important;
}

/* --- 4.2 Connexion --- */
#_desktop_ps_customersignin {
  order: 3;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
#_desktop_ps_customersignin .header-block__action-btn {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  line-height: 1.2;
}
#_desktop_ps_customersignin .header-block__icon { font-size: 26px; color: #fff !important; }
#_desktop_ps_customersignin .header-block__title { font-weight: 600; font-size: 14px; color: #fff !important; }

.ia-signin__txt  { line-height: 1.15; text-align: left; }
.ia-signin__top  { font-size: 12px; font-weight: 400; color: #fff !important; }
.ia-signin__main { font-size: 14px; font-weight: 700; color: #fff !important; }

/* --- 4.3 Panier --- */
#_desktop_ps_shoppingcart {
  order: 4;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
#_desktop_ps_shoppingcart .header-block__action-btn,
#_desktop_ps_shoppingcart .header-block__title { color: #fff !important; }

#_desktop_ps_shoppingcart .header-block__icon {
  font-size: 0 !important;
  display: inline-block;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='21'%20r='1'/%3E%3Ccircle%20cx='20'%20cy='21'%20r='1'/%3E%3Cpath%20d='M1%201h4l2.7%2013.4a2%202%200%200%200%202%201.6h9.7a2%202%200%200%200%202-1.6L23%206H6'/%3E%3C/svg%3E");
}

#_desktop_ps_shoppingcart .header-block__action-btn { position: relative; }

#_desktop_ps_shoppingcart .header-block__badge {
  position: absolute;
  top: 2px;
  left: 27px;
  width: 18px;
  height: 18px;
  min-width: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  background: var(--ia-red) !important;
  color: #fff !important;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* ============================================================
   5. NAVIGATION — MENU PRINCIPAL
   ============================================================ */
#header .header-nav-full-width {
  background: #fff !important;
  border-bottom: 1px solid #e4e7ec;
}

.header-nav-full-width .ps-mainmenu.ps-mainmenu--desktop,
.header-nav-full-width .ps-mainmenu__desktop {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  display: flex !important;
  justify-content: center !important;
}

#header .ps-mainmenu__desktop,
#header #top-menu.ps-mainmenu__tree {
  justify-content: center !important;
}

#top-menu.ps-mainmenu__tree {
  display: inline-flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 auto !important;
  gap: 20px !important;
  padding: 0 !important;
  list-style: none;
  position: static;
}

#header .header-nav-full-width a,
#header .ps-mainmenu__tree-link,
#header .submenu__left-item,
#header .submenu__right-items a {
  color: var(--ia-navy) !important;
}

#header .ps-mainmenu__tree-item { position: relative !important; }

#header .ps-mainmenu__tree-link {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: .1px;
}
#header .ps-mainmenu__tree-link:hover { color: var(--ia-red) !important; }


/* ============================================================
   6. MÉGA-MENU & SOUS-MENUS (DROPDOWN)
   ============================================================ */
@keyframes iaMenuFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#header .js-sub-menu.submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  width: auto !important;
  min-width: 260px !important;
  max-width: 300px !important;
  margin-top: 2px;
  background: #fff !important;
  border: 1px solid #e4e7ec;
  border-top: 3px solid var(--ia-red);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  z-index: 1050;
  animation: iaMenuFade .22s ease-out;
  padding-top: 12px !important;
  padding-bottom: 14px !important;
}

#header .submenu > .container {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header .submenu__row {
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

#header .submenu__left {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column;
  max-height: 72vh;
  overflow-y: auto;
  padding: 6px 0 !important;
}

#header .submenu__left-item {
  display: block;
  white-space: normal;
  padding: 6px 18px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: var(--ia-navy) !important;
  break-inside: avoid;
}

#header .submenu__left-item:hover,
#header .submenu__left-item.active {
  background: #f4f5f7;
  color: var(--ia-red) !important;
}

#header .menu-item {
  padding: 2px 0 !important;
  line-height: 1.35 !important;
  font-size: 13px !important;
}

/* ============================================================
   6b. SURVOL TOLÉRANT DES SOUS-MENUS (desktop ≥1200px)
   ============================================================ */
@media (min-width: 1200px) {
  /* Affichage piloté par visibilité/opacité → permet un délai de fermeture */
  #header .ps-mainmenu__tree-item > .js-sub-menu.submenu {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    animation: none !important;
    transition: opacity .18s ease,
                transform .18s ease,
                visibility 0s linear .45s;   /* ← 0.45s de tolérance à la fermeture */
  }

  /* Ouvert quand on survole l'onglet OU le sous-menu lui-même */
  #header .ps-mainmenu__tree-item:hover > .js-sub-menu.submenu,
  #header .js-sub-menu.submenu:hover {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;                    /* ouverture immédiate */
  }

  /* Pont invisible qui comble le trou onglet ↔ sous-menu
     → on descend la souris sans perdre le survol.
     pointer-events explicite : inactif quand fermé, actif seulement au survol
     (sécurité pour ne jamais intercepter de clic ailleurs dans le header). */
  #header .ps-mainmenu__tree-item > .js-sub-menu.submenu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: none;
  }
  #header .ps-mainmenu__tree-item:hover > .js-sub-menu.submenu::before {
    pointer-events: auto;
  }
}

/* ===== Scroll indépendant sur la colonne droite (listes longues : Ville, Monde…) ===== */
#header #submenu-category-2  .submenu__right,
#header #submenu-category-359 .submenu__right {
  max-height: 72vh !important;   /* même hauteur que la colonne gauche */
  overflow-y: auto !important;   /* 2ᵉ barre de scroll */
  overflow-x: hidden !important;
}

/* Barre de scroll fine et discrète (les 2 colonnes) */
#header #submenu-category-2  .submenu__left::-webkit-scrollbar,
#header #submenu-category-2  .submenu__right::-webkit-scrollbar,
#header #submenu-category-359 .submenu__left::-webkit-scrollbar,
#header #submenu-category-359 .submenu__right::-webkit-scrollbar {
  width: 8px;
}
#header #submenu-category-2  .submenu__left::-webkit-scrollbar-thumb,
#header #submenu-category-2  .submenu__right::-webkit-scrollbar-thumb,
#header #submenu-category-359 .submenu__left::-webkit-scrollbar-thumb,
#header #submenu-category-359 .submenu__right::-webkit-scrollbar-thumb {
  background: #c4c7cc;
  border-radius: 4px;
}
/* ============================================================
   7. CATÉGORIES SPÉCIFIQUES
   ============================================================ */

/* Menus plats à nombreux items : Ville, Provence, Rhône-Alpes */
#submenu-category-140 .submenu__left,
#submenu-category-111 .submenu__left,
#submenu-category-120 .submenu__left {
  column-width: 190px;
  column-gap: 28px;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
#submenu-category-140 .submenu__right,
#submenu-category-111 .submenu__right,
#submenu-category-120 .submenu__right {
  display: none !important;
}

/* Monde-Europe : largeur bornée */
#header #submenu-category-359 {
  max-width: 720px !important;
  overflow: hidden;
}
#header #submenu-category-359 .submenu__row {
  --bs-gutter-x: 0 !important;
  flex-wrap: nowrap !important;
}
#header #submenu-category-359 .submenu__left {
  flex: 0 0 250px !important;
  width: 250px !important;
  border-right: 1px solid #e4e7ec;
}
#header #submenu-category-359 .submenu__right {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 8px 16px !important;
  overflow: hidden;
}
#header #submenu-category-359 .submenu__right-items {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px 24px;
}
#header #submenu-category-359 .submenu__right-items.not-active { display: none !important; }
#header #submenu-category-359 .menu-item__group--child,
#header #submenu-category-359 .menu-item__group--nochild {
  min-width: 130px;
  max-width: 180px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
#header #submenu-category-359 .menu-item {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ===== Onglet « Catégories » (racine, id 2) ===== */
#header #submenu-category-2 {
  max-width: 860px !important;
  overflow: hidden;
}
#header #submenu-category-2 .submenu__row {
  --bs-gutter-x: 0 !important;
  flex-wrap: nowrap !important;
}
#header #submenu-category-2 .submenu__left {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-height: 72vh;
  overflow-y: auto;
  border-right: 1px solid #e4e7ec;
}
#header #submenu-category-2 .submenu__right {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 8px 18px !important;
  overflow: hidden;
}
#header #submenu-category-2 .submenu__right-items {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px 24px;
}
#header #submenu-category-2 .submenu__right-items.not-active { display: none !important; }
#header #submenu-category-2 .menu-item__group--child,
#header #submenu-category-2 .menu-item__group--nochild {
  min-width: 150px;
  max-width: 200px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
#header #submenu-category-2 .menu-item {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ===== Fix « barre vide » : colonne droite + séparateur masqués
   tant qu'aucun groupe n'est survolé (Catégories + Monde) ===== */
#header #submenu-category-2  .submenu__row:not(:has(.submenu__right-items:not(.not-active))) .submenu__right,
#header #submenu-category-359 .submenu__row:not(:has(.submenu__right-items:not(.not-active))) .submenu__right {
  display: none !important;
}
#header #submenu-category-2  .submenu__row:not(:has(.submenu__right-items:not(.not-active))) .submenu__left,
#header #submenu-category-359 .submenu__row:not(:has(.submenu__right-items:not(.not-active))) .submenu__left {
  border-right: none !important;
}

/* ============================================================
   8. ACCUEIL — HERO
   ============================================================ */
.ia-home-hero {
  padding: 10px 15px 60px;   /* haut réduit, bas aéré */
  background-color: #ffffff;
}

.ia-hero-title {
  font-weight: 700;
  font-size: 32px;
  color: var(--ia-navy);
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.3;
}

.ia-hero-subtitle {
  font-size: 16px;
  color: #555;
  max-width: 700px;
  margin: 0 auto 30px;
  line-height: 1.5;
}

.ia-hero-microtext {
  font-size: 13px;
  color: #4a5568;
  font-weight: 600;
  margin-bottom: 25px;
}

.ia-hero-btn {
  padding: 12px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}


/* ============================================================
   9. ACCUEIL — RÉASSURANCE (bloc accueil)
   ============================================================ */
.ia-home-reassurance {
  background-color: #f8f9fa;
  padding: 40px 0;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  /* pleine largeur d'écran */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.ia-reas-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px 0;
}
.ia-reas-text { display: flex; flex-direction: column; text-align: left; }
.ia-reas-title { font-weight: 700; font-size: 14px; color: var(--ia-navy); }
.ia-reas-desc { font-size: 13px; color: #718096; }
.ia-reas-icon { color: var(--ia-red); flex-shrink: 0; display: flex; align-items: center; }


/* ============================================================
   10. ACCUEIL — BLOC SEO (bas de page)
   ============================================================ */
.ia-seo-fullwidth {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 40px 0;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}

.ia-seo-text {
  font-size: 13px;
  color: #5a6473;
  line-height: 1.7;
  text-align: left;
}
.ia-seo-text h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ia-navy);
  margin-bottom: 16px;
  text-align: center;
}
.ia-seo-text p { margin-bottom: 14px; }
.ia-seo-text p:last-child { margin-bottom: 0; }
.ia-seo-text b { color: #2c3e50; }
.ia-seo-text a { color: var(--ia-red); font-weight: 600; text-decoration: none; }


/* ============================================================
   11. ACCUEIL — AVIS CLIENTS (fond clair, cartes blanches)
   ============================================================ */
.ia-reviews {
  background: #f8f9fa;
  padding: 40px 0;
  /* pleine largeur d'écran */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.ia-reviews__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.ia-reviews__score { font-size: 30px; font-weight: 800; color: var(--ia-navy); line-height: 1; }
.ia-reviews__stars { color: #ffb400; font-size: 18px; letter-spacing: 2px; }
.ia-reviews__count { font-size: 13px; color: #5a6473; }   /* corrigé : lisible sur fond clair */

.ia-reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ia-rev-card {
  background: #fff;
  border: none;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.ia-rev-card__stars { color: #ffb400; letter-spacing: 1px; margin-bottom: 8px; }
.ia-rev-card__text { font-size: 13px; color: #1a2233; margin-bottom: 14px; }

.ia-rev-author { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ia-rev-author__av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ia-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.ia-rev-author__name { display: block; font-size: 13px; font-weight: 700; color: #1a2233; }
.ia-rev-author__date { color: #5a6473; }


/* ============================================================
   12. SECTIONS PRODUITS (bestsellers / featured) + espacements
   ============================================================ */

/* Fond pleine largeur via pseudo-élément (protège la grille) */
.featured-products,
.bestsellers,
.ps-featuredproducts,
.ps-bestsellers {
  position: relative !important;
  padding: 60px 0 !important;
  margin-bottom: 0 !important;
  z-index: 1;
}
.featured-products::before,
.bestsellers::before,
.ps-featuredproducts::before,
.ps-bestsellers::before {
  content: "";
  background-color: #f8f9fa !important;
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
}

/* Espacements fins accueil : coller texte SEO/produits, régler le vide sous les titres */
#index .ps-customtext { margin-bottom: 0 !important; padding-bottom: 0 !important; }

#index .ps-featuredproducts,
#index .ps-bestsellers,
#index .featured-products,
#index .bestsellers {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

#index .ps-featuredproducts .section-title,
#index .ps-bestsellers .section-title,
#index .featured-products .section-title,
#index .bestsellers .section-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

.ps-bestsellers .products,
.ps-featuredproducts .products {
  margin-top: 15px !important;
}

/* Cartes produits transparentes */
.featured-products .thumbnail-container,
.bestsellers .thumbnail-container,
.featured-products .product-miniature,
.bestsellers .product-miniature,
.featured-products .product-description,
.bestsellers .product-description {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Soudure parfaite des fonds gris entre Produits Phares et Bestsellers */
#index .ps-featuredproducts {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}
#index .ps-bestsellers {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

/* Titres de section accueil — Produits phares & Meilleures ventes identiques */
#index .ps-featuredproducts h1,
#index .ps-featuredproducts h2,
#index .ps-featuredproducts .products-section-title,
#index .ps-featuredproducts .section-title,
#index .ps-bestsellers h1,
#index .ps-bestsellers h2,
#index .ps-bestsellers .products-section-title,
#index .ps-bestsellers .section-title,
#index .featured-products h1,
#index .featured-products h2,
#index .bestsellers h1,
#index .bestsellers h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--ia-navy) !important;
}
/* ============================================================
   13. MINIATURES PRODUITS (réduction + centrage image)
   ============================================================ */
.product-miniature__image-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 220px !important;
  padding: 10px !important;
}
.product-miniature__image-link picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
.product-miniature__image {
  max-width: 60% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain !important;
}


/* ============================================================
   14. FOOTER
   ============================================================ */

/* Fond anthracite unifié */
#footer.footer,
#footer .footer__main,
#footer .copyright {
  background: #2b2f36 !important;
}

/* Texte général clair + liens */
#footer,
#footer .footer-block__content,
#footer .footer-block li a,
#footer .copyright {
  color: #c4c7cc;
  font-size: 14px;
}
#footer a { color: #c4c7cc !important; }
#footer a:hover { color: #fff !important; }

/* Espacements globaux du footer */
#footer .footer__main { padding: 40px 0 20px !important; }

/* Titres de colonnes harmonisés */
#footer .footer-block__title,
#footer #footer_contactinfo_title {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}
#footer .footer-block__title { margin-bottom: 16px; }

/* Bloc contact : titre "Informations" masqué → "Contactez-nous" */
#footer #footer_contactinfo_title {
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
  font-size: 14px !important;
}

/* Liens de colonnes : espacement régulier */
#footer .footer-block li,
#footer .ps-link-list li { margin-bottom: 9px; }

/* --- Répartition : 3 colonnes + réseaux sociaux --- */
#footer .footer__main-top.row {
  display: flex;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start;
  gap: 20px;
}
#footer .footer__main-top nav.ps-linklist,
#footer .footer__main-top nav.ps-customeraccountlinks,
#footer .footer__main-top .ps-contactinfo {
  flex: 1 !important;
  min-width: 140px;
}

/* --- Réseaux sociaux : alignés à droite avec ajout du titre --- */
#footer .footer__main-top .ps-socialfollow {
  flex: 0 0 15% !important;
  max-width: 15% !important;
  order: 10;
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
}

#footer .ps-socialfollow::before {
  content: "Suivez-nous";
  display: block;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
  text-align: center;
}
body.lang-de #footer .ps-socialfollow::before { content: "Folgen Sie uns"; }
body.lang-es #footer .ps-socialfollow::before { content: "Síguenos"; }
body.lang-gb #footer .ps-socialfollow::before { content: "Follow us"; }

#footer .footer__main-top .ps-socialfollow ul {
  display: flex;
  justify-content: center !important; /* Icônes centrées par rapport au titre */
  gap: 15px;
  margin: 0 !important;
  padding: 0 !important;
}
#footer .ps-socialfollow a { color: #c4c7cc !important; }
#footer .ps-socialfollow a:hover { color: #fff !important; }

/* --- Bas de footer : masquer le bloc Légal du BO (déplacé dans le copyright) --- */
#footer .footer__main-bottom nav.ps-linklist:has(#footer_title_3) {
  display: none !important;
}

/* Barre du bas : Légal | Copyright | Paiements (Rapprochés et centrés) */
#footer .copyright {
  padding: 15px 16px !important;
  border-top: 1px solid #3a3f47;
  font-size: 12px;
}
#footer .ia-copyright-row {
  display: flex;
  align-items: center;
  justify-content: center !important; 
  gap: 40px !important; 
  flex-wrap: wrap;
}
#footer .ia-legal { display: flex; gap: 18px; flex-wrap: wrap; }
#footer .ia-legal a { color: #c4c7cc !important; font-size: 12px; }
#footer .ia-copyright-text { font-size: 12px; color: #8a8f97; }
#footer .ia-payments { display: flex; gap: 8px; margin: 0 !important; }
#footer .ia-pay {
  background: #fff;
  color: #2b2f36;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Footer collé en bas sur les pages à faible contenu (404, recherche vide) */
#wrapper,
.wrapper {
  min-height: 60vh;
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */

/* --- 15.1  Mobile : < 768px --- */
@media (max-width: 767.98px) {
  .header-bottom__row > .header-bottom__logo { order: 2; flex: 0 0 auto !important; }
  .header-bottom__logo img { max-height: 30px; }
  .header-bottom__row > #_desktop_ps_searchbar {
    display: flex !important;
    order: 3;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 110px !important;
    margin: 0 8px !important;
  }
  #_desktop_ps_customersignin,
  #_desktop_ps_shoppingcart { display: none !important; }
  #header .ps-searchbar--mobile { display: none !important; }
  #_mobile_ps_customersignin { display: flex !important; order: 4 !important; }
  #_mobile_ps_shoppingcart { display: flex !important; order: 5 !important; }
  #header .header-block__icon { color: #fff !important; }

  .ia-reviews__grid { grid-template-columns: 1fr; }

  #footer .footer__main-top.row {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  #footer .footer__main-top nav.ps-linklist,
  #footer .footer__main-top nav.ps-customeraccountlinks,
  #footer .footer__main-top .ps-contactinfo,
  #footer .footer__main-top .ps-socialfollow {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #footer .ia-copyright-row {
    flex-direction: column !important;
    gap: 15px !important;
    text-align: center;
  }
  
  #footer .ia-legal {
    justify-content: center !important;
  }
}

/* --- 15.2  Tablette : 768–1199px --- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .header-bottom__row { flex-wrap: nowrap !important; gap: 8px !important; }
  .header-bottom__row > .header-bottom__logo { flex: 0 0 auto !important; max-width: 160px !important; }
  .header-bottom__logo img { width: 100% !important; height: auto !important; }
  .header-bottom__row > #_desktop_ps_searchbar {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin: 0 10px !important;
  }
  #_desktop_ps_searchbar .ps-searchbar,
  #_desktop_ps_searchbar .ps-searchbar__form { width: 100% !important; min-width: 0 !important; }
  #_desktop_ps_searchbar .ps-searchbar__input { padding-right: 48px !important; }
  #_desktop_ps_customersignin .ia-signin__txt { display: none !important; }

  .ia-reviews__grid { grid-template-columns: repeat(2, 1fr); }

  #footer .footer__main-top.row {
    flex-wrap: wrap !important;
    gap: 30px 20px !important;
  }
  
  #footer .footer__main-top nav.ps-linklist,
  #footer .footer__main-top nav.ps-customeraccountlinks,
  #footer .footer__main-top .ps-contactinfo {
    flex: 1 1 200px !important;
  }
  
  #footer .footer__main-top .ps-socialfollow {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 10 !important;
  }
}

/* --- 15.3  Menu burger : sous-menus longs défilables (< 1200px) --- */
@media (max-width: 1199.98px) {
  #header .js-sub-menu.submenu {
    position: static !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    box-shadow: none !important;
    animation: none !important;
  }
  #header .submenu__left { max-height: none !important; overflow: visible !important; }
  #header .offcanvas-body,
  #header [class*="offcanvas"] {
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- 15.4  Réassurance accueil : séparateurs de colonnes (≥ 992px) --- */
@media (min-width: 992px) {
  .ia-reas-col:not(:last-child) .ia-reas-item {
    border-right: 1px solid #e2e8f0;
  }
}
/* Élargissement du conteneur du header (par défaut bridé par Bootstrap) */
#header .header-bottom__container.container-md {
    max-width: 1400px !important;
    padding: 0 20px !important;
}

@media (min-width: 1200px) {
  /* 1. On resserre la boîte globale pour créer de l'espace sur les côtés */
  #header .header-bottom__container.container-md {
    max-width: 1250px !important; /* C'est cette limite qui crée tes grands espaces à gauche et à droite */
    padding: 0 20px !important;
    margin: 0 auto !important; /* Centre parfaitement le conteneur */
  }

  /* 2. La ligne principale avec un espacement unifié (gap) */
  .header-bottom__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important; /* Centre tous les éléments au milieu de la boîte */
    width: 100% !important;
    gap: 10px !important; /* C'est l'espace exact entre chaque élément (logo, barre, compte, panier) */
  }

  /* Masquer le burger */
  .header-bottom__row > .ps-mainmenu__mobile-toggle {
    display: none !important;
  }

  /* 3. Le Logo (plus besoin de marges, le gap fait le travail) */
  .header-bottom__row > .header-bottom__logo {
    flex: 0 0 auto !important;
    margin: 0 !important; 
  }

  /* 4. La Searchbar au centre */
  .header-bottom__row > #_desktop_ps_searchbar {
    position: static !important;
    flex: 1 1 auto !important; 
    width: 100% !important;
    max-width: 900px !important; /* Limite sa largeur pour rapprocher visuellement la droite et la gauche */
    margin: 0 !important;
  }

  /* On s'assure que les champs internes suivent le mouvement */
  #_desktop_ps_searchbar .search-widget,
  #_desktop_ps_searchbar .ps-searchbar,
  #_desktop_ps_searchbar .ps-searchbar__form,
  #_desktop_ps_searchbar .ps-searchbar__input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. Le bloc Connexion */
  .header-bottom__row > #_desktop_ps_customersignin {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* 6. Le bloc Panier */
  .header-bottom__row > #_desktop_ps_shoppingcart {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}

/* ============================================================
   16. HEADER STICKY (Fixé au scroll)
   ============================================================ */
#header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5050 !important; /* S'assure qu'il passe au-dessus de tout le reste */
    background-color: var(--ia-navy) !important; /* Garde le fond bleu marine */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Ajoute une légère ombre élégante pour détacher le header du contenu défilant */
}

/* ============================================================
   17. SÉLECTEUR DE LANGUE (Position & Filtrage FR/EN)
   ============================================================ */

/* --- 1. Positionnement à droite du panier --- */
.header-bottom__row > #_desktop_ps_languageselector {
  order: 5 !important;
  flex: 0 0 auto !important;
  margin-left: 15px !important; /* Espacement avec le panier */
  display: flex !important;
  align-items: center;
}

/* Rendre le champ un peu plus compact pour bien s'intégrer */
#_desktop_ps_languageselector .form-select {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 13px !important;
  min-height: auto !important;
}

/* --- 2. Masquage de toutes les langues sauf FR et EN --- */

/* On cache par défaut toutes les balises option du select */
#_desktop_ps_languageselector select option {
  display: none !important;
}

/* On réaffiche uniquement les options qui ont les bons codes ISO (fr et gb) */
#_desktop_ps_languageselector select option[data-iso-code="fr"],
#_desktop_ps_languageselector select option[data-iso-code="gb"],
#_desktop_ps_languageselector select option[data-iso-code="es"],
#_desktop_ps_languageselector select option[data-iso-code="de"],
#_desktop_ps_languageselector select option[data-iso-code="en"] {
  display: block !important;
}

/* ============================================================
   18. BANDEAU DE RÉASSURANCE (FOOTER) - Ajustements finaux
   ============================================================ */

/* 1. Épaisseur du bandeau réduite (padding diminué) */
.blockreassurance {
    padding: 20px 0 !important; /* Réduit l'épaisseur globale */
    border-top: 1px solid #3a3f47 !important;
    border-bottom: 1px solid #3a3f47 !important;
}

/* 2. Centrage absolu du conteneur principal */
.blockreassurance .blockreassurance__horizontal {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centre tous les éléments au milieu */
    align-items: center !important;
    gap: 15px 40px !important; /* 15px vertical, 40px horizontal entre les blocs */
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

/* 3. Structure d'un élément individuel (Icône + Texte) */
.blockreassurance .reassurance {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important; /* Espace réduit entre l'icône et le texte */
    margin: 0 !important; /* Annule les marges natives parasites */
    width: auto !important;
    flex: 0 0 auto !important; /* Empêche les éléments de s'étaler sur toute la ligne */
}

/* Icônes réassurance en gris clair */
.blockreassurance .reassurance__image svg [fill]:not([fill="none"]),
.blockreassurance .reassurance__image svg path,
.blockreassurance .reassurance__image svg polygon,
.blockreassurance .reassurance__image svg circle,
.blockreassurance .reassurance__image svg rect {
    fill: #c4c7cc !important;
}
/* Protège les zones volontairement vides (wrapper Sketch) */
.blockreassurance .reassurance__image svg [fill="none"] {
    fill: none !important;
}
/* On supprime les anciennes règles svg * ou svg path qui causaient conflit */


/* Taille réduite des icônes de réassurance (force sur SVG injecté + conteneur) */
.blockreassurance .reassurance__image {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 auto !important;
}
.blockreassurance .reassurance__image svg,
.blockreassurance .reassurance__image svg.replaced-svg,
.blockreassurance .reassurance__image img {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
}

/* 5. Texte en blanc, aligné et compact */
.blockreassurance.blockreassurance--dark .reassurance_title,
.blockreassurance.blockreassurance--dark .reassurance__content span {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* --- Responsive pour Mobile --- */
@media (max-width: 767.98px) {
    .blockreassurance .blockreassurance__horizontal {
        flex-direction: column !important;
        align-items: flex-start !important; /* Aligné à gauche sur mobile pour la lisibilité */
        gap: 20px !important;
        padding-left: 30px !important;
    }
}

/* ============================================================
   20. REDIMENSIONNEMENT BARRE DE RECHERCHE ET ESPACEMENTS (RÉVISION SÉCURISÉE)
   ============================================================ */
@media (min-width: 1200px) {
    /* 1. Largeur max du header */
    #header .header-bottom__container.container-md {
        max-width: 1400px !important; 
    }

    /* 2. Regroupement au centre */
    #header .header-bottom__row {
        justify-content: center !important;
        gap: 0 !important;
    }

    /* 3. Le Logo (à gauche) */
    #header .header-bottom__row > .header-bottom__logo {
        flex: 0 0 auto !important;
        padding: 0 !important; /* Annule la gouttière externe uniquement */
        margin: 0 0px 0 0 !important; /* Espacement avec la recherche */
    }

    /* 4. La Barre de recherche (au centre) */
    #header .header-bottom__row > #_desktop_ps_searchbar {
        /* flex-shrink à 1 permet à la barre de rétrécir si l'écran est plus petit ! */
        flex: 0 1 900px !important; 
        max-width: 900px !important;
        width: 100% !important;
        
        /* On annule le px-lg-5 de Bootstrap sur LA BOÎTE, sans toucher au champ de texte interne */
        padding-left: 20px !important;
        padding-right: 2px !important;
        
        /* Les marges de la barre : Haut/Bas à 0, Gauche/Droite à 0 (géré par les boutons) */
        margin: 0 !important; 
    }

    /* 5. Les Boutons de droite */
    #header .header-bottom__row > #_desktop_ps_customersignin {
        flex: 0 0 auto !important;
        padding: 0 !important;
        /* 15px de recul avec la recherche, 20px d'espace vers le panier */
        margin: 0 0px 0 0px !important; 
    }

    #header .header-bottom__row > #_desktop_ps_shoppingcart {
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 20px 0 0 !important; 
    }

    #header .header-bottom__row > #_desktop_ps_languageselector {
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important; 
    }
}

/* Écrasement forcé des marges Bootstrap (px-3 / px-lg-5) de la searchbar */
body #header div#_desktop_ps_searchbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ============================================================
   21. COLONNE CATÉGORIES SUR L'ACCUEIL — menu en marge (design conservé)
   ------------------------------------------------------------
   Principe : le CONTENU (#center-column) reste PLEINE LARGEUR à toutes
   les tailles → les sections pleine largeur (produits phares, bestsellers,
   avis, avec fond 100vw) restent parfaitement alignées et centrées.
   Le menu catégories est posé DANS la marge gauche, sans réserver
   d'espace dans le flux → il ne décale rien et ne crée aucune bande blanche.

   Contrainte physique : un menu de 240px ne tient dans la marge que si le
   viewport laisse ≥ ~258px de chaque côté du contenu (borné à 1320px),
   soit ≈ 1840px. En dessous, l'afficher masquerait les produits → on le
   masque. Les catégories restent accessibles via le menu horizontal
   « Catégories » du header, présent à toutes les tailles.
   → Pour faire apparaître le menu plus tôt, il faut réduire la largeur du
     contenu (max-width du .columns-container) ; me le dire si souhaité.
   ============================================================ */

/* Contenu TOUJOURS pleine largeur dès 992px (aucune colonne réservée) */
body#index .columns-container > .row {
  display: block !important;
}
body#index #center-column,
body#index .columns-container .row > #center-column.col-md-8,
body#index .columns-container .row > #center-column.col-lg-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Menu masqué tant qu'il ne tient pas dans la marge (≤ 1839px) */
@media (max-width: 1839.98px) {
  body#index #left-column { display: none !important; }
}

/* Menu en marge gauche quand la place existe (≥ 1840px) */
@media (min-width: 1840px) {
  /* Conteneur = repère de position + largeur bornée pour garantir la marge */
  body#index .columns-container.container {
    position: relative !important;
    max-width: 1320px !important;
  }

  /* Hauteur max du menu : seul chiffre à ajuster si besoin.
     Doit rester ≤ hauteur du bloc SEO pour ne jamais déborder
     sur les sections pleine largeur qui suivent. */
  body#index { --ia-leftmenu-h: 650px; }

  body#index #left-column {
    position: absolute !important;
    top: 0 !important;
    left: -258px !important;          /* dans la marge, ~18px avant le contenu */
    width: 240px !important;          /* 240 = 228 de contenu + 12 de gouttière */
    max-width: 240px !important;
    box-sizing: border-box !important;
    padding: 0 12px 0 0 !important;   /* espace entre le texte et la scrollbar */
    z-index: 2 !important;

    max-height: min(var(--ia-leftmenu-h), calc(100vh - 200px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #c4c7cc transparent;
    scrollbar-gutter: stable;
  }

  /* WebKit / Chromium */
  body#index #left-column::-webkit-scrollbar { width: 8px; }
  body#index #left-column::-webkit-scrollbar-track { background: transparent; }
  body#index #left-column::-webkit-scrollbar-thumb {
    background: #c4c7cc;
    border-radius: 4px;
  }
  body#index #left-column::-webkit-scrollbar-thumb:hover { background: #a9adb4; }
}

/* ============================================================
   22. GRILLE PRODUITS ACCUEIL : 4 par ligne
   Deux modules, deux structures différentes :
     - Produits phares   (ps_featuredproducts) : .module-products__list > .products > cartes
     - Meilleures ventes (ps_bestsellers, tpl surchargé) : .ps-bestsellers > .products > cartes
   → On applique la grille directement sur .products dans les DEUX sections,
     et on neutralise le wrapper .module-products__list (phares) pour qu'il
     laisse .products prendre toute la largeur.
   ============================================================ */
@media (min-width: 1200px) {

  /* Le wrapper des produits phares redevient un simple bloc */
  body#index .module-products__list {
    display: block !important;
  }

  /* La grille 4 colonnes sur le conteneur réel des cartes (les 2 sections) */
  body#index .ps-featuredproducts .products,
  body#index .ps-bestsellers .products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Neutralise largeurs / marges Bootstrap sur les cartes */
  body#index .ps-featuredproducts .products > *,
  body#index .ps-bestsellers .products > * {
    max-width: 100% !important;
    flex: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}