/* BACKGROUND IMAGE SUR WRAPPER */

#wrapper {
    background-image: url("../img/image.jpg");  /* ton image */
    background-size: cover;                      /* couvre tout le wrapper */
    background-position: center center;          /* centre horizontal et vertical */
    background-repeat: no-repeat;               
    min-height: 100vh;                           /* au moins la hauteur de l'écran */
    position: relative;                          /* pour que le contenu reste au-dessus */
    z-index: 0;
}

/* Contenu du site devant l'image */
#wrapper > * {
    position: relative;
    z-index: 1;
}

/* Header et footer transparents pour laisser passer l'image */
#header, #footer {
    background-color: transparent !important;
}

/* ==============================
   IMAGE DE FOND
   ============================== */
#wrapper {
    background-image: url("../img/image.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
    z-index: 0;
}

#wrapper > * {
    position: relative;
    z-index: 1;
}

#header, #footer {
    background-color: transparent !important;
}

/* ==============================
   HEADER ET FOOTER - NOIR PROFOND
   ============================== */
#header {
    background-color: #000000 !important; /* rouge profond */
}

#footer {
    background-color: #000000 !important; /* rouge profond */
}

/* ==============================
   Titres des colonnes du footer en blanc
   ============================== */
#footer .wrapper > p.h3,
#footer .wrapper > .title span.h3 {
    color: #ffffff !important;
}

/* Liens dans header et footer */
#header a, #footer a {
    color: #ffffff !important; /* blanc pour contraste */
}

/* Boutons dans header et footer */
#header .btn, #footer .btn {
    background-color: #ffffff !important; /* fond blanc */
    color: #B22222 !important;             /* texte rouge */
    border-color: #ffffff !important;      /* bordure blanche */
}


/* ==============================
   HEADER ET PANIER - NOIR
   ============================== */

/* Conteneurs du header */
.header-container,
.top-bar,
.header-top,
#header .container,
#header .row,
#header nav {
    background-color: #000000 !important; /* noir */
    border: none !important;              /* supprime lignes blanches */
}

/* ==============================
   BOUTON PANIER - NOIR SUR DESKTOP
   ============================== */

/* Le bouton panier principal */
#header .cart-link,
#header .cart-link a,
#header .cart-block,
#header .cart-block a,
#header .cart-preview,
#header .cart-preview a {
    background-color: #000000 !important; /* noir */
    color: #ffffff !important;            /* texte blanc */
    border: none !important;              /* supprime bordures blanches */
}

/* Hover du bouton panier */
#header .cart-link:hover,
#header .cart-block:hover,
#header .cart-preview:hover,
#header .cart-link a:hover,
#header .cart-block a:hover,
#header .cart-preview a:hover {
    background-color: #111111 !important; /* noir légèrement plus foncé au survol */
    color: #ffffff !important;
}

/* ==============================
   SUPPRIMER LES ESPACES ENTRE LES BLOCS
   ============================== */
/* Header → bloc de texte */
#header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Wrapper général */
#wrapper,
body.page-index #wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Slider containers */
#homepage-slider,
#homepage-slider .container,
#homepage-slider .banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Supprime absolument tout l'espace entre le bloc de texte et le slider */
#homepage-slider,
#homepage-slider .container,
#homepage-slider .row,
.homeslider-container,
.homeslider-container .rslides,
.homeslider-container .rslides li {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==============================
   HOMESLIDER FULL WIDTH CORRECT
   ============================== */

body.page-index #homepage-slider {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important; /* sort du container Bootstrap */
}

body.page-index #homepage-slider .container {
    width: 100% !important;      /* container prend toute la largeur */
    max-width: 100% !important;  /* pas de limite */
    padding: 0 !important;
    margin: 0 auto !important;   /* centre contenu si besoin */
}

#homepage-slider img {
    width: 100% !important;     /* image pleine largeur */
    height: 600px !important;   /* hauteur fixe comme avant */
    object-fit: cover !important; /* remplit le slider sans déformer */
}

/* ==============================
   Bloc Newsletter Footer
   ============================== */

/* Fond du bloc newsletter */
#blockEmailSubscription_displayFooterBefore {
    background-color: #1a1a1a !important; /* noir moins foncé */
    color: #ffffff !important;
    padding: 20px 15px; /* optionnel : garde de l’espace interne */
}

/* Texte et paragraphes */
#blockEmailSubscription_displayFooterBefore p,
#blockEmailSubscription_displayFooterBefore label {
    color: #ffffff !important;
}

/* Liens éventuels */
#blockEmailSubscription_displayFooterBefore a {
    color: #ffffff !important;
}

/* Input email */
#blockEmailSubscription_displayFooterBefore input[type="email"] {
    background-color: #333333 !important; /* sombre mais lisible */
    color: #ffffff !important;
    border: 1px solid #555555 !important;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* Boutons d’envoi */
#blockEmailSubscription_displayFooterBefore input[type="submit"] {
    background-color: #555555 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px;
    cursor: pointer;
}

/* Option : hover sur le bouton */
#blockEmailSubscription_displayFooterBefore input[type="submit"]:hover {
    background-color: #777777 !important; /* un peu plus clair au survol */
    color: #ffffff !important;
}

/* ==============================
   Titres colonnes et blocs footer 100% blanc
   ============================== */

/* Desktop : p.h3 / p.h4 / block-contact-title */
#footer p.h3,
#footer p.h4,
#footer .block-contact-title {
    color: #ffffff !important;
}

/* Mobile : span.h3 dans les div.title */
#footer .title span.h3 {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    #homepage-slider img {
        width: 100% !important;
        height: auto !important;      /* hauteur adaptative */
        object-fit: cover !important; /* remplissage sans déformation */
        display: block;
    }

    #homepage-slider,
    #homepage-slider .container,
    #homepage-slider .banner {
        background-color: transparent !important; /* aucun blanc */
        height: auto !important;                 /* adapte le container */
        overflow: hidden !important;
    }
}

@media (max-width: 768px) {
    #homepage-slider,
    #homepage-slider .container,
    #homepage-slider .banner,
    .homeslider-container,
    .homeslider-container .rslides,
    .homeslider-container .rslides li {
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
        overflow: hidden !important;
    }

    #homepage-slider img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block;
    }
}