/* Appliquer Darker Grotesque à tout le site */
body, p, h1, h2, h3, h4, h5, h6, button, input, a, span, div {
  font-family: 'Darker Grotesque', sans-serif !important;
}

/* Appliquer la police bold à toute la sidebar */
.header-sidebar,
.header-sidebar * {
  font-family: 'Darker Grotesque', sans-serif !important;
  font-weight: 700 !important;
}

.bloc1 {
  position: relative;
  overflow: visible;
}

/* Bande de fond partielle */
.bloc1::before {
  content: "";
  position: absolute;
  top: 17%;
  left: 0;
  width: 100%;
  height: 85%; /* Ajustable : réduit ou augmente la hauteur du fond */
  background-image: url('https://media.cdnws.com/_i/408981/RAW-100/169/1/fond-bloc.jpeg');
  background-size: cover;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

/* S'assurer que le contenu passe par-dessus */
.bloc1 > .wizi-wrapper {
  position: relative;
  z-index: 2;
}


/* Supprime les anciens fonds inline sur toutes les colonnes */
.wizi-wrapper__background {
  background: none !important;
}

/* Applique le même fond dégradé sur chaque colonne */
.wizi-txt--triple .wizi-txt__item--background {
  background: linear-gradient(180deg, #1E6B75 0%, #020f19 100%) !important;
  padding: 40px 30px;
  border-radius: 12px;
  color: white !important;
}

/* Texte blanc dans toutes les colonnes */
.wizi-txt--triple .wizi-txt__item--background * {
  color: white !important;
}

/* Espacement entre les colonnes */
.wizi-txt--triple {
  display: flex;
  gap: 20px; /* Ajuste ici la largeur de l’espace horizontal */
  flex-wrap: wrap;
}

/* Pour forcer chaque colonne à avoir la même largeur */
.wizi-txt--triple .wizi-txt__item {
  flex: 1 1 30%;
}


/* 👕 Image responsive en haut du H2 - 1ère colonne */
.wizi-txt--triple .wizi-txt__item--background:nth-of-type(1) h2::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 15px;
  background-image: url('https://media.cdnws.com/_i/408981/RAW-102/2478/3/machine-a-laver.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 📺 Image responsive - 2ème colonne */
.wizi-txt--triple .wizi-txt__item--background:nth-of-type(2) h2::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 15px;
  background-image: url('https://media.cdnws.com/_i/408981/RAW-103/3822/4/tv.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 🍽️ Image responsive - 3ème colonne */
.wizi-txt--triple .wizi-txt__item--background:nth-of-type(3) h2::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 15px;
  background-image: url('https://media.cdnws.com/_i/408981/RAW-101/3212/2/microonde.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.colonnes .wiziBtn {
  background-color: #DAD8D7 !important;
  color: #000000 !important;
  padding: 12px 24px;
  border: none;
  border-radius: 20px;
  font-weight: 700;
  font-family: inherit;
  font-size: 16px;
  text-align: center;
  display: inline-block;
  transition: background-color 0.3s ease;
  text-transform: uppercase;
}

/* Hover effect */
.colonnes .wiziBtn:hover {
  background-color: #c9c7c6 !important;
  text-decoration: none;
}

.bloc2 {
  position: relative;
  overflow: visible;
}

.bloc2 {
  background-image: url('https://media.cdnws.com/_i/408981/RAW-107/1855/8/fond-bloc-2.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}