*{
    --sokitoko_couleur_1 : #6a2f27;
    --sokitoko_couleur_2 : #cf8e03;
    --sokitoko_couleur_blanc : #ffffff;
    --sokitoko_couleur_noir : #1b1b1b;
}
input:hover,
input:active,
input:focus,
input
{
    outline: none;
}
.img_logo_nav
{
    width: 50px ;
}
.cart-area a:hover,
.cart-area a span:hover
{
    color: var(--sokitoko_couleur_2);
}
/* design produit */
.single-product-wrapper .product-description .hover-content {
    position: absolute;
    width: 40px;
    height: auto;
    top: -50px;
    bottom: 0;
    right: 10px;
    left: auto;
    opacity: 1;
    visibility: visible;
}
.single-product-wrapper .product-description .hover-content .essence-btn {
    min-width: 40px !important;
    height: 40px !important;
    line-height: auto !important;
    padding: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
}
.div_icone_edition_produit
{
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
/* footer */
.logo_footer
{
    width: 100px;
}
/* filtre */
.titre_filtre
{
    color: var(--sokitoko_couleur_1);
}
.collapsed .titre_filtre
{
    color: var(--sokitoko_couleur_2);
}
.widget.price .ui-slider-handle {
background-color: #000000;
border: none;
border-radius: 0;
top: -6px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 0; }
.filtre_color
{
    border-radius: 50%;
}

/* article details */
.color-picker {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selected-color-display {
    width: 100%;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    background-color: #FF0000; /* Couleur initiale */
    color: white; /* Texte en blanc pour la lisibilité sur fond rouge */
    border: 1px solid #ddd; /* Bordure pour délimiter la zone */
}

.color-options {
    display: flex;
    gap: 5px; /* Espace entre les cercles */
    flex-wrap: wrap; /* Permet aux cercles de passer à la ligne si l'espace est insuffisant */
    justify-content: center;
}

.color-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%; /* Rend la div ronde */
    cursor: pointer;
    border: 2px solid transparent; /* Bordure transparente par défaut */
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.color-circle:hover {
    transform: scale(1.1); /* Agrandit légèrement au survol */
}

.color-circle.selected {
    border-color: #007bff; /* Bordure bleue pour la couleur sélectionnée */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Effet d'ombre pour la sélection */
}

/* Couleurs spécifiques */
.red { background-color: #FF0000; }
.black { background-color: #000000; }
.white { background-color: #FFFFFF; border: 1px solid #ccc; } /* Bordure pour le blanc pour le rendre visible */
.violet { background-color: #8A2BE2; }
.blue { background-color: #0000FF; }
.green { background-color: #008000; }
/* checkout */
.titre_mode_de_paiement
{
    color: var(--sokitoko_couleur_1);
    opacity: 1;
}
/* login page */

.div_parent_login {
    background: linear-gradient(135deg, var(--sokitoko_couleur_1), var(--sokitoko_couleur_2));
    padding: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.div_parent_login.user
{
    background: var(--sokitoko_couleur_1);
}
.login-container 
{
    background-color: white;
    width: 100%;
    max-width: 380px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px 30px;
    text-align: center;
}
.login-container.choix
{
    padding: 0px 0px;
}

.login-container 
.logo {
    font-weight: bold;
    margin-bottom: 15px;
}
.logo img {
    width: 90%;
}

.login-container 
h2 {
    margin-bottom: 5px;
}

.login-container 
p.subtext {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 30px;
}

.login-container 
.div_input,
.login-container 
input[type="text"],
.login-container 
input[type="email"],
.login-container 
input[type="password"] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 1em;
}
.login-container 
input[type="text"],
.login-container 
input[type="email"]
{
    margin: 5px 0px;
}
.login-container 
.div_input
{
    padding: 0 0;
    margin: 0 0;
    border: none;
    position: relative;
    height: auto;
    margin: 10px 0px;
}
.div_input 
input[type="password"] ,
.div_input 
input[type="text"] ,
.div_input 
input[type="email"] 
{
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 1em;
    padding-left: 20px;
    outline: none;
    margin: 0 0;
    margin-bottom: 0;
}
.div_input 
.vu_mdp
{
    position: absolute;
    right: 0;
    top: auto;
    bottom: auto;
    padding: 12px;
    font-size: 1em;
    height: 100%;
    cursor: pointer;
}
.div_input 
.erreur
{
    color: #FF0000;
    padding: 0;
    margin: 5px 0px;
    font-size: 14px;
}
.div_input 
.vu_mdp:active
{
    opacity: .5;
}
.login-container 
.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    margin-bottom: 20px;
}

.login-container 
.remember-forgot input {
    margin-right: 5px;
}

.login-container 
.remember-forgot a {
    text-decoration: none;
    color: #4a90e2;
}

.login-container 
.btn {
    background-color: var(--sokitoko_couleur_1);
    border: none;
    color: white;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1em;
    margin-bottom: 15px;
}

.login-container 
.google-btn {
    background: white;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95em;
}

.login-container 
.google-btn img {
    width: 18px;
    height: 18px;
}

.login-container 
.signup-link {
    font-size: 0.9em;
    margin-top: 20px;
}

.login-container 
.signup-link a {
    color: #4a90e2;
    text-decoration: none;
}

.choix_login_sokitoko:hover,
.choix_login_sokitoko:active,
.choix_login_sokitoko
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    padding: 20px;
    color: var(--sokitoko_couleur_blanc);
    font-size: 30px;
}
.choix_login_sokitoko:hover
{
    opacity: .5;
}
.choix_login_sokitoko.user
{
    background: var(--sokitoko_couleur_1);
    border-radius: 20px 20px 0px 0px;
}
.choix_login_sokitoko.marchant
{
    background: var(--sokitoko_couleur_2);
    border-radius: 0px 0px 20px 20px;
}
.erreur
{
    font-size: 16px;
    color: red;
}
/* pop up */
.login-container.pop_up
{
    background-color: none;
    background: none;
    width: 100%;
    max-width: none;
    border-radius: 20px;
    box-shadow: none;
    padding: 40px 30px;
    text-align: center;
}
.login-container.pop_up
.div_input 
.vu_mdp
{
    position: absolute;
    right: 0;
    top: auto;
    bottom: auto;
    padding: 12px;
    padding-top: 15px;
    font-size: 1em;
    height: 100%;
    cursor: pointer;
}
.popup-overlay {/* Style de l'arrière-plan (overlay) */
    display: none; /* Cache par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent */
    z-index: 999; /* Au-dessus de tout le reste */
}
.popup {/* Style du pop-up */
    display: none; /* Cache par défaut */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage */
    background-color: #fff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
}
.close-btn-popup {/* Style du bouton de fermeture */
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2em;
    cursor: pointer;
    color: #aaa;
}

/* logo partenaire */

.single-brands-logo img
{
    transition: .5s ease-in-out;
}
.single-brands-logo img
{
    height: 100px;
    filter: grayscale(100%);
}
.single-brands-logo img:hover
{
    height: 100px;
    filter: none;
}
.editor_option:hover,
.editor_option:hover
a,
.editor_option,
.editor_option
a
{
    position: absolute;
    top: 0;
    right: 0;
    color: var(--sokitoko_couleur_2);
    cursor: pointer;
    font-size: 16px;
    outline: none
}


@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap");
.div_voir_plus
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.btn_voir_plus {
    width: 200px;
    display: inline-block;
    font-size:16px;
    font-weight: 600;
    background-color:var(--sokitoko_couleur_1);
    padding:24px 24px 24px 32px;
    display:flex;
    align-items:center;
    border-radius:99px;
    position:relative;
    transition: all .5s cubic-bezier(.77,0,.175,1);
    .text{
        color:#fff;
        line-height:1;
        position:relative;
        z-index:5;
        margin-right:32px;
    }
    svg{
        display:inline-block;
        position:relative;
        z-index:5;
        transform: rotate(0deg) translateX(0);
        transform-origin: left;
        transition: all .5s cubic-bezier(.77,0,.175,1);
    }
    &::before{
        content:'';
        background-color:var(--sokitoko_couleur_2);
        width:32px;
        height:32px;
        display:block;
        position:absolute;
        z-index:1;
        border-radius:99px;
        top:50%;
        right:16px;
        transform:translateY(-50%);
        transition: all .5s cubic-bezier(.77,0,.175,1);
    }
    &.light{
        background-color: var(--sokitoko_couleur_2);
        
        &::before{
        background-color: var(--sokitoko_couleur_1);
        }
    }
}

.btn_voir_plus:hover{
    svg{
        transform: rotate(45deg) translateX(-8px);
    }
    
    &::before{
        content:'';
        width:100%;
        height:100%;
        right:0;
    }
}



/* edit catégories */
.edit_categories.active {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 50px 0px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    justify-content: center;
}
.edit_categories {
    display: none;
}
.gestion_categorie {
    width: 80%;
    background-color: white;
    padding: 100px 200px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: auto;
    z-index: 2;
}
.div_sortie_edit_categories
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.container_categorie_article
{
    border: 1px solid var(--sokitoko_couleur_1);
    border-radius: 10px;
    margin: 10px 0px;
    padding: 10px;
}
.container_categorie_article.drop_zone.drag-over,
.container_categorie_article
.categorie_principale.drop_zone.drag-over
{
    border-color: var(--sokitoko_couleur_2);
}
.container_categorie_article
.input_categorie_principale
{
    width: 100%;
    border: none;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    color: var(--sokitoko_couleur_1);
    background: none;
}
.container_categorie_article
.categorie_principale
{
    border: 1px dashed var(--sokitoko_couleur_1);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 5px;
    font-weight: bold;
}
.container_categorie_article
.sous_categorie
{
    border: 1px dashed var(--sokitoko_couleur_1);
    border-radius: 10px;
    margin: 10px 0px;
    padding: 5px;
    font-weight: normal;
}
.container_categorie_article
.sous_categorie
.input_sous_categorie
{
    width: 100%;
    border: none;
    font-size: 16px;
    outline: none;
    color: var(--sokitoko_couleur_1);
    background: none;
}
.container_categorie_article
.categorie_principale.dragging,
.container_categorie_article
.sous_categorie.dragging
{
    opacity: .2;
}
.container_categorie_article
.categorie_principale.dragged,
.container_categorie_article
.sous_categorie.dragged
{
    border: 1px solid var(--sokitoko_couleur_2);
    opacity: 1;
    background: var(--sokitoko_couleur_2);
    color: var(--sokitoko_couleur_blanc);
}

/* div vu navigation */
.megamenu
{
    max-height: 50vh;
    overflow: auto;
}
.div_categories_baniere
{
    display: flex;
    flex-wrap: wrap
}
.categories_baniere
{
    width: 32.333333%;
    margin: 0% .5%;
    margin-top: 20px;
}
.categories_baniere .title a
{
    color: var(--sokitoko_couleur_1);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* afficher produit */
.div_afficher_produit
{
    display: flex;
    flex-wrap: wrap;
    margin: none;
}
.div_details_produit
{
    width: 33.3333%;
    padding: 10px;
}

/* shop - article */
.pagination .page-item.actif .page-link
{
    background: var(--sokitoko_couleur_1);
    color: var(--sokitoko_couleur_blanc);
}
.aucun_article
{
    display: block;
    text-align: center;
    background: var(--sokitoko_couleur_1);
    width: 100%;
    padding: 50px;
    color: var(--sokitoko_couleur_blanc);
}
.aucun_article h1
{
    color: var(--sokitoko_couleur_blanc);
}
.aucun_article a:hover,
.aucun_article a:active,
.aucun_article a
{
    display: block;
    width: 50%;
    margin: 10px 25%;
    padding: 20px;
    background: var(--sokitoko_couleur_2);
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    color: var(--sokitoko_couleur_blanc);
    outline: none;
}
.aucun_article a:active
{
    opacity: .5;
}
.reset_filtre:hover,
.reset_filtre:active,
.reset_filtre
{
    display: inline-block;
    padding: 20px;
    background: var(--sokitoko_couleur_2);
    border-radius: 5px;
    text-decoration: none;
    color: var(--sokitoko_couleur_blanc);
    outline: none;
}

/* boutique */


.profile-container {
width: 100%;
margin-bottom: 5px;
background: white;
border-radius: 0px 0px 20px 20px ;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.banner {
height: 150px;
background: linear-gradient(90deg, var(--sokitoko_couleur_1), var(--sokitoko_couleur_2));
border-radius: 0px 0px 20px 20px;
margin-bottom: 10px;
}

.avatar {
position: relative;
bottom: 60px;
margin-left: 20px;
}

.avatar img {
border-radius: 50%;
border: 4px solid white;
width: 100px;
height: 100px;
}

.profile-info {
    padding: 0 20px 20px;
    margin-top: -20px;
}

.username {
color: gray;
font-size: 14px;
}

.bio {
list-style: none;
padding: 0;
margin: 10px 0;
}

.bio li {
margin-bottom: 6px;
}

.social-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
}

.social-links span {
background: #f1f3f4;
padding: 6px 10px;
border-radius: 12px;
font-size: 13px;
}

.actions {
margin-top: 15px;
}

.follow-btn {
background: black;
color: white;
border: none;
padding: 8px 20px;
border-radius: 20px;
cursor: pointer;
}

.follow-btn:hover {
background: #333;
}

/* accueil bannière */
.hero-content h6 a:hover,
.hero-content h6 a:active,
.hero-content h6 a
{
    color: var(--sokitoko_couleur_1);
}

/* account */
.flex_wap
{
    display: flex;
    flex-wrap: wrap;
}
.barre_nom_deconnexion
{
    padding: 10px;
    width: 100%;
    background: var(--sokitoko_couleur_blanc);
}
.barre_nom_deconnexion
.deconnexion
{
    width: 100%;
    text-align: right;
}
.barre_nom_deconnexion
.deconnexion
a
{
    display: inline-block;
    color: var(--sokitoko_couleur_blanc);
    text-decoration: none;
    outline: none;
    padding: 10px;
    background: var(--sokitoko_couleur_1);
    width: auto;
    border-radius: 10px;
}
.barre_nom_deconnexion
.deconnexion
a:hover
{
    opacity: .5;
}
.div_profil_utilisateur
{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.parent_div_photo_de_profile
{
    width: 33%;
    padding: 20px;
    height: 100%;
}
.div_photo_de_profile
{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid var(--sokitoko_couleur_2);
    display: flex;
    justify-content: center;
    align-items: center;
}
.photo_de_profile
{
    border-radius: 50%;
    width: 300px;
    height: 300px;
    margin: 20px;
    display: flex;
    overflow: hidden;
    position: relative;
    padding: 10px;
    background: linear-gradient(120deg, var(--sokitoko_couleur_1), var(--sokitoko_couleur_2));
}
.photo_de_profile
img
{
    width: 100%;
    position: relative;
    z-index: 1;
}
.modif_photo_de_profile
{
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    border: none;
    outline: none;
    background: var(--sokitoko_couleur_2);
    opacity: 0.9;
    border-top: 1px solid var(--sokitoko_couleur_blanc);
}
.modif_photo_de_profile:hover
{
    opacity: 1;
}
.modif_photo_de_profile:active
{
    opacity: .5;
}
.parent_div_info_profile
{
    width: 66%;
    padding: 20px;
    height: 100%;
}
.div_info_profile
{
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--sokitoko_couleur_2);
    padding: 10px 0px;
    height: 100%;
}
.info_profile
{
    width: 50%;
    padding: 20px;
    margin-bottom: 10px;
}
.titre_info_profile
{
    font-size: 18px;
    color: var(--sokitoko_couleur_1);
    font-weight: bold;
    padding: 5px 0px;
}
.detail_info_profile
{
    font-size: 16px;
    color: var(--sokitoko_couleur_1);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--sokitoko_couleur_1);
}
.titre_produits_liker
{
    padding: 20px;
    color: var(--sokitoko_couleur_2);
    font-weight: bold;
    text-align: center;
}

/* lab categorie */
.container_lab_categorie
{
    padding: 10px;
}
.div_lab_categorie
{
    padding: 10px;
    border: 1px solid var(--sokitoko_couleur_1);
    border-radius: 10px;
    width: 100%;
}
.titre_div_lab_categorie
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.btn_add_categorie_lab_categorie
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: var(--sokitoko_couleur_2);
    color: var(--sokitoko_couleur_blanc);
    border-radius: 10px;
    outline: none;
    border: none;
    cursor: pointer;
}
.btn_add_categorie_lab_categorie:active
{
    opacity: .5;
}
.categorie_lab_categorie
{
    padding: 10px;
    border: 1px dashed var(--sokitoko_couleur_1);
    border-radius: 10px;
    margin: 10px 0px;
    transition: .3s ease-in-out;
}
.titre_categorie_lab_categorie
{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.input_titre_categorie_lab_categorie,
.input_sous_categorie
{
    width: 90%;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: bold;
    color: var(--sokitoko_couleur_1);
    background: none;
    padding: 10px 0px;
}
.input_sous_categorie.add:placeholder-shown
{
    color: var(--sokitoko_couleur_noir);
}
.alignement_categorie_lab_categorie,
.alignement_sous_categorie
{
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    font-size: 16px;
    color: var(--sokitoko_couleur_1);
}
.alignement_categorie_lab_categorie
span,
.alignement_sous_categorie
span
{
    cursor: pointer;
    margin: 0px 5px;
    background: var(--sokitoko_couleur_1);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: var(--sokitoko_couleur_blanc);
    display: flex;
    justify-content: center;
    align-items: center;
}
.alignement_sous_categorie
span
{
    background: var(--sokitoko_couleur_2);
    color: var(--sokitoko_couleur_blanc);
}
.alignement_categorie_lab_categorie
span:active,
.alignement_sous_categorie
span:active
{
    opacity: .5;
}
.div_sous_categorie
{
    padding:0px;
    padding-left: 20px;
    width: 100%;
}
.div_sous_categorie.active
{
    opacity: .5;
}
.sous_categorie
{
    padding: 0px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}


/* edit article */
.container_modifier_article
{
    width: 100%;
}
.titre_modifier_article
{
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-align: center;
    margin: 20px 0px;
    color: var(--sokitoko_couleur_1);
}
.div_modifier_article
{
    width: 50%;
    padding: 20px 10px;
    margin: 20px 25%;
    background: var(--sokitoko_couleur_blanc);
}
.form_modifier_article
{
    margin: 10px 0px;
    width: 100%;
    padding-bottom: 5px;
    /*border-bottom: 1px solid var(--sokitoko_couleur_1);*/
}
.form_modifier_article
label
{
    font-size: 16px;
    padding: 0px 0px;
    display: inline-block;
    width: 100%;
    color: var(--sokitoko_couleur_1);
}
.form_modifier_article
input,
.form_modifier_article
select
{
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
    color: var(--sokitoko_couleur_noir);
    outline: none;
    border: 1px solid var(--sokitoko_couleur_1);
    background: var(--sokitoko_couleur_blanc);
}
.form_modifier_article
button
{
    width: 100%;
    display: inline-block;
    outline: none;
    border-radius: 10px;
    background: var(--sokitoko_couleur_1);
    font-size: 16px;
    font-weight: bold;
    color: var(--sokitoko_couleur_blanc);
    padding: 10px;
    margin: 10px 0px;
    border: none;
}
.div_image_modifier_article
{
    width: 100%;
    padding: 20px;
}
.div_image_modifier_article
img
{
    width: 100%;
    border-radius: 10px;
}





.null
{
    display: none;
}