@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
   ========================================================================== */

/* 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; }
}