/* Max Protect – Style (module mpstyle) */
:root {
  --mp-red: #D7141F;
  --mp-red-dark: #B3101A;
  --mp-ink: #15181D;
  --mp-ink-2: #262B33;
  --mp-muted: #555B65;
  --mp-line: #E4E6EA;
  --mp-bg-soft: #F5F6F8;
  --bs-primary: #D7141F;
  --bs-primary-rgb: 215, 20, 31;
  --bs-link-color: #B3101A;
  --bs-link-hover-color: #7E0B12;
}

/* ---------- Typographie ---------- */
body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--mp-ink);
}
h1, h2, h3, .h1, .h2, .h3, .section-title {
  font-family: 'Archivo', 'IBM Plex Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mp-ink);
}

/* ---------- Bandeau supérieur (téléphone, langue, panier) ---------- */
#header .header-top {
  background: var(--mp-ink);
  color: #D9DCE1;
}
#header .header-top a,
#header .header-top button,
#header .header-top .material-icons,
#header .header-top span {
  color: #D9DCE1;
}
#header .header-top a:hover { color: #FFFFFF; }
#header .header-block__badge,
#header .badge {
  background: var(--mp-red) !important;
  color: #FFFFFF !important;
}

/* ---------- En-tête principal (logo, menu, recherche) ---------- */
#header .header-bottom {
  background: #FFFFFF;
  border-bottom: 3px solid var(--mp-red);
}
.main-menu__tree__link,
.js-menu-item-lvl-0 > a {
  font-weight: 600;
  color: var(--mp-ink);
}
.main-menu__tree__link:hover,
.js-menu-item-lvl-0 > a:hover {
  color: var(--mp-red);
}
#header input[type="text"],
#header input[type="search"] {
  border: 1.5px solid #CDD1D7;
  border-radius: 8px;
  background: #FFFFFF;
}
#header input[type="text"]:focus,
#header input[type="search"]:focus {
  border-color: var(--mp-red);
  box-shadow: 0 0 0 3px rgba(215, 20, 31, 0.15);
}

/* ---------- Carrousel (bannières) ---------- */
.carousel { background: var(--mp-ink); }
.carousel .carousel-item img {
  object-fit: contain;
  object-position: center;
  background: var(--mp-ink);
}
.carousel-control-prev,
.carousel-control-next {
  width: 44px;
  opacity: 0.85;
}
.carousel-indicators [data-bs-target],
.carousel-indicators button {
  background-color: #FFFFFF;
}
.carousel-indicators .active { background-color: var(--mp-red); }

/* Sur téléphone : afficher la bannière entière plutôt que le centre */
@media (max-width: 767.98px) {
  .carousel,
  .carousel-inner,
  .carousel-item,
  .carousel-item > a,
  .carousel-item figure {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Sur téléphone : on montre la partie gauche de la bannière (titre lisible) */
  .carousel .carousel-item img {
    width: 100% !important;
    height: 200px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 0% 50% !important;
  }
  /* Le bloc du carrousel prend la hauteur de l'image (pas d'espace vide) */
  #home-slider,
  .ratio-homeSlider { min-height: 0 !important; height: auto !important; }
  #home-slider::before,
  .ratio-homeSlider::before { display: none !important; padding-top: 0 !important; }
  #home-slider > .carousel,
  .ratio-homeSlider > * { position: relative !important; height: auto !important; }
  /* Flèches masquées : on glisse avec le doigt */
  .carousel-control-prev,
  .carousel-control-next { display: none !important; }
  .carousel-indicators { margin-bottom: 6px; }
}

/* ---------- Boutons ---------- */
.btn-primary {
  --bs-btn-bg: var(--mp-red);
  --bs-btn-border-color: var(--mp-red);
  --bs-btn-hover-bg: var(--mp-red-dark);
  --bs-btn-hover-border-color: var(--mp-red-dark);
  --bs-btn-active-bg: var(--mp-red-dark);
  --bs-btn-active-border-color: var(--mp-red-dark);
  --bs-btn-disabled-bg: var(--mp-red);
  --bs-btn-disabled-border-color: var(--mp-red);
  background-color: var(--mp-red);
  border-color: var(--mp-red);
  border-radius: 8px;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--mp-red-dark);
  border-color: var(--mp-red-dark);
}
.btn-outline-primary {
  color: var(--mp-red);
  border-color: var(--mp-red);
}
.btn-outline-primary:hover {
  background-color: var(--mp-red);
  border-color: var(--mp-red);
  color: #FFFFFF;
}

/* ---------- Cartes produits ---------- */
.product-miniature .card,
.product-miniature > div:first-child {
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.product-miniature:hover .card,
.product-miniature:hover > div:first-child {
  box-shadow: 0 10px 24px rgba(21, 24, 29, 0.10);
  transform: translateY(-2px);
}
.product-miniature__title,
.product-miniature__title a {
  color: var(--mp-ink);
  font-weight: 600;
  text-decoration: none;
}
.product-miniature__title a:hover { color: var(--mp-red); }
.product-miniature__price,
.product__current-price,
.current-price-value {
  color: var(--mp-red-dark);
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
}
.product-flags .badge,
.product-flag {
  background: var(--mp-ink) !important;
  color: #FFFFFF !important;
  border-radius: 99px;
  font-weight: 600;
}
.wishlist-button-add { color: var(--mp-ink); }

/* ---------- Bandeau des marques (bloc personnalisé) ---------- */
.mp-home-extra table td {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mp-home-extra table td:hover {
  border-color: var(--mp-red) !important;
  box-shadow: 0 6px 18px rgba(21, 24, 29, 0.08);
}
.mp-home-extra table:last-of-type td { width: 16.66%; }

/* Sur téléphone : catégories sur 2 colonnes */
@media (max-width: 767.98px) {
  .mp-home-extra table:first-of-type tr { display: flex; flex-wrap: wrap; }
  .mp-home-extra table:first-of-type td { width: 50% !important; box-sizing: border-box; }
  .mp-home-extra table:last-of-type tr { display: flex; flex-wrap: wrap; justify-content: center; }
  .mp-home-extra table:last-of-type td { width: auto !important; }
}

/* ---------- Pied de page ---------- */
.page-footer,
.footer__main {
  background: var(--mp-ink);
  color: #C9CDD4;
}
.page-footer a,
.footer__main a { color: #C9CDD4; }
.page-footer a:hover,
.footer__main a:hover { color: #FFFFFF; }
.page-footer h3, .page-footer h4, .page-footer .h3, .page-footer .h4,
.footer__main h3, .footer__main h4, .footer__main p.h3, .footer__main p.h4 {
  color: #FFFFFF;
}
.footer__before {
  background: var(--mp-bg-soft);
  border-top: 1px solid var(--mp-line);
}

/* ---------- Liens et éléments actifs ---------- */
a { color: var(--mp-red-dark); }
a:hover { color: #7E0B12; }
.form-check-input:checked {
  background-color: var(--mp-red);
  border-color: var(--mp-red);
}
.page-item.active .page-link,
.pagination .active > .page-link {
  background-color: var(--mp-red);
  border-color: var(--mp-red);
}

/* ---------- Suppression du bleu par défaut du thème ---------- */
:root {
  --bs-blue: #D7141F;
  --bs-primary-text-emphasis: #7E0B12;
  --bs-primary-bg-subtle: #FCE8E9;
  --bs-primary-border-subtle: #F3A9AE;
  --bs-link-color-rgb: 179, 16, 26;
  --bs-link-hover-color-rgb: 126, 11, 18;
  --bs-focus-ring-color: rgba(215, 20, 31, 0.25);
}
.text-primary, .link-primary { color: var(--mp-red) !important; }
.bg-primary, .badge.bg-primary, .text-bg-primary {
  background-color: var(--mp-red) !important;
  color: #FFFFFF !important;
}
.border-primary { border-color: var(--mp-red) !important; }
.product-miniature a,
.product-miniature__title,
.product-miniature__title a,
.product-miniature .product-title a { color: var(--mp-ink) !important; }
.product-miniature a:hover,
.product-miniature__title a:hover { color: var(--mp-red) !important; }
.product-flags .badge,
.product-flags li,
.product-flag,
.product-flag.new,
.badge.new {
  background: var(--mp-ink) !important;
  color: #FFFFFF !important;
}
.product-flag.discount,
.product-flag.on-sale,
.badge.discount { background: var(--mp-red) !important; }
.carousel-indicators [data-bs-target] { background-color: rgba(255, 255, 255, 0.6) !important; }
.carousel-indicators .active { background-color: var(--mp-red) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--mp-red);
  box-shadow: 0 0 0 0.2rem rgba(215, 20, 31, 0.2);
}
.nav-link.active, .nav-tabs .nav-link.active { color: var(--mp-red); border-bottom-color: var(--mp-red); }
.breadcrumb a { color: var(--mp-muted); }
.breadcrumb a:hover { color: var(--mp-red); }

/* ---------- Nos 2 magasins (cartes) ---------- */
.mp-stores-contact { margin: 40px 0 16px; }
.mp-stores-contact h2 { text-align: center; }
.mp-stores-contact__intro { text-align: center; color: var(--mp-muted); }
.mp-stores-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.mp-stores-contact__card { border: 1px solid var(--mp-line); border-top: 4px solid var(--mp-red); background: #fff; }
.mp-stores-contact__card iframe { display: block; width: 100%; height: 280px; border: 0; }
.mp-stores-contact__body { padding: 12px 16px 16px; }
.mp-stores-contact__name { font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.mp-stores-contact__addr { color: var(--mp-muted); margin: 0 0 12px; }

/* Page d'accueil : cartes l'une sous l'autre sur téléphone */
@media (max-width: 767.98px) {
  .mp-stores-contact__grid { grid-template-columns: 1fr; }
  .mp-stores table, .mp-stores tbody, .mp-stores tr, .mp-stores td { display: block; width: 100% !important; box-sizing: border-box; }
  .mp-stores table { border-spacing: 0 !important; }
  .mp-stores td { margin-bottom: 16px; }
}