/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 
 #header{ background: red !important; }*/


/* ============================================================
   1. NETTOYAGE DRASTIQUE DU HEADER (STYLE EVERLANE)
   ============================================================ */

/* On force tout le fond en blanc pur pour supprimer le gris */
#header, .header-nav, .header-top, .imageslider-container {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* On cache la barre de navigation du haut (Contact, Connexion) */
.header-nav {
    display: none !important;
}

/* On centre le LOGO parfaitement au milieu de la page */
#_desktop_logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    z-index: 9999 !important;
}

#_desktop_logo img {
    max-height: 40px !important; /* Taille Everlane */
    width: auto !important;
}

/* On dégage tout ce qui pourrait décaler le logo (colonnes Bootstrap) */
#header .header-top .container > .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important; /* Important pour le centrage du logo */
    min-height: 70px; /* Définit la hauteur de ton header */
}

/* ============================================================
   2. SUPPRESSION DE LA LIGNE GRISE (ENTRE HEADER ET SLIDER)
   ============================================================ */

/* Souvent, PrestaShop met un padding ou une margin sur le #wrapper */
#wrapper {
    padding-top: 0 !important;
}

/* On s'assure que le slider ne contient aucune bordure interne */
.imageslider-container, .carousel, .carousel-inner, .carousel-item {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   3. SLIDER PLEIN ÉCRAN (CHANEL STYLE)
   ============================================================ */
#index #wrapper .container, 
#index #content .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

#index .carousel-inner, 
#index .carousel-item,
#index .carousel-item img {
    height: 100vh !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center;
}

/* Cache les flèches et points */
.carousel-caption, .direction, .carousel-selectors {
    display: none !important;
}





/* --- RÉDUCTION DE LA HAUTEUR DU HEADER --- */

/* 1. On réduit l'espace au-dessus et en-dessous du logo */
.header-top {
    padding-top: 5px !important;    /* Presque plus d'espace en haut */
    padding-bottom: 5px !important; /* Presque plus d'espace en bas */
    min-height: 50px !important;    /* On force une hauteur totale basse */
}

/* 2. On ajuste la ligne qui contient les éléments */
#header .header-top .container > .row {
    min-height: 50px !important;    /* Aligné sur la hauteur du header */
}

/* 3. On s'assure que le logo ne force pas une hauteur trop grande */
#_desktop_logo img {
    max-height: 30px !important;    /* Logo un peu plus petit pour gagner de la place */
    width: auto !important;
}

/* 4. On remonte le slider s'il reste un liseré blanc */
.imageslider-container {
    margin-top: -1px !important; 
}

/* 5. On supprime tout padding éventuel sur le corps de page qui pousserait l'image */
#wrapper {
    padding-top: 0 !important;
}