.header__content {
        /* Ajout de l'image en arrière-plan */
        background-image: url('https://media.cdnws.com/_i/409945/90/349/90/ag-negoce-entete-bg.jpeg');
        background-size: cover; /* Assure que l'image couvre tout l'élément */
        background-position: center; /* Centre l'image */
        background-repeat: no-repeat; /* Empêche la répétition de l'image */
   
    }


    .header__content > div {
        background: transparent !important;
    }


    .nav {      
        background: black;
      color: white;
    }

@media (min-width: 1024px) {
    .header__content, .header__wrapper {
        background-color: black;
      color: white;
    }
}
/* ================================================================== */
/* ==   CODE FINAL : TOUS LES ÉLÉMENTS SUR L'IMAGE DE FOND   == */
/* ================================================================== */

/* 1. On applique l'image de fond à toute la page d'accueil */
body.page-homepage {
    background-image: url('https://media.cdnws.com/_i/409945/91/2089/91/ag-negoce-fond-bas-de-page.jpeg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* 2. On supprime TOUS les fonds blancs des conteneurs principaux */
body.page-homepage .body__wrapper__maxWidth,
body.page-homepage .wiziblocks__item {
    background: none !important;
    box-shadow: none !important;
}

/* 3. On ajuste le style des textes pour qu'ils soient lisibles sur le fond */

/* Titre principal "AG NÉGOCE..." et titre de la sélection "Découvrez notre sélection..." */
body.page-homepage #80e74cb1-f8f6-4426-9817-edc365032b27 h2,
body.page-homepage .prod__titleList p {
    color: #ffffff !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Bloc de texte "Vente en ligne de matériaux..." */
body.page-homepage #e3430d96-3324-4e4a-bdaa-82fcba8a04ea .wizi-txt.wizi-txt--one {
    background-color: rgba(0, 0, 0, 0.6) !important; /* Fond noir semi-transparent */
    border-radius: 12px;
    padding: 25px;
}
/* On s'assure que le texte dans ce même bloc est blanc */
body.page-homepage #e3430d96-3324-4e4a-bdaa-82fcba8a04ea .wizi-txt.wizi-txt--one * {
    color: #ffffff !important;
}


/* 4. On redonne un fond blanc UNIQUEMENT aux fiches produits, comme sur votre exemple */
body.page-homepage .prod__article {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    padding: 10px;
    /* On ajoute une petite marge pour espacer les produits */
    margin-bottom: 20px !important; 
}

.txt 
  {      
     border-radius: 8px !important;
    }

/* Rendre tous les fonds de blocs transparents */
.wiziblocks__item,
.wizi-wrapper,
.wizi-txt,
.wiziblocks__item__maxWidth,
.wizi-wrapper__background,
.prod,
.prod__shadow {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Spécifiquement pour les blocs avec fond coloré */
.wizi-wrapper--txtOneBackground .wizi-wrapper__background {
    display: none !important;
}

/* Garder le fond gris pour le bloc avec classe .txt */
.wiziblocks__item.txt .wizi-wrapper__background,
#db30bcc4-7cf6-4002-938d-b67a592ffc8d .wizi-wrapper__background {
    background: #424242 !important;
    opacity: 1 !important;
}
/* Tous les éléments de texte du menu */
.nav__a,
.nav__itemlvl1,
.nav__item,
.nav__itemlvl1--home,
.nav__itemlvl1--link,
.nav__itemlvl1--login,
.header__nav__icon__text {
    color: #ffffff !important;
  align-items: center;
}

/* Menu burger */
.header__nav__icon__span {
    background-color: #ffffff !important;
}

/* États hover */
.nav__a:hover,
.nav__itemlvl1:hover,
.nav__item:hover {
    color: #cccccc !important;
    opacity: 0.8;
}
/* MENU - Centrage vertical */
.nav__a,
.nav__itemlvl1,
.nav__item {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* RÉASSURANCE - Fond noir et icônes blanches */
.reassurance {
    background-color: #000000 !important;
}

.reassurance__wrapper__item__icon,
.reassurance__wrapper__item__icon i,
.reassurance__wrapper__item__text,
.reassurance__wrapper__item__text strong,
.reassurance .fa-solid {
    color: #ffffff !important;
}

/* MENU - Masquer éléments */
.nav__itemlvl1--login,
.nav__itemlvl1--home {
    display: none !important;
}

/* FOOTER - Masquer newsletter */
.single-newsletter,
.footer__top {
    display: none !important;
}

/* HEADER - Grossir logo */
.header__logo__a__img {
    width: auto !important;
    height: 80px !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    .header__logo__a__img {
        height: 60px !important;
    }
}

.header__cart__a__nb__mask {
    content: "";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    padding-top: 120%;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2;
    color: var(--primary-color);
}
/*AP*/
@media (min-width: 1024px) {
    .nav { margin: 10px auto;}
}

  .footer {
    
    padding: 20px 20px;
}