/*====================================================
KINGDOM MARKET
BOUTIQUE.CSS
ESPACE VENDEUR
====================================================*/


/*==============================
RESET
==============================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",Arial,sans-serif;

}


body{

    background:#eaeded;

    color:#111;

}



/*==============================
HEADER
==============================*/


header{


    width:100%;


    background:#131921;


    color:white;


    padding:12px 30px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:20px;


    position:sticky;


    top:0;


    z-index:9999;


    box-shadow:0 4px 15px rgba(0,0,0,.25);


}



/*==============================
LOGO
==============================*/


.logo-container{


    display:flex;


    align-items:center;


}



.logo{


    width:70px;


    height:70px;


    object-fit:cover;


    background:white;


    border-radius:10px;


    padding:4px;


}



/*==============================
TITRE
==============================*/


header h1{


    font-size:28px;


    color:white;


}



header p{


    color:#ddd;


    margin-top:5px;


}

/*=============================
MENU PLEIN ECRAN
=============================*/

.header-actions{

    display:flex;
    align-items:center;
    gap:15px;

}


.dropbtn{

    background:#232f3e;

    color:white;

    border:none;

    padding:12px 18px;

    cursor:pointer;

    font-size:15px;

    border-radius:6px;

}



.dropdown{

    position:static;

}



.dropdown-content{


    display:none;


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:100vh;


    background:white;


    z-index:99999;


    padding-top:90px;


    overflow-y:auto;


}



/* Quand le menu est ouvert */

.dropdown-content.show{


    display:block;


}



/* liens du menu */


.dropdown-content a{


    display:block;


    width:90%;


    margin:15px auto;


    padding:18px;


    background:#eaeded;


    color:#111;


    text-decoration:none;


    border-radius:10px;


    font-size:18px;


    font-weight:600;


    transition:.3s;


}



.dropdown-content a:hover{


    background:#131921;


    color:white;


}



/* bouton fermeture optionnel */

.close-menu{


    position:absolute;


    top:20px;


    right:25px;


    font-size:35px;


    cursor:pointer;


    color:#131921;


}


/*==============================
TITRE PAGE
==============================*/


.page-header{


    width:95%;


    max-width:1400px;


    margin:25px auto;


    background:white;


    padding:25px;


    border-radius:10px;


    box-shadow:0 3px 10px rgba(0,0,0,.15);


}



.page-header h2{


    font-size:32px;


    border-left:8px solid #0b6db5;


    padding-left:15px;


}



/*==============================
FORMULAIRE VENDEUR
==============================*/


.form-container{


    width:95%;


    max-width:900px;


    margin:30px auto;


    background:white;


    padding:35px;


    border-radius:12px;


    box-shadow:0 3px 15px rgba(0,0,0,.15);


}



#productForm{


    display:flex;


    flex-direction:column;


    gap:12px;


}



#productForm label{


    font-weight:600;


    margin-top:10px;


    color:#131921;


}



#productForm input,
#productForm textarea,
#productForm select{


    width:100%;


    padding:14px;


    border:1px solid #ccc;


    border-radius:8px;


    font-size:15px;


    outline:none;


}



#productForm textarea{


    height:120px;


    resize:none;


}



#productForm input:focus,
#productForm textarea:focus,
#productForm select:focus{


    border-color:#0b6db5;


    box-shadow:0 0 6px rgba(11,109,181,.3);


}



/*==============================
BOUTON AJOUT
==============================*/


#productForm button{


    margin-top:20px;


    height:50px;


    border:none;


    border-radius:25px;


    background:#febd69;


    color:#111;


    font-size:17px;


    font-weight:bold;


    cursor:pointer;


}



#productForm button:hover{


    background:#f3a847;


}



/*==============================
LISTE PRODUITS VENDEUR
==============================*/


.products-section{


    width:95%;


    max-width:1400px;


    margin:35px auto;


    background:white;


    padding:30px;


    border-radius:12px;


    box-shadow:0 3px 15px rgba(0,0,0,.15);


}



.products-section h2{


    margin-bottom:25px;


    font-size:28px;


    border-bottom:3px solid #febd69;


    padding-bottom:10px;


}



/*==============================
GRILLE PRODUITS
==============================*/


#productsList{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


}



/*==============================
CARTE PRODUIT VENDEUR
==============================*/


.product-card{


    background:white;


    border:1px solid #ddd;


    border-radius:10px;


    overflow:hidden;


    transition:.3s;


}



.product-card:hover{


    transform:translateY(-8px);


    box-shadow:0 10px 25px rgba(0,0,0,.2);


}



.product-card img{


    width:100%;


    height:220px;


    object-fit:contain;


}



/*==============================
INFOS PRODUIT
==============================*/


.product-info{


    padding:15px;


}



.product-info h3{


    font-size:19px;


}



.product-price{


    color:#B12704;


    font-size:24px;


    font-weight:bold;


    margin-top:10px;


}



/*==============================
FOOTER
==============================*/


footer{


    margin-top:50px;


    background:#131921;


    color:white;


    padding:30px;


    text-align:center;


}



/*==============================
TABLETTE
==============================*/


@media(max-width:992px){


header{


    flex-wrap:wrap;


}


.form-container{


    width:92%;


}



}



/*==============================
MOBILE
==============================*/


@media(max-width:768px){


header{


    flex-direction:column;


    padding:15px;


}



.logo{


    width:55px;


    height:55px;


}



header h1{


    font-size:22px;


    text-align:center;


}



header p{


    text-align:center;


}



.page-header h2{


    font-size:23px;


}



.form-container{


    padding:20px;


}



.products-section{


    padding:20px;


}



#productsList{


    grid-template-columns:1fr;


}



}



@media(max-width:400px){


#productForm input,
#productForm textarea,
#productForm select{


    font-size:14px;


}
}