/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
/* 1. RENDRE LA TOPBAR ET LE MENU FIXES */


#header {
    /* position: fixed;  */
    top: 0;
    width: 100%;
    z-index: 1000;
    background: white;
    /* Force le fond en blanc pour éviter la transparence */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 2. STYLE DE LA TOPBAR (La ligne Contact / Connexion) */
.header-nav {
    background: #98c0a2 !important;
    /* Gris très clair, changez ici si c'est trop rouge */
    border-bottom: 1px solid #e5e5e5;
    max-height: 50px;
}

/* 3. STYLE DU MENU PRINCIPAL */
.header-top {
    background: #ffffff !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* 4. COMPENSER LE VIDE (Évite que le contenu du site ne remonte sous le header fixe) */
/* body {
    padding-top: 150px; /* Ajustez cette valeur selon la hauteur totale de votre header
} */

/* 5. FIX POUR MOBILE (Optionnel : désactive le sticky sur petit écran pour gagner de la place) */
@media (max-width: 767px) {
    #header {
        position: relative;
    }

    body {
        padding-top: 0;
    }
}



/* Target the paragraph inside short description */
.product-description-short p {
    font-size: 1.0rem;
    color: #000000 !important;
    /* important needed to override parent */
    line-height: 1.3em;
    text-align: center;
    /* optional: center text */
    margin: 0;
    /* remove extra paragraph margin */
}



/* Hide the word 'Neuf' but keep the blue box */
.product-flags .product-flag.new {
    background-color: #24b9d7 !important;
    /* Your blue color */
    color: black !important;
    /* Force text color here too */
    text-transform: none !important;
    /* Kill capitalization on parent */
    padding: 2px 8px !important;
    /* SHRUNK HEIGHT */
    min-height: 0 !important;
    /* REMOVE MINIMUM HEIGHT */
    height: auto !important;
    font-size: 0 !important;
}

/* Insert your own word in its place */
.product-flags .product-flag.new::before {
    content: 'nouveauté';
    text-transform: none !important;
    font-size: 11px;
    /* Match your theme's font size  */
    color: white;
    visibility: visible;
    vertical-align: middle
}

/* Style the Wishlist link in the top nav */
#header .header-nav .block-contact a[href*="blockwishlist"],
#header .header-nav .link-list a[href*="blockwishlist"] {
    display: inline-flex;
    align-items: center;
    background: #f1f1f1;
    /* Light grey background */
    padding: 5px 12px;
    border-radius: 20px;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-left: 10px;
}

/* Add the Heart Icon using Material Icons (Standard in PS 9) */
#header .header-nav a[href*="blockwishlist"]::before {
    content: '\E87D';
    /* This is the "favorite_border" icon code */
    font-family: 'Material Icons';
    margin-right: 5px;
    font-size: 16px;
    color: #ff4d4d;
    /* Heart color */
}

/* Hover Effect */
#header .header-nav a[href*="blockwishlist"]:hover {
    background: transparent !important;
    color: #ffffff !important;
}

#header .header-nav a[href*="blockwishlist"]:hover::before {
    color: #ffffff;
    content: '\E87E';
    /* Changes to filled heart on hover */
}

/* 1. Hide the "wishlist" text on Desktop */
#header .header-nav .wrapper .h3.hidden-sm-down {
    display: none !important;
}

/* 2. Hide the "wishlist" title section on Mobile */
#header .header-nav .wrapper .title.hidden-md-up {
    display: none !important;
}

/* 3. Force the list to be visible (sometimes titles control the collapse) */
#header .header-nav .wrapper ul.collapse {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. Remove the bullet point and extra padding from the list */
#header .header-nav .wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Force the list item and link to stay on one line */
#header .header-nav .wrapper ul li {
    display: inline-block !important;
    white-space: nowrap !important;
}

#link-custom-page-ma-liste-3 {
    display: flex !important;
    align-items: center;
    white-space: nowrap !important;
    text-decoration: none;
}

/* Ensure the heart icon stays tucked against the text */
#link-custom-page-ma-liste-3::before {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* 1. Stop the overlap by forcing the container to behave */
#header .header-nav .wrapper {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle;
    width: auto !important;
    /* Prevents it from taking up 50% width and overlapping */
    float: none !important;
    margin: 0 15px !important;
    /* Adds space between this and the Cart */
}


/* 3. The Vertical Alignment Nudge */
#link-custom-page-ma-liste-3 {
    display: flex !important;
    align-items: center !important;
    padding-top: 17px !important;
    /* INCREASE this number to push it LOWER */
    text-decoration: none !important;
}

/* 4. Ensure the heart icon moves with the text */
#link-custom-page-ma-liste-3::before {
    display: inline-block;
    margin-right: 6px;
    font-size: 18px;
    /* Matches standard icon size */
}


/* Hide the 'Créer une nouvelle liste' link and icon */
.wishlist-add-to-new {
    display: none !important;
}


/* ============================================================
   CAROUSEL
   ============================================================ */

/* Reduce homepage hero height */

#index #carousel {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

#index #carousel img {
    width: 100%;
    height: auto;
}


#carousel,
#carousel .carousel-inner,
#carousel .carousel-item {
    max-height: 220px;
}

#carousel img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

#carousel .caption-description{
    display:inline-block;
    background:rgba(0,0,0,0.35);
    padding:8px 16px;
    border-radius:6px;
}

#carousel .caption-description h3{
    color:white;
    text-shadow:0 2px 6px rgba(0,0,0,0.7);
    margin:0;
}

#carousel .carousel-item .caption{
    position:absolute;
    bottom:10%;
    left:20%;
    transform:translateX(-50%);
    width:100%;
}


/* ============================================================
   SOCIAL ICONS IN FOOTER
   ============================================================ */

/* On cible le lien Facebook spécifiquement dans le pied de page */
#footer a[href*="facebook.com"],
.footer a[href*="facebook.com"],
.links a[href*="facebook.com"] {
    position: relative !important;
    display: inline-block !important;
    color: transparent !important;
    /* Cache le texte */
    font-size: 0 !important;
    /* Écrase la taille du texte */
    width: 30px !important;
    /* Définit une zone de clic */
    height: 30px !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

/* On injecte l'icône par-dessus */
#footer a[href*="facebook.com"]::after,
.footer a[href*="facebook.com"]::after,
.links a[href*="facebook.com"]::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 10.991 22 12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    visibility: visible !important;
}


/* 2. Reset the list container */
#footer_sub_menu_3 {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    height: auto !important;
}



/* ============================================================
   1. PRODUCT LIST MINIATURES (The Square Selector)
   ============================================================ */

/* --- 1. CONTENEUR GLOBAL ET ESPACEMENT --- */
.product-miniature {
    margin-bottom: 1.5rem;
}

/* Supprime le bloc Quick-view/Variantes qui crée un grand vide sous l'image */
.product-miniature .highlighted-informations {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Réduit l'espace entre l'image et le début du texte */
.product-miniature .thumbnail-container {
    margin-bottom: 0 !important;
}

.product-miniature .product-description {
    text-align: left !important;
    /* Force l'alignement à gauche */
    padding: 0 10px 10px 10px !important;
    margin-top: -10px !important;
    /* Remonte le texte vers l'image */
}

/* --- 2. TYPOGRAPHIE (NOM ET DESCRIPTION) --- */
.product-miniature .product-title {
    margin: 0 0 5px 0 !important;
}

.product-miniature .product-title a {
    font-weight: 800 !important;
    /* Rend le nom très visible */
    color: #232323 !important;
    font-size: 1.1rem !important;
    line-height: 1.2;
}

.product-miniature .product-description-short {
    font-size: 0.85rem !important;
    color: #6c757d !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

/* --- 3. BLOC PRIX (GAUCHE / DROITE) --- */
.product-miniature .product-price-and-shipping {
    display: flex;
    flex-direction: column;
    /* Aligne les éléments l'un sous l'autre */
    align-items: center;
    /* Centre le tout par rapport à l'image */
    line-height: 1.4;
}

/* Prix principal (11,66 €) */
.product-miniature .product-price-and-shipping .price {
    font-weight: bold;
    color: #232323;
    font-size: 1.1rem;
}

/* Prix unitaire / Prix au kilo (16,04 €) */
.product-miniature .product-price-and-shipping .unit-price {
    font-size: 0.85rem;
    /* Plus petit pour créer une hiérarchie */
    color: #7a7a7a;
    /* Un gris plus doux pour l'œil */
    margin-top: 2px;
}

/* Le sélecteur ci-dessous est extrêmement précis pour battre theme.css */
.product-miniature .btn {
    font-size: 0.8rem !important;
    padding: 5px 2px !important;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Ajoutez ces deux lignes pour la sécurité */
    white-space: normal !important;
    line-height: 1.1;
}

.product-miniature .price {
    font-weight: bold !important;
    font-size: 1.2rem !important;
    color: #232323 !important;
}

.product-miniature .unit-price {
    font-size: 0.8rem !important;
    color: #7a7a7a !important;
}


/* --- 4. BOUTONS ET QUANTITÉ --- */
.product-miniature .product-add-to-cart-container {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 10px;
}

/* Style spécifique pour le bouton "Choisir mes options" */
.product-miniature .select-options-btn {
    background-color: #2fb5d2;
    /* Couleur à adapter selon votre thème */
    border: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.product-miniature .select-options-btn:hover {
    background-color: #2592a9;
}

/* Style du sélecteur de quantité +/- */
.product-miniature .qty-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f9fa;
}

/* --- 5. STATUTS DE STOCK --- */
.product-miniature .product-availability-status {
    min-height: 24px;
    margin-top: 8px;
}

.product-miniature .stock-label {
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 0.7rem !important;
    flex-wrap: wrap;
}






/* ============================================================
   CART PAGE: PILL FIX (GRID METHOD)
   ============================================================ */


/* 1. The Main Row: Forces everything to stay centered vertically */
body#cart #main .product-line-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* Prevents elements from jumping to next line */
    align-items: center !important;
    /* Vertical center alignment */
    padding: 15px 0;
    border-bottom: 1px solid #f1f1f1;
    width: 100%;
}

/* 2. Left Column: Product Image */
body#cart #main .product-line-grid-left {
    flex: 0 0 80px !important;
    /* Fixed width for image */
    margin-right: 15px;
}

body#cart #main .product-image img {
    max-width: 80px !important;
    height: auto;
    border-radius: 4px;
}

/* 3. Body Column: Name and Price */
body#cart #main .product-line-grid-body {
    flex: 1 !important;
    /* Takes up remaining middle space */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body#cart #main .product-line-info .label {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

/* 4. Right Column: Quantity Pill and Delete Icon */
body#cart #main .product-line-grid-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px;
    /* Space between pill and trash can */
}

/* 5. The Quantity Pill: Fixed Grid Layout */
body#cart #main .bootstrap-touchspin {
    display: grid !important;
    grid-template-columns: 35px 45px 35px !important;
    border: 2px solid #24b9d7 !important;
    border-radius: 25px !important;
    width: 115px !important;
    height: 36px !important;
    background: #fff !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Pill Buttons */
body#cart #main .btn-touchspin {
    height: 100% !important;
    background: transparent !important;
    color: #24b9d7 !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

/* Pill Input */
body#cart #main .js-cart-line-product-quantity {
    height: 100% !important;
    border: none !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

/* Delete Icon Color */
body#cart #main .remove-from-cart i {
    color: #333;
    font-size: 22px;
}

/* 6. Mobile Optimization */
@media (max-width: 575px) {
    body#cart #main .product-line-grid {
        flex-wrap: wrap !important;
    }

    body#cart #main .product-line-grid-right {
        width: 100%;
        margin-top: 10px;
        justify-content: space-between !important;
    }

    #carousel img {
        height: 160px;
    }

    
}









/* ---------------------------------------------
                   POPUP modal css
---------------------------------------------- */

/* Fix for the "Product Added" Modal layout */
#blockcart-modal .modal-body {
    display: flex;
    flex-wrap: wrap;
}

#blockcart-modal .product-image {
    max-width: 100%;
    height: auto;
}




/* ============================================================
   CHECKOUT LAYOUT
   ============================================================ */

/* Make selected pickup values clearly visible */
#ljdh-pickup-block select.form-control {
    color: #000 !important;
    font-weight: 600;
}

/* Ensure selected option is black */
#ljdh-pickup-block select.form-control option:checked {
    color: #000;
}   

.ljdh-pickup-summary {
    border: 1px solid #cde5cd;
    background: #f3fbf3;
    margin-bottom: 8px;
}

.ljdh-pickup-summary .card-header {
    background: #e6f6e6;
    border-bottom: 1px solid #cde5cd;
    font-weight: 600;
    margin-bottom: 8px;
}

.ljdh-pickup-body p {
    margin-bottom: 6px;
    font-size: 15px;
}

.ljdh-pickup-body strong {
    font-weight: 600;
}

#checkout-payment-step .payment-options {
    margin-top: 16px;
}

/* ============================================================
   FACEBOOK Icon
   ============================================================ */
/* Hide the theme's fake icon */

.block-social .facebook {
  background: transparent !important;
}

.fb-mobile-icon {
  display: none;
}

/* Style the button */
.block-social ul li.facebook a {
  background-color: #1877f2 !important;
  color: #ffffff !important;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 25px;
}

/* Replace text with just "f" */
.block-social ul li.facebook a {
  font-size: 0; /* hide original text */
}

.block-social ul li.facebook a::after {
  content: "f";
  margin-right: 17px;
  font-size: 25px;
  color: #ffffff;
  font-family: Arial, sans-serif;
}



@media (max-width: 767px) {
  .header-nav {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 767px) {

  .fb-mobile-icon {
    position: absolute;
    top: 8px;
    right: 240px;

    width: 32px;
    height: 32px;

    background: #1877f2;
    color: #ffffff !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    font-weight: bold;
    font-size: 18px;

    z-index: 9999;              /* 🔥 VERY IMPORTANT */
    pointer-events: auto;       /* 🔥 ensure clickable */
  }

}

/* ============================================================
   HIDE CATEGORY TREE ON MOBILE
   ============================================================ */

@media (max-width: 767px) {
  #left-column {
    display: none !important;
  }
}