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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{

    background:#eaeded;
    color:#111;

}

/* Espace en bas pour ne pas passer sous la barre mobile */
@media(max-width:900px){

    body{
        padding-bottom:78px;
    }

}


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


header{

    background:#131921;

    color:white;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    padding:12px 25px;

    position:sticky;

    top:0;

    z-index:1000;

    flex-wrap:wrap;

    gap:10px;

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

}



.logo-container{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:12px;

    min-width:0;

    flex-shrink:1;

}



.logo{

    width:52px;

    height:52px;

    object-fit:contain;

    object-position:center;

    border-radius:50%;

    background:white;

    padding:5px;

    display:block;

    margin:auto;

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

    flex-shrink:0;

}



.logo-container h1{

    font-size:22px;

    color:white;

    letter-spacing:.3px;

    white-space:nowrap;

}




.header-actions{

    display:flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;

    margin-left:auto;

    overflow-x:auto;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.header-actions::-webkit-scrollbar{

    display:none;

}





/* ===================================
   ICONES HEADER (Panier, Compte, Menu)
=================================== */


.icon-btn{

    position:relative;

    width:42px;

    height:42px;

    border-radius:50%;

    border:none;

    background:#232f3e;

    color:white;

    font-size:19px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.2s;

    flex-shrink:0;

}


.icon-btn i{

    line-height:1;

    pointer-events:none;

}


/* Centrage parfait de l'icône (Font Awesome <i>, image ou svg) dans les boutons ronds
   connexion / déconnexion / menu / panier.
   Centrage par position absolue : reste correct quel que soit le display
   appliqué en JS au bouton lui-même (flex, inline-block, none...), donc
   ne casse jamais l'affichage/masquage connexion <-> déconnexion. */
.icon-btn,
.dropbtn,
#logoutBtn{
    position:relative;
    padding:0;
}

.icon-btn i,
.dropbtn i,
#logoutBtn i{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    line-height:1;
    margin:0;
    padding:0;
}

.icon-btn img,
.dropbtn img,
#logoutBtn img,
.icon-btn svg,
.dropbtn svg,
#logoutBtn svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:55%;
    height:55%;
    object-fit:contain;
    margin:0;
    pointer-events:none;
}



.icon-btn:hover{

    background:#febd69;

    color:#131921;

}


#logoutBtn{

    background:#febd69;

    color:#131921;

}


#logoutBtn:hover{

    background:#ff9900;

}


#cartCount{

    position:absolute;

    top:-4px;

    right:-4px;

    background:#ff9900;

    color:#131921;

    min-width:19px;

    height:19px;

    padding:0 3px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:bold;

    border:2px solid #131921;

}



/* ===================================
   MENU
=================================== */


.dropbtn{

    background:#232f3e;

    color:white;

    border:none;

    width:42px;

    height:42px;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;

    display:flex;

    align-items:center;

    justify-content:center;

}



.dropdown-content{

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:white;

    padding-top:90px;

    z-index:9999;

}



.dropdown-content.show{

    display:block;

}



.dropdown-content a{

    display:block;

    width:90%;

    margin:15px auto;

    padding:15px;

    background:#eaeded;

    color:#111;

    text-decoration:none;

    border-radius:8px;

    font-weight:bold;

}



.dropdown-content a:hover{

    background:#131921;

    color:white;

}



.close-menu{

    position:absolute;

    right:25px;

    top:20px;

    font-size:35px;

    color:#111;

    cursor:pointer;

}



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


.page-header{

    width:95%;

    margin:20px auto 0;

    background:white;

    padding:18px 20px;

    border-radius:10px;

    box-shadow:0 2px 8px rgba(0,0,0,.1);

}


.page-header h2{

    font-size:24px;

    color:#131921;

    border-left:5px solid #febd69;

    padding-left:12px;

}



/* ===================================
   RECHERCHE + FILTRE
=================================== */


.search-section{

    width:95%;

    margin:16px auto;

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}



.search-box{

    flex:1;

    min-width:240px;

    display:flex;

    background:white;

    border-radius:12px;

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

    overflow:hidden;

}



.search-box input{

    flex:1;

    height:52px;

    border:none;

    padding:15px 18px;

    font-size:16px;

    background:transparent;

}


.search-box input:focus{

    outline:none;

}



.search-box button{

    width:60px;

    border:none;

    background:#febd69;

    font-size:20px;

    cursor:pointer;

}


.search-box button:hover{

    background:#ff9900;

}



.filter-box{

    display:flex;

    align-items:center;

    background:white;

    border-radius:12px;

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

    padding:0 14px;

}



.filter-box select{

    height:52px;

    border:none;

    background:transparent;

    font-size:15px;

    min-width:190px;

    cursor:pointer;

}


.filter-box select:focus{

    outline:none;

}



/* ===================================
   PRODUITS (grille)
=================================== */

.products-container{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));

    gap:16px;

    width:95%;

    margin:20px auto;

    justify-items:stretch;

}



.product-card{

    width:100%;

    background:white;

    border-radius:14px;

    padding:12px;

    box-shadow:0 2px 8px rgba(0,0,0,.1);

    cursor:pointer;

    overflow:hidden;

    transition:.25s;

    display:flex;

    flex-direction:column;

}



.product-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}



.product-image{

    width:100%;

    aspect-ratio:1 / 1;

    height:auto;

    object-fit:contain;

    background:#f7f8f8;

    border-radius:10px;

    padding:8px;

}



.product-card h3{

    font-size:14.5px;

    margin:10px 0 4px;

    line-height:1.3;

    color:#131921;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}



.product-card p{

    font-size:12.5px;

    margin:3px 0;

    color:#555;

}



/* ===================================
   DESCRIPTION COURTE (1 seule ligne)
   -> On n'affiche jamais toute la description, quelle que
      soit sa longueur : une seule ligne, coupée avec "…".
=================================== */


.description{

    overflow:hidden;

    color:#777;

    line-height:1.35;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    margin:2px 0;

}


.description.desc-courte{

    font-size:11px;

    -webkit-line-clamp:1;

    height:15px;

}



.prix-promo{

    margin:4px 0 2px;

}



.prix-promo del{

    color:#888;

    font-size:12.5px;

}



.prix-promo strong{

    display:block;

    color:#d32f2f;

    font-size:18px;

}



.product-card > p:not(.description){

    font-weight:bold;

    color:#1c7a3e;

    font-size:16px;

}


.product-card p.description ~ p{

    font-weight:normal;

    color:#666;

    font-size:12.5px;

}



.promo{

    display:inline-block;

    margin-top:4px;

    background:#d32f2f;

    color:white;

    padding:3px 10px;

    border-radius:10px;

    font-size:11px;

    font-weight:bold;

}


.stock-badge{

    display:inline-flex;

    align-items:center;

    gap:4px;

    margin-top:auto;

    padding-top:6px;

    font-weight:600;

    font-size:12px;

}


.stock-badge.in{

    color:#1c7a3e;

}


.stock-badge.out{

    color:#c62828;

}



/* ===================================
   NOUVELLE PRESENTATION PRODUIT
   -> Inspirée d'Amazon / Glotelho, en version compacte :
      - image carrée avec badge de réduction en coin
      - catégorie discrète au-dessus du titre
      - prix "en avant" (gros prix actuel, prix barré en dessous)
      - badge "Meilleure vente" (basé sur le vrai nombre de
        commandes, jamais une note inventée)
      - juste le stock : pas de montant de livraison, pas de
        ville affichés sur la carte
=================================== */


.product-image-wrap{

    position:relative;

    width:100%;

}


.badge-reduction{

    position:absolute;

    top:6px;

    left:6px;

    z-index:2;

    background:#d32f2f;

    color:#fff;

    font-weight:800;

    font-size:12px;

    padding:3px 8px;

    border-radius:6px;

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

}


.product-category{

    display:block;

    margin-top:8px;

    font-size:10.5px;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:#8a8f98;

    font-weight:700;

}


.price-block{

    display:flex;

    align-items:baseline;

    gap:8px;

    margin:4px 0 0;

}


.price-current{

    font-size:18px;

    font-weight:800;

    color:#B12704;

}


.price-old{

    margin:1px 0 4px;

}


.price-old del{

    color:#8a8f98;

    font-size:12px;

}


.badge-bestseller{

    display:inline-block;

    background:#fff3cd;

    color:#8a6100;

    font-size:10.5px;

    font-weight:700;

    padding:3px 8px;

    border-radius:6px;

    margin:2px 0 4px;

}


.product-out{

    opacity:.72;

}


.btn-panier:disabled{

    background:#e0e0e0;

    color:#999;

    cursor:not-allowed;

}


.btn-panier:disabled:hover{

    background:#e0e0e0;

}



/* ===================================
   BOUTON "AJOUTER AU PANIER"
=================================== */


.product-actions{

    margin-top:auto;

    padding-top:8px;

}


.btn-panier{

    width:100%;

    height:38px;

    border:none;

    border-radius:20px;

    background:#FFD814;

    color:#111;

    font-weight:bold;

    font-size:12.5px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    transition:.2s;

}


.btn-panier:hover{

    background:#F7CA00;

}


.btn-panier:active{

    transform:scale(.97);

}



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


footer{

    background:#131921;

    color:white;

    padding:40px;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(200px,1fr));

    gap:25px;

    margin-top:40px;

}



footer a{

    display:block;

    color:white;

    text-decoration:none;

    margin:8px 0;

}



.copyright{

    grid-column:1/-1;

    text-align:center;

}



/* ===================================
   BARRE DE NAVIGATION BASSE (mobile)
=================================== */


.bottom-nav{

    display:none;

}



@media(max-width:900px){


.bottom-nav{

    display:flex;

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    background:#131921;

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

    z-index:1500;

    padding:6px 4px calc(6px + env(safe-area-inset-bottom));

}


.bottom-nav a{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;

    color:#9aa1ab;

    text-decoration:none;

    font-size:10.5px;

    font-weight:bold;

    padding:6px 2px;

    border-radius:10px;

}


.bottom-nav a .bn-icon{

    font-size:18px;

}


.bottom-nav a.active{

    color:#febd69;

}


}



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


@media(max-width:900px){


header{

    padding:12px 16px;

}


.logo-container h1{

    font-size:19px;

}


.product-card{

    padding:10px;

}


.page-header h2{

    font-size:22px;

}


}



/* ===================================
   ORDINATEUR (desktop)
=================================== */


@media(min-width:901px){


.close-menu{

    display:none;

}



.dropdown{

    position:static;

}



.dropdown-content{

    display:flex !important;

    position:static;

    width:auto;

    height:auto;

    background:none;

    padding:0;

    align-items:center;

    gap:6px;

}



.dropdown-content a{

    width:auto;

    margin:0;

    padding:9px 14px;

    background:none;

    color:#d8dbe0;

    font-weight:600;

    font-size:14.5px;

    border-radius:20px;

}



.dropdown-content a:hover{

    background:#232f3e;

    color:#febd69;

}


.dropbtn{

    display:none;

}


}



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


@media(max-width:600px){


.logo{

    width:44px;

    height:44px;

}



.logo-container h1{

    font-size:17px;

}



.icon-btn,
.dropbtn{

    width:38px;

    height:38px;

    font-size:17px;

}



.products-container{

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}



footer{

    text-align:center;

}



.product-card{

    width:100%;

    padding:8px;

}



.product-card h3{

    font-size:13px;

}



.product-card p{

    font-size:11px;

}


.product-card > p:not(.description){

    font-size:14px;

}


.btn-panier{

    height:34px;

    font-size:11px;

}


.search-box,
.filter-box{

    min-width:100%;

}


}



/* ===================================
   GRAND ECRAN
=================================== */


@media(min-width:1200px){


.products-container{

    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

}


}



/* ===========================
   Bouton Help Kingdom Market
=========================== */

.help-button{
    position:fixed;
    bottom:25px;
    left:25px;

    width:65px;
    height:65px;

    background:linear-gradient(135deg,#180117,#ffb300);

    color:white;

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

    border-radius:50%;

    font-size:30px;

    text-decoration:none;

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

    z-index:1400;

    transition:.3s;
}

.help-button:hover{

    transform:scale(1.1);

    box-shadow:0 15px 35px rgba(255,152,0,.5);

}

.help-button::before{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;

    background:rgba(255,152,0,.4);

    animation:pulse 2s infinite;

}

.help-button i{

    position:relative;

    z-index:2;

}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:.8;
    }

    70%{
        transform:scale(1.5);
        opacity:0;
    }

    100%{
        transform:scale(1.5);
        opacity:0;
    }

}

/* Mobile */

@media(max-width:768px){

.help-button{

width:58px;
height:58px;
font-size:26px;
bottom:100px;
left:20px;

}

}

/* ===================================================
   HEADER — ADAPTATION PETITS ÉCRANS (Android / iPhone compacts)
   Garantit que le nom de l'entreprise et les boutons
   (menu, connexion, déconnexion, panier) restent
   toujours sur la même ligne, jamais l'un sous l'autre.
=================================================== */
@media(max-width:420px){

header{
    padding:10px 12px;
    gap:6px;
}

.logo{
    width:38px;
    height:38px;
}

.logo-container{
    gap:8px;
}

.logo-container h1{
    font-size:15px;
}

.icon-btn,
.dropbtn{
    width:36px;
    height:36px;
    font-size:16px;
}

.header-actions{
    gap:6px;
}

}