/*
 * Thème enfant cd4x4 (parent : Hummingbird)
 * Structure de cd4x4.net, style Hummingbird. Chargé après le thème parent (priorité 1000).
 * Le contenu se gère dans le back-office ; ce fichier ne règle que la mise en page.
 */

/* ---- En-tête ------------------------------------------------------------ */

/* En-tête non fixé (Hummingbird : position sticky) */
.header {
  position: relative;
}

/* Barre du haut : lien Contact (ps_linklist) à gauche du sélecteur de langue */
.header-top__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.cd4x4-navlinks a {
  color: inherit;
  text-decoration: none;
}

.cd4x4-navlinks a:hover,
.cd4x4-navlinks a:focus {
  text-decoration: underline;
}

/* Logo agrandi (Hummingbird : 3rem × 8rem), sur la hauteur menu + recherche */
.cd4x4-header .header-bottom__logo .logo {
  max-height: 4rem;
  max-width: 10rem;
}

@media (min-width: 768px) {
  .cd4x4-header .header-bottom__logo .logo {
    max-height: 7rem;
    max-width: 16rem;
  }
}

/* Colonne de droite : menu sur toute la largeur restante, recherche en dessous */
.cd4x4-header__main {
  min-width: 0;
}

@media (min-width: 1200px) {
  .cd4x4-header .ps-mainmenu--desktop {
    flex: 1 1 0;
    min-width: 0;
  }

  .cd4x4-header .ps-mainmenu__desktop,
  .cd4x4-header .ps-mainmenu__tree {
    width: 100%;
  }

  /* Une seule ligne : entrées réparties sur la largeur, espacements resserrés (Hummingbird : .5rem + flèche 1.25rem) */
  .cd4x4-header .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
  }

  .cd4x4-header .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
    font-size: 0.875rem;
    padding-inline: 0.25rem;
    white-space: nowrap;
  }

  .cd4x4-header .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle {
    padding-inline: 0 0.25rem;
  }
}

@media (min-width: 1400px) {
  .cd4x4-header .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
    font-size: 1rem;
  }
}

.cd4x4-header__search {
  padding-block: 0.25rem 0.5rem;
}

.cd4x4-header__search #_desktop_ps_searchbar {
  margin-left: 0 !important;
  width: 100%;
  max-width: 24rem;
}

.cd4x4-header__search .ps-searchbar,
.cd4x4-header__search .ps-searchbar__form {
  width: 100%;
}

/* ---- Accueil -------------------------------------------------------------- */

/* Slider limité à la largeur du contenu */
.cd4x4-slider {
  margin-block: 1.5rem;
}

.cd4x4-slider .carousel {
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}

/* Encadré services + présentation sous les produits (ps_customtext) */
.page-content--home .ps-customtext {
  margin-block: 2rem 3rem;
}

.page-content--home .ps-customtext > .container {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  padding: 1.5rem;
}

.cd4x4-info {
  row-gap: 1.5rem;
}

.cd4x4-info__services ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cd4x4-info__services li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.cd4x4-info__services li + li {
  border-top: 1px solid var(--bs-border-color);
  margin-top: 1rem;
  padding-top: 1rem;
}

.cd4x4-info__services .material-icons {
  color: var(--bs-primary);
  font-size: 2rem;
  flex-shrink: 0;
}

.cd4x4-info__services h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.cd4x4-info__services p,
.cd4x4-info__about p {
  margin-bottom: 0.25rem;
}

.cd4x4-info__about h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .cd4x4-info__about {
    border-left: 1px solid var(--bs-border-color);
    padding-left: 1.5rem;
  }
}

/* ---- Pied de page ----------------------------------------------------- */

/* Rangée du haut : newsletter (gauche) + réseaux sociaux (droite) */
.cd4x4-footer__top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}

.cd4x4-newsletter__intro,
.cd4x4-newsletter__conditions {
  font-size: 0.875rem;
}

.cd4x4-newsletter__conditions {
  color: var(--bs-gray-500);
}

.cd4x4-social a {
  color: inherit;
}

.cd4x4-social a:hover,
.cd4x4-social a:focus {
  color: var(--bs-white);
}

/* Informations boutique : une ligne par information, avec icône */
.cd4x4-contactinfo__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-block: 0.25rem;
}

.cd4x4-contactinfo__item .material-icons {
  font-size: 1.25rem;
  line-height: 1.5;
  flex-shrink: 0;
}

.cd4x4-contactinfo__item small {
  color: var(--bs-gray-500);
}

/* Logos de paiement */
.cd4x4-footer__payments {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.cd4x4-payments img {
  background: var(--bs-white);
  border-radius: var(--bs-border-radius-sm);
  height: 40px;
  width: auto;
  padding: 2px;
}

/* ---- Slider (suite) : même format pour toutes les diapositives, images à droite ---- */

.cd4x4-slider .ps-imageslider__figure {
  margin: 0;
}

.cd4x4-slider .ps-imageslider__figure img {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
}

.cd4x4-slider__aside .cd4x4-sliderbanners__item {
  flex: 1 1 0;
  min-height: 0;
}

.cd4x4-slider__aside .cd4x4-sliderbanners__item img {
  border-radius: var(--bs-border-radius-lg);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* ---- Page Facebook (module cd4x4_facebookpage), à gauche de l'encadré ---- */

.cd4x4-homeinfo .row {
  row-gap: 1.5rem;
}

.cd4x4-facebookpage__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.cd4x4-facebookpage__frame {
  display: block;
  max-width: 100%;
  width: 380px;
}

@media (min-width: 992px) {
  .cd4x4-homeinfo__aside {
    border-right: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 1.5rem;
  }

  .cd4x4-homeinfo__text {
    padding-left: 1.5rem;
  }
}

/* ---- 5 images au-dessus du bandeau (module cd4x4_banners, zone « home ») ---- */

.cd4x4-homebanners {
  margin-block: 2rem 0;
}

.cd4x4-homebanners__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cd4x4-homebanners__item--wide {
  grid-column: span 2;
}

.cd4x4-homebanners__item img {
  border-radius: var(--bs-border-radius-lg);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 575.98px) {
  .cd4x4-homebanners__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cd4x4-homebanners__item--wide {
    grid-column: auto;
  }
}

/* ---- Liens : gris très foncé et gras, comme sur cd4x4.net (Hummingbird : bleu) ---- */

:root,
[data-bs-theme=light] {
  --bs-link-color: #2b2b2b;
  --bs-link-color-rgb: 43, 43, 43;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0, 0, 0;
}

#wrapper a:not(.btn) {
  font-weight: 600;
}

/* Bouton « Détails » des vignettes produit (mode catalogue) : pleine largeur */
.product-miniature__details {
  width: 100%;
}

/* Boutons-liens à contour (« Détails », « Tous les produits phares »…) : même gris que les liens */
.btn-outline-primary {
  --bs-btn-color: #2b2b2b;
  --bs-btn-border-color: #2b2b2b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2b2b2b;
  --bs-btn-hover-border-color: #2b2b2b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  font-weight: 600;
}

/* ---- Page produit : Description et Détails du produit sur toute la largeur ---- */

.page-product .product__bottom {
  display: block;
}

/* Colonne réassurance vide (blocs désactivés sur les fiches produit) : masquée */
.page-product .product__bottom-right:not(:has(*)) {
  display: none;
}