@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ==========================================================================
   Ordiland — habillage du thème
   Chargée automatiquement par PrestaShop après le theme.css du thème parent
   (priorité 1000) : tout ce qui est écrit ici gagne sans !important.
   Ce fichier appartient au thème enfant, une mise à jour d'Hummingbird
   ne l'écrase jamais.

   1 marque · 2 base · 3 boutons et champs · 4 en-tête · 5 menu
   6 accueil · 7 tuiles produits · 8 rayon · 9 fiche produit · 10 pied de page
   11 présentation « grossiste B2B » (v1.3, prioritaire sur 4 à 10)
   ========================================================================== */

/* 1. ------------------------------------------------------- marque ------- */
:root {
  --ord-ink: #0B2436;
  --ord-ink-mid: #12405C;
  --ord-ink-teal: #0E5C73;
  --ord-text: #17232E;
  --ord-muted: #5A6B7A;
  --ord-soft: #8595A3;
  --ord-line: #DDE4EB;
  --ord-line-strong: #C6D4E0;
  --ord-fill: #EDF3F8;
  --ord-fill-blue: #EAF3FA;
  --ord-ground: #F2F5F8;
  --ord-accent: #00A6B8;
  --ord-ok: #1B7F4B;
  --ord-ok-bg: #E7F6EF;
  --ord-promo: #D64500;
  --ord-display: 'Space Grotesk', system-ui, sans-serif;
  --ord-shadow: 0 8px 24px rgba(11, 36, 54, .08);
  --ord-card-radius: 13px;

  --bs-primary: #0077C8;
  --bs-primary-rgb: 0, 119, 200;
  --bs-primary-text-emphasis: #0B5A94;
  --bs-primary-bg-subtle: #EAF3FA;
  --bs-primary-border-subtle: #B9D9EF;
  --bs-link-color: #0077C8;
  --bs-link-color-rgb: 0, 119, 200;
  --bs-link-hover-color: #005E9E;
  --bs-link-hover-color-rgb: 0, 94, 158;
  --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: #17232E;
  --bs-body-color-rgb: 23, 35, 46;
  --bs-body-bg: #F2F5F8;
  --bs-body-bg-rgb: 242, 245, 248;
  --bs-secondary-color: #5A6B7A;
  --bs-emphasis-color: #0B2436;
  --bs-heading-color: #0B2436;
  --bs-border-color: #DDE4EB;
  --bs-border-radius: .625rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .8125rem;
  --bs-border-radius-xl: 1rem;
}

/* 2. --------------------------------------------------------- base ------- */
body {
  background-color: var(--ord-ground);
  font-family: var(--bs-body-font-family);
  color: var(--ord-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section-title, .page-title, .page-title-section, .card-title {
  font-family: var(--ord-display);
  color: var(--ord-ink);
  letter-spacing: -.01em;
  font-weight: 700;
}

a, a:hover { text-decoration: none; }
::selection { background: #CDE6F8; }
:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

.card {
  border-color: var(--ord-line);
  border-radius: var(--ord-card-radius);
}

/* 3. ----------------------------------------------- boutons et champs ---- */
.btn {
  --bs-btn-border-radius: .5625rem;
  --bs-btn-font-weight: 700;
  letter-spacing: .01em;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0077C8;
  --bs-btn-border-color: #0077C8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #005E9E;
  --bs-btn-hover-border-color: #005E9E;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0B5A94;
  --bs-btn-active-border-color: #0B5A94;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #7FB6E0;
  --bs-btn-disabled-border-color: #7FB6E0;
}
.btn-outline-primary {
  --bs-btn-color: #0077C8;
  --bs-btn-border-color: #0077C8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0077C8;
  --bs-btn-hover-border-color: #0077C8;
  --bs-btn-active-bg: #005E9E;
  --bs-btn-active-border-color: #005E9E;
}
.btn-secondary, .btn-tertiary {
  --bs-btn-color: var(--ord-text);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--ord-line);
  --bs-btn-hover-color: var(--ord-ink);
  --bs-btn-hover-bg: var(--ord-fill);
  --bs-btn-hover-border-color: var(--ord-line-strong);
}
.form-control, .form-select {
  border-color: var(--ord-line);
  border-radius: .5rem;
  color: var(--ord-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(0, 119, 200, .15);
}

/* 4. ------------------------------------------------------- en-tête ------ */
.header { background: #fff; }

/* bandeau utilitaire sombre */
.header-top {
  background: var(--ord-ink);
  color: #C6D4E0;
  font-size: .78rem;
  border-bottom: 0;
}
.header-top .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 40px;
}
.header-top__left {
  width: auto;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.header-top__right {
  width: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.header-top__left::after {
  content: "74 avenue du Président Kennedy, 68200 Mulhouse · Garantie 3 ans sur nos configurations";
  color: #7E93A5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-top a,
.header-top .header-block__title,
.header-top .material-icons { color: #C6D4E0; }
.header-top a:hover { color: #fff; }
.header-top .ps-contactinfo__phone {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.header-top .header-block__action-btn { padding: 0 .55rem; font-size: .78rem; }
.header-top .header-block__icon { font-size: 1.15rem; }
.header-top .header-block__badge {
  background: var(--ord-accent);
  color: #04252C;
  font-weight: 800;
}
.header-top .dropdown-menu,
.header-top .dropdown-menu a { color: var(--ord-text); }

/* barre blanche : logo + recherche */
.header-bottom {
  background: #fff;
  border-bottom: 1px solid var(--ord-line);
}
.header-bottom__container { padding-top: 14px; padding-bottom: 14px; }
.header-bottom__row { align-items: center; }
.header-bottom__logo img.logo { max-height: 46px; width: auto; }

#_desktop_ps_searchbar {
  flex: 1 1 auto;
  max-width: 660px;
  margin-left: 32px;
}
.ps-searchbar__form {
  border: 2px solid var(--bs-primary);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  height: 48px;
  display: flex;
  align-items: center;
}
.ps-searchbar__input.form-control,
.ps-searchbar__form .form-control {
  border: 0;
  height: 44px;
  background: #fff;
  box-shadow: none;
  font-size: .95rem;
  padding-left: 46px;
}
.ps-searchbar__magnifier { color: var(--bs-primary); left: 14px; }
.ps-searchbar__dropdown {
  border: 1px solid var(--ord-line);
  border-radius: 12px;
  box-shadow: var(--ord-shadow);
}

/* 5. ---------------------------------------------------------- menu ------ */
.header-nav-full-width {
  background: linear-gradient(90deg, var(--ord-ink) 0%, var(--ord-ink-mid) 55%, var(--ord-ink-teal) 100%);
}
.header-nav-full-width .ets_mm_megamenu,
.header-nav-full-width .ets_mm_megamenu_content,
.header-nav-full-width .ets_mm_megamenu_content_content {
  /* Mega Menu PRO pose son propre dégradé clair : il faut le forcer. */
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.header-nav-full-width .mm_menus_ul > li > a,
.header-nav-full-width .mm_menus_ul > li > a span,
.header-nav-full-width .ybc-menu-toggle {
  color: #E4EDF3 !important;
  font-family: var(--bs-body-font-family);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .01em;
}
.header-nav-full-width .mm_menus_ul > li > a { padding-left: 16px; padding-right: 16px; border-radius: 6px; }
.header-nav-full-width .mm_menus_ul > li > a:hover,
.header-nav-full-width .mm_menus_ul > li:hover > a,
.header-nav-full-width .mm_menus_ul > li > a:hover span,
.header-nav-full-width .mm_menus_ul > li:hover > a span {
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
}
.header-nav-full-width .mm_menus_ul > li { border: 0 !important; }

/* 6. ------------------------------------------------------- accueil ------ */
.ps-imageslider { background: transparent; padding: 22px 0 4px; }
.ps-imageslider .carousel {
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--ord-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
@media (min-width: 576px)  { .ps-imageslider .carousel { max-width: 540px; } }
@media (min-width: 768px)  { .ps-imageslider .carousel { max-width: 720px; } }
@media (min-width: 992px)  { .ps-imageslider .carousel { max-width: 960px; } }
@media (min-width: 1200px) { .ps-imageslider .carousel { max-width: 1140px; } }
@media (min-width: 1400px) { .ps-imageslider .carousel { max-width: 1320px; } }
.ps-imageslider .carousel-item img {
  max-height: 440px;
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.ps-imageslider .carousel-indicators [data-bs-target] {
  background-color: var(--ord-line-strong);
  border-radius: 99px;
  width: 26px;
  height: 4px;
}
.ps-imageslider .carousel-indicators .active { background-color: var(--bs-primary); }

.module-products { padding-top: 22px; }
.section-title {
  font-family: var(--ord-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ord-ink);
  margin-bottom: 1.25rem;
}
.section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--bs-primary);
  border-radius: 3px;
  margin-top: 10px;
}

.ps-customtext { background: transparent; border: 0; padding: 0; margin-top: 22px; }
.ps-customtext > .container {
  background: #fff;
  border: 1px solid var(--ord-line);
  border-radius: 14px;
  padding: 24px 28px;
}
.ps-customtext > .container > *:first-child { margin-top: 0; }
.ps-customtext p { color: var(--ord-muted); }

/* 7. ------------------------------------------------- tuiles produits ---- */
.product-miniature__inner {
  background: #fff;
  border: 1px solid var(--ord-line);
  border-radius: var(--ord-card-radius);
  padding: 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.product-miniature__inner:hover {
  border-color: var(--ord-line-strong);
  box-shadow: var(--ord-shadow);
  transform: translateY(-2px);
}
.product-miniature__image-container { background: #fff; }
.product-miniature__title {
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ord-text);
  display: block;
}
.product-miniature__title:hover { color: var(--bs-primary); }
.product-miniature__prices { margin-top: .5rem; }
.product-miniature__price {
  font-family: var(--ord-display);
  font-size: 1.38rem;
  font-weight: 700;
  color: var(--ord-ink);
  line-height: 1.1;
}
.product-miniature__discount-price,
.product-miniature__regular-price {
  color: var(--ord-soft);
  font-size: .8rem;
}
.product-miniature__actions .btn { border-radius: 9px; }

.product-flags .badge {
  border-radius: 5px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .5rem;
}
.product-flags .badge.new { background: var(--ord-ink); color: #fff; }
.product-flags .badge.discount,
.product-flags .badge.on-sale { background: var(--ord-promo); color: #fff; }
.product-flags .badge.pack { background: var(--ord-accent); color: #04252C; }

.grade-stars .star, .grade-stars .material-icons { color: #F5A524; }

/* 8. --------------------------------------------------------- rayon ------ */
.breadcrumb__wrapper { padding: .65rem 0 .1rem; }
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: .8125rem;
}
.breadcrumb-item, .breadcrumb-link { color: var(--ord-muted); }
.breadcrumb-link:hover { color: var(--bs-primary); }

#left-column .left-block {
  background: #fff;
  border: 1px solid var(--ord-line);
  border-radius: var(--ord-card-radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.left-block__title {
  font-family: var(--ord-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ord-ink);
  margin-bottom: .75rem;
}
#left-column .accordion,
#left-column .accordion-item { background: transparent; border: 0; }
#left-column .accordion-button {
  background: transparent;
  color: var(--ord-text);
  font-weight: 600;
  font-size: .9rem;
  padding: .55rem 0;
  box-shadow: none;
}
#left-column .accordion-button:not(.collapsed) { color: var(--ord-ink); }
.search-filters__link { color: var(--ord-text); }
.search-filters__link:hover { color: var(--bs-primary); }
.search-filters__magnitude { color: var(--ord-soft); }

.category__header {
  background: #fff;
  border: 1px solid var(--ord-line);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 18px;
}
.page-title-section { font-family: var(--ord-display); font-size: 1.7rem; color: var(--ord-ink); margin: 0; }
.category__cover { margin-top: 14px; }
.category__cover img { border-radius: 10px; }

.products__selection {
  background: #fff;
  border: 1px solid var(--ord-line);
  border-radius: var(--ord-card-radius);
  padding: 10px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.products__count { color: var(--ord-muted); font-size: .875rem; margin: 0; }
.products__sort { margin-left: auto; }

#js-active-search-filters.active-filters {
  background: var(--ord-fill-blue);
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 10px;
}

.pagination .page-link {
  border-radius: 8px;
  border-color: var(--ord-line);
  color: var(--ord-text);
  margin: 0 2px;
}
.pagination .active > .page-link,
.pagination .page-item.active .page-link {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* 9. --------------------------------------------------- fiche produit ---- */
.product-prices .current-price,
.product-price,
.current-price-value {
  font-family: var(--ord-display);
  font-weight: 700;
  color: var(--ord-ink);
}
.product-availability { color: var(--ord-ok); font-weight: 700; }
.product-reference { color: var(--ord-soft); }
.product-images, .product-cover, .tabs.card { border-radius: var(--ord-card-radius); }

.product__container,
.product__bottom,
.product-comments-wrapper {
  background: #fff;
  border: 1px solid var(--ord-line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 14px;
}
.product__container { padding-top: 24px; }

/* 10. ----------------------------------------------------- pied de page -- */
.footer__before { background: #fff; border-top: 1px solid var(--ord-line); }
.ps-emailsubscription.bg-body-tertiary { background: var(--ord-fill-blue) !important; }

.footer__main {
  background: #fff;
  border-top: 1px solid var(--ord-line);
  padding-top: 34px;
}
.footer__main .footer-block .h3,
.footer__main .footer-block h3,
.footer__main .footer-block__title {
  font-family: var(--ord-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ord-ink);
  letter-spacing: .01em;
}
.footer__main a { color: var(--ord-muted); }
.footer__main a:hover { color: var(--bs-primary); }
.footer__main .blockreassurance--dark {
  background: var(--ord-fill);
  border-radius: var(--ord-card-radius);
  padding: 14px 10px;
}
.footer__main .copyright {
  color: var(--ord-soft);
  font-size: .8rem;
  border-top: 1px solid var(--ord-line);
  padding: 16px 0;
  margin-top: 10px;
}

/* ------------------------------------------------------- responsive ------ */
@media (max-width: 991.98px) {
  #_desktop_ps_searchbar { margin-left: 16px; max-width: none; }
  .header-top__left::after { display: none; }
}
@media (max-width: 767.98px) {
  .ps-imageslider { padding-top: 12px; }
  .ps-imageslider .carousel { border-radius: 12px; }
  .ps-imageslider .carousel-item img { max-height: 260px; }
  .section-title { font-size: 1.25rem; }
  .product-miniature__price { font-size: 1.2rem; }
}

/* ==========================================================================
   11. Présentation « grossiste B2B » (v1.3)
   Mise en page inspirée des sites de distribution professionnelle :
   en-tête blanc unique, recherche en pilule, barre de menu en dégradé,
   cartes blanches ombrées sur fond clair, bandeau-titre de rayon,
   fiche produit en trois cartes, pied de page sombre.
   Les couleurs restent celles d'Ordiland.
   ========================================================================== */
:root {
  --ord-grad-bar: linear-gradient(90deg, #0B2436 0%, #0E5C73 62%, #00A6B8 100%);
  --ord-grad-deep: linear-gradient(135deg, #0B2436 0%, #12405C 55%, #0E5C73 100%);
  --ord-card-shadow: 0 0 10px rgba(11, 36, 54, .10);
  --ord-card-shadow-hover: 0 10px 28px rgba(11, 36, 54, .16);
  --ord-radius-xl: 18px;
}

/* --- 11.1 en-tête : une seule barre blanche -------------------------------- */
.header {
  background: #fff;
  box-shadow: 0 1px 0 var(--ord-line), 0 6px 18px rgba(11, 36, 54, .04);
}
.header-top { display: none; }
.header-bottom { border-bottom: 0; }
.header-bottom__container { padding-top: 12px; padding-bottom: 12px; }
.header-bottom__row { flex-wrap: nowrap; }
.header-bottom__logo { order: 0; }
.header-bottom__logo img.logo { max-height: 50px; }

#_desktop_ps_searchbar.order-2 {
  order: 1 !important;
  flex: 1 1 auto;
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ord-header-contact { order: 2; }
.ord-header-actions { order: 3; gap: 4px; }
#_mobile_ps_customersignin, #_mobile_ps_shoppingcart { order: 4; }

/* recherche en pilule, loupe dans une pastille ronde à droite */
#ps_searchbar { width: 100%; }
.ps-searchbar__form {
  position: relative;
  height: 46px;
  border: 1px solid var(--ord-line-strong);
  border-radius: 999px;
  background: var(--ord-ground);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ps-searchbar__form:focus-within {
  border-color: var(--bs-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 119, 200, .12);
}
.ps-searchbar__input.form-control,
.ps-searchbar__form .form-control {
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding-left: 22px;
  padding-right: 96px;
  font-size: .92rem;
}
.ps-searchbar__magnifier {
  position: absolute;
  left: auto;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0077C8 0%, #00A6B8 100%);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ps-searchbar__clear { right: 46px; left: auto; }

/* téléphone, compte, panier : pastille ronde + libellé */
.ord-header-contact .ps-contactinfo__phone,
.ord-header-actions .header-block__action-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  color: var(--ord-ink);
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 10px;
}
.ord-header-contact .ps-contactinfo__phone::before {
  content: "call";
  font-family: 'Material Icons';
  font-weight: normal;
  font-size: 20px;
  line-height: 1;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ord-fill-blue);
  color: var(--bs-primary);
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
}
.ord-header-actions .header-block__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ord-fill-blue);
  color: var(--bs-primary);
  font-size: 22px;
  margin: 0;
}
.ord-header-actions .header-block__title { color: var(--ord-ink); font-weight: 700; }
.ord-header-contact .ps-contactinfo__phone:hover,
.ord-header-actions .header-block__action-btn:hover { background: var(--ord-ground); color: var(--ord-ink); }
.ord-header-actions .ps-shoppingcart .header-block__action-btn { position: relative; }
.ord-header-actions .header-block__badge {
  position: absolute;
  left: 34px;
  right: auto;
  top: 0;
  width: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--ord-accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.ord-header-actions .dropdown-menu { border-radius: 12px; border-color: var(--ord-line); box-shadow: var(--ord-shadow); }

/* --- 11.2 barre de menu en dégradé ---------------------------------------- */
.header-nav-full-width { background: var(--ord-grad-bar); position: relative; }
/* annonce à droite de la barre, comme un bandeau d'informations */
@media (min-width: 1200px) {
  .header-nav-full-width::after {
    content: "74 av. du Président Kennedy, Mulhouse  ·  Garantie 3 ans sur nos configurations";
    position: absolute;
    top: 50%;
    right: calc((100% - 1140px) / 2 + 12px);
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .88);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    pointer-events: none;
  }
}
@media (min-width: 1400px) {
  .header-nav-full-width::after { right: calc((100% - 1320px) / 2 + 12px); }
}
.header-nav-full-width .mm_menus_ul > li > a,
.header-nav-full-width .mm_menus_ul > li > a span {
  text-transform: uppercase;
  font-size: .8rem !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
}

/* --- 11.3 fil d'Ariane ----------------------------------------------------- */
.breadcrumb__wrapper { padding: 14px 0 4px; }
.breadcrumb { font-size: .8rem; font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ord-soft); }
.breadcrumb-item.active, .breadcrumb-item:last-child { color: var(--ord-ink); }

/* --- 11.4 cartes : blanches, arrondies, ombre douce, sans bordure ---------- */
.ps-imageslider .carousel,
.ps-customtext > .container,
.product-miniature__inner,
#left-column .left-block,
.products__selection,
.product__left,
.product__bottom,
.product-comments-wrapper,
.page-content.card,
.page-content,
.cart-grid-body .card,
.cart-grid-right .card,
.contact-form,
.contact-rich {
  border: 0;
  box-shadow: var(--ord-card-shadow);
}
.ps-imageslider .carousel,
.ps-customtext > .container,
.product-miniature__inner,
.product__left,
.product__bottom,
.product-comments-wrapper { border-radius: var(--ord-radius-xl); }

/* tuiles produits */
.product-miniature__inner { padding: 14px 14px 16px; }
.product-miniature__inner:hover {
  box-shadow: var(--ord-card-shadow-hover);
  transform: translateY(-3px);
}
.product-miniature__image-container { border-radius: 12px; overflow: hidden; }
.product-miniature__title { font-weight: 700; color: var(--ord-ink); }
.product-miniature__actions .btn-outline-primary,
.product-miniature__actions .btn {
  border-radius: 999px;
  font-size: .8rem;
  padding: .4rem 1rem;
}

/* pastilles : turquoise pour Nouveau, orange pour les promos */
.product-flags .badge {
  border-radius: 999px;
  padding: .32rem .7rem;
  font-size: .62rem;
  letter-spacing: .09em;
  box-shadow: 0 2px 6px rgba(11, 36, 54, .14);
}
.product-flags .badge.new:not(.discount) { background-color: var(--ord-accent) !important; }
.product-flags .badge.pack:not(.discount) { background-color: var(--ord-ink) !important; }

/* titres de section de l'accueil */
.section-title { text-align: left; }
.section-title::after {
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, #0077C8, #00A6B8);
}

/* bloc texte de l'accueil : filet dégradé à gauche */
.ps-customtext > .container { position: relative; padding-left: 34px; overflow: hidden; }
.ps-customtext > .container::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #0077C8, #00A6B8);
}

/* --- 11.5 rayon ------------------------------------------------------------ */
/* bandeau-titre sombre en dégradé ; le reste de l'en-tête de rayon
   (description, sous-catégories) reste sur le fond clair */
.category__header {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.category__header .page-title-section {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 30px 32px;
  border-radius: var(--ord-radius-xl);
  background: var(--ord-grad-deep);
  color: #fff;
  font-size: 2rem;
  box-shadow: var(--ord-card-shadow);
}
.category__header .page-title-section::after {
  content: "";
  position: absolute;
  right: -60px; top: -140px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 166, 184, .45) 0%, rgba(0, 166, 184, 0) 70%);
  pointer-events: none;
}
.category__description {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--ord-card-shadow);
  color: var(--ord-muted);
  padding: 16px 20px;
  margin-top: 14px;
}
.category__cover { margin-top: 14px; }

/* sous-catégories : tuiles photo + bande de libellé sombre */
.subcategory { margin-top: 18px; }
.subcategory__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.subcategory__link {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--ord-card-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.subcategory__link:hover { transform: translateY(-3px); box-shadow: var(--ord-card-shadow-hover); }
.subcategory__link picture { display: block; width: 100%; aspect-ratio: 4 / 3; background: #fff; padding: 12px; }
.subcategory__thumbnail { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.subcategory__name {
  display: block;
  width: 100%;
  margin: auto 0 0;
  padding: 9px 10px;
  background: #0E5C73;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  text-align: center;
  line-height: 1.25;
}
.subcategory__link:hover .subcategory__name { background: var(--bs-primary); }
.subcategory__link:not(.subcategory__link--with-image) .subcategory__name { border-radius: 14px; }

/* colonne de gauche : carte collante */
#left-column .left-block { border-radius: var(--ord-radius-xl); padding: 18px 18px 12px; }
.left-block__title {
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ord-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ord-line);
}
#left-column .category-tree a,
#left-column .block-categories a { color: var(--ord-text); font-weight: 600; font-size: .88rem; }
#left-column .category-tree a:hover,
#left-column .block-categories a:hover { color: var(--bs-primary); }
#left-column .category-tree .current > a,
#left-column .category-tree a.current { color: var(--bs-primary); }

.products__selection { border-radius: 14px; }

/* --- 11.6 fiche produit : photos | informations | achat -------------------- */
.product__container {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin-top: 14px;
}
.product__left {
  background: #fff;
  padding: 22px;
}
.product__name { font-size: 1.6rem; line-height: 1.2; }
.product__manufacturer a {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ord-accent);
  padding: .28rem .7rem;
  border-radius: 999px;
}

@media (min-width: 992px) {
  .product__container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    gap: 18px;
    align-items: start;
  }
  .product__container > .product__left,
  .product__container > .product__right { width: auto; max-width: none; flex: none; margin: 0; }

  .product__right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 18px;
    position: relative;
    isolation: isolate;
    padding: 0;
  }
  /* fonds des deux cartes, dessinés par des pseudo-éléments de grille */
  .product__right::before,
  .product__right::after {
    content: "";
    grid-row: 1 / -1;
    background: #fff;
    border-radius: var(--ord-radius-xl);
    box-shadow: var(--ord-card-shadow);
    z-index: -1;
  }
  .product__right::before { grid-column: 1; }
  .product__right::after  { grid-column: 2; background: #fff linear-gradient(180deg, var(--ord-fill-blue) 0, #fff 140px); }

  .product__right > * { grid-column: 1; padding-left: 24px; padding-right: 24px; }
  .product__right > .product__name { grid-row: 1; padding-top: 24px; }
  .product__right > .product__manufacturer { grid-row: 2; }
  .product__right > .product__description-short { grid-row: 3; padding-top: 12px; padding-bottom: 12px; }
  .product__right > .ord-product-facts { grid-row: 4; padding-bottom: 22px; }
  .product__right > .product-customization { grid-row: 5; padding-bottom: 20px; }

  .product__right > .product__prices,
  .product__right > .product-prices,
  .product__right > .js-product-prices { grid-column: 2; grid-row: 1; padding: 22px 20px 6px; }
  .product__right > .product__actions { grid-column: 2; grid-row: 2 / -1; padding: 0 20px 22px; }
  /* produit sans prix affiché : la carte d'achat commence en haut */
  .product__right:not(:has(> .product__prices, > .product-prices, > .js-product-prices)) > .product__actions {
    grid-row: 1 / -1;
    padding-top: 24px;
  }
}

/* fiche d'identité et caractéristiques cochées */
.ord-product-facts__ids {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--ord-ground);
  border-radius: 12px;
  font-size: .8rem;
}
.ord-product-facts__ids:empty { display: none; }
.ord-product-facts__ids dt { color: var(--ord-muted); font-weight: 600; }
.ord-product-facts__ids dd { margin: 0; color: var(--ord-ink); font-weight: 700; }
.ord-product-facts__features { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.ord-product-facts__features li {
  display: grid;
  grid-template-columns: 22px minmax(0, 38%) 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--ord-line);
}
.ord-product-facts__features li:last-child { border-bottom: 0; }
.ord-product-facts__features li::before {
  content: "check_circle";
  font-family: 'Material Icons';
  font-size: 18px;
  line-height: 1;
  color: var(--ord-accent);
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
}
.ord-product-facts__name { color: var(--ord-muted); }
.ord-product-facts__value { color: var(--ord-ink); font-weight: 600; }
.product__actions .btn-primary,
.product__actions .add-to-cart { border-radius: 999px; font-size: .95rem; padding-top: .7rem; padding-bottom: .7rem; }

.product__bottom { padding: 22px 24px; }
.product__bottom .accordion-button { font-family: var(--ord-display); font-weight: 700; color: var(--ord-ink); }

/* réassurance : petites cartes avec pastille (icônes du module rendues visibles) */
/* les images du module ne se chargent pas : icônes Material à la place */
.reassurance__image img.invisible { display: none; }
.reassurance__image::before {
  font-family: 'Material Icons';
  font-size: 20px;
  line-height: 1;
  color: var(--bs-primary);
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
}
.reassurance:nth-child(1) .reassurance__image::before { content: "verified_user"; }
.reassurance:nth-child(2) .reassurance__image::before { content: "local_shipping"; }
.reassurance:nth-child(3) .reassurance__image::before { content: "autorenew"; }
.reassurance:nth-child(4) .reassurance__image::before { content: "support_agent"; }
.footer__main .reassurance__image::before { color: #7FDDE8; font-size: 26px; }
.product__bottom-right .reassurance {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ord-ground);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.product__bottom-right .reassurance__image {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ord-card-shadow);
}
.product__bottom-right .reassurance__image img,
.product__bottom-right .reassurance__image svg { width: 20px; height: 20px; }
.product__bottom-right .reassurance__title { font-weight: 700; color: var(--ord-ink); font-size: .85rem; line-height: 1.3; }

/* --- 11.7 pied de page sombre --------------------------------------------- */
.footer__before { background: #fff; border-top: 0; box-shadow: 0 -1px 0 var(--ord-line); }
.footer__main {
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 166, 184, .16), rgba(0, 0, 0, 0) 38%),
    linear-gradient(135deg, #0B2436 0%, #12405C 100%);
  color: #B7C6D3;
  border-top: 0;
  padding-top: 40px;
}
.footer__main .footer-block .h3,
.footer__main .footer-block h3,
.footer__main .footer-block__title,
.footer__main .h4, .footer__main h4, .footer__main h2, .footer__main h3, .footer__main p.h3 { color: #fff; }
.footer__main a { color: #B7C6D3; }
.footer__main a:hover { color: #fff; }
.footer__main .material-icons { color: #7FDDE8; }
.footer__main .blockreassurance--dark {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.footer__main .blockreassurance--dark, .footer__main .blockreassurance--dark * { color: #DCE7EF; }
.footer__main .copyright {
  color: #8FA4B5;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer__main .accordion-button, .footer__main .accordion-item { background: transparent; color: #fff; }

/* --- 11.8 responsive ------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .ord-header-actions .header-block__title { display: none !important; }
}
@media (max-width: 767.98px) {
  .category__header .page-title-section { padding: 20px; border-radius: 14px; font-size: 1.4rem; }
  .subcategory__list { grid-template-columns: repeat(2, 1fr); }
}

/* --- 11.9 mobile ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* barre Mega Menu repliée : garder le dégradé, texte et burger en blanc */
  .header-nav-full-width .ets_mm_megamenu_content > .container { background: transparent !important; }
  .header-nav-full-width .ybc-menu-toggle,
  .header-nav-full-width .ybc-menu-toggle * { color: #fff !important; }
  .header-nav-full-width .ybc-menu-toggle .icon-bar { background-color: #fff !important; }
}
@media (max-width: 767.98px) {
  /* le rayon s'affiche avant la colonne de gauche */
  #center-column { order: -1; }
  /* barre de tri : le libellé long du tri ne déborde plus */
  .products__selection { padding: 10px 12px; }
  .products__sort { flex: 1 1 100%; min-width: 0; max-width: 100%; margin-left: 0; flex-wrap: wrap; gap: 8px; }
  .products__sort-dropdown { flex: 1 1 180px; min-width: 0; }
  .products__sort-dropdown-button { width: 100%; white-space: normal; text-align: left; }
}