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


/* *****************Police Libre Baskeville*********************/
@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&display=swap');


body {
    font-family: 'Libre Baskerville', serif; /* On appelle la bonne police */
    font-size: 1.25rem;
    line-height: 1.25em;
}

/* On force aussi les titres pour être sûr que tout le site soit harmonieux */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Libre Baskerville', serif;
}

/* *****************Fleche Carrousel*********************/
.carousel .carousel-control .icon-next:hover i, .carousel .carousel-control .icon-prev:hover i, .dropdown:hover .expand-more, .page-my-account #content .links a:hover i, .search-widget form button[type=submit] .search:hover, .top-menu .sub-menu a:hover {
    color: #24b9d7;
}

/*******************Image de sous catégories*********************/
#subcategories ul li:hover .subcategory-image a {
    display: none;}
/*******************Titres de sous catégories*********************/
#subcategories ul li .subcategory-name {
    text-transform: none;
}

#subcategories ul li .subcategory-name:hover, .block-categories .arrows .arrow-down:hover, .block-categories .arrows .arrow-right:hover, .block-categories .collapse-icons .add:hover, .block-categories .collapse-icons .remove:hover, .cart-grid-body a.label:hover {
    color: #8d8e79;
}

.h1 {
    text-transform: none;
    color: #9b4930;
}

/* 1. On s'assure que le fond reste transparent pour éviter le "rond" */
.facebook.icon-gray:hover, 
.twitter.icon-gray:hover, 
.pinterest.icon-gray:hover {
    background-color: transparent !important;
}

/* Pour Facebook */
.facebook.icon-gray:hover {
    filter: invert(39%) sepia(93%) saturate(1352%) hue-rotate(202deg) brightness(97%) contrast(100%);
    /* Ce filtre transforme le gris en bleu Facebook */
}

/* Pour Twitter */
.twitter.icon-gray:hover {
    filter: invert(67%) sepia(95%) saturate(3015%) hue-rotate(174deg) brightness(98%) contrast(97%);
    /* Ce filtre transforme le gris en bleu Twitter */
}

/* Pour Pinterest */
.pinterest.icon-gray:hover {
    filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(348deg) brightness(91%) contrast(104%);
    /* Ce filtre transforme le gris en rouge Pinterest */
}


/* Icône TikTok par défaut */
.tiktok {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25V349.38A162.55 162.55 0 1 1 185 188.31V278.2a74.62 74.62 0 1 0 52.23 71.18V0l88 0a121.18 121.18 0 0 0 1.86 22.17h.03a122.18 122.18 0 0 0 108.48 104.48v83.26z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%; /* Ou une taille fixe selon votre thème, ex: 20px */
}

/* Optionnel : Si vous avez besoin d'une version grise pour la cohérence */
.tiktok.icon-gray {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23666' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25V349.38A162.55 162.55 0 1 1 185 188.31V278.2a74.62 74.62 0 1 0 52.23 71.18V0l88 0a121.18 121.18 0 0 0 1.86 22.17h.03a122.18 122.18 0 0 0 108.48 104.48v83.26z'/%3E%3C/svg%3E");
}

/* Si votre thème utilise des ::before pour l'affichage */
.tiktok::before {
    content: "";
}


#blockcart-modal .product-name {
    color: #9b4930;
}


#header .header-nav .cart-preview.active {
    background: #a3aea3;
}

#header .header-nav {
    max-height: 60px;
    }


/* Couleur pendant le clic (Active) et quand le bouton est sélectionné (Focus) */
.btn-primary:active, 
.btn-primary:focus, 
.btn-primary.active {
    background-color: #000000 !important; /* La couleur que vous voulez au clic (ex: noir) */
    border-color: transparent !important;
    outline: none !important; /* Enlever le contour bleu par défaut du navigateur */
    box-shadow: none !important;
}

/* Optionnel : couleur si vous restez cliqué (état Focus-Active) */
.btn-primary:active:focus, 
.btn-primary:active:hover {
    background-color: #333333 !important; 
    border-color: transparent !important;
}


.btn-primary.disabled:hover,.btn-primary:disabled:hover {
    background-color: #a3aea3;
}


#product-modal .modal-content .modal-body .product-images img:hover {
    border: #9b4930 3px solid;
}

.carousel .carousel-control .icon-next:hover i, .carousel .carousel-control .icon-prev:hover i, .dropdown:hover .expand-more, .page-my-account #content .links a:hover i, .search-widget form button[type=submit] .search:hover, .top-menu .sub-menu a:hover {
    color: #9b4930;
}


.block-social ul li:hover {
    background-color: #a3aea3;
}

.block-social ul li {
    background-color: #9b4930;    
}

.pagination .current a {
    color: #8d8e79;
    
}

#header .top-menu a[data-depth="0"]:hover, a:hover {
    color: #8d8e79;    
}


.product-flag.availability-on-order {
    background-color: #24b9d7; /* Bleu comme votre thème */
    color: #fff;
}
.product-flag.availability-available {
    background-color: #4cbb6c; /* Vert pour le stock */
    color: #fff;
}

.brands-sort .select-list:hover, .products-sort-order .select-list:hover, .suppliers-sort .select-list:hover {
    background: #a3aea3;
}

.account-list a:hover, .block_newsletter form button[type=submit] .search:hover, .footer-container li a:hover {
    color: #a3aea3;
}

.block_newsletter form input[type=email]:focus {
    border: 3px #a3aea3 solid;
}

.form-control:focus {
    outline: .1875rem solid #a3aea3 !important;
    border-color: #a3aea3;
}

.input-group.focus {
    outline: .1875rem solid #a3aea3;
}

.carousel-control {
    width: 5%;
    }

/*******************Apercu rapide*********************/
/* On cible le lien pour changer la couleur de tout son contenu */
.quick-view.js-quick-view {
  color: #9b4930; /* Couleur de base (gris foncé) */
  text-decoration: none; /* Enlève le soulignement par défaut */
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease; /* Transition fluide pour le texte ET l'icône */
}

/* Au survol du lien, on change la couleur du texte et de l'icône */
.quick-view.js-quick-view:hover {
  color: #8d8e79; /* La couleur de votre choix au survol (ex: bleu) */
}

/* Optionnel : un petit espace entre l'icône et le texte */
.quick-view.js-quick-view .material-icons {
  margin-right: 5px;
}


.product-miniature .highlighted-informations .quick-view {
    font-size: 1rem;
    color: #8d8e79;
}

.product-miniature .highlighted-informations .quick-view:hover {
    color: #9b4930;
}

/*******************Gestion titre produits*********************/
.product-miniature .product-title {
    text-transform: none;
}
.h3 {
    text-transform: uppercase;
}

/*******************Gestion panier*********************/

#header .header-nav .blockcart {
    background: #ffffff;
}

/* *****************Couleur des flags produits*********************/
.product-flags li.product-flag {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.3rem 0.7375rem;
    margin-top: 1.625rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-transform: none !important;
    word-break: break-word;
    pointer-events: auto;
    background: #9a4931ff;
}


/* *****************Couleur du Contact du header (Appelez-nous : Telephone)*********************/

/* 1. On met tout le bloc en GRIS (pour cibler "Appelez-nous :") */
#contact-link {
    color: #a3aea3; /* Gris clair */
    font-size: 20px; /* Ajuste selon la taille voulue */
}

/* 2. On force le lien (le numéro) à être MARRON */
#contact-link a {
    color: #9b4930; /* Le marron "terre cuite" de ton logo */
    font-size: inherit;
    font-weight: bold; /* Optionnel : pour le faire ressortir comme sur la maquette */
    text-decoration: none;
}

/* 3. Optionnel : Effet au survol de la souris sur le numéro */
#contact-link a:hover {
    color: #000000; /* Devient noir ou une autre couleur au survol */
    text-decoration: underline;
}


.material-icons {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-family: "Material Icons",Arial,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    vertical-align: text-top;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
}


#header .header-nav .cart-preview .shopping-cart {
    color: #7a7a7a;
    vertical-align: text-top;
}

/* *****************Couleur des Liens du Menu*********************/

/* S'applique à TOUS les liens du menu (Principal + Déroulant) */
#header .top-menu a {
    color: #030303; /* Gris foncé */
    /*font-weight: 600; /* Tout le monde en semi-gras */
    text-transform: none;
}

/* Au survol pour TOUT le monde */
#header .top-menu a:hover {
    color: #a65e4e !important; /* Marron au survol */
    text-decoration: none;
}
/* *****************Fix pour que les liens tiennent entre le logo et le champ "rechercher"*********************/

/* Suppression du padding gauche global du menu */
#header .header-top .menu {
    padding-left: 50px !important;
}

/* Sécurité : On s'assure aussi que la liste (ul) à l'intérieur n'a pas de marge par défaut */
#header .top-menu {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.header-top-right {
    padding-top: 40px !important;}

#header .header-nav .right-nav {
    padding-top: 10px !important;
}

#header .header-top a[data-depth="0"] {
    color: #030303;
    text-transform: none;
}

.top-menu a[data-depth="0"] {
    padding: 0.625rem;
    font-size: 1.25rem;
    font-weight: 600;
}

/* *****************Fix sous menu*********************/


/* 1. On dit au lien parent : "Tu es le point de repère" */
.top-menu > li {
    position: relative;
}

/* 2. On transforme la barre blanche géante en un joli menu compact */
.top-menu .sub-menu {
    width: auto;                /* On arrête la largeur 100% */
    min-width: 200px;           /* Une largeur minimale pour être lisible */
    left: 45%;                  /* On le pousse au milieu du parent */
    transform: translateX(-50%);/* On le centre parfaitement par rapport à lui-même */
    top: 100%;                  /* On le place juste en dessous */
    margin-top: -64px; /* AJOUTER CECI : Remonte le bloc de 20 pixels */
    
    /* Esthétique (Ombre et Bordures) */
    box-shadow: 0px 5px 15px rgba(0,0,0,0.1); /* Une jolie ombre portée */
    border: none;               /* On retire les bordures grises moches */
    border-radius: 0 0 5px 5px; /* On arrondit le bas */
    padding: 15px;              /* Un peu d'air à l'intérieur */
    background: #fff;           /* Fond blanc */
    z-index: 1000;              /* Pour passer au-dessus de la bannière */
}

/* 3. (Optionnel) Pour que les liens à l'intérieur soient l'un sous l'autre */
.top-menu .sub-menu ul li {
    display: block;
    float: none;
    width: 100%;
    text-align: left; /* ou 'left' selon votre goût */
    margin-bottom: 5px;
}



/* *****************Taille du Titre des produits*********************/
.product-miniature .product-title a {
    font-size: 1.375rem;
    font-weight: 400;
    color: #8d8e79;
    text-align: center;
    text-decoration: none;
}


.product-miniature .product-price-and-shipping {
    font-size: 1.375rem;
    font-weight: 700;
    color: #9b4930;
    text-align: center;
}

/* *****************Taille du logo à debugger car fonncitonne plus ou moins*********************/
#_desktop_logo img {
    width: 292px;
    height: auto; /* On laisse la hauteur se calculer pour ne pas déformer l'image */
    max-height: none; /* On fait sauter la limite imposée par le thème */
    max-width: 100%; /* Sécurité pour ne pas qu'il sorte de l'écran sur mobile */
}

/* *****************Couleur du bouton et lien connexion dans le header*********************/
/* Change la couleur du texte et de l'icône */
.user-info a, 
.user-info a i, 
.user-info a span {
    color: #a3ada3!important; /* Mettez votre code couleur ici */
}

/* Change la couleur au survol */
.user-info a:hover, 
.user-info a:hover i, 
.user-info a:hover span {
    color: #9b4930 !important; /* Couleur au survol */
}


/* Alignement parfait pour Connexion et Panier */
.user-info a,
.blockcart a {
    display: flex;              /* Active le mode flexible */
    align-items: center;        /* Centre verticalement l'icône face au texte */
    gap: 5px;                   /* Espace propre entre l'icône et le texte */
}

/* Sécurité pour empêcher l'icône d'avoir une marge parasite */
.user-info i,
.blockcart i {
    vertical-align: middle;     /* Sécurité */
    margin: 0 !important;       /* On laisse 'gap' gérer l'espace */
    line-height: 1;             /* Évite que l'icône soit étirée en hauteur */
}
/* *****************Bordure Produit*********************/
.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover {
    border: #9b4930 3px solid;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    color: #9b4930;
    text-decoration: none;
}

.product-price {
    display: inline-block;
    max-width: 100%;
    color: #9b4930;
}

.h5, h5 {
    font-size: 2rem;
}

.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: #9b4930 3px solid;
}

.tabs .nav-tabs .nav-link.active {
    color: #9b4930;
}

/* Alignement spécifique pour l'icône d'alerte de stock */
#product-availability .material-icons,
.product-last-items .material-icons {
    vertical-align: text-bottom; /* Essayez 'bottom', 'sub', ou 'text-bottom' */
    margin-right: 5px;      /* Un petit espace entre l'icône et le texte */
    position: relative;     /* Permet un ajustement fin */
    top: 3px;               /* Forcez la descente de 3 pixels (ajustez ce chiffre) */
}


/* Alignement spécifique pour le bouton Ajouter au Panier */
.add-to-cart {
    display: flex !important;       /* Active le mode flexible */
    align-items: center;            /* Centre verticalement l'icône et le texte */
    justify-content: center;        /* Centre le tout horizontalement */
    gap: 10px;                      /* Définit l'espace exact entre l'icône et le texte */
}

/* Sécurité pour l'icône à l'intérieur */
.add-to-cart i {
    margin: 0 !important;           /* Enlève les vieilles marges qui décalent tout */
    padding: 0;
    line-height: 1;                 /* Empêche l'icône d'avoir une hauteur de ligne bizarre */
}

/* *****************Fix Couleur Gouton primaire*********************/
/* 1. État NORMAL du bouton */
.btn-primary {
    color: #9b4930;             /* Couleur du texte */
    background-color: #ecd2b1;  /* Couleur de fond (Beige) */
    border-color: transparent;
    transition: 0.3s;           /* Optionnel : rend le changement de couleur fluide */
}

/* 2. État au SURVOL (Hover) - Modifiez les couleurs ici */
.btn-primary:hover {
    color: #9b4930;             /* Exemple : Texte blanc */
    background-color: #a3aea3;  /* Exemple : Fond Marron (votre couleur de texte actuelle) */
    border-color: transparent;
}
/* *****************Fix Couleur du Body*********************/
/* 1. Enlever le fond gris (le mettre en blanc) */
#wrapper {
    background-color: #ffffff; /* Remplace le gris par du blanc */
    box-shadow: none; /* Enlève les petites ombres si présentes */
}
/* *****************Fix taille du Body*********************/
/* 2. Élargir le site (votre demande précédente) */
#wrapper .container {
    max-width: 1400px; /* Largeur max augmentée */
    width: 95%; /* Marge de sécurité sur les côtés */
}

/* *****************Masquer le titre Nouveaux Produits*********************/
/* Masquer le titre Nouveaux Produits */
.featured-products .products-section-title {
    display: none;
}

/* Réduire l'espace sous le titre "L'art dans les mains" */
#custom-text h2 {
    margin-bottom: 0.5rem; /* Réduit la marge sous le titre (valeur par défaut souvent 1.5rem) */
    padding-bottom: 0;
}

/* Enlever l'espace au-dessus du texte bleu si nécessaire */
#custom-text .content {
    padding-top: 0;
}

.carousel .carousel-inner {
    height: 270px;
}

#custom-text p {
    margin-top: -13px;
}



/* *****************Responsive Design*********************/

/* --- 1. LE CONTENEUR PRINCIPAL (La ligne) --- */
#header .header-top .row {
    display: flex;             /* Active le mode flexible */
    align-items: center;       /* ALIGNEMENT VERTICAL MAGIQUE : Centre tout sur la hauteur */
    flex-wrap: nowrap;         /* Interdit le passage à la ligne */
    margin-left: -15px;        /* Correction des marges standard Bootstrap */
    margin-right: -15px;
}

/* --- 2. LE LOGO (Zone Gauche) --- */
#_desktop_logo {
    /* On enlève les contraintes de colonnes Bootstrap */
    width: auto;               
    flex: 0 0 auto;            /* La boîte s'adapte à la taille exacte de l'image */
    padding-left: 15px;
    padding-right: 30px;       /* Espace de sécurité entre le logo et le menu */
}

/* Votre image de logo */
#_desktop_logo img {
    width: 278px;              /* LA TAILLE QUE VOUS VOULEZ */
    max-width: 100%;           /* Sécurité mobile */
    height: auto;
}

/* --- 3. LE MENU ET LA RECHERCHE (Zone Droite) --- */
.header-top-right {
    flex: 1;                   /* Prend tout l'espace restant disponible */
    width: auto;               /* Annule la largeur fixe */
    max-width: 100%;           /* Annule la limite Bootstrap */
    position: static;          /* Remise à zéro du positionnement */
    
    /* On organise aussi l'intérieur de la zone droite */
    display: flex;
    align-items: center;       /* Centre le texte du menu verticalement */
    justify-content: space-between; /* (Optionnel) Écarte le menu de la recherche si besoin */
}

.container {
    width: 1383px;
    max-width: 100%;
}

@media (max-width: 767px) {
    
    #header .top-logo img {
    width: auto;
    max-height: 3rem;
}

.wishlist-button-product {
    margin-left: 8% !important;
}

.btn {
    font-size: 0.8rem;
    margin-left: 9%;
}

.add-to-cart i {
    margin: -8px !important;
    margin-left: 2%;
}

.product-quantity .qty {
    margin-right: -2%;
}

.product-quantity #quantity_wanted {
    width: 2.1rem;
}

.tiktok {
    background-size: 65% !important;
}

/*********************TEXTE BIENVENUE *************************/
  p[style*="color:#8d8e79"] {
     font-size: 14px !important;
     line-height: 1.5 !important;
     text-align: justify !important;
  }

/********************************************************************************/
/* Force le sous-menu à rester dans le flux normal et pas hors écran */
  #mobile_top_menu .sub-menu, 
  .top-menu .sub-menu ul,
  .popover {
    position: static !important; /* Annule le positionnement hors champ */
    width: 100% !important;      /* Force la largeur à l'écran */
    left: 0 !important;          /* Remet à gauche */
    transform: none !important;  /* Annule les décalages */
    margin-left: 0 !important;
    box-shadow: none !important; /* Optionnel : retire l'ombre portée */
  }
  
  /* Sécurité pour que le conteneur principal ne coupe pas ce qui dépasse */
  .js-top-menu-mobile {
      overflow-x: hidden !important;
  }

.block-categories {
    display: none; }

}
@media (max-width: 1199px) {
    .navbar-toggleable-lg .navbar-brand {
        display:block;
        float: none;
        margin-top: .5rem;
        margin-right: 0
    }

    .navbar-toggleable-lg .navbar-nav {
        margin-top: .5rem;
        margin-bottom: .5rem
    }

    .navbar-toggleable-lg .navbar-nav .dropdown-menu {
        position: static;
        float: none
    }

    .hidden-lg-down {
        display: none!important
    }

    .carousel .carousel-inner {
        height: auto
    }
}